pixelweaver 0.1.0

package/src/lib/history/action-log.test.ts

@@ -0,0 +1,168 @@
+/**
+ * Tests for the Action Log reactive state module.
+ *
+ * These tests exercise the action log's sync, filter, toggle, delete,
+ * and select operations. Since the action log syncs from the dispatcher,
+ * we set up the dispatcher with registered commands and dispatch them
+ * to populate the semantic log and undo stack.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import type { Command, CommandDefinition } from '../core/commands.js';
+import type { CommandType, ParamsOf } from '../core/command-params.js';
+import { commandRegistry } from '../core/registries.svelte.js';
+import { dispatch, _resetForTesting as resetDispatcher } from '../core/dispatcher.js';
+import { actionLog } from './action-log.svelte.js';
+
+// --- Helpers ---
+
+function registerTestCommand(name: string, description: string): void {
+  const def: CommandDefinition = {
+    execute() { /* no-op for test */ },
+    undo() { /* no-op for test */ },
+    describe: () => description,
+    tier: 'frame',
+  };
+  commandRegistry.set(name, def);
+}
+
+// Typed overload: validates params when type is a known command literal
+function makeAndDispatch<T extends CommandType>(type: T, params: ParamsOf<T>): Command;
+// String fallback: for dynamic/unknown command types in tests
+function makeAndDispatch(type: string, params?: Record<string, unknown>): Command;
+function makeAndDispatch(type: string, params: Record<string, unknown> = {}): Command {
+  const cmd: Command = {
+    type,
+    plugin: 'test/plugin',
+    version: '1.0.0',
+    params,
+    timestamp: Date.now(),
+    id: crypto.randomUUID(),
+  };
+  dispatch(cmd);
+  return cmd;
+}
+
+// --- Tests ---
+
+describe('Action Log State', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    // Re-register test commands after dispatcher reset clears callbacks
+    registerTestCommand('draw_pixel', 'Drew pixel');
+    registerTestCommand('fill_rect', 'Filled rectangle');
+    registerTestCommand('set_color', 'Set color');
+  });
+
+  it('should sync entries from the dispatcher semantic log', () => {
+    const cmd1 = makeAndDispatch('draw_pixel', { x: 0, y: 0 });
+    const cmd2 = makeAndDispatch('fill_rect', { x: 1, y: 1, w: 5, h: 5 });
+
+    actionLog.syncFromDispatcher();
+
+    const entries = actionLog.getEntries();
+    expect(entries).toHaveLength(2);
+    expect(entries[0]?.commandId).toBe(cmd1.id);
+    expect(entries[0]?.type).toBe('draw_pixel');
+    expect(entries[0]?.description).toBe('Drew pixel');
+    expect(entries[1]?.commandId).toBe(cmd2.id);
+    expect(entries[1]?.type).toBe('fill_rect');
+  });
+
+  it('should filter entries by query string matching description', () => {
+    makeAndDispatch('draw_pixel', { x: 0, y: 0 });
+    makeAndDispatch('fill_rect', { x: 1, y: 1, w: 5, h: 5 });
+    makeAndDispatch('set_color', { color: '#ff0000' });
+
+    actionLog.syncFromDispatcher();
+    actionLog.setFilterQuery('pixel');
+
+    const filtered = actionLog.getFilteredEntries();
+    expect(filtered).toHaveLength(1);
+    expect(filtered[0]?.type).toBe('draw_pixel');
+  });
+
+  it('should filter entries by query string matching command type', () => {
+    makeAndDispatch('draw_pixel', { x: 0, y: 0 });
+    makeAndDispatch('fill_rect', { x: 1, y: 1, w: 5, h: 5 });
+
+    actionLog.syncFromDispatcher();
+    actionLog.setFilterQuery('fill_rect');
+
+    const filtered = actionLog.getFilteredEntries();
+    expect(filtered).toHaveLength(1);
+    expect(filtered[0]?.type).toBe('fill_rect');
+  });
+
+  it('should return all entries when filter query is empty', () => {
+    makeAndDispatch('draw_pixel');
+    makeAndDispatch('fill_rect');
+    makeAndDispatch('set_color');
+
+    actionLog.syncFromDispatcher();
+    actionLog.setFilterQuery('');
+
+    expect(actionLog.getFilteredEntries()).toHaveLength(3);
+  });
+
+  it('should toggle an entry between enabled and disabled', () => {
+    const cmd = makeAndDispatch('draw_pixel', { x: 5, y: 5 });
+    actionLog.syncFromDispatcher();
+
+    const entry = actionLog.getEntry(cmd.id);
+    expect(entry?.enabled).toBe(true);
+
+    actionLog.toggleEntry(cmd.id);
+    expect(actionLog.getEntry(cmd.id)?.enabled).toBe(false);
+
+    actionLog.toggleEntry(cmd.id);
+    expect(actionLog.getEntry(cmd.id)?.enabled).toBe(true);
+  });
+
+  it('should delete an entry from the log', () => {
+    const cmd1 = makeAndDispatch('draw_pixel');
+    const cmd2 = makeAndDispatch('fill_rect');
+    actionLog.syncFromDispatcher();
+    expect(actionLog.getEntries()).toHaveLength(2);
+
+    actionLog.deleteEntry(cmd1.id);
+    expect(actionLog.getEntries()).toHaveLength(1);
+    expect(actionLog.getEntry(cmd1.id)).toBeUndefined();
+    expect(actionLog.getEntry(cmd2.id)).toBeDefined();
+  });
+
+  it('should clear selection when deleting the selected entry', () => {
+    const cmd = makeAndDispatch('draw_pixel');
+    actionLog.syncFromDispatcher();
+
+    actionLog.selectEntry(cmd.id);
+    expect(actionLog.getSelectedEntryId()).toBe(cmd.id);
+
+    actionLog.deleteEntry(cmd.id);
+    expect(actionLog.getSelectedEntryId()).toBeNull();
+  });
+
+  it('should select an entry by ID', () => {
+    const cmd1 = makeAndDispatch('draw_pixel');
+    const cmd2 = makeAndDispatch('fill_rect');
+    actionLog.syncFromDispatcher();
+
+    actionLog.selectEntry(cmd1.id);
+    expect(actionLog.getSelectedEntryId()).toBe(cmd1.id);
+
+    actionLog.selectEntry(cmd2.id);
+    expect(actionLog.getSelectedEntryId()).toBe(cmd2.id);
+  });
+
+  it('should preserve enabled states across sync', () => {
+    const cmd = makeAndDispatch('draw_pixel');
+    actionLog.syncFromDispatcher();
+
+    actionLog.toggleEntry(cmd.id);
+    expect(actionLog.getEntry(cmd.id)?.enabled).toBe(false);
+
+    // Sync again -- should preserve the disabled state
+    actionLog.syncFromDispatcher();
+    expect(actionLog.getEntry(cmd.id)?.enabled).toBe(false);
+  });
+});

package/src/lib/history/history-commands.ts

@@ -0,0 +1,403 @@
+/**
+ * History Commands Plugin -- registers meta-commands that manipulate the
+ * action log itself.
+ *
+ * These are 'project' tier commands that allow the user to reorder, edit,
+ * toggle, and delete entries in the semantic action log. Unlike regular
+ * commands that modify pixel data, these commands modify the history.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import type { Command } from '../core/commands.js';
+import { actionLog } from './action-log.svelte.js';
+import { applyReorder } from './replay-engine.js';
+import { exportSpec, importSpec, type SpecDocument } from './spec-format.js';
+import { macroSystem } from './macros.svelte.js';
+import { dispatch } from '../core/dispatcher.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import { notificationState } from '../ui/notifications/notification-state.svelte.js';
+import { downloadFile } from '../export/download.js';
+import DownloadIcon from '~icons/lucide/download';
+import UploadIcon from '~icons/lucide/upload';
+import TrashIcon from '~icons/lucide/trash-2';
+import CircleDotIcon from '~icons/lucide/circle-dot';
+import SquareIcon from '~icons/lucide/square';
+
+type ReorderSnapshot = { previousOrder: string[] };
+type EditParamsSnapshot = { oldParams: Record<string, unknown> };
+type ToggleSnapshot = { wasEnabled: boolean };
+type DeleteActionSnapshot = { entry: Record<string, unknown>; index: number };
+
+export const historyCommandsPlugin: PluginModule = {
+  name: 'builtin/history',
+  version: '1.0.0',
+  description: 'Meta-commands for manipulating the action log',
+  dependencies: [],
+
+  register(api) {
+    // --- reorder_actions ---
+    // Reorder the action log entries and replay to produce a new buffer.
+    api.addCommand('reorder_actions', {
+      tier: 'project',
+
+      execute(params) {
+        const newOrder = params["newOrder"];
+        const width = params["width"];
+        const height = params["height"];
+        const layerId = params["layerId"];
+
+        // Capture previous order as snapshot for undo
+        const snapshot: ReorderSnapshot = {
+          previousOrder: actionLog.getEntries().map((e) => e.commandId),
+        };
+
+        applyReorder(newOrder, width, height, layerId);
+        return snapshot;
+      },
+
+      undo(params, _ctx, snapshot) {
+        const typed = snapshot as ReorderSnapshot | undefined;
+        const width = params["width"];
+        const height = params["height"];
+        const layerId = params["layerId"];
+
+        if (typed?.previousOrder) {
+          applyReorder(typed.previousOrder, width, height, layerId);
+        }
+      },
+
+      describe() {
+        return 'Reordered action history';
+      },
+    });
+
+    // --- edit_action_params ---
+    // Edit the params of an existing action log entry.
+    api.addCommand('edit_action_params', {
+      tier: 'project',
+
+      execute(params) {
+        const entryId = params["entryId"];
+        const newParams = params["newParams"];
+
+        const entry = actionLog.getEntry(entryId);
+        if (!entry) return;
+
+        // Capture old params as snapshot for undo
+        const snapshot: EditParamsSnapshot = { oldParams: { ...entry.params } };
+
+        // Update the entry's params
+        Object.assign(entry.params, newParams);
+        return snapshot;
+      },
+
+      undo(params, _ctx, snapshot) {
+        const entryId = params["entryId"];
+        const typed = snapshot as EditParamsSnapshot | undefined;
+
+        const entry = actionLog.getEntry(entryId);
+        if (!entry || !typed) return;
+
+        // Restore old params (replace entirely to avoid leftover keys).
+        // Reflect.deleteProperty avoids the no-dynamic-delete rule which
+        // targets the literal `delete expr[key]` syntax only.
+        for (const key of Object.keys(entry.params)) {
+          Reflect.deleteProperty(entry.params, key);
+        }
+        Object.assign(entry.params, typed.oldParams);
+      },
+
+      describe(params) {
+        return `Edited params of action "${String(params["entryId"])}"`;
+      },
+    });
+
+    // --- toggle_action ---
+    // Toggle an action log entry's enabled state.
+    api.addCommand('toggle_action', {
+      tier: 'project',
+
+      execute(params) {
+        const entryId = params["entryId"];
+        const entry = actionLog.getEntry(entryId);
+        let snapshot: ToggleSnapshot | undefined;
+        if (entry) {
+          snapshot = { wasEnabled: entry.enabled };
+        }
+        actionLog.toggleEntry(entryId);
+        return snapshot;
+      },
+
+      undo(params, _ctx, snapshot) {
+        const entryId = params["entryId"];
+        const entry = actionLog.getEntry(entryId);
+        if (!entry) return;
+
+        const typed = snapshot as ToggleSnapshot | undefined;
+        if (!typed) return;
+
+        // Restore previous enabled state (toggle only if current differs from snapshot)
+        if (entry.enabled !== typed.wasEnabled) {
+          actionLog.toggleEntry(entryId);
+        }
+      },
+
+      describe(params) {
+        const entry = actionLog.getEntry(params["entryId"]);
+        return entry?.enabled
+          ? `Enabled action "${String(params["entryId"])}"`
+          : `Disabled action "${String(params["entryId"])}"`;
+      },
+    });
+
+    // --- delete_action ---
+    // Remove an action log entry.
+    api.addCommand('delete_action', {
+      tier: 'project',
+
+      execute(params) {
+        const entryId = params["entryId"];
+        const entry = actionLog.getEntry(entryId);
+        let snapshot: DeleteActionSnapshot | undefined;
+        if (entry) {
+          // Capture snapshot and position for undo
+          const entries = actionLog.getEntries();
+          snapshot = {
+            entry: { ...entry },
+            index: entries.findIndex((e) => e.commandId === entryId),
+          };
+        }
+        actionLog.deleteEntry(entryId);
+        return snapshot;
+      },
+
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as DeleteActionSnapshot | undefined;
+        if (!typed) return;
+
+        // Re-insert the entry at its original position
+        const entries = actionLog.getEntries();
+        entries.splice(typed.index, 0, typed.entry as never);
+      },
+
+      describe(params) {
+        return `Deleted action "${String(params["entryId"])}"`;
+      },
+    });
+
+    // --- export_spec ---
+    // Serialize the current action log to a JSON spec document and trigger
+    // a browser download. Non-undoable: this is a read-only operation.
+    api.addCommand('export_spec', {
+      tier: 'project',
+      undoable: false,
+      label: 'Export Spec',
+      category: 'History',
+      icon: DownloadIcon,
+
+      async execute() {
+        const spec = exportSpec(
+          actionLog.getEntries(),
+          canvasState.canvasWidth,
+          canvasState.canvasHeight,
+        );
+        const json = JSON.stringify(spec, null, 2);
+        const blob = new Blob([json], { type: 'application/json' });
+        const filename = `pixelweaver-spec-${String(Date.now())}.json`;
+        await downloadFile({
+          blob,
+          filename,
+          filterName: 'JSON Spec',
+          filterExtensions: ['json'],
+        });
+
+        notificationState.push({
+          id: 'export-spec-success',
+          message: `Exported spec with ${String(spec.commands.length)} command(s)`,
+          type: 'info',
+          autoDismissMs: 3000,
+        });
+      },
+
+      undo() { /* non-undoable */ },
+
+      describe() {
+        return 'Exported spec';
+      },
+    });
+
+    // --- import_spec ---
+    // Import a spec document (passed as a 'spec' param) and dispatch its
+    // commands. The file picker UI lives in ActionLogPanel; this command
+    // only accepts an already-parsed SpecDocument. Non-undoable: the
+    // dispatched child commands are individually undoable.
+    api.addCommand('import_spec', {
+      tier: 'project',
+      undoable: false,
+      label: 'Import Spec',
+      category: 'History',
+      icon: UploadIcon,
+
+      execute(params) {
+        const spec = params["spec"] as SpecDocument | undefined;
+        if (!spec) {
+          notificationState.push({
+            id: 'import-spec-missing',
+            message: 'Import spec: no spec provided',
+            type: 'warning',
+            autoDismissMs: 4000,
+          });
+          return;
+        }
+
+        let commands: { type: string; params: Record<string, unknown> }[];
+        try {
+          commands = importSpec(spec);
+        } catch (err) {
+          notificationState.push({
+            id: 'import-spec-invalid',
+            message: `Import spec failed: ${(err as Error).message}`,
+            type: 'warning',
+            autoDismissMs: 5000,
+          });
+          return;
+        }
+
+        // Dispatch each imported command through the normal dispatcher
+        // pipeline so they are individually recorded in the undo stack.
+        let dispatched = 0;
+        for (const cmd of commands) {
+          const command: Command = {
+            type: cmd.type,
+            plugin: 'builtin/history',
+            version: '1.0.0',
+            params: cmd.params,
+            timestamp: Date.now(),
+            id: crypto.randomUUID(),
+          };
+          try {
+            dispatch(command);
+            dispatched++;
+          } catch (err) {
+            // Skip commands whose types are not registered; report in notification.
+            console.warn(`import_spec: skipping command "${cmd.type}"`, err);
+          }
+        }
+
+        notificationState.push({
+          id: 'import-spec-success',
+          message: `Imported ${String(dispatched)}/${String(commands.length)} command(s) from spec`,
+          type: 'info',
+          autoDismissMs: 3000,
+        });
+      },
+
+      undo() { /* non-undoable -- child commands handle their own undo */ },
+
+      describe() {
+        return 'Imported spec';
+      },
+    });
+
+    // --- clear_action_log ---
+    // Clear the local action log view. Non-undoable: clearing history
+    // should not itself be entered into history.
+    api.addCommand('clear_action_log', {
+      tier: 'project',
+      undoable: false,
+      label: 'Clear Action Log',
+      category: 'History',
+      icon: TrashIcon,
+
+      execute() {
+        const count = actionLog.getEntries().length;
+        actionLog.clearAll();
+        notificationState.push({
+          id: 'clear-action-log',
+          message: `Cleared ${String(count)} action log entr${count === 1 ? 'y' : 'ies'}`,
+          type: 'info',
+          autoDismissMs: 3000,
+        });
+      },
+
+      undo() { /* non-undoable */ },
+
+      describe() {
+        return 'Cleared action log';
+      },
+    });
+
+    // --- record_macro_start ---
+    // Begin recording dispatched commands into a new macro buffer.
+    api.addCommand('record_macro_start', {
+      tier: 'project',
+      undoable: false,
+      label: 'Start Recording Macro',
+      category: 'History',
+      icon: CircleDotIcon,
+
+      execute() {
+        if (macroSystem.recording) {
+          notificationState.push({
+            id: 'record-macro-already',
+            message: 'Macro recording already in progress',
+            type: 'info',
+            autoDismissMs: 3000,
+          });
+          return;
+        }
+        macroSystem.startRecording();
+        notificationState.push({
+          id: 'record-macro-start',
+          message: 'Macro recording started',
+          type: 'info',
+          autoDismissMs: 3000,
+        });
+      },
+
+      undo() { /* non-undoable */ },
+
+      describe() {
+        return 'Started macro recording';
+      },
+    });
+
+    // --- record_macro_stop ---
+    // Stop recording and finalize the macro. Accepts optional 'name' and
+    // 'coordMode' params; defaults to a timestamped name and absolute mode.
+    api.addCommand('record_macro_stop', {
+      tier: 'project',
+      undoable: false,
+      label: 'Stop Recording Macro',
+      category: 'History',
+      icon: SquareIcon,
+
+      execute(params) {
+        if (!macroSystem.recording) {
+          notificationState.push({
+            id: 'record-macro-not-recording',
+            message: 'No macro recording in progress',
+            type: 'info',
+            autoDismissMs: 3000,
+          });
+          return;
+        }
+        const name = params["name"] ?? `Macro ${new Date().toLocaleTimeString()}`;
+        const coordMode = params["coordMode"] ?? 'absolute';
+        const macro = macroSystem.stopRecording(name, coordMode);
+        notificationState.push({
+          id: 'record-macro-stop',
+          message: `Recorded macro "${macro.name}" with ${String(macro.commands.length)} command(s)`,
+          type: 'info',
+          autoDismissMs: 3000,
+        });
+      },
+
+      undo() { /* non-undoable */ },
+
+      describe() {
+        return 'Stopped macro recording';
+      },
+    });
+  },
+};