pixelweaver 0.1.0

package/src/lib/ui/command-palette/command-palette.test.ts

@@ -0,0 +1,129 @@
+/**
+ * Tests for the command palette's fuzzy matching and relevance scoring.
+ *
+ * These tests exercise the pure-logic helpers directly, without requiring
+ * a DOM or Svelte runtime.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { fuzzyMatch, relevanceScore, type PaletteItem } from './command-palette-state.svelte.js';
+
+// --- Helpers ---
+
+/** Create a minimal PaletteItem for testing. */
+function makeItem(name: string, description = ''): PaletteItem {
+  return {
+    id: `test:${name}`,
+    name,
+    description,
+    category: 'tool',
+    execute: () => {},
+  };
+}
+
+// --- fuzzyMatch ---
+
+describe('fuzzyMatch', () => {
+  it('matches "pen" against "Pencil tool"', () => {
+    const item = makeItem('Pencil tool');
+    expect(fuzzyMatch(item, 'pen')).toBe(true);
+  });
+
+  it('matches "era" against "Eraser tool"', () => {
+    const item = makeItem('Eraser tool');
+    expect(fuzzyMatch(item, 'era')).toBe(true);
+  });
+
+  it('matches multiple words: "draw line" against "Draw Line tool"', () => {
+    const item = makeItem('Draw Line tool');
+    expect(fuzzyMatch(item, 'draw line')).toBe(true);
+  });
+
+  it('does not match when a word is missing', () => {
+    const item = makeItem('Pencil tool');
+    expect(fuzzyMatch(item, 'eraser')).toBe(false);
+  });
+
+  it('is case-insensitive', () => {
+    const item = makeItem('Pencil tool');
+    expect(fuzzyMatch(item, 'PENCIL')).toBe(true);
+    expect(fuzzyMatch(item, 'pEnCiL')).toBe(true);
+  });
+
+  it('empty query matches everything', () => {
+    const item = makeItem('Anything');
+    expect(fuzzyMatch(item, '')).toBe(true);
+  });
+
+  it('matches against description as well', () => {
+    const item = makeItem('Do stuff', 'This draws pixels');
+    expect(fuzzyMatch(item, 'pixels')).toBe(true);
+  });
+
+  it('requires all words to be present', () => {
+    const item = makeItem('Pencil tool', 'Draw pixels');
+    expect(fuzzyMatch(item, 'pencil draw')).toBe(true);
+    expect(fuzzyMatch(item, 'pencil eraser')).toBe(false);
+  });
+});
+
+// --- relevanceScore ---
+
+describe('relevanceScore', () => {
+  it('gives score 0 for exact prefix match on name', () => {
+    const item = makeItem('Pencil tool');
+    expect(relevanceScore(item, 'pen')).toBe(0);
+    expect(relevanceScore(item, 'pencil')).toBe(0);
+    expect(relevanceScore(item, 'Pencil')).toBe(0);
+  });
+
+  it('gives score 1 for substring match in name (not prefix)', () => {
+    const item = makeItem('Pencil tool');
+    // "cil" is in "pencil tool" but not a prefix
+    expect(relevanceScore(item, 'cil')).toBe(1);
+    expect(relevanceScore(item, 'tool')).toBe(1);
+  });
+
+  it('gives score 2 when only description matches', () => {
+    const item = makeItem('Do stuff', 'Activate the pencil');
+    expect(relevanceScore(item, 'pencil')).toBe(2);
+  });
+
+  it('gives score 0 for empty query', () => {
+    const item = makeItem('Anything');
+    expect(relevanceScore(item, '')).toBe(0);
+  });
+});
+
+// --- Sorting by relevance ---
+
+describe('sorting by relevance', () => {
+  it('sorts prefix matches before substring matches', () => {
+    const items = [
+      makeItem('Fill tool'),
+      makeItem('Pencil tool'),
+      makeItem('Pen tool'),
+    ];
+
+    const sorted = items
+      .filter((item) => fuzzyMatch(item, 'pen'))
+      .sort((a, b) => relevanceScore(a, 'pen') - relevanceScore(b, 'pen'));
+
+    // "Pencil tool" and "Pen tool" start with "pen", so score 0.
+    // Among score-0 items, original order is preserved (stable sort).
+    expect(sorted[0]?.name).toBe('Pencil tool');
+    expect(sorted[1]?.name).toBe('Pen tool');
+    // "Fill tool" doesn't match at all, so it's filtered out
+    expect(sorted.length).toBe(2);
+  });
+
+  it('empty query returns all items with equal score', () => {
+    const items = [makeItem('A'), makeItem('B'), makeItem('C')];
+    const filtered = items.filter((item) => fuzzyMatch(item, ''));
+    expect(filtered.length).toBe(3);
+    // All scores should be 0
+    for (const item of filtered) {
+      expect(relevanceScore(item, '')).toBe(0);
+    }
+  });
+});

package/src/lib/ui/dialog-state.svelte.ts

@@ -0,0 +1,70 @@
+/**
+ * Dialog State -- reactive singleton for managing dialog visibility.
+ * Allows menu commands and other plugins to open/close dialogs
+ * without requiring access to local component state.
+ */
+
+export interface PromptConfig {
+  title: string;
+  message: string;
+  defaultValue: string;
+  placeholder?: string;
+  validate?: (value: string) => string | null;
+  onConfirm: (value: string) => void;
+}
+
+let newProjectOpen = $state(false);
+let exportOpen = $state(false);
+let promptOpen = $state(false);
+let promptConfig = $state<PromptConfig | null>(null);
+let resizeCanvasOpen = $state(false);
+let bisectionExportOpen = $state(false);
+let bisectionExportGroupId = $state<string | null>(null);
+
+export const dialogState = {
+  get newProjectOpen() { return newProjectOpen; },
+  set newProjectOpen(v: boolean) { newProjectOpen = v; },
+
+  get exportOpen() { return exportOpen; },
+  set exportOpen(v: boolean) { exportOpen = v; },
+
+  get promptOpen() { return promptOpen; },
+  set promptOpen(v: boolean) { promptOpen = v; },
+
+  get promptConfig() { return promptConfig; },
+
+  get resizeCanvasOpen() { return resizeCanvasOpen; },
+  set resizeCanvasOpen(v: boolean) { resizeCanvasOpen = v; },
+
+  openNewProject() { newProjectOpen = true; },
+  closeNewProject() { newProjectOpen = false; },
+
+  openExport() { exportOpen = true; },
+  closeExport() { exportOpen = false; },
+
+  openResizeCanvas() { resizeCanvasOpen = true; },
+  closeResizeCanvas() { resizeCanvasOpen = false; },
+
+  get bisectionExportOpen() { return bisectionExportOpen; },
+  set bisectionExportOpen(v: boolean) { bisectionExportOpen = v; },
+
+  get bisectionExportGroupId() { return bisectionExportGroupId; },
+
+  openBisectionExport(groupId: string) {
+    bisectionExportGroupId = groupId;
+    bisectionExportOpen = true;
+  },
+  closeBisectionExport() {
+    bisectionExportOpen = false;
+    bisectionExportGroupId = null;
+  },
+
+  openPrompt(config: PromptConfig) {
+    promptConfig = config;
+    promptOpen = true;
+  },
+  closePrompt() {
+    promptOpen = false;
+    promptConfig = null;
+  },
+};

package/src/lib/ui/edit-commands.ts

@@ -0,0 +1,271 @@
+/**
+ * Edit Commands -- Undo/Redo, Cut/Copy/Paste, Select All, Deselect (menu ref).
+ *
+ * Undo and Redo delegate to the dispatcher's history stack; clipboard
+ * commands read/write the shared clipboard-state module. `deselect` is
+ * registered by the selection-tool plugin -- we only add the menu item.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { undoLast, redoLast } from '../core/dispatcher.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import {
+  getClipboard,
+  setClipboard,
+  hasClipboard,
+  type ClipboardPixel,
+} from '../edit/clipboard-state.js';
+
+// Pre-mutation pixel snapshot for cut/paste. Stores the RGBA values that
+// were at each affected coordinate BEFORE the command ran, so undo can
+// write them back verbatim via ctx.getActiveBuffer().
+interface PixelRegionSnapshot {
+  pixels: ClipboardPixel[];
+}
+
+// Cut additionally records the prior clipboard so undo can restore it
+// (otherwise undoing a cut would leak the cut region into the clipboard).
+interface CutSnapshot extends PixelRegionSnapshot {
+  priorClipboard: ClipboardPixel[];
+}
+import Undo2 from '~icons/lucide/undo-2';
+import Redo2 from '~icons/lucide/redo-2';
+import Scissors from '~icons/lucide/scissors';
+import Copy from '~icons/lucide/copy';
+import ClipboardPaste from '~icons/lucide/clipboard-paste';
+import BoxSelect from '~icons/lucide/box-select';
+
+export const editCommandsPlugin: PluginModule = {
+  name: 'ui/edit-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // Capture once: the returned object is stable and its methods read live
+    // selection state on each call (see PluginAPI.getSelection).
+    const selection = api.getSelection();
+
+    // --- Undo/Redo ---
+
+    api.addCommand('undo', {
+      tier: 'project',
+      execute() { undoLast(); },
+      undo() {},
+      describe() { return 'Undo'; },
+      label: 'Undo',
+      category: 'Edit',
+      defaultShortcut: 'Ctrl+Z',
+      icon: Undo2,
+    });
+    api.addMenuItem('menu:edit:undo', {
+      commandId: 'undo',
+      menuPath: 'edit',
+      group: 'undo',
+      order: 10,
+      label: 'Undo',
+    });
+
+    api.addCommand('redo', {
+      tier: 'project',
+      execute() { redoLast(); },
+      undo() {},
+      describe() { return 'Redo'; },
+      label: 'Redo',
+      category: 'Edit',
+      defaultShortcut: 'Ctrl+Shift+Z',
+      icon: Redo2,
+    });
+    api.addMenuItem('menu:edit:redo', {
+      commandId: 'redo',
+      menuPath: 'edit',
+      group: 'undo',
+      order: 20,
+      label: 'Redo',
+    });
+
+    // --- Clipboard commands ---
+
+    api.addCommand('cut', {
+      tier: 'frame',
+      undoable: true,
+      execute(_params, ctx): CutSnapshot | undefined {
+        if (!selection.hasSelection()) {
+          console.warn('cut: no selection exists');
+          return;
+        }
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) {
+          console.warn('cut: no active pixel buffer');
+          return;
+        }
+        // Capture the prior clipboard so undo can restore it. Clone each
+        // entry (getClipboard returns a readonly reference-typed array).
+        const priorClipboard: ClipboardPixel[] = getClipboard().map((p) => ({ ...p }));
+        // Copy selected pixels to clipboard, then clear them
+        const pixels: ClipboardPixel[] = [];
+        for (const key of selection.getSelectedPixels()) {
+          const [x, y] = key.split(',').map(Number) as [number, number];
+          const [r, g, b, a] = buffer.getPixel(x, y);
+          pixels.push({ x, y, r, g, b, a });
+          buffer.setPixel(x, y, 0, 0, 0, 0);
+        }
+        setClipboard(pixels);
+        // Snapshot carries the pre-cut pixel values AND prior clipboard.
+        // pixels is safe to re-use as the snapshot payload since setClipboard
+        // took ownership of the same array -- but undo doesn't mutate it.
+        return { pixels, priorClipboard };
+      },
+      undo(_params, ctx, snapshot) {
+        const snap = snapshot as CutSnapshot | undefined;
+        if (!snap) return;
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        // Restore the original pixel values that were cleared by the cut.
+        for (const p of snap.pixels) {
+          buffer.setPixel(p.x, p.y, p.r, p.g, p.b, p.a);
+        }
+        // Restore the prior clipboard (clone to avoid aliasing snapshot array).
+        setClipboard(snap.priorClipboard.map((p) => ({ ...p })));
+      },
+      describe() { return 'Cut selection'; },
+      label: 'Cut',
+      category: 'Edit',
+      defaultShortcut: 'Ctrl+X',
+      icon: Scissors,
+    });
+    api.addMenuItem('menu:edit:cut', {
+      commandId: 'cut',
+      menuPath: 'edit',
+      group: 'clipboard',
+      order: 30,
+      label: 'Cut',
+    });
+
+    api.addCommand('copy', {
+      tier: 'frame',
+      execute(_params, ctx) {
+        if (!selection.hasSelection()) {
+          console.warn('copy: no selection exists');
+          return;
+        }
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) {
+          console.warn('copy: no active pixel buffer');
+          return;
+        }
+        // Copy selected pixels to clipboard (non-destructive)
+        const pixels = [];
+        for (const key of selection.getSelectedPixels()) {
+          const [x, y] = key.split(',').map(Number) as [number, number];
+          const [r, g, b, a] = buffer.getPixel(x, y);
+          pixels.push({ x, y, r, g, b, a });
+        }
+        setClipboard(pixels);
+      },
+      undo() {},
+      describe() { return 'Copied selection'; },
+      label: 'Copy',
+      category: 'Edit',
+      defaultShortcut: 'Ctrl+C',
+      icon: Copy,
+    });
+    api.addMenuItem('menu:edit:copy', {
+      commandId: 'copy',
+      menuPath: 'edit',
+      group: 'clipboard',
+      order: 40,
+      label: 'Copy',
+    });
+
+    api.addCommand('paste', {
+      tier: 'frame',
+      undoable: true,
+      execute(_params, ctx): PixelRegionSnapshot | undefined {
+        if (!hasClipboard()) {
+          console.warn('paste: clipboard is empty');
+          return;
+        }
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) {
+          console.warn('paste: no active pixel buffer');
+          return;
+        }
+        // Snapshot the pre-paste pixel values at each clipboard coordinate
+        // BEFORE writing, so undo can restore them exactly.
+        const pre: ClipboardPixel[] = [];
+        for (const px of getClipboard()) {
+          const [r, g, b, a] = buffer.getPixel(px.x, px.y);
+          pre.push({ x: px.x, y: px.y, r, g, b, a });
+        }
+        // Paste clipboard pixels at their original positions
+        for (const px of getClipboard()) {
+          buffer.setPixel(px.x, px.y, px.r, px.g, px.b, px.a);
+        }
+        return { pixels: pre };
+      },
+      undo(_params, ctx, snapshot) {
+        const snap = snapshot as PixelRegionSnapshot | undefined;
+        if (!snap) return;
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        for (const p of snap.pixels) {
+          buffer.setPixel(p.x, p.y, p.r, p.g, p.b, p.a);
+        }
+      },
+      describe() { return 'Pasted from clipboard'; },
+      label: 'Paste',
+      category: 'Edit',
+      defaultShortcut: 'Ctrl+V',
+      icon: ClipboardPaste,
+    });
+    api.addMenuItem('menu:edit:paste', {
+      commandId: 'paste',
+      menuPath: 'edit',
+      group: 'clipboard',
+      order: 50,
+      label: 'Paste',
+    });
+
+    // --- Selection commands ---
+
+    api.addCommand('select_all', {
+      tier: 'frame',
+      execute() {
+        // Delegate to the selection plugin via dispatch -- select_rect's own
+        // execute/undo handle the selection snapshot bookkeeping.
+        api.dispatch({
+          type: 'select_rect',
+          plugin: 'builtin/selection',
+          version: '1.0.0',
+          params: {
+            x: 0,
+            y: 0,
+            w: canvasState.canvasWidth,
+            h: canvasState.canvasHeight,
+          },
+        });
+      },
+      undo() {},
+      describe() { return 'Selected all'; },
+      label: 'Select All',
+      category: 'Edit',
+      defaultShortcut: 'Ctrl+A',
+      icon: BoxSelect,
+    });
+    api.addMenuItem('menu:edit:select-all', {
+      commandId: 'select_all',
+      menuPath: 'edit',
+      group: 'selection',
+      order: 60,
+      label: 'Select All',
+    });
+
+    // deselect command already registered by selection-tool plugin; just add menu item
+    api.addMenuItem('menu:edit:deselect', {
+      commandId: 'deselect',
+      menuPath: 'edit',
+      group: 'selection',
+      order: 70,
+      label: 'Deselect',
+    });
+  },
+};