pixelweaver 0.1.0

package/src/lib/ui/ColorPicker.svelte

@@ -0,0 +1,761 @@
+<!--
+  ColorPicker -- right sidebar panel for picking and managing colors.
+
+  Four sections:
+    1. Foreground/Background swatches (Photoshop-style overlapping squares)
+    2. HSV saturation-value square + hue bar (canvas-rendered)
+    3. Hex/RGB text inputs
+    4. Palette grid or recent colors
+-->
+<script lang="ts">
+  import {
+    getForegroundColor,
+    setForegroundColor,
+    getBackgroundColor,
+    setBackgroundColor,
+    getRecentColors,
+    addRecentColor,
+  } from '../color/color-state.svelte.js';
+  import {
+    hexToRgb,
+    rgbToHex,
+    rgbToHsv,
+    hsvToRgb,
+  } from '../color/color-utils.js';
+  import {
+    getActivePalette,
+  } from '../color/palette-state.svelte.js';
+  import { dispatch } from '../core/dispatcher.js';
+  import ArrowsIcon from '~icons/lucide/arrow-right-left';
+  import RotateCcwIcon from '~icons/lucide/rotate-ccw';
+
+  // --- Constants ---
+
+  const HUE_HEIGHT = 20;
+
+  // Internal padding of .color-picker (must match CSS)
+  const CONTAINER_PADDING = 8;
+
+  // --- State ---
+
+  // Which color is being edited: foreground or background
+  let editTarget = $state<'fg' | 'bg'>('fg');
+
+  // Container element ref for ResizeObserver
+  let containerEl = $state<HTMLDivElement | null>(null);
+
+  // Tracks the container's width; updated by ResizeObserver
+  let containerWidth = $state(0);
+
+  // Responsive dimensions derived from container width
+  // svWidth fills the container minus padding on both sides
+  let svWidth = $derived(Math.max(100, containerWidth - CONTAINER_PADDING * 2));
+  let svHeight = $derived(Math.round(svWidth * 0.85));
+  let hueWidth = $derived(svWidth);
+
+  // Canvas element references
+  let svCanvas = $state<HTMLCanvasElement | null>(null);
+  let hueCanvas = $state<HTMLCanvasElement | null>(null);
+
+  // Whether the user is currently dragging on the SV area or hue bar
+  let draggingSV = $state(false);
+  let draggingHue = $state(false);
+
+  // The hex color before the current drag started (for command dispatch)
+  let dragStartColor = $state('');
+
+  // Internal HSV state -- kept in sync with the active color via $effect,
+  // but updated directly during drag for responsive preview.
+  let internalH = $state(0);
+  let internalS = $state(0);
+  let internalV = $state(100);
+
+  // Hex input field value (may be temporarily invalid while typing).
+  // Seeded lazily from activeColor so it stays in sync with the swatch,
+  // but writable so the input onchange/typing can override it.
+  // The rule wants writable-$derived to replace the $state + $effect pair.
+  // eslint-disable-next-line svelte/prefer-writable-derived -- hexInputValue diverges during typing
+  let hexInputValue = $state('');
+
+  // --- Derived values ---
+
+  let activeColor = $derived(editTarget === 'fg' ? getForegroundColor() : getBackgroundColor());
+
+  let activeRgb = $derived(hexToRgb(activeColor));
+
+  // Derive HSV from the active color, but only when NOT dragging
+  // (during drag, internalH/S/V are updated directly)
+  let activeHsv = $derived(rgbToHsv(activeRgb.r, activeRgb.g, activeRgb.b));
+
+  let palette = $derived(getActivePalette());
+  let recentColors = $derived(getRecentColors());
+
+  // --- Helpers ---
+
+  function setActiveColor(hex: string): void {
+    if (editTarget === 'fg') {
+      setForegroundColor(hex);
+    } else {
+      setBackgroundColor(hex);
+    }
+  }
+
+  /** Dispatch a command for undo/redo support. Called on pointer-up after a drag. */
+  function dispatchColorCommand(newHex: string): void {
+    const commandType = editTarget === 'fg' ? 'set_foreground_color' : 'set_background_color';
+    dispatch({
+      type: commandType,
+      plugin: 'ui/color',
+      version: '1.0.0',
+      params: { color: newHex },
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+    addRecentColor(newHex);
+  }
+
+  /** Convert internal HSV to hex string */
+  function hsvToHex(h: number, s: number, v: number): string {
+    const rgb = hsvToRgb(h, s, v);
+    return rgbToHex(rgb.r, rgb.g, rgb.b);
+  }
+
+  // --- Canvas drawing ---
+
+  function drawSVSquare(ctx: CanvasRenderingContext2D, hue: number, width: number, height: number): void {
+    const hueColor = hsvToRgb(hue, 100, 100);
+    // Horizontal gradient: white -> full-saturation hue color
+    const gradH = ctx.createLinearGradient(0, 0, width, 0);
+    gradH.addColorStop(0, '#ffffff');
+    gradH.addColorStop(1, `rgb(${String(hueColor.r)}, ${String(hueColor.g)}, ${String(hueColor.b)})`);
+    ctx.fillStyle = gradH;
+    ctx.fillRect(0, 0, width, height);
+    // Vertical gradient overlay: transparent -> black
+    const gradV = ctx.createLinearGradient(0, 0, 0, height);
+    gradV.addColorStop(0, 'rgba(0,0,0,0)');
+    gradV.addColorStop(1, 'rgba(0,0,0,1)');
+    ctx.fillStyle = gradV;
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  function drawHueBar(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+    const grad = ctx.createLinearGradient(0, 0, width, 0);
+    for (let i = 0; i <= 6; i++) {
+      const hue = i * 60;
+      const { r, g, b } = hsvToRgb(hue, 100, 100);
+      grad.addColorStop(i / 6, `rgb(${String(r)},${String(g)},${String(b)})`);
+    }
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  // --- Effects ---
+
+  // Sync internal HSV from external color changes (when not dragging)
+  $effect(() => {
+    if (!draggingSV && !draggingHue) {
+      internalH = activeHsv.h;
+      internalS = activeHsv.s;
+      internalV = activeHsv.v;
+    }
+  });
+
+  // Sync hex input when the active color changes (when not focused)
+  $effect(() => {
+    hexInputValue = activeColor;
+  });
+
+  // Redraw SV square when hue, canvas ref, or dimensions change
+  $effect(() => {
+    if (!svCanvas || svWidth <= 0 || svHeight <= 0) return;
+    const ctx = svCanvas.getContext('2d');
+    if (!ctx) return;
+    drawSVSquare(ctx, internalH, svWidth, svHeight);
+  });
+
+  // Redraw hue bar when canvas ref or width changes
+  $effect(() => {
+    if (!hueCanvas || hueWidth <= 0) return;
+    const ctx = hueCanvas.getContext('2d');
+    if (!ctx) return;
+    drawHueBar(ctx, hueWidth, HUE_HEIGHT);
+  });
+
+  // ResizeObserver to track container width
+  $effect(() => {
+    if (!containerEl) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        containerWidth = entry.contentBoxSize[0].inlineSize;
+      }
+    });
+    observer.observe(containerEl);
+    return () => { observer.disconnect(); };
+  });
+
+  // --- SV square pointer handling ---
+
+  function clamp(val: number, min: number, max: number): number {
+    return Math.min(max, Math.max(min, val));
+  }
+
+  function svFromPointer(e: PointerEvent): { s: number; v: number } {
+    if (!svCanvas) return { s: 0, v: 0 };
+    const rect = svCanvas.getBoundingClientRect();
+    const x = clamp(e.clientX - rect.left, 0, svWidth);
+    const y = clamp(e.clientY - rect.top, 0, svHeight);
+    return {
+      s: Math.round((x / svWidth) * 100),
+      v: Math.round((1 - y / svHeight) * 100),
+    };
+  }
+
+  function onSVPointerDown(e: PointerEvent): void {
+    if (e.button !== 0) return;
+    if (!svCanvas) return;
+    draggingSV = true;
+    dragStartColor = activeColor;
+    svCanvas.setPointerCapture(e.pointerId);
+    const { s, v } = svFromPointer(e);
+    internalS = s;
+    internalV = v;
+    setActiveColor(hsvToHex(internalH, s, v));
+  }
+
+  function onSVPointerMove(e: PointerEvent): void {
+    if (!draggingSV) return;
+    const { s, v } = svFromPointer(e);
+    internalS = s;
+    internalV = v;
+    // Live preview: set color directly (no command dispatch)
+    setActiveColor(hsvToHex(internalH, s, v));
+  }
+
+  function onSVPointerUp(_e: PointerEvent): void {
+    if (!draggingSV) return;
+    draggingSV = false;
+    const finalHex = hsvToHex(internalH, internalS, internalV);
+    // Restore to pre-drag color, then dispatch command so undo works correctly
+    setActiveColor(dragStartColor);
+    dispatchColorCommand(finalHex);
+  }
+
+  // --- Hue bar pointer handling ---
+
+  function hueFromPointer(e: PointerEvent): number {
+    if (!hueCanvas) return 0;
+    const rect = hueCanvas.getBoundingClientRect();
+    const x = clamp(e.clientX - rect.left, 0, hueWidth);
+    return Math.round((x / hueWidth) * 360);
+  }
+
+  function onHuePointerDown(e: PointerEvent): void {
+    if (e.button !== 0) return;
+    if (!hueCanvas) return;
+    draggingHue = true;
+    dragStartColor = activeColor;
+    hueCanvas.setPointerCapture(e.pointerId);
+    const h = hueFromPointer(e);
+    internalH = h;
+    setActiveColor(hsvToHex(h, internalS, internalV));
+  }
+
+  function onHuePointerMove(e: PointerEvent): void {
+    if (!draggingHue) return;
+    const h = hueFromPointer(e);
+    internalH = h;
+    setActiveColor(hsvToHex(h, internalS, internalV));
+  }
+
+  function onHuePointerUp(_e: PointerEvent): void {
+    if (!draggingHue) return;
+    draggingHue = false;
+    const finalHex = hsvToHex(internalH, internalS, internalV);
+    setActiveColor(dragStartColor);
+    dispatchColorCommand(finalHex);
+  }
+
+  // --- Hex input handling ---
+
+  function onHexInput(e: Event): void {
+    hexInputValue = (e.target as HTMLInputElement).value;
+  }
+
+  function applyHexInput(): void {
+    let val = hexInputValue.trim();
+    if (!val.startsWith('#')) val = '#' + val;
+    // Validate: must be 6-digit hex
+    if (/^#[0-9a-fA-F]{6}$/.test(val)) {
+      const normalized = val.toUpperCase();
+      dispatchColorCommand(normalized);
+    } else {
+      // Revert to current color on invalid input
+      hexInputValue = activeColor;
+    }
+  }
+
+  function onHexKeyDown(e: KeyboardEvent): void {
+    if (e.key === 'Enter') {
+      applyHexInput();
+      (e.target as HTMLInputElement).blur();
+    }
+  }
+
+  // --- RGB input handling ---
+
+  function onRgbChange(channel: 'r' | 'g' | 'b', value: string): void {
+    const num = parseInt(value, 10);
+    if (isNaN(num)) return;
+    const clamped = clamp(num, 0, 255);
+    const rgb = hexToRgb(activeColor);
+    rgb[channel] = clamped;
+    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+    dispatchColorCommand(hex);
+  }
+
+  // --- Swatch click ---
+
+  function onSwatchClick(hex: string): void {
+    dispatchColorCommand(hex);
+  }
+
+  // --- Reset to defaults ---
+
+  function resetDefaults(): void {
+    // Set fg to black, bg to white via commands for undo support
+    if (getForegroundColor() !== '#000000') {
+      dispatch({
+        type: 'set_foreground_color',
+        plugin: 'ui/color',
+        version: '1.0.0',
+        params: { color: '#000000' },
+        id: crypto.randomUUID(),
+        timestamp: Date.now(),
+      });
+    }
+    if (getBackgroundColor() !== '#FFFFFF') {
+      dispatch({
+        type: 'set_background_color',
+        plugin: 'ui/color',
+        version: '1.0.0',
+        params: { color: '#FFFFFF' },
+        id: crypto.randomUUID(),
+        timestamp: Date.now(),
+      });
+    }
+  }
+
+  // --- Swap colors ---
+
+  function onSwapColors(): void {
+    dispatch({
+      type: 'swap_colors',
+      plugin: 'ui/color',
+      version: '1.0.0',
+      params: {},
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  // --- SV marker position ---
+
+  let svMarkerX = $derived((internalS / 100) * svWidth);
+  let svMarkerY = $derived((1 - internalV / 100) * svHeight);
+
+  // --- Hue marker position ---
+
+  let hueMarkerX = $derived((internalH / 360) * hueWidth);
+</script>
+
+<div class="color-picker" bind:this={containerEl}>
+  <!-- Section 1: Foreground / Background swatches -->
+  <div class="swatch-section">
+    <div class="swatch-pair">
+      <!-- Background swatch (behind) -->
+      <button
+        class="swatch bg-swatch"
+        class:active={editTarget === 'bg'}
+        style:background-color={getBackgroundColor()}
+        title="Background color"
+        aria-label="Background color"
+        onclick={() => (editTarget = 'bg')}
+      ></button>
+      <!-- Foreground swatch (in front) -->
+      <button
+        class="swatch fg-swatch"
+        class:active={editTarget === 'fg'}
+        style:background-color={getForegroundColor()}
+        title="Foreground color"
+        aria-label="Foreground color"
+        onclick={() => (editTarget = 'fg')}
+      ></button>
+    </div>
+    <div class="swatch-controls">
+      <button class="mini-btn" title="Swap colors (X)" aria-label="Swap colors" onclick={onSwapColors}>
+        <ArrowsIcon />
+      </button>
+      <button class="mini-btn" title="Reset to defaults" aria-label="Reset to defaults" onclick={resetDefaults}>
+        <RotateCcwIcon />
+      </button>
+    </div>
+  </div>
+
+  <!-- Section 2: HSV color area -->
+  <div class="hsv-section">
+    <!-- Saturation-Value square -->
+    <div class="sv-container">
+      <canvas
+        bind:this={svCanvas}
+        width={svWidth}
+        height={svHeight}
+        class="sv-canvas"
+        onpointerdown={onSVPointerDown}
+        onpointermove={onSVPointerMove}
+        onpointerup={onSVPointerUp}
+      ></canvas>
+      <!-- Crosshair marker -->
+      <div
+        class="sv-marker"
+        style:left="{svMarkerX}px"
+        style:top="{svMarkerY}px"
+      ></div>
+    </div>
+    <!-- Hue bar -->
+    <div class="hue-container">
+      <canvas
+        bind:this={hueCanvas}
+        width={hueWidth}
+        height={HUE_HEIGHT}
+        class="hue-canvas"
+        onpointerdown={onHuePointerDown}
+        onpointermove={onHuePointerMove}
+        onpointerup={onHuePointerUp}
+      ></canvas>
+      <!-- Hue marker -->
+      <div
+        class="hue-marker"
+        style:left="{hueMarkerX}px"
+      ></div>
+    </div>
+  </div>
+
+  <!-- Section 3: Hex / RGB inputs -->
+  <div class="input-section">
+    <div class="hex-row">
+      <label class="input-label" for="hex-input">#</label>
+      <input
+        id="hex-input"
+        class="hex-input"
+        type="text"
+        maxlength="7"
+        value={hexInputValue.replace('#', '')}
+        oninput={onHexInput}
+        onblur={applyHexInput}
+        onkeydown={onHexKeyDown}
+      />
+    </div>
+    <div class="rgb-row">
+      {#each ['r', 'g', 'b'] as channel (channel)}
+        <div class="rgb-field">
+          <label class="input-label" for="rgb-{channel}">{channel.toUpperCase()}</label>
+          <input
+            id="rgb-{channel}"
+            class="rgb-input"
+            type="number"
+            min="0"
+            max="255"
+            value={activeRgb[channel as 'r' | 'g' | 'b']}
+            onchange={(e) => { onRgbChange(channel as 'r' | 'g' | 'b', (e.target as HTMLInputElement).value); }}
+          />
+        </div>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Section 4: Palette grid or recent colors -->
+  <div class="palette-section">
+    {#if palette}
+      <div class="palette-name">{palette.name}</div>
+      <div class="palette-grid">
+        {#each palette.colors as color, i (i)}
+          <button
+            class="palette-swatch"
+            style:background-color={color}
+            title={color}
+            aria-label="Select color {color}"
+            onclick={() => { onSwatchClick(color); }}
+          ></button>
+        {/each}
+      </div>
+    {:else if recentColors.length > 0}
+      <div class="palette-name">Recent Colors</div>
+      <div class="palette-grid">
+        {#each recentColors as color, i (i)}
+          <button
+            class="palette-swatch"
+            style:background-color={color}
+            title={color}
+            aria-label="Select color {color}"
+            onclick={() => { onSwatchClick(color); }}
+          ></button>
+        {/each}
+      </div>
+    {:else}
+      <div class="palette-name empty">No palette or recent colors</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .color-picker {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 8px;
+    user-select: none;
+  }
+
+  /* --- Section 1: Swatches --- */
+
+  .swatch-section {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+  }
+
+  .swatch-pair {
+    position: relative;
+    width: 60px;
+    height: 60px;
+  }
+
+  .swatch {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border: 2px solid var(--border);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .swatch.active {
+    border-color: var(--accent);
+    z-index: 2;
+  }
+
+  .bg-swatch {
+    right: 0;
+    bottom: 0;
+  }
+
+  .fg-swatch {
+    left: 0;
+    top: 0;
+    z-index: 1;
+  }
+
+  .swatch-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mini-btn {
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-panel);
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm);
+    padding: 0;
+    line-height: 1;
+  }
+
+  .mini-btn:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+
+  .mini-btn :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* --- Section 2: HSV area --- */
+
+  .hsv-section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .sv-container {
+    position: relative;
+    width: 100%;
+    cursor: crosshair;
+  }
+
+  .sv-canvas {
+    display: block;
+    border: 1px solid var(--border);
+    /* Prevent sub-pixel scaling artifacts */
+    image-rendering: pixelated;
+  }
+
+  .sv-marker {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  .hue-container {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    cursor: crosshair;
+  }
+
+  .hue-canvas {
+    display: block;
+    border: 1px solid var(--border);
+    image-rendering: pixelated;
+  }
+
+  .hue-marker {
+    position: absolute;
+    top: -1px;
+    width: 4px;
+    height: 22px;
+    border: 1px solid #fff;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+    border-radius: 1px;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  /* --- Section 3: Hex/RGB inputs --- */
+
+  .input-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .hex-row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .input-label {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    font-family: var(--font-mono);
+    min-width: 12px;
+    text-align: center;
+  }
+
+  .hex-input {
+    flex: 1;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: var(--text-base);
+    padding: 2px 4px;
+  }
+
+  .hex-input:focus-visible {
+    border-color: var(--accent);
+  }
+
+  .rgb-row {
+    display: flex;
+    gap: 4px;
+  }
+
+  .rgb-field {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    flex: 1;
+  }
+
+  .rgb-input {
+    width: 100%;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    padding: 2px 3px;
+    /* Hide spinner arrows for a cleaner look */
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  .rgb-input::-webkit-inner-spin-button,
+  .rgb-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .rgb-input:focus-visible {
+    border-color: var(--accent);
+  }
+
+  /* --- Section 4: Palette grid --- */
+
+  .palette-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .palette-name {
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    letter-spacing: 0.02em;
+  }
+
+  .palette-name.empty {
+    color: var(--text-muted);
+    font-style: italic;
+  }
+
+  .palette-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .palette-swatch {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--border);
+    border-radius: 1px;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .palette-swatch:hover {
+    border-color: var(--accent);
+    transform: scale(1.15);
+  }
+</style>