pixelweaver 0.1.0

package/src/lib/variants/VariantPanel.svelte

@@ -0,0 +1,822 @@
+<script lang="ts">
+  /**
+   * VariantPanel -- sidebar panel for managing variant presets.
+   *
+   * Shows a grid of variant thumbnails rendered by compositing the current
+   * frame with each preset's per-group palette swaps. Clicking a thumbnail
+   * dispatches `apply_variant`. Header buttons dispatch the corresponding
+   * batch commands so every action lands in the undo stack / action log and
+   * can be bound to shortcuts and the command palette:
+   *   - Generate:  `generate_variants` (undoable)
+   *   - Extract:   `extract_palette_from_layer` (read-only, not undoable)
+   *   - Export:    `export_bisection_atlas` (side effect, not undoable)
+   *   - Remove:    `remove_variant_preset` (undoable)
+   *
+   * Visual conventions match LayerPanel.svelte; all colors via design tokens.
+   */
+
+  import { composite } from '../layers/compositor.js';
+  import { getLayers } from '../layers/layer-tree.svelte.js';
+  import {
+    getCurrentFrame,
+    getFrames,
+  } from '../animation/frame-model.svelte.js';
+  import { applyGroupPaletteSwap } from './palette-swap.js';
+  import {
+    getPresets,
+    getActivePresetId,
+    getActivePreset,
+  } from './variant-state.svelte.js';
+  import type { VariantPreset } from './variant-state.svelte.js';
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import type { CommandType, ParamsOf } from '../core/command-params.js';
+  import { dispatch } from '../core/dispatcher.js';
+  import type { PixelBuffer } from '../canvas/pixel-buffer.js';
+
+  import { notificationState } from '../core/notification-state.svelte.js';
+
+  import WandIcon from '~icons/lucide/wand-2';
+  import PaletteIcon from '~icons/lucide/palette';
+  import DownloadIcon from '~icons/lucide/download';
+  import FolderDownIcon from '~icons/lucide/folder-down';
+  import TrashIcon from '~icons/lucide/trash-2';
+  import ShuffleIcon from '~icons/lucide/shuffle';
+  import BlendIcon from '~icons/lucide/blend';
+  import ArrowRightIcon from '~icons/lucide/arrow-right';
+  import XIcon from '~icons/lucide/x';
+
+  // --- Command dispatch helper ---
+  // All mutations flow through the dispatcher so they appear in the action
+  // log, land in the undo stack where applicable, and can be intercepted by
+  // shortcut / palette entry points.
+  // Typed overload: compile-time param validation for known commands
+  function dispatchCmd<T extends CommandType>(type: T, params: ParamsOf<T>): void;
+  // String fallback: for dynamic dispatch where command type is a variable
+  function dispatchCmd(type: string, params?: Record<string, unknown>): void;
+  function dispatchCmd(type: string, params: Record<string, unknown> = {}) {
+    dispatch({
+      type,
+      plugin: 'ui/variants',
+      version: '1.0.0',
+      params,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  // --- Generation mode toggle ---
+  // 'random' generates HSV-shifted variants; 'blend' interpolates between
+  // the first two existing presets.
+  type GenerateMode = 'random' | 'blend';
+  let generateMode: GenerateMode = $state('random');
+
+  /** Push a notification for in-panel feedback (e.g. insufficient presets). */
+  function panelNotify(message: string, type: 'info' | 'warning' = 'warning'): void {
+    notificationState.push({
+      id: `variant-panel-${crypto.randomUUID()}`,
+      message,
+      type,
+      autoDismissMs: 4000,
+    });
+  }
+
+  /**
+   * Composite the current frame with a preset's palette swaps applied.
+   * Returns null if no frame is available. Thumbnails are purely read-only
+   * rendering so we still call the swap/composite library directly here --
+   * there is no state mutation to route through a command.
+   */
+  function compositeWithPreset(preset: VariantPreset | null): PixelBuffer | null {
+    const frames = getFrames();
+    if (frames.length === 0) return null;
+
+    const frame = getCurrentFrame();
+    const tree = getLayers();
+    const width = canvasState.canvasWidth;
+    const height = canvasState.canvasHeight;
+
+    // Start from the frame's pixel data, then overlay swapped buffers per group
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient compositing buffer
+    const pixelData = new Map(frame.pixelData);
+
+    if (preset) {
+      for (const [groupId, colorMap] of preset.groupOverrides) {
+        if (colorMap.size === 0) continue;
+        const swapped = applyGroupPaletteSwap(groupId, colorMap, tree, [frame]);
+        const frameSwapped = swapped.get(frame.id);
+        if (!frameSwapped) continue;
+        for (const [layerId, buffer] of frameSwapped) {
+          pixelData.set(layerId, buffer);
+        }
+      }
+    }
+
+    return composite(tree, pixelData, width, height);
+  }
+
+  // --- Reactive derived state ---
+  // Reads of variant state inside $derived create subscriptions.
+
+  let presets = $derived(getPresets());
+  let activeId = $derived(getActivePresetId());
+  let canvasW = $derived(canvasState.canvasWidth);
+  let canvasH = $derived(canvasState.canvasHeight);
+
+  // --- Active preset color mappings ---
+  // When a variant is selected, derive its per-group color overrides as a
+  // flat list of { groupId, original, replacement } entries for the editor UI.
+
+  let activePreset = $derived(getActivePreset());
+
+  interface ColorMapping {
+    groupId: string;
+    original: string;
+    replacement: string;
+  }
+
+  /**
+   * Derive the color mapping rows for the active preset. For each group in
+   * the preset's overrides, list every original->replacement pair. This
+   * drives the inline color editor below the thumbnail grid.
+   */
+  let colorMappings = $derived.by<ColorMapping[]>(() => {
+    const preset = activePreset;
+    if (!preset) return [];
+    const rows: ColorMapping[] = [];
+    for (const [groupId, colorMap] of preset.groupOverrides) {
+      for (const [original, replacement] of colorMap) {
+        rows.push({ groupId, original, replacement });
+      }
+    }
+    return rows;
+  });
+
+  /** Handle a color override change from the inline <input type="color">. */
+  function handleColorChange(
+    presetId: string,
+    groupId: string,
+    originalColor: string,
+    newColor: string,
+  ): void {
+    dispatchCmd('set_color_override', {
+      presetId,
+      groupId,
+      originalColor,
+      newColor: newColor.toUpperCase(),
+    });
+  }
+
+  /** Remove a single color override (revert to original). */
+  function handleRemoveOverride(
+    e: MouseEvent,
+    presetId: string,
+    groupId: string,
+    originalColor: string,
+  ): void {
+    e.stopPropagation();
+    dispatchCmd('remove_color_override', {
+      presetId,
+      groupId,
+      originalColor,
+    });
+  }
+
+  // --- Thumbnail rendering ---
+  // One <canvas> per preset. We collect refs via {@attach} -- Svelte 5's
+  // attachment primitive runs on mount and returns a cleanup on unmount.
+
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- attachment refs, bumped via thumbVersion
+  const thumbEls = new Map<string, HTMLCanvasElement>();
+
+  // Bump this counter whenever the thumbEls map changes so the redraw
+  // effect re-runs after new canvases mount / old ones unmount.
+  let thumbVersion = $state(0);
+
+  /**
+   * Returns an attachment function for `{@attach thumbAttach(preset.id)}`.
+   * Registers the canvas element with our local map and cleans up on unmount.
+   */
+  function thumbAttach(id: string) {
+    return (node: Element) => {
+      thumbEls.set(id, node as HTMLCanvasElement);
+      thumbVersion += 1;
+      return () => {
+        thumbEls.delete(id);
+        thumbVersion += 1;
+      };
+    };
+  }
+
+  // Redraw thumbnails on any state change that affects what they show.
+  $effect(() => {
+    // Dependency touches: presets list, active id (for highlight), canvas
+    // size, thumbnail element set, and the current frame id.
+    void presets;
+    void activeId;
+    void canvasW;
+    void canvasH;
+    void thumbVersion;
+    const frames = getFrames();
+    if (frames.length === 0) return;
+    void getCurrentFrame().id;
+
+    for (const preset of presets) {
+      const el = thumbEls.get(preset.id);
+      if (!el) continue;
+      const buffer = compositeWithPreset(preset);
+      if (!buffer) continue;
+      el.width = buffer.width;
+      el.height = buffer.height;
+      const ctx = el.getContext('2d');
+      if (!ctx) continue;
+      ctx.imageSmoothingEnabled = false;
+      ctx.putImageData(buffer.toImageData(), 0, 0);
+    }
+  });
+
+  // --- Actions ---
+  // Every handler dispatches a command; the variant-commands plugin is
+  // responsible for targeting groups, emitting notifications, and managing
+  // undo snapshots. Keeping this panel dumb means shortcuts/palette hooks
+  // trigger identical behaviour to button clicks.
+
+  function handleGenerate(): void {
+    if (generateMode === 'blend') {
+      if (presets.length < 2) {
+        panelNotify('Need at least 2 variants to blend');
+        return;
+      }
+      dispatchCmd('generate_variants', { count: 3, mode: 'interpolate' });
+    } else {
+      dispatchCmd('generate_variants', { count: 1, mode: 'random' });
+    }
+  }
+
+  function handleExtractPalette(): void {
+    dispatchCmd('extract_palette_from_layer', {});
+  }
+
+  function handleExportBisection(): void {
+    dispatchCmd('export_bisection_atlas', {});
+  }
+
+  function handleExportBatch(): void {
+    dispatchCmd('export_variants_batch', {});
+  }
+
+  function handleApply(preset: VariantPreset): void {
+    // Toggle: clicking the active preset clears it (restores original).
+    const nextId = activeId === preset.id ? null : preset.id;
+    dispatchCmd('apply_variant', { presetId: nextId });
+  }
+
+  function handleRemove(e: MouseEvent, preset: VariantPreset): void {
+    e.stopPropagation();
+    dispatchCmd('remove_variant_preset', { id: preset.id });
+  }
+
+  function handleKeydown(e: KeyboardEvent, preset: VariantPreset): void {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleApply(preset);
+    }
+  }
+</script>
+
+<div class="variant-panel">
+  <!-- Header -->
+  <div class="variant-header">
+    <span class="variant-title">Variants</span>
+    <div class="variant-actions">
+      <!-- Mode toggle: Random vs Blend -->
+      <div class="mode-toggle" role="radiogroup" aria-label="Generation mode">
+        <button
+          class="mode-seg"
+          class:mode-seg--active={generateMode === 'random'}
+          role="radio"
+          aria-checked={generateMode === 'random'}
+          title="Random mode"
+          aria-label="Random mode"
+          onclick={() => (generateMode = 'random')}
+        ><ShuffleIcon /></button>
+        <button
+          class="mode-seg"
+          class:mode-seg--active={generateMode === 'blend'}
+          role="radio"
+          aria-checked={generateMode === 'blend'}
+          title="Blend mode"
+          aria-label="Blend mode"
+          onclick={() => (generateMode = 'blend')}
+        ><BlendIcon /></button>
+      </div>
+      <button
+        class="action-btn"
+        title={generateMode === 'blend' ? 'Generate blended variants' : 'Generate random variant'}
+        aria-label={generateMode === 'blend' ? 'Generate blended variants' : 'Generate random variant'}
+        onclick={handleGenerate}
+      ><WandIcon /></button>
+      <button
+        class="action-btn"
+        title="Extract palette from active group"
+        aria-label="Extract palette from active group"
+        onclick={handleExtractPalette}
+      ><PaletteIcon /></button>
+      <button
+        class="action-btn"
+        title="Export bisection atlas"
+        aria-label="Export bisection atlas"
+        onclick={handleExportBisection}
+        disabled={presets.length === 0}
+      ><DownloadIcon /></button>
+      <button
+        class="action-btn"
+        title="Export variants individually"
+        aria-label="Export variants individually"
+        onclick={handleExportBatch}
+        disabled={presets.length === 0}
+      ><FolderDownIcon /></button>
+    </div>
+  </div>
+
+  <!-- Grid or empty state -->
+  {#if presets.length === 0}
+    <div class="empty-state">
+      <p class="empty-title">No variants yet</p>
+      <p class="empty-hint">
+        Use the wand button to generate a random variant for the active layer group.
+      </p>
+    </div>
+  {:else}
+    <div class="variant-grid">
+      {#each presets as preset (preset.id)}
+        <div
+          class="variant-cell"
+          class:variant-cell--active={preset.id === activeId}
+          role="button"
+          tabindex="0"
+          aria-pressed={preset.id === activeId}
+          aria-label={`Apply variant ${preset.name}`}
+          title={preset.name}
+          onclick={() => { handleApply(preset); }}
+          onkeydown={(e) => { handleKeydown(e, preset); }}
+        >
+          <div class="thumb-wrap">
+            <canvas
+              class="thumb"
+              {@attach thumbAttach(preset.id)}
+            ></canvas>
+            <button
+              class="remove-btn"
+              title="Remove variant"
+              aria-label={`Remove variant ${preset.name}`}
+              onclick={(e) => { handleRemove(e, preset); }}
+            ><TrashIcon /></button>
+          </div>
+          <span class="variant-name">{preset.name}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <!-- Per-color editor for the active variant -->
+  <div class="color-editor">
+    {#if activePreset && colorMappings.length > 0}
+      <div class="color-editor-header">
+        <span class="color-editor-title">Color Overrides</span>
+      </div>
+      <div class="color-rows">
+        {#each colorMappings as mapping (mapping.groupId + ':' + mapping.original)}
+          <div class="color-row">
+            <span
+              class="color-swatch"
+              style:background-color={mapping.original}
+              title={mapping.original}
+            ></span>
+            <span class="color-arrow"><ArrowRightIcon /></span>
+            <label class="color-input-wrap" title="Click to change">
+              <span
+                class="color-swatch color-swatch--editable"
+                style:background-color={mapping.replacement}
+              ></span>
+              <input
+                type="color"
+                class="color-input-hidden"
+                value={mapping.replacement}
+                onchange={(e) => {
+                  // activePreset is a `$derived` value -- its declared type
+                  // ignores the surrounding `{#if activePreset}` narrowing
+                  // by the time this callback actually runs, so we keep
+                  // the runtime guard.
+                  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                  if (!activePreset) return;
+                  handleColorChange(
+                    activePreset.id,
+                    mapping.groupId,
+                    mapping.original,
+                    (e.target as HTMLInputElement).value,
+                  );
+                }}
+              />
+            </label>
+            <button
+              class="color-remove-btn"
+              title="Revert to original"
+              aria-label={`Remove override for ${mapping.original}`}
+              onclick={(e) => {
+                // See onchange above: $derived narrowing does not
+                // survive the nested callback boundary.
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (!activePreset) return;
+                handleRemoveOverride(e, activePreset.id, mapping.groupId, mapping.original);
+              }}
+            ><XIcon /></button>
+          </div>
+        {/each}
+      </div>
+    {:else if activePreset}
+      <div class="color-editor-hint">No color overrides in this variant.</div>
+    {:else}
+      <div class="color-editor-hint">Select a variant to edit colors</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .variant-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    user-select: none;
+  }
+
+  .variant-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .variant-title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .variant-actions {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  .action-btn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-xl);
+    padding: 0;
+    line-height: 1;
+  }
+
+  .action-btn:hover:not(:disabled) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .action-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .action-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Mode toggle -- compact two-segment radio group */
+  .mode-toggle {
+    display: flex;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    margin-right: var(--space-1);
+  }
+
+  .mode-seg {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+    transition: background var(--transition-fast), color var(--transition-fast);
+  }
+
+  .mode-seg + .mode-seg {
+    border-left: 1px solid var(--border);
+  }
+
+  .mode-seg:hover:not(.mode-seg--active) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .mode-seg--active {
+    background: var(--accent);
+    color: var(--bg-panel);
+  }
+
+  .mode-seg :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Empty state */
+  .empty-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4);
+    text-align: center;
+    color: var(--text-secondary);
+    gap: var(--space-2);
+  }
+
+  .empty-title {
+    font-size: var(--text-base);
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .empty-hint {
+    font-size: var(--text-sm);
+    margin: 0;
+    line-height: 1.4;
+    max-width: 220px;
+  }
+
+  /* Grid container */
+  .variant-grid {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
+    gap: var(--space-2);
+    padding: var(--space-2);
+    align-content: start;
+  }
+
+  /* Individual cell */
+  .variant-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-1);
+    cursor: pointer;
+    padding: var(--space-1);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+    min-width: 0;
+  }
+
+  .variant-cell:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .variant-cell:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .variant-cell:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+  }
+
+  .variant-cell--active {
+    border-color: var(--accent);
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  :global([data-theme="light"]) .variant-cell--active {
+    background: rgba(0, 0, 0, 0.06);
+  }
+
+  /* Thumbnail wrapper (square) */
+  .thumb-wrap {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+  }
+
+  .thumb {
+    width: 100%;
+    height: 100%;
+    display: block;
+    /* Pixelated scaling keeps thumbnails crisp at any size. */
+    image-rendering: pixelated;
+    image-rendering: crisp-edges;
+  }
+
+  /* Remove button -- top-right over the thumbnail */
+  .remove-btn {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .variant-cell:hover .remove-btn,
+  .variant-cell:focus-within .remove-btn {
+    display: flex;
+  }
+
+  .remove-btn:hover {
+    color: var(--text-primary);
+    border-color: var(--accent);
+  }
+
+  .remove-btn :global(svg) {
+    width: 10px;
+    height: 10px;
+  }
+
+  /* Variant name label */
+  .variant-name {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .variant-cell--active .variant-name {
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+
+  /* --- Color editor section --- */
+
+  .color-editor {
+    flex-shrink: 0;
+    border-top: 1px solid var(--border);
+    max-height: 40%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .color-editor-header {
+    display: flex;
+    align-items: center;
+    padding: 4px var(--space-3);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .color-editor-title {
+    font-weight: 600;
+    font-size: var(--text-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .color-rows {
+    overflow-y: auto;
+    padding: var(--space-1) var(--space-2);
+  }
+
+  .color-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    height: 22px;
+    padding: 1px 0;
+  }
+
+  .color-swatch {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .color-swatch--editable {
+    cursor: pointer;
+  }
+
+  .color-swatch--editable:hover {
+    border-color: var(--accent);
+  }
+
+  .color-arrow {
+    display: flex;
+    align-items: center;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .color-arrow :global(svg) {
+    width: 10px;
+    height: 10px;
+  }
+
+  /* Wrap the editable swatch + hidden native color input in a label so
+     clicking the swatch opens the picker. The native input is visually
+     hidden but remains accessible for keyboard / screen-reader use. */
+  .color-input-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .color-input-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  .color-remove-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: auto;
+    border-radius: 2px;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+  }
+
+  .color-row:hover .color-remove-btn {
+    opacity: 1;
+  }
+
+  .color-remove-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-primary);
+  }
+
+  .color-remove-btn :global(svg) {
+    width: 10px;
+    height: 10px;
+  }
+
+  .color-editor-hint {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    text-align: center;
+  }
+</style>