pixelweaver 0.1.0

package/src/lib/shortcuts/shortcut-manager.ts

@@ -0,0 +1,281 @@
+/**
+ * Keyboard Shortcut Manager -- core engine for parsing, matching, and
+ * dispatching keyboard shortcuts.
+ *
+ * Custom implementation with no external dependencies.
+ * Uses event.key (layout-independent) for matching.
+ * Normalizes all shortcut strings to a canonical lowercase form
+ * with modifiers in fixed order: ctrl+alt+shift+meta+key.
+ */
+
+// --- Types ---
+
+export interface ParsedShortcut {
+  key: string; // lowercase key name (e.g., "z", "b", "escape")
+  ctrl: boolean;
+  shift: boolean;
+  alt: boolean;
+  meta: boolean;
+}
+
+export interface ShortcutBinding {
+  action: () => void;
+  description: string;
+  /** The action name used for profile export/import */
+  name: string;
+}
+
+// --- Modifier detection order for canonical form ---
+const MODIFIER_ORDER = ['ctrl', 'alt', 'shift', 'meta'] as const;
+
+// Map of recognized modifier tokens to their ParsedShortcut field
+const MODIFIER_MAP: Record<string, keyof Omit<ParsedShortcut, 'key'>> = {
+  ctrl: 'ctrl',
+  control: 'ctrl',
+  alt: 'alt',
+  shift: 'shift',
+  meta: 'meta',
+  cmd: 'meta',
+  command: 'meta',
+  win: 'meta',
+  super: 'meta',
+};
+
+// --- Parsing ---
+
+/**
+ * Parse a key string like "Ctrl+Shift+Z" into its normalized components.
+ * Accepts modifiers in any order and multiple aliases (e.g., "Cmd" = "Meta").
+ */
+export function parseShortcut(shortcutStr: string): ParsedShortcut {
+  const parts = shortcutStr.split('+').map((p) => p.trim().toLowerCase());
+
+  const parsed: ParsedShortcut = {
+    key: '',
+    ctrl: false,
+    shift: false,
+    alt: false,
+    meta: false,
+  };
+
+  for (const part of parts) {
+    const modField = MODIFIER_MAP[part];
+    if (modField) {
+      parsed[modField] = true;
+    } else {
+      // Last non-modifier part is the key; if multiple non-modifier parts
+      // exist, the last one wins (unusual but defensive)
+      parsed.key = part;
+    }
+  }
+
+  return parsed;
+}
+
+/**
+ * Produce a canonical string form from a shortcut string.
+ * Modifiers always appear in fixed order: ctrl+alt+shift+meta+key.
+ * Everything is lowercase.
+ */
+export function normalizeShortcut(shortcutStr: string): string {
+  const parsed = parseShortcut(shortcutStr);
+  return buildCanonical(parsed);
+}
+
+/** Build canonical string from a ParsedShortcut */
+function buildCanonical(parsed: ParsedShortcut): string {
+  const parts: string[] = [];
+  for (const mod of MODIFIER_ORDER) {
+    if (parsed[mod]) parts.push(mod);
+  }
+  parts.push(parsed.key);
+  return parts.join('+');
+}
+
+// --- Event matching ---
+
+/**
+ * Check if a KeyboardEvent matches a ParsedShortcut.
+ * Compares both the target key and all modifier flags.
+ */
+export function matchesEvent(parsed: ParsedShortcut, event: KeyboardEvent): boolean {
+  const eventKey = event.key.toLowerCase();
+
+  return (
+    eventKey === parsed.key &&
+    event.ctrlKey === parsed.ctrl &&
+    event.shiftKey === parsed.shift &&
+    event.altKey === parsed.alt &&
+    event.metaKey === parsed.meta
+  );
+}
+
+// --- ShortcutManager ---
+
+export class ShortcutManager {
+  /** Map from normalized shortcut string to its binding */
+  private bindings = new Map<string, ShortcutBinding>();
+
+  /** Reverse map from action name to normalized shortcut string */
+  private nameToShortcut = new Map<string, string>();
+
+  /** Pre-parsed shortcuts for fast event matching */
+  private parsedCache = new Map<string, ParsedShortcut>();
+
+  /** Whether the manager processes keyboard events */
+  private enabled = true;
+
+  // --- Bind / unbind ---
+
+  /**
+   * Bind a shortcut string to an action.
+   * If a name is provided it is used for profile export/import and rebinding.
+   */
+  bind(shortcut: string, action: () => void, description = '', name = ''): void {
+    const normalized = normalizeShortcut(shortcut);
+    const parsed = parseShortcut(shortcut);
+
+    this.bindings.set(normalized, { action, description, name });
+    this.parsedCache.set(normalized, parsed);
+
+    if (name) {
+      this.nameToShortcut.set(name, normalized);
+    }
+  }
+
+  /** Remove a binding by its shortcut string. */
+  unbind(shortcut: string): void {
+    const normalized = normalizeShortcut(shortcut);
+    const binding = this.bindings.get(normalized);
+
+    if (binding?.name) {
+      this.nameToShortcut.delete(binding.name);
+    }
+
+    this.bindings.delete(normalized);
+    this.parsedCache.delete(normalized);
+  }
+
+  /**
+   * Move an existing binding from one key to another.
+   * Preserves the action, description, and name.
+   */
+  rebind(oldShortcut: string, newShortcut: string): void {
+    const oldNorm = normalizeShortcut(oldShortcut);
+    const binding = this.bindings.get(oldNorm);
+    if (!binding) return;
+
+    // Remove old entry
+    this.bindings.delete(oldNorm);
+    this.parsedCache.delete(oldNorm);
+
+    // Insert under new key
+    const newNorm = normalizeShortcut(newShortcut);
+    const newParsed = parseShortcut(newShortcut);
+
+    this.bindings.set(newNorm, binding);
+    this.parsedCache.set(newNorm, newParsed);
+
+    if (binding.name) {
+      this.nameToShortcut.set(binding.name, newNorm);
+    }
+  }
+
+  // --- Query ---
+
+  /** Return all current bindings keyed by normalized shortcut string. */
+  getBindings(): Map<string, { action: () => void; description: string }> {
+    return new Map(this.bindings);
+  }
+
+  /**
+   * Check if a shortcut string conflicts with an existing binding.
+   * Returns the description of the conflicting binding, or null.
+   */
+  getConflict(shortcut: string): string | null {
+    const normalized = normalizeShortcut(shortcut);
+    const existing = this.bindings.get(normalized);
+    return existing ? existing.description : null;
+  }
+
+  /** Look up the current shortcut string for a named action. */
+  getShortcutForName(name: string): string | undefined {
+    return this.nameToShortcut.get(name);
+  }
+
+  // --- Event handling ---
+
+  /**
+   * Process a keydown event. Returns true if a shortcut was matched and fired.
+   * Calls event.preventDefault() for matched shortcuts to suppress browser defaults.
+   */
+  handleKeyDown(event: KeyboardEvent): boolean {
+    if (!this.enabled) return false;
+
+    for (const [normalized, parsed] of this.parsedCache) {
+      if (matchesEvent(parsed, event)) {
+        const binding = this.bindings.get(normalized);
+        if (binding) {
+          event.preventDefault();
+          binding.action();
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  /** Enable or disable the manager (useful when a text input has focus). */
+  setEnabled(enabled: boolean): void {
+    this.enabled = enabled;
+  }
+
+  /** Whether the manager is currently enabled. */
+  isEnabled(): boolean {
+    return this.enabled;
+  }
+
+  // --- Reset ---
+
+  /** Remove all bindings and reset state. */
+  reset(): void {
+    this.bindings.clear();
+    this.nameToShortcut.clear();
+    this.parsedCache.clear();
+    this.enabled = true;
+  }
+
+  // --- Profile import/export ---
+
+  /**
+   * Export current bindings as a profile: { actionName: shortcutString }.
+   * Only named bindings are exported.
+   */
+  exportProfile(): Record<string, string> {
+    const profile: Record<string, string> = {};
+    for (const [shortcut, binding] of this.bindings) {
+      if (binding.name) {
+        profile[binding.name] = shortcut;
+      }
+    }
+    return profile;
+  }
+
+  /**
+   * Import a profile, rebinding named actions to new shortcut strings.
+   * Actions not present in the profile keep their current bindings.
+   * Profile entries whose names don't match any current binding are ignored.
+   */
+  importProfile(profile: Record<string, string>): void {
+    for (const [name, newShortcut] of Object.entries(profile)) {
+      const currentShortcut = this.nameToShortcut.get(name);
+      if (currentShortcut === undefined) continue;
+
+      const newNorm = normalizeShortcut(newShortcut);
+      if (currentShortcut === newNorm) continue; // already correct
+
+      this.rebind(currentShortcut, newShortcut);
+    }
+  }
+}

package/src/lib/shortcuts/shortcut-state.svelte.ts

@@ -0,0 +1,78 @@
+/**
+ * Reactive shortcut state for PixelWeaver UI.
+ *
+ * Module-level singleton using Svelte 5 $state runes.
+ * Tracks the current set of bindings (for display in settings/help),
+ * whether shortcuts are globally enabled, and the currently active tool name.
+ */
+
+import { SvelteMap } from 'svelte/reactivity';
+
+// --- Types ---
+
+export interface BindingInfo {
+  name: string;
+  key: string;
+  description: string;
+}
+
+// --- Reactive state ---
+
+/**
+ * Current bindings, keyed by action name.
+ * Reactive so UI panels (shortcut list, settings) update automatically.
+ */
+const bindings = new SvelteMap<string, BindingInfo>();
+
+/** Whether shortcuts are globally enabled (disabled during text input focus). */
+let enabled = $state(true);
+
+/** The currently active tool name (e.g. "pencil", "eraser"). */
+let activeTool = $state('pencil');
+
+// --- Public API ---
+
+export function getBindings(): ReadonlyMap<string, BindingInfo> {
+  return bindings;
+}
+
+/** Replace all bindings at once (used during initialization and profile import). */
+export function setBindings(entries: BindingInfo[]): void {
+  bindings.clear();
+  for (const entry of entries) {
+    bindings.set(entry.name, entry);
+  }
+}
+
+/** Update a single binding's key (used during rebind). */
+export function updateBindingKey(name: string, newKey: string): void {
+  const existing = bindings.get(name);
+  if (existing) {
+    bindings.set(name, { ...existing, key: newKey });
+  }
+}
+
+export function isEnabled(): boolean {
+  return enabled;
+}
+
+export function setEnabled(value: boolean): void {
+  enabled = value;
+}
+
+export function getActiveTool(): string {
+  return activeTool;
+}
+
+export function setActiveTool(name: string): void {
+  activeTool = name;
+}
+
+/**
+ * Reset all shortcut state to defaults. Intended for tests only.
+ */
+export function _resetForTesting(): void {
+  bindings.clear();
+  enabled = true;
+  activeTool = '';
+}

package/src/lib/shortcuts/shortcuts-plugin.ts

@@ -0,0 +1,17 @@
+/**
+ * Shortcuts Plugin -- wraps shortcut system initialization as a plugin.
+ * Binds default keyboard shortcuts and attaches global key listeners.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { initializeShortcuts } from './shortcut-init.js';
+
+export const shortcutsPlugin: PluginModule = {
+  name: 'builtin/shortcuts',
+  version: '1.0.0',
+  description: 'Keyboard shortcut system with default bindings',
+
+  register() {
+    initializeShortcuts();
+  },
+};

package/src/lib/sync/patch-applicator.ts

@@ -0,0 +1,300 @@
+/**
+ * Patch Applicator -- applies server-broadcast data patches to local state.
+ *
+ * When the server (via MCP or other operations) modifies state, it broadcasts
+ * pre-computed data patches. This module applies them directly to the
+ * frontend's reactive state without re-executing commands.
+ */
+
+import type {
+  StatePatch,
+  PatchMessage,
+  FullStatePatch,
+  PixelPatch,
+  CanvasPatch,
+  LayerPatch,
+  FramePatch,
+} from './patch-types.js';
+import { applySnapshot, type ProjectSnapshot } from '../save/project-snapshot.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import {
+  getFrames,
+  getCurrentFrame,
+  addFrame,
+  removeFrame,
+  reorderFrame,
+  setFrameDuration,
+  applyServerState,
+} from '../animation/frame-model.svelte.js';
+import {
+  getLayers,
+  getLayer,
+  addLayer,
+  removeLayer,
+  renameLayer,
+  setVisibility,
+  setOpacity,
+  setBlendMode,
+  setLocked,
+} from '../layers/layer-tree.svelte.js';
+import type { BlendMode } from '../layers/layer-types.js';
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+import { SvelteMap } from 'svelte/reactivity';
+import { composite } from '../layers/compositor.js';
+import { setRenderBuffer } from '../canvas/render-state.svelte.js';
+
+/** Decode pixel data from either base64 string or number array (legacy). */
+function decodePixelData(data: string | number[]): Uint8ClampedArray {
+  if (typeof data === 'string') {
+    const binary = atob(data);
+    const bytes = new Uint8ClampedArray(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+  }
+  return new Uint8ClampedArray(data);
+}
+
+/**
+ * Apply a batch of state patches from the server.
+ * After all patches are applied, triggers a recomposite to update the canvas.
+ */
+export function applyPatches(message: PatchMessage): void {
+  for (const patch of message.patches) {
+    applyPatch(patch);
+  }
+  recomposite();
+}
+
+function applyPatch(patch: StatePatch): void {
+  switch (patch.type) {
+    case 'full_state':
+      applyFullState(patch);
+      break;
+    case 'canvas':
+      applyCanvasPatch(patch);
+      break;
+    case 'pixel':
+      applyPixelPatch(patch);
+      break;
+    case 'layer':
+      applyLayerPatch(patch);
+      break;
+    case 'frame':
+      applyFramePatch(patch);
+      break;
+  }
+}
+
+/**
+ * Apply a full state replacement from the server.
+ *
+ * Detects which format the snapshot is in and routes accordingly:
+ * - ProjectSnapshot format (from save/load): has `version`, `canvas`, `layers`
+ * - Server-native format (from MCP broadcast): has `canvases` dict
+ * - Minimal format: just `width` and `height`
+ */
+function applyFullState(patch: FullStatePatch): void {
+  const snapshot = patch.snapshot as Record<string, unknown>;
+
+  if (snapshot['version'] != null && snapshot['canvas'] != null && snapshot['layers'] != null) {
+    // ProjectSnapshot format (from save/load)
+    applySnapshot(snapshot as unknown as ProjectSnapshot);
+  } else if (snapshot['canvases'] != null) {
+    // Server-native format (from MCP broadcast)
+    applyServerNativeState(snapshot);
+  } else if (typeof snapshot['width'] === 'number' && typeof snapshot['height'] === 'number') {
+    // Minimal format (just dimensions)
+    canvasState.canvasWidth = snapshot['width'];
+    canvasState.canvasHeight = snapshot['height'];
+  }
+}
+
+/**
+ * Apply a server-native format snapshot.
+ *
+ * The server sends: { name, width, height, canvases: { "canvas-0": { ... } } }
+ * PixelWeaver currently uses a single canvas, so we grab the first entry.
+ *
+ * Multi-frame path: if the canvas has a `frames` array, decode each frame's
+ * pixel data and call applyServerState() to replace all animation state.
+ * Legacy path: fall back to writing pixel data into the current frame only.
+ */
+function applyServerNativeState(snapshot: Record<string, unknown>): void {
+  // 1. Canvas dimensions
+  if (typeof snapshot['width'] === 'number' && typeof snapshot['height'] === 'number') {
+    canvasState.canvasWidth = snapshot['width'];
+    canvasState.canvasHeight = snapshot['height'];
+  }
+
+  // 2. Find the first canvas
+  const canvases = snapshot['canvases'] as Record<string, Record<string, unknown>> | undefined;
+  if (!canvases) return;
+  const canvasData = Object.values(canvases)[0];
+  if (!canvasData?.['layers']) return;
+
+  const cw = (canvasData['width'] as number | undefined) ?? canvasState.canvasWidth;
+  const ch = (canvasData['height'] as number | undefined) ?? canvasState.canvasHeight;
+
+  // 3. Multi-frame path: server sends a `frames` array with per-frame pixel data
+  const serverFrames = canvasData['frames'] as Array<Record<string, unknown>> | undefined;
+  if (serverFrames && serverFrames.length > 0) {
+    const builtFrames = serverFrames.map((sf) => {
+      const pixelData = new SvelteMap<string, PixelBuffer>();
+      const pd = sf['pixelData'] as Record<string, string> | undefined;
+      if (pd) {
+        for (const [layerId, base64] of Object.entries(pd)) {
+          const pixels = decodePixelData(base64);
+          pixelData.set(layerId, new PixelBuffer(cw, ch, pixels));
+        }
+      }
+      return {
+        id: sf['id'] as string,
+        durationMs: (sf['durationMs'] as number | null) ?? null,
+        pixelData,
+      };
+    });
+
+    applyServerState(
+      builtFrames,
+      (canvasData['currentFrameIndex'] as number | undefined) ?? 0,
+      (canvasData['globalFps'] as number | undefined) ?? 12,
+      (canvasData['originX'] as number | undefined) ?? 0,
+      (canvasData['originY'] as number | undefined) ?? 0,
+    );
+  } else {
+    // Legacy path: single-frame (no frames array from server)
+    const existingFrames = getFrames();
+    if (existingFrames.length === 0) return;
+    const frame = getCurrentFrame();
+
+    const layers = canvasData['layers'] as Array<Record<string, unknown>>;
+    for (const layerData of layers) {
+      const layerId = layerData['id'] as string | undefined;
+      const rawPixel = layerData['pixelData'] as string | number[] | undefined;
+      if (!layerId || !rawPixel || (Array.isArray(rawPixel) && rawPixel.length === 0)) continue;
+
+      const pixels = decodePixelData(rawPixel);
+
+      const existing = frame.pixelData.get(layerId);
+      if (existing && pixels.length === existing.data.length) {
+        // Overwrite existing buffer data in-place
+        existing.data.set(pixels);
+      } else {
+        // Create new buffer (layer exists on server but has different size or is new)
+        const buffer = new PixelBuffer(cw, ch, pixels);
+        frame.pixelData.set(layerId, buffer);
+      }
+    }
+  }
+}
+
+function applyCanvasPatch(patch: CanvasPatch): void {
+  canvasState.canvasWidth = patch.width;
+  canvasState.canvasHeight = patch.height;
+}
+
+function applyPixelPatch(patch: PixelPatch): void {
+  const frame = getFrames()[patch.frameIndex];
+  if (!frame) return;
+  const pixels = decodePixelData(patch.data);
+  const buffer = frame.pixelData.get(patch.layerId);
+  if (buffer && pixels.length === buffer.data.length) {
+    // Same size: overwrite in-place
+    buffer.data.set(pixels);
+  } else {
+    // Size mismatch or missing buffer: create a new PixelBuffer
+    if (buffer) {
+      console.warn(
+        `applyPixelPatch: buffer size mismatch for layer "${patch.layerId}" ` +
+        `(expected ${String(buffer.data.length)}, got ${String(pixels.length)}). Creating new buffer.`,
+      );
+    }
+    const newBuffer = new PixelBuffer(patch.width, patch.height, pixels);
+    frame.pixelData.set(patch.layerId, newBuffer);
+  }
+}
+
+/**
+ * Apply a layer-tree structure patch (add / remove / update).
+ * The server sends serialized layer data; we route to the appropriate
+ * layer-tree mutation functions.
+ */
+function applyLayerPatch(patch: LayerPatch): void {
+  switch (patch.action) {
+    case 'add': {
+      // patch.layer is a serialized Layer object with at least { name, id }
+      const data = patch.layer as Record<string, unknown> | undefined;
+      if (!data) break;
+      const name = (data['name'] ?? 'Layer') as string;
+      const id = data['id'] as string | undefined;
+      const layer = addLayer(name, { ...(id !== undefined && { id }) });
+      // Apply any additional properties from the serialized data
+      if (typeof data['visible'] === 'boolean') setVisibility(layer.id, data['visible']);
+      if (typeof data['opacity'] === 'number') setOpacity(layer.id, data['opacity']);
+      if (typeof data['blendMode'] === 'string') setBlendMode(layer.id, data['blendMode'] as BlendMode);
+      if (typeof data['locked'] === 'boolean') setLocked(layer.id, data['locked']);
+      break;
+    }
+    case 'remove': {
+      const id = patch.layerId ?? (patch.layer as Record<string, unknown> | undefined)?.['id'] as string | undefined;
+      if (id) removeLayer(id);
+      break;
+    }
+    case 'update': {
+      // patch.layer contains partial layer data with at least an id
+      const data = patch.layer as Record<string, unknown> | undefined;
+      if (!data) break;
+      const id = (data['id'] ?? patch.layerId) as string | undefined;
+      if (!id) break;
+      const existing = getLayer(id);
+      if (!existing) break;
+      if (typeof data['name'] === 'string') renameLayer(id, data['name']);
+      if (typeof data['visible'] === 'boolean') setVisibility(id, data['visible']);
+      if (typeof data['opacity'] === 'number') setOpacity(id, data['opacity']);
+      if (typeof data['blendMode'] === 'string') setBlendMode(id, data['blendMode'] as BlendMode);
+      if (typeof data['locked'] === 'boolean') setLocked(id, data['locked']);
+      break;
+    }
+  }
+}
+
+/**
+ * Apply a frame structure patch (add / remove / reorder / set_duration).
+ */
+function applyFramePatch(patch: FramePatch): void {
+  switch (patch.action) {
+    case 'add':
+      // Insert a frame; afterIndex = frameIndex - 1 so the new frame lands at frameIndex
+      addFrame({ afterIndex: (patch.frameIndex ?? getFrames().length) - 1 });
+      break;
+    case 'remove':
+      if (patch.frameIndex !== undefined) removeFrame(patch.frameIndex);
+      break;
+    case 'reorder':
+      if (patch.fromIndex !== undefined && patch.toIndex !== undefined)
+        reorderFrame(patch.fromIndex, patch.toIndex);
+      break;
+    case 'set_duration':
+      if (patch.frameIndex !== undefined)
+        setFrameDuration(patch.frameIndex, patch.durationMs ?? null);
+      break;
+  }
+}
+
+/**
+ * Recomposite all visible layers into the render buffer.
+ * Mirrors the recomposite logic in canvas-init-plugin / file-open.
+ */
+function recomposite(): void {
+  const currentFrame = getCurrentFrame();
+  const layers = getLayers();
+  const result = composite(
+    layers,
+    currentFrame.pixelData,
+    canvasState.canvasWidth,
+    canvasState.canvasHeight,
+  );
+  setRenderBuffer(result);
+}