pixelweaver 0.1.0

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

@@ -0,0 +1,275 @@
+/**
+ * File Commands -- New Project, Open, Save, Export.
+ *
+ * Most execute() functions delegate to dialogState to open the relevant
+ * dialog; the heavy lifting lives in those dialog components.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { dialogState } from './dialog-state.svelte.js';
+import { openFile } from './file-open.js';
+import { gatherSnapshot, applySnapshot } from '../save/project-snapshot.js';
+import { saveAs, saveToPath, openProject } from '../save/storage.js';
+import { saveState } from '../save/save-state.svelte.js';
+import { addRecentProject } from '../save/recent-projects.js';
+import { markSaveCheckpoint } from '../core/dispatcher.js';
+import { composite } from '../layers/compositor.js';
+import { getLayers } from '../layers/layer-tree.svelte.js';
+import { getCurrentFrame } from '../animation/frame-model.svelte.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import { setRenderBuffer } from '../canvas/render-state.svelte.js';
+import FilePlus from '~icons/lucide/file-plus';
+import FolderOpen from '~icons/lucide/folder-open';
+import Save from '~icons/lucide/save';
+import SaveAll from '~icons/lucide/save-all';
+import Download from '~icons/lucide/download';
+import FileArchive from '~icons/lucide/file-archive';
+
+/**
+ * Flatten all visible layers into the render buffer after loading a project.
+ * Mirrors the recomposite logic in canvas-init-plugin and file-open.
+ */
+function recompositeAfterLoad(): void {
+  const currentFrame = getCurrentFrame();
+  const layers = getLayers();
+  const result = composite(
+    layers,
+    currentFrame.pixelData,
+    canvasState.canvasWidth,
+    canvasState.canvasHeight,
+  );
+  setRenderBuffer(result);
+}
+
+export const fileCommandsPlugin: PluginModule = {
+  name: 'ui/file-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // New Project command (actual logic handled by dialog, dispatched via event)
+    api.addCommand('new_project_dialog', {
+      tier: 'project',
+      execute() { dialogState.openNewProject(); },
+      undo() { /* Not undoable */ },
+      describe() { return 'Opened new project dialog'; },
+      label: 'New Project',
+      category: 'File',
+      icon: FilePlus,
+    });
+    api.addMenuItem('menu:file:new', {
+      commandId: 'new_project_dialog',
+      menuPath: 'file',
+      group: 'new',
+      order: 10,
+      label: 'New Project',
+    });
+
+    // Open Project (.pwv file)
+    api.addCommand('open_project', {
+      tier: 'project',
+      async execute() {
+        try {
+          const result = await openProject();
+          if (!result) return; // user cancelled
+
+          applySnapshot(result.snapshot);
+          saveState.savePath = result.path;
+          saveState.saveFormat = result.format;
+          saveState.projectName = result.snapshot.name || 'Untitled';
+
+          recompositeAfterLoad();
+
+          const snap = result.snapshot;
+          addRecentProject({
+            name: snap.name || 'Untitled',
+            path: result.path,
+            timestamp: Date.now(),
+            dimensions: `${(snap.canvas as { width: number; height: number }).width}x${(snap.canvas as { width: number; height: number }).height}`,
+          });
+
+          api.notify({
+            id: 'project-opened',
+            message: `Opened "${result.snapshot.name || result.path}"`,
+            type: 'success',
+            autoDismissMs: 3000,
+          });
+        } catch (err) {
+          console.error('Failed to open project:', err);
+          api.notify({
+            id: 'project-open-error',
+            message: `Failed to open project: ${err instanceof Error ? err.message : String(err)}`,
+            type: 'warning',
+            autoDismissMs: 5000,
+          });
+        }
+      },
+      undo() {},
+      describe() { return 'Opened project'; },
+      label: 'Open Project...',
+      category: 'File',
+      icon: FileArchive,
+    });
+    api.addMenuItem('menu:file:open-project', {
+      commandId: 'open_project',
+      menuPath: 'file',
+      group: 'open',
+      order: 5,
+      label: 'Open Project...',
+    });
+
+    // Open file (image import into current project)
+    api.addCommand('open_file_dialog', {
+      tier: 'project',
+      execute() { void openFile(); },
+      undo() {},
+      describe() { return 'Opened file dialog'; },
+      label: 'Open File...',
+      category: 'File',
+      defaultShortcut: 'Ctrl+O',
+      icon: FolderOpen,
+    });
+    api.addMenuItem('menu:file:open', {
+      commandId: 'open_file_dialog',
+      menuPath: 'file',
+      group: 'open',
+      order: 10,
+      label: 'Open File...',
+    });
+
+    // Save (re-save to known path, or Save As if no path yet)
+    api.addCommand('save_project', {
+      tier: 'project',
+      async execute() {
+        try {
+          const snapshot = gatherSnapshot(saveState.projectName);
+
+          if (saveState.hasSavePath && saveState.savePath && saveState.saveFormat) {
+            // Re-save silently to existing location
+            await saveToPath(snapshot, saveState.savePath, saveState.saveFormat);
+            addRecentProject({
+              name: saveState.projectName,
+              path: saveState.savePath,
+              timestamp: Date.now(),
+              dimensions: `${canvasState.canvasWidth}x${canvasState.canvasHeight}`,
+            });
+            markSaveCheckpoint();
+            api.notify({
+              id: 'project-saved',
+              message: `Saved "${saveState.projectName}"`,
+              type: 'success',
+              autoDismissMs: 2000,
+            });
+          } else {
+            // First save -- show Save As dialog
+            const result = await saveAs(snapshot);
+            if (!result) return; // user cancelled
+
+            saveState.savePath = result.path;
+            saveState.saveFormat = result.format;
+            addRecentProject({
+              name: saveState.projectName,
+              path: result.path,
+              timestamp: Date.now(),
+              dimensions: `${canvasState.canvasWidth}x${canvasState.canvasHeight}`,
+            });
+            markSaveCheckpoint();
+            api.notify({
+              id: 'project-saved',
+              message: `Saved "${saveState.projectName}"`,
+              type: 'success',
+              autoDismissMs: 2000,
+            });
+          }
+        } catch (err) {
+          console.error('Failed to save project:', err);
+          api.notify({
+            id: 'project-save-error',
+            message: `Failed to save: ${err instanceof Error ? err.message : String(err)}`,
+            type: 'warning',
+            autoDismissMs: 5000,
+          });
+        }
+      },
+      undo() {},
+      describe() { return 'Saved project'; },
+      label: 'Save',
+      category: 'File',
+      defaultShortcut: 'Ctrl+S',
+      icon: Save,
+    });
+    api.addMenuItem('menu:file:save', {
+      commandId: 'save_project',
+      menuPath: 'file',
+      group: 'save',
+      order: 10,
+      label: 'Save',
+    });
+
+    // Save As (always show dialog)
+    api.addCommand('save_project_as', {
+      tier: 'project',
+      async execute() {
+        try {
+          const snapshot = gatherSnapshot(saveState.projectName);
+          const result = await saveAs(snapshot);
+          if (!result) return; // user cancelled
+
+          saveState.savePath = result.path;
+          saveState.saveFormat = result.format;
+          addRecentProject({
+            name: saveState.projectName,
+            path: result.path,
+            timestamp: Date.now(),
+            dimensions: `${canvasState.canvasWidth}x${canvasState.canvasHeight}`,
+          });
+          markSaveCheckpoint();
+          api.notify({
+            id: 'project-saved',
+            message: `Saved "${saveState.projectName}" to ${result.path}`,
+            type: 'success',
+            autoDismissMs: 3000,
+          });
+        } catch (err) {
+          console.error('Failed to save project:', err);
+          api.notify({
+            id: 'project-save-error',
+            message: `Failed to save: ${err instanceof Error ? err.message : String(err)}`,
+            type: 'warning',
+            autoDismissMs: 5000,
+          });
+        }
+      },
+      undo() {},
+      describe() { return 'Saved project as...'; },
+      label: 'Save As...',
+      category: 'File',
+      defaultShortcut: 'Ctrl+Shift+S',
+      icon: SaveAll,
+    });
+    api.addMenuItem('menu:file:save-as', {
+      commandId: 'save_project_as',
+      menuPath: 'file',
+      group: 'save',
+      order: 20,
+      label: 'Save As...',
+    });
+
+    // Export dialog
+    api.addCommand('export_dialog', {
+      tier: 'project',
+      execute() { dialogState.openExport(); },
+      undo() {},
+      describe() { return 'Opened export dialog'; },
+      label: 'Export...',
+      category: 'File',
+      icon: Download,
+    });
+    api.addMenuItem('menu:file:export-dialog', {
+      commandId: 'export_dialog',
+      menuPath: 'file/export',
+      group: 'export',
+      order: 10,
+      label: 'Export...',
+    });
+  },
+};

package/src/lib/ui/file-open.ts

@@ -0,0 +1,99 @@
+/**
+ * File Open handler -- opens a browser file picker filtered to supported
+ * import formats, then routes the selected file to the matching importer plugin.
+ *
+ * After a successful import, triggers a recomposite so the canvas displays
+ * the imported content.
+ */
+
+import { importerRegistry } from '../core/registries.svelte.js';
+import { composite } from '../layers/compositor.js';
+import { getLayers } from '../layers/layer-tree.svelte.js';
+import { getCurrentFrame } from '../animation/frame-model.svelte.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import { setRenderBuffer } from '../canvas/render-state.svelte.js';
+
+/**
+ * Opens a file picker dialog filtered to supported import formats,
+ * then routes the selected file to the matching importer plugin.
+ */
+export async function openFile(): Promise<void> {
+  // 1. Build accept string from all registered importers
+  const importers = importerRegistry.getAll();
+  if (importers.size === 0) {
+    console.warn('No importers registered');
+    return;
+  }
+
+  // Collect all extensions from every registered importer
+  const allExtensions: string[] = [];
+  for (const importer of importers.values()) {
+    allExtensions.push(...importer.extensions);
+  }
+
+  // Build the accept attribute: ".ase,.aseprite,.piskel,.png"
+  const accept = allExtensions.map((ext) => `.${ext}`).join(',');
+
+  // 2. Create a hidden file input and trigger the picker
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = accept;
+
+  const file = await new Promise<File | null>((resolve) => {
+    input.onchange = () => { resolve(input.files?.[0] ?? null); };
+    // Fallback: if the user cancels, the change event may not fire in all browsers.
+    // Listen for window re-focus and resolve null after a short delay.
+    const onFocus = () => {
+      setTimeout(() => {
+        if (!input.files?.length) resolve(null);
+        window.removeEventListener('focus', onFocus);
+      }, 300);
+    };
+    window.addEventListener('focus', onFocus);
+    input.click();
+  });
+
+  if (!file) return;
+
+  // 3. Match file extension to a registered importer
+  const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
+  let matchedImporter = null;
+  for (const importer of importers.values()) {
+    if (importer.extensions.includes(ext)) {
+      matchedImporter = importer;
+      break;
+    }
+  }
+
+  if (!matchedImporter) {
+    console.warn(`No importer found for .${ext} files`);
+    return;
+  }
+
+  // 4. Run the importer
+  try {
+    await matchedImporter.import(file, {});
+  } catch (err) {
+    console.error(`Import failed for ${file.name}:`, err);
+    return;
+  }
+
+  // 5. Recomposite so the canvas shows the imported data
+  recompositeAfterImport();
+}
+
+/**
+ * Flatten all visible layers into the render buffer.
+ * Mirrors the recomposite logic in canvas-init-plugin.
+ */
+function recompositeAfterImport(): void {
+  const currentFrame = getCurrentFrame();
+  const layers = getLayers();
+  const result = composite(
+    layers,
+    currentFrame.pixelData,
+    canvasState.canvasWidth,
+    canvasState.canvasHeight,
+  );
+  setRenderBuffer(result);
+}

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

@@ -0,0 +1,93 @@
+/**
+ * Help Commands -- About, Keyboard Shortcuts, Report a Bug.
+ *
+ * The About command mounts AboutDialog.svelte imperatively into a fresh
+ * div on document.body; the dialog unmounts itself via its onClose prop.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { mount, unmount } from 'svelte';
+import AboutDialog from './AboutDialog.svelte';
+import { notificationState } from './notifications/notification-state.svelte.js';
+import Info from '~icons/lucide/info';
+import Keyboard from '~icons/lucide/keyboard';
+import Bug from '~icons/lucide/bug';
+
+export const helpCommandsPlugin: PluginModule = {
+  name: 'ui/help-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('about', {
+      tier: 'project',
+      execute() {
+        const target = document.createElement('div');
+        document.body.appendChild(target);
+        const instance = mount(AboutDialog, {
+          target,
+          props: {
+            onClose: () => {
+              void unmount(instance);
+              target.remove();
+            },
+          },
+        });
+      },
+      undo() {},
+      describe() { return 'Opened About dialog'; },
+      label: 'About PixelWeaver',
+      category: 'Help',
+      icon: Info,
+    });
+    api.addMenuItem('menu:help:about', {
+      commandId: 'about',
+      menuPath: 'help',
+      group: 'info',
+      order: 10,
+      label: 'About PixelWeaver',
+    });
+
+    api.addCommand('keyboard_shortcuts', {
+      tier: 'project',
+      execute() {
+        notificationState.push({
+          id: 'shortcuts',
+          message: 'Ctrl+Z Undo | Ctrl+Y Redo | Ctrl+A Select All | Space Play | B Pencil | E Eraser | G Bucket | = Zoom In | - Zoom Out',
+          type: 'info',
+        });
+      },
+      undo() {},
+      describe() { return 'Opened keyboard shortcuts'; },
+      label: 'Keyboard Shortcuts',
+      category: 'Help',
+      icon: Keyboard,
+    });
+    api.addMenuItem('menu:help:keyboard-shortcuts', {
+      commandId: 'keyboard_shortcuts',
+      menuPath: 'help',
+      group: 'info',
+      order: 20,
+      label: 'Keyboard Shortcuts',
+    });
+
+    api.addCommand('report_bug', {
+      tier: 'project',
+      execute() {
+        // Placeholder URL -- update when the real repository is published
+        window.open('https://github.com/user/pixelweaver/issues', '_blank');
+      },
+      undo() {},
+      describe() { return 'Opened bug report'; },
+      label: 'Report a Bug',
+      category: 'Help',
+      icon: Bug,
+    });
+    api.addMenuItem('menu:help:report-bug', {
+      commandId: 'report_bug',
+      menuPath: 'help',
+      group: 'info',
+      order: 30,
+      label: 'Report a Bug',
+    });
+  },
+};

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

@@ -0,0 +1,181 @@
+/**
+ * Image Commands -- Resize Canvas, Crop to Selection, Flatten Image,
+ * Canvas Size (info).
+ *
+ * Resize opens ResizeDialog via dialogState.openResizeCanvas(). Crop and
+ * Flatten have partial implementations -- actual pixel remapping /
+ * compositing is still a TODO in layer-tree.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import { dialogState } from './dialog-state.svelte.js';
+import * as layerTree from '../layers/layer-tree.svelte.js';
+import type { LayerTreeState } from '../layers/layer-types.js';
+import { notificationState } from './notifications/notification-state.svelte.js';
+import Move from '~icons/lucide/move';
+import Crop from '~icons/lucide/crop';
+import Ruler from '~icons/lucide/ruler';
+import Layers from '~icons/lucide/layers';
+
+// Snapshot only the canvas dimensions. Pixel buffers are stored per-layer
+// per-frame and are NOT resized when canvasState.canvasWidth/Height change,
+// so restoring the dimensions is sufficient to revert these ops.
+interface CanvasSizeSnapshot {
+  width: number;
+  height: number;
+}
+
+// For flatten_image we snapshot the entire serialized layer tree. Since
+// deepSnapshotLayer preserves layer IDs, frame pixel data (keyed by layer id)
+// remains correctly associated after deserialize.
+interface LayerTreeSnapshot {
+  tree: LayerTreeState;
+}
+
+export const imageCommandsPlugin: PluginModule = {
+  name: 'ui/image-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // Capture once: stable object whose methods read live selection state.
+    const selection = api.getSelection();
+
+    api.addCommand('resize_canvas', {
+      tier: 'project',
+      execute() { dialogState.openResizeCanvas(); },
+      undo() { /* Not undoable -- resize is handled inside the dialog */ },
+      describe() { return 'Opened resize canvas dialog'; },
+      label: 'Resize Canvas...',
+      category: 'Image',
+      icon: Move,
+    });
+    api.addMenuItem('menu:image:resize-canvas', {
+      commandId: 'resize_canvas',
+      menuPath: 'image',
+      group: 'size',
+      order: 10,
+      label: 'Resize Canvas...',
+    });
+
+    api.addCommand('crop_to_selection', {
+      tier: 'project',
+      undoable: true,
+      execute(): CanvasSizeSnapshot | undefined {
+        if (!selection.hasSelection()) {
+          console.warn('crop_to_selection: no selection exists -- select an area first');
+          return;
+        }
+        // Capture pre-crop dimensions so undo can restore them. Pixel data
+        // is not remapped by this operation (still TODO in compositor), so
+        // restoring only width/height is sufficient to revert.
+        const snapshot: CanvasSizeSnapshot = {
+          width: canvasState.canvasWidth,
+          height: canvasState.canvasHeight,
+        };
+        // Compute bounding box of the selection
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const key of selection.getSelectedPixels()) {
+          const [x, y] = key.split(',').map(Number) as [number, number];
+          if (x < minX) minX = x;
+          if (y < minY) minY = y;
+          if (x > maxX) maxX = x;
+          if (y > maxY) maxY = y;
+        }
+        const w = maxX - minX + 1;
+        const h = maxY - minY + 1;
+        // Resize canvas to selection bounds (pixel data remapping requires compositor support)
+        canvasState.canvasWidth = w;
+        canvasState.canvasHeight = h;
+        console.warn('crop_to_selection: canvas resized to selection bounds, but pixel data remapping is not yet implemented');
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const snap = snapshot as CanvasSizeSnapshot | undefined;
+        if (!snap) return;
+        canvasState.canvasWidth = snap.width;
+        canvasState.canvasHeight = snap.height;
+      },
+      describe() { return 'Cropped canvas to selection'; },
+      label: 'Crop to Selection',
+      category: 'Image',
+      icon: Crop,
+    });
+    api.addMenuItem('menu:image:crop-to-selection', {
+      commandId: 'crop_to_selection',
+      menuPath: 'image',
+      group: 'size',
+      order: 20,
+      label: 'Crop to Selection',
+    });
+
+    api.addCommand('flatten_image', {
+      tier: 'project',
+      undoable: true,
+      execute(): LayerTreeSnapshot | undefined {
+        // Merge all pixel layers into the bottom-most one by repeatedly merging the top layer down.
+        // Note: actual pixel compositing is still placeholder in layer-tree's mergeDown.
+        const pixelLayers = layerTree.getAllPixelLayers();
+        if (pixelLayers.length <= 1) return;
+        // Snapshot the pre-flatten tree. deepSnapshotLayer preserves layer
+        // IDs so frame pixel data (keyed by layer id) stays linked after
+        // restore. Must be taken BEFORE mutations.
+        const snapshot: LayerTreeSnapshot = { tree: layerTree.serialize() };
+        // Merge from top to bottom: repeatedly merge the last pixel layer down
+        for (let i = pixelLayers.length - 1; i > 0; i--) {
+          const layer = pixelLayers[i];
+          if (!layer) continue;
+          try {
+            layerTree.mergeDown(layer.id);
+          } catch {
+            // Skip layers that can't merge (e.g. no pixel layer below)
+            break;
+          }
+        }
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const snap = snapshot as LayerTreeSnapshot | undefined;
+        if (!snap) return;
+        layerTree.deserialize(snap.tree);
+      },
+      describe() { return 'Flattened image'; },
+      label: 'Flatten Image',
+      category: 'Image',
+      icon: Layers,
+    });
+    api.addMenuItem('menu:image:flatten', {
+      commandId: 'flatten_image',
+      menuPath: 'image',
+      group: 'flatten',
+      order: 30,
+      label: 'Flatten Image',
+    });
+
+    api.addCommand('canvas_size', {
+      tier: 'project',
+      execute() {
+        const w = canvasState.canvasWidth;
+        const h = canvasState.canvasHeight;
+        notificationState.push({
+          id: 'canvas-size',
+          message: `Canvas: ${String(w)} x ${String(h)}`,
+          type: 'info',
+          autoDismissMs: 3000,
+        });
+      },
+      undo() {},
+      describe() { return 'Opened canvas size dialog'; },
+      label: 'Canvas Size...',
+      category: 'Image',
+      icon: Ruler,
+    });
+    api.addMenuItem('menu:image:canvas-size', {
+      commandId: 'canvas_size',
+      menuPath: 'image',
+      group: 'size',
+      order: 15,
+      label: 'Canvas Size...',
+    });
+  },
+};