pixelweaver 0.1.0

package/src/lib/ui/animation-menu-commands.ts

@@ -0,0 +1,194 @@
+/**
+ * Animation Menu Commands -- Play/Pause, Set Frame Duration dialog, plus
+ * menu items pointing at the add/duplicate/delete frame commands
+ * registered by the animation-commands plugin.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { dispatch as dispatchCommand } from '../core/dispatcher.js';
+import { dialogState } from './dialog-state.svelte.js';
+import * as animPreview from '../animation/animation-preview.svelte.js';
+import { getCurrentFrameIndex } from '../animation/frame-model.svelte.js';
+import { hasFrameClipboard } from '../animation/animation-commands.js';
+import Clock from '~icons/lucide/clock';
+import Play from '~icons/lucide/play';
+
+export const animationMenuCommandsPlugin: PluginModule = {
+  name: 'ui/animation-menu-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // add_frame, duplicate_frame, remove_frame, set_frame_duration are registered by
+    // animation-commands plugin; we only add menu items for them.
+
+    api.addMenuItem('menu:animation:add-frame', {
+      commandId: 'add_frame',
+      menuPath: 'animation',
+      group: 'frames',
+      order: 10,
+      label: 'Add Frame',
+    });
+
+    api.addMenuItem('menu:animation:duplicate-frame', {
+      commandId: 'duplicate_frame',
+      menuPath: 'animation',
+      group: 'frames',
+      order: 20,
+      label: 'Duplicate Frame',
+    });
+
+    api.addMenuItem('menu:animation:delete-frame', {
+      commandId: 'remove_frame',
+      menuPath: 'animation',
+      group: 'frames',
+      order: 30,
+      label: 'Delete Frame',
+    });
+
+    api.addMenuItem('menu:animation:delete-selected', {
+      commandId: 'delete_selected_frames',
+      menuPath: 'animation',
+      group: 'frames',
+      order: 35,
+      label: 'Delete Selected Frames',
+    });
+
+    api.addMenuItem('menu:animation:copy-frame', {
+      commandId: 'copy_frame',
+      menuPath: 'animation',
+      group: 'clipboard',
+      order: 10,
+      label: 'Copy Frame',
+    });
+
+    api.addMenuItem('menu:animation:paste-frame', {
+      commandId: 'paste_frame',
+      menuPath: 'animation',
+      group: 'clipboard',
+      order: 20,
+      label: 'Paste Frame',
+      enabled: () => hasFrameClipboard(),
+    });
+
+    api.addCommand('play_animation', {
+      tier: 'project',
+      execute() {
+        if (animPreview.isPlaying()) {
+          animPreview.pause();
+        } else {
+          animPreview.play();
+        }
+      },
+      undo() {},
+      describe() { return 'Toggled animation playback'; },
+      label: 'Play/Pause',
+      category: 'Animation',
+      defaultShortcut: 'Space',
+      icon: Play,
+    });
+    api.addMenuItem('menu:animation:play', {
+      commandId: 'play_animation',
+      menuPath: 'animation',
+      group: 'playback',
+      order: 40,
+      label: 'Play/Pause',
+    });
+
+    // Wrapper command that prompts for duration then dispatches to the real
+    // set_frame_duration command (which expects index + durationMs params).
+    api.addCommand('set_frame_duration_dialog', {
+      tier: 'project',
+      execute() {
+        const frameIdx = getCurrentFrameIndex();
+        dialogState.openPrompt({
+          title: 'Set Frame Duration',
+          message: 'Enter frame duration in ms (or leave empty for global FPS):',
+          defaultValue: '',
+          placeholder: 'e.g. 100',
+          validate: (value) => {
+            const trimmed = value.trim();
+            // Empty is allowed -- means "reset to global FPS".
+            if (trimmed === '') return null;
+            const ms = parseInt(trimmed, 10);
+            if (isNaN(ms) || ms <= 0 || String(ms) !== trimmed) {
+              return 'Must be a positive integer (or empty for global FPS)';
+            }
+            return null;
+          },
+          onConfirm: (value) => {
+            const trimmed = value.trim();
+            // Empty input resets the per-frame override so the frame follows
+            // the project-wide globalFps again.
+            const durationMs = trimmed === '' ? null : parseInt(trimmed, 10);
+            dispatchCommand({
+              type: 'set_frame_duration',
+              plugin: 'ui/animation-menu-commands',
+              version: '1.0.0',
+              params: { index: frameIdx, durationMs },
+              timestamp: Date.now(),
+              id: crypto.randomUUID(),
+            });
+          },
+        });
+      },
+      undo() {},
+      describe() { return 'Opened frame duration dialog'; },
+      label: 'Set Frame Duration...',
+      category: 'Animation',
+      icon: Clock,
+    });
+    api.addMenuItem('menu:animation:frame-duration', {
+      commandId: 'set_frame_duration_dialog',
+      menuPath: 'animation',
+      group: 'playback',
+      order: 50,
+      label: 'Set Frame Duration...',
+    });
+
+    // --- Context menu: frame ---
+
+    api.addMenuItem('ctx:frame:add', {
+      commandId: 'add_frame',
+      menuPath: 'context/frame',
+      group: 'create',
+      order: 10,
+      label: 'Add Frame',
+    });
+    api.addMenuItem('ctx:frame:duplicate', {
+      commandId: 'duplicate_frame',
+      menuPath: 'context/frame',
+      group: 'create',
+      order: 20,
+      label: 'Duplicate Frame',
+    });
+    api.addMenuItem('ctx:frame:copy', {
+      commandId: 'copy_frame',
+      menuPath: 'context/frame',
+      group: 'clipboard',
+      order: 10,
+      label: 'Copy Frame',
+    });
+    api.addMenuItem('ctx:frame:paste', {
+      commandId: 'paste_frame',
+      menuPath: 'context/frame',
+      group: 'clipboard',
+      order: 20,
+      label: 'Paste Frame',
+      enabled: () => hasFrameClipboard(),
+    });
+    api.addMenuItem('ctx:frame:delete', {
+      commandId: 'remove_frame',
+      menuPath: 'context/frame',
+      group: 'manage',
+      order: 10,
+      label: 'Delete Frame',
+    });
+    api.addMenuItem('ctx:frame:delete-selected', {
+      commandId: 'delete_selected_frames',
+      menuPath: 'context/frame',
+      group: 'manage',
+      order: 15,
+      label: 'Delete Selected Frames',
+    });
+  },
+};

package/src/lib/ui/command-palette/CommandPalette.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+  /**
+   * CommandPalette -- overlay modal for searching and executing commands,
+   * tools, and shortcuts.  Opened via Ctrl+P (bound in the plugin).
+   *
+   * Uses the native <dialog> element for focus trap, ARIA semantics, and
+   * automatic Escape handling. Escape triggers the `cancel` event which we
+   * forward to commandPaletteState.close(). Arrow/Enter keys are still
+   * handled manually since those control our custom list selection.
+   */
+
+  import { commandPaletteState } from './command-palette-state.svelte.js';
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  // Sync native <dialog> open state with the palette state.
+  // Auto-focus the input once the dialog is open.
+  $effect(() => {
+    if (!dialogEl) return;
+    if (commandPaletteState.isOpen && !dialogEl.open) {
+      dialogEl.showModal();
+      // Use a microtask so the DOM has settled after showModal()
+      queueMicrotask(() => inputEl?.focus());
+    } else if (!commandPaletteState.isOpen && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  // Let <dialog> handle Escape via its cancel event. We only need to handle
+  // the custom list-navigation keys here.
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      commandPaletteState.moveDown();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      commandPaletteState.moveUp();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      commandPaletteState.executeSelected();
+    }
+  }
+
+  // Click on the <dialog> itself (not children) means the user clicked the
+  // backdrop area -- close the palette.
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      commandPaletteState.close();
+    }
+  }
+
+  function handleInput(e: Event) {
+    commandPaletteState.query = (e.target as HTMLInputElement).value;
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class="cp-dialog"
+  aria-label="Command palette"
+  onclick={handleDialogClick}
+  onkeydown={handleKeydown}
+  onclose={() => { commandPaletteState.close(); }}
+>
+  {#if commandPaletteState.isOpen}
+    <div class="cp-panel">
+      <input
+        bind:this={inputEl}
+        class="cp-input"
+        type="text"
+        placeholder="Type a command..."
+        role="combobox"
+        aria-controls="cp-listbox"
+        aria-expanded={commandPaletteState.results.length > 0}
+        aria-autocomplete="list"
+        aria-activedescendant={commandPaletteState.results.length > 0
+          ? `cp-option-${String(commandPaletteState.selectedIndex)}`
+          : undefined}
+        value={commandPaletteState.query}
+        oninput={handleInput}
+      />
+
+      <ul id="cp-listbox" class="cp-list" role="listbox">
+        {#each commandPaletteState.results as item, i (item.id)}
+          <li
+            id="cp-option-{i}"
+            class="cp-item"
+            class:cp-item--selected={i === commandPaletteState.selectedIndex}
+            role="option"
+            aria-selected={i === commandPaletteState.selectedIndex}
+            onclick={() => {
+              commandPaletteState.selectedIndex = i;
+              commandPaletteState.executeSelected();
+            }}
+            onmouseenter={() => { commandPaletteState.selectedIndex = i; }}
+          >
+            <span class="cp-item-name">{item.name}</span>
+            {#if item.description}
+              <span class="cp-item-desc">{item.description}</span>
+            {/if}
+            {#if item.shortcutKey}
+              <kbd class="cp-item-kbd">{item.shortcutKey}</kbd>
+            {/if}
+          </li>
+        {/each}
+
+        {#if commandPaletteState.results.length === 0}
+          <li class="cp-empty">No matching commands</li>
+        {/if}
+      </ul>
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  /* Reset native <dialog> UA styles. The palette is positioned near the top
+     of the viewport (not centered), matching the previous overlay layout. */
+  .cp-dialog {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+    width: 100vw;
+    height: 100vh;
+    color: inherit;
+  }
+
+  .cp-dialog[open] {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 15vh;
+    box-sizing: border-box;
+  }
+
+  .cp-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .cp-panel {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    width: min(500px, 90vw);
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  .cp-input {
+    width: 100%;
+    padding: 12px 16px;
+    border: none;
+    border-bottom: 1px solid var(--border);
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 14px;
+  }
+
+  .cp-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .cp-list {
+    list-style: none;
+    overflow-y: auto;
+    margin: 0;
+    padding: 4px 0;
+  }
+
+  .cp-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    cursor: pointer;
+    color: var(--text-primary);
+  }
+
+  .cp-item--selected {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .cp-item-name {
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .cp-item-desc {
+    flex: 1;
+    color: var(--text-secondary);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .cp-item--selected .cp-item-desc {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .cp-item-kbd {
+    margin-left: auto;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    white-space: nowrap;
+  }
+
+  .cp-item--selected .cp-item-kbd {
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+  }
+
+  .cp-empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--text-muted);
+    font-style: italic;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+/**
+ * Command Palette Plugin -- binds the Ctrl+P shortcut to toggle the
+ * palette overlay (rendered directly in App.svelte).
+ */
+
+import type { PluginModule } from '../../core/plugin-loader.js';
+import { commandPaletteState } from './command-palette-state.svelte.js';
+
+export const commandPalettePlugin: PluginModule = {
+  name: 'builtin/command-palette',
+  version: '1.0.0',
+  dependencies: [],
+
+  register(api) {
+    // Command Palette is rendered as a floating overlay in App.svelte,
+    // not as a docked panel. Only the shortcut is registered here.
+
+    api.addShortcut('command-palette.toggle', {
+      key: 'Ctrl+P',
+      description: 'Open command palette',
+      action() {
+        if (commandPaletteState.isOpen) {
+          commandPaletteState.close();
+        } else {
+          commandPaletteState.open();
+        }
+      },
+    });
+  },
+};

package/src/lib/ui/command-palette/command-palette-state.svelte.ts

@@ -0,0 +1,190 @@
+/**
+ * Command Palette State -- reactive singleton for the command palette UI.
+ *
+ * Aggregates commands, tools, and shortcuts from the registries and provides
+ * fuzzy filtering based on user input.  Uses Svelte 5 runes for reactivity.
+ */
+
+import {
+  commandRegistry,
+  toolRegistry,
+  shortcutRegistry,
+} from '../../core/registries.svelte.js';
+import { executeOrDispatch } from '../../core/command-runner.js';
+import type { CommandDefinition } from '../../core/commands.js';
+import { getActiveTool, setActiveTool } from '../../shortcuts/shortcut-state.svelte.js';
+
+// --- Types ---
+
+export interface PaletteItem {
+  /** Unique key used for dedup and execution */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Optional description text */
+  description: string;
+  /** Category tag shown in the UI */
+  category: 'command' | 'tool' | 'shortcut';
+  /** Keyboard shortcut string if one is bound (e.g. "Ctrl+Z") */
+  shortcutKey?: string;
+  /** Callback to execute this item */
+  execute: () => void;
+}
+
+// --- Reactive state ---
+
+let isOpen = $state(false);
+let query = $state('');
+let selectedIndex = $state(0);
+
+// --- Helpers ---
+
+/**
+ * Collect every registered command, tool, and shortcut into a flat list of
+ * PaletteItems.  Called on every filter pass so that newly-registered
+ * extensions appear immediately.
+ */
+function gatherItems(): PaletteItem[] {
+  const items: PaletteItem[] = [];
+
+  for (const [name, rawDef] of commandRegistry.getAll()) {
+    // Registry stores CommandDefinition<any> as a type-erasure seam.
+    // Narrow through unknown to the default-P shape.
+    const def = rawDef as unknown as CommandDefinition;
+    items.push({
+      id: `cmd:${name}`,
+      name: def.label ?? name.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()),
+      description: def.category ?? def.describe({}),
+      category: 'command',
+      execute: () => { executeOrDispatch(name, def); },
+    });
+  }
+
+  for (const [name] of toolRegistry.getAll()) {
+    const displayName = name.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+    items.push({
+      id: `tool:${name}`,
+      name: displayName,
+      description: 'Activate tool',
+      category: 'tool',
+      execute: () => {
+        const prev = getActiveTool();
+        if (prev) {
+          const prevTool = toolRegistry.get(prev);
+          prevTool?.onDeactivate?.();
+        }
+        setActiveTool(name);
+        const tool = toolRegistry.get(name);
+        tool?.onActivate?.();
+      },
+    });
+  }
+
+  for (const [name, def] of shortcutRegistry.getAll()) {
+    items.push({
+      id: `shortcut:${name}`,
+      name,
+      description: def.description,
+      category: 'shortcut',
+      shortcutKey: def.key,
+      execute: def.action,
+    });
+  }
+
+  return items;
+}
+
+/**
+ * Fuzzy match: split the query into whitespace-separated words.  Each word
+ * must appear as a substring (case-insensitive) somewhere in either the item
+ * name or its description.
+ */
+export function fuzzyMatch(item: PaletteItem, q: string): boolean {
+  if (q === '') return true;
+  const words = q.toLowerCase().split(/\s+/).filter(Boolean);
+  const haystack = `${item.name} ${item.description}`.toLowerCase();
+  return words.every((w) => haystack.includes(w));
+}
+
+/**
+ * Score an item against the query for ranking.  Lower score = better match.
+ * - Exact prefix match on the name is best (score 0)
+ * - Name contains query as substring (score 1)
+ * - Matched via description only (score 2)
+ */
+export function relevanceScore(item: PaletteItem, q: string): number {
+  if (q === '') return 0;
+  const lowerQ = q.toLowerCase();
+  const lowerName = item.name.toLowerCase();
+
+  if (lowerName.startsWith(lowerQ)) return 0;
+  if (lowerName.includes(lowerQ)) return 1;
+  return 2;
+}
+
+// --- Derived: filtered & sorted results ---
+
+// NOTE: $derived cannot be used at module scope in .svelte.ts files in Svelte 5,
+// so we expose a getter that performs the derivation on access.
+
+function getFilteredResults(): PaletteItem[] {
+  const q = query;
+  const all = gatherItems();
+  const matched = all.filter((item) => fuzzyMatch(item, q));
+  matched.sort((a, b) => relevanceScore(a, q) - relevanceScore(b, q));
+  return matched;
+}
+
+// --- Public API ---
+
+export const commandPaletteState = {
+  get isOpen() { return isOpen; },
+  get query() { return query; },
+  set query(v: string) {
+    query = v;
+    // Reset selection whenever the query changes
+    selectedIndex = 0;
+  },
+  get selectedIndex() { return selectedIndex; },
+  set selectedIndex(v: number) { selectedIndex = v; },
+
+  get results() { return getFilteredResults(); },
+
+  open() {
+    isOpen = true;
+    query = '';
+    selectedIndex = 0;
+  },
+
+  close() {
+    isOpen = false;
+    query = '';
+    selectedIndex = 0;
+  },
+
+  /** Execute the currently selected item and close the palette. */
+  executeSelected() {
+    const results = getFilteredResults();
+    const item = results[selectedIndex];
+    if (item) {
+      item.execute();
+    }
+    isOpen = false;
+    query = '';
+    selectedIndex = 0;
+  },
+
+  /** Move selection up by one, wrapping around. */
+  moveUp() {
+    const count = getFilteredResults().length;
+    if (count === 0) return;
+    selectedIndex = (selectedIndex - 1 + count) % count;
+  },
+
+  /** Move selection down by one, wrapping around. */
+  moveDown() {
+    const count = getFilteredResults().length;
+    if (count === 0) return;
+    selectedIndex = (selectedIndex + 1) % count;
+  },
+};