pixelweaver 0.1.0

package/src/lib/ui/notifications/NotificationBanner.svelte

@@ -0,0 +1,137 @@
+<!--
+  NotificationBanner -- horizontal bar between MenuBar and workspace.
+  Shows the highest-priority notification with optional action and count badge.
+-->
+<script lang="ts">
+  import { notificationState } from './notification-state.svelte.js';
+
+  const current = $derived(notificationState.current);
+  const count = $derived(notificationState.count);
+
+  function handleDismiss(): void {
+    if (current) {
+      notificationState.dismiss(current.id);
+    }
+  }
+
+  function handleAction(): void {
+    current?.action?.callback();
+  }
+
+  /**
+   * Map notification type to a CSS custom property for background color.
+   * Falls back to the design tokens defined in app.css.
+   */
+  function bgVar(type: 'info' | 'warning' | 'success'): string {
+    switch (type) {
+      case 'info': return 'var(--accent)';
+      case 'warning': return 'var(--warning, #d4a04a)';
+      case 'success': return 'var(--success, #34d67c)';
+    }
+  }
+</script>
+
+{#if current}
+  <div
+    class="notification-banner"
+    role="alert"
+    style:--banner-bg={bgVar(current.type)}
+  >
+    <span class="notification-message">{current.message}</span>
+
+    {#if current.action}
+      <button class="notification-action" onclick={handleAction}>
+        {current.action.label}
+      </button>
+    {/if}
+
+    {#if count > 1}
+      <span class="notification-badge">{count}</span>
+    {/if}
+
+    <button
+      class="notification-dismiss"
+      onclick={handleDismiss}
+      aria-label="Dismiss notification"
+    >
+      &times;
+    </button>
+  </div>
+{/if}
+
+<style>
+  .notification-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-5);
+    background: var(--banner-bg);
+    color: #fff;
+    font-size: var(--text-sm);
+    font-family: var(--font-ui);
+    /* Slide-down animation */
+    animation: slide-down var(--transition-normal) ease forwards;
+    overflow: hidden;
+  }
+
+  @keyframes slide-down {
+    from {
+      max-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      opacity: 0;
+    }
+    to {
+      max-height: 40px;
+      opacity: 1;
+    }
+  }
+
+  .notification-message {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .notification-action {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    border-radius: var(--radius-sm);
+    color: #fff;
+    padding: var(--space-1) var(--space-3);
+    cursor: pointer;
+    font-size: var(--text-xs);
+    transition: background var(--transition-fast);
+  }
+
+  .notification-action:hover {
+    background: rgba(255, 255, 255, 0.35);
+  }
+
+  .notification-badge {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-lg);
+    padding: 0 var(--space-2);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    min-width: 18px;
+    text-align: center;
+    line-height: 18px;
+  }
+
+  .notification-dismiss {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    font-size: var(--text-lg);
+    line-height: 1;
+    padding: var(--space-1);
+    transition: color var(--transition-fast);
+  }
+
+  .notification-dismiss:hover {
+    color: #fff;
+  }
+</style>

package/src/lib/ui/notifications/notification-plugin.ts

@@ -0,0 +1,29 @@
+/**
+ * Notification Plugin -- registers a command to dismiss all notifications.
+ * Auto-discovered by bootstrap via the *-plugin.ts glob pattern.
+ */
+
+import type { PluginModule } from '../../core/plugin-loader.js';
+import { notificationState } from './notification-state.svelte.js';
+
+export const notificationPlugin: PluginModule = {
+  name: 'builtin/notifications',
+  version: '1.0.0',
+  description: 'In-app notification banner system',
+
+  register(api) {
+    api.addCommand('dismiss_all_notifications', {
+      label: 'Dismiss All Notifications',
+      category: 'Notifications',
+      execute() {
+        notificationState.dismissAll();
+      },
+      undo() {
+        // Dismissing notifications is not undoable
+      },
+      describe() {
+        return 'Dismiss all notifications';
+      },
+    });
+  },
+};

package/src/lib/ui/notifications/notification-state.svelte.ts

@@ -0,0 +1,9 @@
+/**
+ * Re-export barrel -- the canonical notification state now lives in core.
+ * This file exists so that UI-layer imports continue to work without changes.
+ */
+export {
+  notificationState,
+  type AppNotification,
+  type NotificationLevel,
+} from '../../core/notification-state.svelte.js';

package/src/lib/ui/plugin-manager-panel-plugin.ts

@@ -0,0 +1,26 @@
+/**
+ * Plugin Manager Panel plugin -- registers the PluginManagerPanel with the
+ * central panel registry so plugin metadata and contributions can be
+ * inspected from the docked UI.
+ *
+ * Discovery is automatic via the `*-plugin.ts` glob in bootstrap.ts.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import PluginManagerPanel from './PluginManagerPanel.svelte';
+
+export const pluginManagerPanelPlugin: PluginModule = {
+  name: 'ui/plugin-manager',
+  version: '1.0.0',
+  description: 'Read-only inspector for loaded plugins and their contributions',
+  dependencies: [],
+  register(api) {
+    api.addPanel('plugin-manager', {
+      title: 'Plugins',
+      component: PluginManagerPanel,
+      position: 'right',
+      minWidth: 240,
+      maxWidth: 440,
+    });
+  },
+};

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

@@ -0,0 +1,62 @@
+/**
+ * Plugin State -- reactive registry of loaded plugins for the plugin manager UI.
+ *
+ * Populated by the plugin loader after each plugin's register() call. Records
+ * include basic metadata (name, version, description, author) plus the set of
+ * contributions (commands, tools, panels, exporters, importers, shortcuts,
+ * menu items, toolbar items) each plugin registered.
+ *
+ * Read-only from the UI's perspective; the loader is the sole writer.
+ */
+
+// --- Types ---
+
+/** Per-plugin summary of what was registered during register(). */
+export interface PluginContributions {
+  commands: string[];
+  tools: string[];
+  panels: string[];
+  exporters: string[];
+  importers: string[];
+  shortcuts: string[];
+  menuItems: string[];
+  toolbarItems: string[];
+}
+
+/** A record describing one loaded plugin and its contributions. */
+export interface LoadedPluginRecord {
+  name: string;
+  version: string;
+  description?: string;
+  author?: string;
+  dependencies: string[];
+  loaded: boolean;
+  error?: string;
+  contributions: PluginContributions;
+}
+
+// --- Reactive state ---
+
+let plugins: LoadedPluginRecord[] = $state([]);
+
+// --- Operations (writer API used by the plugin loader) ---
+
+/** Append a loaded plugin record. The loader calls this after register() runs. */
+function addPlugin(record: LoadedPluginRecord): void {
+  plugins = [...plugins, record];
+}
+
+/** Reset the state. Intended for tests only. */
+function _resetForTesting(): void {
+  plugins = [];
+}
+
+// --- Public API ---
+
+export const pluginState = {
+  get plugins() {
+    return plugins;
+  },
+  addPlugin,
+  _resetForTesting,
+};

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

@@ -0,0 +1,75 @@
+/**
+ * Select Commands -- Invert Selection, Select by Color, plus menu items
+ * under the Select top-level menu that reference the shared select_all
+ * and deselect commands (registered by edit-commands and selection-tool,
+ * respectively).
+ *
+ * Invert and Select by Color are placeholders until selection-tool grows
+ * the necessary primitives.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import FlipHorizontal from '~icons/lucide/flip-horizontal';
+import Pipette from '~icons/lucide/pipette';
+
+export const selectCommandsPlugin: PluginModule = {
+  name: 'ui/select-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addMenuItem('menu:select:select-all', {
+      commandId: 'select_all',
+      menuPath: 'select',
+      group: 'basic',
+      order: 10,
+      label: 'Select All',
+    });
+
+    api.addMenuItem('menu:select:deselect', {
+      commandId: 'deselect',
+      menuPath: 'select',
+      group: 'basic',
+      order: 20,
+      label: 'Deselect',
+    });
+
+    api.addCommand('invert_selection', {
+      tier: 'frame',
+      execute() {
+        // selection-tool does not export an invert function yet
+        console.warn('invert_selection: not yet implemented -- requires an invert function in selection-tool that flips all pixels within canvas bounds');
+      },
+      undo() {},
+      describe() { return 'Inverted selection'; },
+      label: 'Invert Selection',
+      category: 'Select',
+      icon: FlipHorizontal,
+    });
+    api.addMenuItem('menu:select:invert', {
+      commandId: 'invert_selection',
+      menuPath: 'select',
+      group: 'advanced',
+      order: 30,
+      label: 'Invert Selection',
+    });
+
+    api.addCommand('select_by_color', {
+      tier: 'frame',
+      execute() {
+        console.warn('select_by_color: not yet implemented -- requires pixel sampling from the active buffer and a color-matching tolerance scan');
+      },
+      undo() {},
+      describe() { return 'Selected pixels by color'; },
+      label: 'Select by Color',
+      category: 'Select',
+      icon: Pipette,
+    });
+    api.addMenuItem('menu:select:by-color', {
+      commandId: 'select_by_color',
+      menuPath: 'select',
+      group: 'advanced',
+      order: 40,
+      label: 'Select by Color',
+    });
+  },
+};

package/src/lib/ui/theme-plugin.ts

@@ -0,0 +1,18 @@
+/**
+ * Theme Plugin -- initializes the theme system by applying the current theme
+ * to the document root on startup.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { themeState } from './theme.svelte.js';
+
+export const themePlugin: PluginModule = {
+  name: 'builtin/theme',
+  version: '1.0.0',
+  description: 'Dark/light theme management',
+
+  register() {
+    // Apply the current theme (defaults to "dark") to the document root
+    themeState.set(themeState.current);
+  },
+};

package/src/lib/ui/theme.svelte.ts

@@ -0,0 +1,45 @@
+/**
+ * Theme System -- reactive state for switching between dark and light themes.
+ *
+ * Applies the active theme by setting a `data-theme` attribute on the
+ * document root element, which CSS selectors in app.css use to swap
+ * variable values.  Uses Svelte 5 runes for reactivity.
+ */
+
+// --- Types ---
+
+export type Theme = 'dark' | 'light';
+
+// --- Reactive state ---
+
+let currentTheme: Theme = $state('dark');
+
+// --- Functions ---
+
+/**
+ * Apply a theme by setting the `data-theme` attribute on <html>.
+ * Safe to call in non-browser environments (no-ops if document is unavailable).
+ */
+function applyTheme(theme: Theme): void {
+  if (typeof document !== 'undefined') {
+    document.documentElement.dataset["theme"] = theme;
+  }
+}
+
+function setTheme(theme: Theme): void {
+  currentTheme = theme;
+  applyTheme(theme);
+}
+
+function toggleTheme(): void {
+  setTheme(currentTheme === 'dark' ? 'light' : 'dark');
+}
+
+// --- Public API ---
+
+export const themeState = {
+  get current() { return currentTheme; },
+
+  set: setTheme,
+  toggle: toggleTheme,
+};

package/src/lib/ui/theme.test.ts

@@ -0,0 +1,51 @@
+/**
+ * Tests for the theme system.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { themeState } from './theme.svelte.js';
+
+describe('themeState', () => {
+  beforeEach(() => {
+    // Reset to dark (the default)
+    themeState.set('dark');
+  });
+
+  it('defaults to dark theme', () => {
+    expect(themeState.current).toBe('dark');
+  });
+
+  it('setTheme changes the current theme', () => {
+    themeState.set('light');
+    expect(themeState.current).toBe('light');
+
+    themeState.set('dark');
+    expect(themeState.current).toBe('dark');
+  });
+
+  it('toggleTheme switches between dark and light', () => {
+    expect(themeState.current).toBe('dark');
+
+    themeState.toggle();
+    expect(themeState.current).toBe('light');
+
+    themeState.toggle();
+    expect(themeState.current).toBe('dark');
+  });
+
+  it('setTheme updates the data-theme attribute on the document', () => {
+    themeState.set('light');
+    expect(document.documentElement.dataset["theme"]).toBe('light');
+
+    themeState.set('dark');
+    expect(document.documentElement.dataset["theme"]).toBe('dark');
+  });
+
+  it('toggleTheme updates the data-theme attribute', () => {
+    themeState.toggle();
+    expect(document.documentElement.dataset["theme"]).toBe('light');
+
+    themeState.toggle();
+    expect(document.documentElement.dataset["theme"]).toBe('dark');
+  });
+});

package/src/lib/ui/toolbar-config.ts

@@ -0,0 +1,90 @@
+/**
+ * Toolbar configuration persistence -- stores user overrides for toolbar
+ * icon size in localStorage.
+ * Plugin-declared defaults are merged with user overrides at read time.
+ */
+
+const STORAGE_KEY = 'pixelweaver:toolbar-config';
+
+/** User overrides for a single toolbar's appearance */
+export interface ToolbarUserOverrides {
+  iconSize?: number;
+}
+
+/** Top-level config shape stored in localStorage */
+interface StoredConfig {
+  toolbars: Record<string, ToolbarUserOverrides>;
+}
+
+/** Default settings for known toolbars */
+const DEFAULTS: Record<string, Required<ToolbarUserOverrides>> = {
+  'drawing-tools': { iconSize: 20 },
+  'view-controls': { iconSize: 18 },
+};
+
+/** Load the full stored config from localStorage */
+function loadStored(): StoredConfig {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw) as Partial<StoredConfig>;
+      if (parsed.toolbars && typeof parsed.toolbars === 'object') {
+        return { toolbars: parsed.toolbars };
+      }
+    }
+  } catch {
+    // Corrupted data, reset
+  }
+  return { toolbars: {} };
+}
+
+/** Save config to localStorage */
+function saveStored(config: StoredConfig): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  } catch {
+    // Storage full or unavailable
+  }
+}
+
+/**
+ * Get the effective configuration for a toolbar by merging defaults
+ * with any user overrides.
+ */
+export function getToolbarConfig(toolbarId: string): Required<ToolbarUserOverrides> {
+  const defaults = DEFAULTS[toolbarId] ?? { iconSize: 20 };
+  const stored = loadStored();
+  const overrides = stored.toolbars[toolbarId] ?? {};
+  return { ...defaults, ...overrides };
+}
+
+/**
+ * Save user overrides for a specific toolbar.
+ */
+export function setToolbarConfig(toolbarId: string, overrides: ToolbarUserOverrides): void {
+  const stored = loadStored();
+  stored.toolbars[toolbarId] = { ...(stored.toolbars[toolbarId] ?? {}), ...overrides };
+  saveStored(stored);
+}
+
+/**
+ * Reset a toolbar's config to plugin defaults (remove user overrides).
+ */
+export function resetToolbarConfig(toolbarId: string): void {
+  const stored = loadStored();
+  // Rebuild without the target key (dynamic delete is disallowed)
+  const { [toolbarId]: _removed, ...rest } = stored.toolbars;
+  void _removed;
+  saveStored({ toolbars: rest });
+}
+
+/**
+ * Reset ALL toolbar configs to defaults.
+ */
+export function resetAllToolbarConfigs(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Ignore
+  }
+}

package/src/lib/ui/toolbar-plugin.ts

@@ -0,0 +1,39 @@
+/**
+ * Toolbar Plugin -- registers toolbar panels as dockable panels in the dock
+ * system. Each toolbar panel wraps ToolbarPanel.svelte with a specific
+ * toolbarId, making toolbar contributions visible in the UI.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import ToolbarPanel from './ToolbarPanel.svelte';
+
+export const toolbarPlugin: PluginModule = {
+  name: 'ui/toolbars',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // Drawing tools toolbar -- left side, 1 item per row, fixed width
+    // btnSize = iconSize(20) + padding(16) = 36 + toolbar chrome(14) = 50
+    api.addPanel('toolbar-drawing-tools', {
+      title: 'Drawing Tools',
+      component: ToolbarPanel,
+      props: { toolbarId: 'drawing-tools' },
+      position: 'left',
+      closeable: false,
+      minWidth: 50,
+      maxWidth: 50,
+    });
+
+    // View controls toolbar -- horizontal strip under the menu bar, fixed height
+    // btnSize = iconSize(18) + padding(16) = 34 + toolbar chrome(14) = 48
+    api.addPanel('toolbar-view-controls', {
+      title: 'View Controls',
+      component: ToolbarPanel,
+      props: { toolbarId: 'view-controls' },
+      position: 'top',
+      closeable: false,
+      minHeight: 48,
+      maxHeight: 48,
+    });
+  },
+};