@djangocfg/widget-visual 0.1.1

package/src/design/ColorPicker/lazy.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { createLazyComponent } from '@djangocfg/widget-kit/lazy';
+import type { ColorPickerProps } from './types';
+
+export const LazyColorPicker = createLazyComponent<ColorPickerProps>(
+  () => import('./ColorPicker').then((mod) => ({ default: mod.ColorPicker })),
+  {
+    displayName: 'LazyColorPicker',
+    fallback: (
+      <div className="flex w-[340px] flex-col gap-4 p-4">
+        <div className="h-40 w-full animate-pulse rounded-sm bg-muted" />
+        <div className="h-3 w-full animate-pulse rounded-full bg-muted" />
+        <div className="h-3 w-full animate-pulse rounded-full bg-muted" />
+        <div className="flex gap-2">
+          <div className="h-8 w-8 animate-pulse rounded-sm bg-muted" />
+          <div className="h-8 flex-1 animate-pulse rounded-sm bg-muted" />
+        </div>
+      </div>
+    ),
+  }
+);
+
+export type { ColorPickerProps } from './types';

package/src/design/ColorPicker/lib/color-utils.ts

@@ -0,0 +1,323 @@
+import type { ColorValue, HSVColorValue, ColorFormat } from '../types';
+
+export function hexToRgb(hex: string, alpha?: number): ColorValue {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: Number.parseInt(result[1] ?? '0', 16),
+        g: Number.parseInt(result[2] ?? '0', 16),
+        b: Number.parseInt(result[3] ?? '0', 16),
+        a: alpha ?? 1,
+      }
+    : { r: 0, g: 0, b: 0, a: alpha ?? 1 };
+}
+
+export function rgbToHex(color: ColorValue): string {
+  const toHex = (n: number) => {
+    const hex = Math.round(n).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+}
+
+export function rgbToHsv(color: ColorValue): HSVColorValue {
+  const r = color.r / 255;
+  const g = color.g / 255;
+  const b = color.b / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+
+  let h = 0;
+  if (diff !== 0) {
+    switch (max) {
+      case r:
+        h = ((g - b) / diff) % 6;
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+    }
+  }
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+
+  const s = max === 0 ? 0 : diff / max;
+  const v = max;
+
+  return {
+    h,
+    s: Math.round(s * 100),
+    v: Math.round(v * 100),
+    a: color.a,
+  };
+}
+
+export function hsvToRgb(hsv: HSVColorValue): ColorValue {
+  const h = hsv.h / 360;
+  const s = hsv.s / 100;
+  const v = hsv.v / 100;
+
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+
+  let r: number;
+  let g: number;
+  let b: number;
+
+  switch (i % 6) {
+    case 0: {
+      r = v;
+      g = t;
+      b = p;
+      break;
+    }
+    case 1: {
+      r = q;
+      g = v;
+      b = p;
+      break;
+    }
+    case 2: {
+      r = p;
+      g = v;
+      b = t;
+      break;
+    }
+    case 3: {
+      r = p;
+      g = q;
+      b = v;
+      break;
+    }
+    case 4: {
+      r = t;
+      g = p;
+      b = v;
+      break;
+    }
+    case 5: {
+      r = v;
+      g = p;
+      b = q;
+      break;
+    }
+    default: {
+      r = 0;
+      g = 0;
+      b = 0;
+    }
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+    a: hsv.a,
+  };
+}
+
+export function colorToString(color: ColorValue, format: ColorFormat = 'hex'): string {
+  switch (format) {
+    case 'hex':
+      return rgbToHex(color);
+    case 'rgb':
+      return color.a < 1
+        ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+        : `rgb(${color.r}, ${color.g}, ${color.b})`;
+    case 'hsl': {
+      const hsl = rgbToHsl(color);
+      return color.a < 1
+        ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${color.a})`
+        : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+    }
+    case 'hsb': {
+      const hsv = rgbToHsv(color);
+      return color.a < 1
+        ? `hsba(${hsv.h}, ${hsv.s}%, ${hsv.v}%, ${color.a})`
+        : `hsb(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
+    }
+    default:
+      return rgbToHex(color);
+  }
+}
+
+export function rgbToHsl(color: ColorValue) {
+  const r = color.r / 255;
+  const g = color.g / 255;
+  const b = color.b / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  const sum = max + min;
+
+  const l = sum / 2;
+
+  let h = 0;
+  let s = 0;
+
+  if (diff !== 0) {
+    s = l > 0.5 ? diff / (2 - sum) : diff / sum;
+
+    if (max === r) {
+      h = (g - b) / diff + (g < b ? 6 : 0);
+    } else if (max === g) {
+      h = (b - r) / diff + 2;
+    } else if (max === b) {
+      h = (r - g) / diff + 4;
+    }
+    h /= 6;
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+export function hslToRgb(
+  hsl: { h: number; s: number; l: number },
+  alpha = 1,
+): ColorValue {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h * 6) % 2) - 1));
+  const m = l - c / 2;
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h >= 0 && h < 1 / 6) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 1 / 6 && h < 2 / 6) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 2 / 6 && h < 3 / 6) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 3 / 6 && h < 4 / 6) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 4 / 6 && h < 5 / 6) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 5 / 6 && h < 1) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255),
+    a: alpha,
+  };
+}
+
+export function parseColorString(value: string): ColorValue | null {
+  const trimmed = value.trim();
+
+  if (trimmed.startsWith('#')) {
+    const hexMatch = trimmed.match(/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/);
+    if (hexMatch) {
+      return hexToRgb(trimmed);
+    }
+  }
+
+  const rgbMatch = trimmed.match(
+    /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/,
+  );
+  if (rgbMatch) {
+    return {
+      r: Number.parseInt(rgbMatch[1] ?? '0', 10),
+      g: Number.parseInt(rgbMatch[2] ?? '0', 10),
+      b: Number.parseInt(rgbMatch[3] ?? '0', 10),
+      a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1,
+    };
+  }
+
+  const hslMatch = trimmed.match(
+    /^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+  );
+  if (hslMatch) {
+    const h = Number.parseInt(hslMatch[1] ?? '0', 10);
+    const s = Number.parseInt(hslMatch[2] ?? '0', 10) / 100;
+    const l = Number.parseInt(hslMatch[3] ?? '0', 10) / 100;
+    const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1;
+
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = l - c / 2;
+
+    let r = 0;
+    let g = 0;
+    let b = 0;
+
+    if (h >= 0 && h < 60) {
+      r = c;
+      g = x;
+      b = 0;
+    } else if (h >= 60 && h < 120) {
+      r = x;
+      g = c;
+      b = 0;
+    } else if (h >= 120 && h < 180) {
+      r = 0;
+      g = c;
+      b = x;
+    } else if (h >= 180 && h < 240) {
+      r = 0;
+      g = x;
+      b = c;
+    } else if (h >= 240 && h < 300) {
+      r = x;
+      g = 0;
+      b = c;
+    } else if (h >= 300 && h < 360) {
+      r = c;
+      g = 0;
+      b = x;
+    }
+
+    return {
+      r: Math.round((r + m) * 255),
+      g: Math.round((g + m) * 255),
+      b: Math.round((b + m) * 255),
+      a,
+    };
+  }
+
+  const hsbMatch = trimmed.match(
+    /^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+  );
+  if (hsbMatch) {
+    const h = Number.parseInt(hsbMatch[1] ?? '0', 10);
+    const s = Number.parseInt(hsbMatch[2] ?? '0', 10);
+    const v = Number.parseInt(hsbMatch[3] ?? '0', 10);
+    const a = hsbMatch[4] ? Number.parseFloat(hsbMatch[4]) : 1;
+
+    return hsvToRgb({ h, s, v, a });
+  }
+
+  return null;
+}

package/src/design/ColorPicker/parts/ColorPickerAlphaSlider.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { Slider } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useColorPickerContext } from '../context/ColorPickerContext';
+import { useStoreContext, useStore } from '../context/ColorPickerStore';
+
+const ALPHA_SLIDER_NAME = 'ColorPickerAlphaSlider';
+
+export function ColorPickerAlphaSlider(props: React.ComponentProps<typeof Slider>) {
+  const { className, ...sliderProps } = props;
+
+  const context = useColorPickerContext(ALPHA_SLIDER_NAME);
+  const store = useStoreContext(ALPHA_SLIDER_NAME);
+
+  const color = useStore((state) => state.color);
+  const hsv = useStore((state) => state.hsv);
+
+  const onValueChange = React.useCallback(
+    (values: number[]) => {
+      const alpha = (values[0] ?? 0) / 100;
+      const newColor = { ...color, a: alpha };
+      const newHsv = { ...hsv, a: alpha };
+      store.setColor(newColor);
+      store.setHsv(newHsv);
+    },
+    [color, hsv, store],
+  );
+
+  const opaqueColor = `rgb(${color?.r ?? 0}, ${color?.g ?? 0}, ${color?.b ?? 0})`;
+  const transparentColor = `rgba(${color?.r ?? 0}, ${color?.g ?? 0}, ${color?.b ?? 0}, 0)`;
+
+  return (
+    <div
+      className={cn(
+        'relative flex w-full touch-none select-none items-center',
+        className,
+      )}
+    >
+      {/* Checkerboard background */}
+      <div
+        className="pointer-events-none absolute inset-x-0 h-3 rounded-full"
+        style={{
+          background:
+            'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)',
+          backgroundSize: '8px 8px',
+          backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',
+        }}
+      />
+      {/* Alpha gradient overlay */}
+      <div
+        className="pointer-events-none absolute inset-x-0 h-3 rounded-full"
+        style={{
+          background: `linear-gradient(to right, ${transparentColor}, ${opaqueColor})`,
+        }}
+      />
+      <Slider
+        data-slot="color-picker-alpha-slider"
+        {...sliderProps}
+        max={100}
+        step={1}
+        disabled={context.disabled}
+        className="relative z-10 w-full"
+        value={[Math.round((color?.a ?? 1) * 100)]}
+        onValueChange={onValueChange}
+      />
+    </div>
+  );
+}
+
+ColorPickerAlphaSlider.displayName = ALPHA_SLIDER_NAME;

package/src/design/ColorPicker/parts/ColorPickerArea.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import * as React from 'react';
+import { useComposedRefs } from '@djangocfg/ui-core/lib';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useColorPickerContext } from '../context/ColorPickerContext';
+import { useStoreContext } from '../context/ColorPickerStore';
+import { useStore } from '../context/ColorPickerStore';
+import { hsvToRgb } from '../lib/color-utils';
+import type { HSVColorValue } from '../types';
+
+const AREA_NAME = 'ColorPickerArea';
+
+export function ColorPickerArea(props: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const {
+    asChild,
+    onPointerDown: onPointerDownProp,
+    onPointerMove: onPointerMoveProp,
+    onPointerUp: onPointerUpProp,
+    className,
+    ref,
+    ...areaProps
+  } = props;
+
+  const propsRef = React.useRef({
+    onPointerDown: onPointerDownProp,
+    onPointerMove: onPointerMoveProp,
+    onPointerUp: onPointerUpProp,
+  });
+  React.useEffect(() => {
+    propsRef.current = {
+      onPointerDown: onPointerDownProp,
+      onPointerMove: onPointerMoveProp,
+      onPointerUp: onPointerUpProp,
+    };
+  });
+
+  const context = useColorPickerContext(AREA_NAME);
+  const store = useStoreContext(AREA_NAME);
+
+  const hsv = useStore((state) => state.hsv);
+
+  const isDraggingRef = React.useRef(false);
+  const areaRef = React.useRef<HTMLDivElement>(null);
+  const composedRef = useComposedRefs(ref, areaRef);
+
+  const updateColorFromPosition = React.useCallback(
+    (clientX: number, clientY: number) => {
+      if (!areaRef.current) return;
+
+      const rect = areaRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      const y = Math.max(
+        0,
+        Math.min(1, 1 - (clientY - rect.top) / rect.height),
+      );
+
+      const newHsv: HSVColorValue = {
+        h: hsv?.h ?? 0,
+        s: Math.round(x * 100),
+        v: Math.round(y * 100),
+        a: hsv?.a ?? 1,
+      };
+
+      store.setHsv(newHsv);
+      store.setColor(hsvToRgb(newHsv));
+    },
+    [hsv, store],
+  );
+
+  const onPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (context.disabled) return;
+      propsRef.current.onPointerDown?.(event);
+      if (event.defaultPrevented) return;
+
+      isDraggingRef.current = true;
+      areaRef.current?.setPointerCapture(event.pointerId);
+      updateColorFromPosition(event.clientX, event.clientY);
+    },
+    [context.disabled, updateColorFromPosition],
+  );
+
+  const onPointerMove = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      propsRef.current.onPointerMove?.(event);
+      if (event.defaultPrevented) return;
+
+      if (isDraggingRef.current) {
+        updateColorFromPosition(event.clientX, event.clientY);
+      }
+    },
+    [updateColorFromPosition],
+  );
+
+  const onPointerUp = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      propsRef.current.onPointerUp?.(event);
+      if (event.defaultPrevented) return;
+
+      isDraggingRef.current = false;
+      areaRef.current?.releasePointerCapture(event.pointerId);
+    },
+    [],
+  );
+
+  const hue = hsv?.h ?? 0;
+  const backgroundHue = hsvToRgb({ h: hue, s: 100, v: 100, a: 1 });
+
+  return (
+    <div
+      data-slot="color-picker-area"
+      {...areaProps}
+      className={cn(
+        'relative h-40 w-full cursor-crosshair touch-none rounded-sm border',
+        context.disabled && 'pointer-events-none opacity-50',
+        className,
+      )}
+      ref={composedRef}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+    >
+      <div className="absolute inset-0 overflow-hidden rounded-sm">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundColor: `rgb(${backgroundHue.r}, ${backgroundHue.g}, ${backgroundHue.b})`,
+          }}
+        />
+        <div
+          className="absolute inset-0"
+          style={{
+            background: 'linear-gradient(to right, #fff, transparent)',
+          }}
+        />
+        <div
+          className="absolute inset-0"
+          style={{
+            background: 'linear-gradient(to bottom, transparent, #000)',
+          }}
+        />
+      </div>
+      <div
+        className="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm"
+        style={{
+          left: `${hsv?.s ?? 0}%`,
+          top: `${100 - (hsv?.v ?? 0)}%`,
+        }}
+      />
+    </div>
+  );
+}
+
+ColorPickerArea.displayName = AREA_NAME;

package/src/design/ColorPicker/parts/ColorPickerEyeDropper.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { PipetteIcon } from 'lucide-react';
+import * as React from 'react';
+import { Button } from '@djangocfg/ui-core/components';
+import { useColorPickerContext } from '../context/ColorPickerContext';
+import { useStoreContext, useStore } from '../context/ColorPickerStore';
+import { hexToRgb, rgbToHsv } from '../lib/color-utils';
+
+const EYE_DROPPER_NAME = 'ColorPickerEyeDropper';
+
+interface EyeDropper {
+  open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>;
+}
+
+declare global {
+  interface Window {
+    EyeDropper?: {
+      new (): EyeDropper;
+    };
+  }
+}
+
+export function ColorPickerEyeDropper(props: React.ComponentProps<typeof Button>) {
+  const { size: sizeProp, children, disabled, ...buttonProps } = props;
+
+  const context = useColorPickerContext(EYE_DROPPER_NAME);
+  const store = useStoreContext(EYE_DROPPER_NAME);
+
+  const color = useStore((state) => state.color);
+
+  const isDisabled = disabled || context.disabled;
+
+  const onEyeDropper = React.useCallback(async () => {
+    if (!window.EyeDropper) return;
+
+    try {
+      const eyeDropper = new window.EyeDropper();
+      const result = await eyeDropper.open();
+
+      if (result.sRGBHex) {
+        const currentAlpha = color?.a ?? 1;
+        const newColor = hexToRgb(result.sRGBHex, currentAlpha);
+        const newHsv = rgbToHsv(newColor);
+        store.setColor(newColor);
+        store.setHsv(newHsv);
+      }
+    } catch (error) {
+      console.warn('EyeDropper error:', error);
+    }
+  }, [color, store]);
+
+  const hasEyeDropper = typeof window !== 'undefined' && !!window.EyeDropper;
+
+  if (!hasEyeDropper) return null;
+
+  const size = sizeProp ?? (children ? 'default' : 'icon');
+
+  return (
+    <Button
+      data-slot="color-picker-eye-dropper"
+      {...buttonProps}
+      variant="outline"
+      size={size}
+      onClick={onEyeDropper}
+      disabled={isDisabled}
+    >
+      {children ?? <PipetteIcon />}
+    </Button>
+  );
+}
+
+ColorPickerEyeDropper.displayName = EYE_DROPPER_NAME;

package/src/design/ColorPicker/parts/ColorPickerFormatSelect.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useColorPickerContext } from '../context/ColorPickerContext';
+import { useStoreContext, useStore } from '../context/ColorPickerStore';
+import { colorFormats } from '../types';
+import type { ColorFormat } from '../types';
+
+const FORMAT_SELECT_NAME = 'ColorPickerFormatSelect';
+
+export function ColorPickerFormatSelect(
+  props: Omit<React.ComponentProps<typeof Select>, 'value' | 'onValueChange'> & {
+    className?: string;
+  }
+) {
+  const { disabled, className, ...selectProps } = props;
+
+  const context = useColorPickerContext(FORMAT_SELECT_NAME);
+  const store = useStoreContext(FORMAT_SELECT_NAME);
+  const isDisabled = disabled || context.disabled;
+
+  const format = useStore((state) => state.format);
+
+  const onFormatChange = React.useCallback(
+    (value: string) => {
+      store.setFormat(value as ColorFormat);
+    },
+    [store],
+  );
+
+  return (
+    <Select
+      data-slot="color-picker-format-select"
+      {...selectProps}
+      value={format}
+      onValueChange={onFormatChange}
+      disabled={isDisabled}
+    >
+      <SelectTrigger
+        data-slot="color-picker-format-select-trigger"
+        className={cn('h-8 text-xs', className)}
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {colorFormats.map((format) => (
+          <SelectItem key={format} value={format}>
+            {format.toUpperCase()}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+ColorPickerFormatSelect.displayName = FORMAT_SELECT_NAME;