pixelweaver 0.1.0

package/src/lib/dock/DockLayout.svelte

@@ -0,0 +1,375 @@
+<script lang="ts">
+  import { onMount, mount, unmount } from 'svelte';
+  import { DockviewComponent } from 'dockview-core';
+  import type {
+    IContentRenderer,
+    GroupPanelPartInitParameters,
+    SerializedDockview,
+  } from 'dockview-core';
+  import { dockState } from './dock-state.svelte.js';
+  import type { PanelConfig } from '../core/plugin-types.js';
+  import { saveLayout, loadLayout, clearLayout } from './dock-persistence.js';
+  import { themePixelWeaver } from './dockview-theme.js';
+  import { notificationState } from '../ui/notifications/notification-state.svelte.js';
+  import { createRightHeaderActionComponent } from './header-action-renderer.js';
+  import { dialogState } from '../ui/dialog-state.svelte.js';
+
+  // Dockview base styles + custom theme overrides
+  import 'dockview-core/dist/styles/dockview.css';
+  import './dockview-theme.css';
+
+  interface Props {
+    /** Saved layout JSON. When absent, panels are arranged by their declared positions. */
+    initialLayout?: object;
+  }
+
+  let { initialLayout }: Props = $props();
+
+  let containerEl: HTMLDivElement | undefined = $state();
+  let dockview: DockviewComponent | undefined;
+
+  // Track mounted Svelte component instances so we can unmount them on dispose.
+  // Plain Map (not SvelteMap) is intentional: this is internal bookkeeping
+  // read only inside dockview's createComponent/dispose callbacks, not in
+  // reactive template code, so reactivity is unnecessary.
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- see above
+  const mountedComponents = new Map<
+    string,
+    { instance: Record<string, unknown>; element: HTMLElement }
+  >();
+
+  onMount(() => {
+    if (!containerEl) return;
+
+    dockview = new DockviewComponent(containerEl, {
+      theme: themePixelWeaver,
+      createRightHeaderActionComponent,
+      createComponent(options): IContentRenderer {
+        const config = dockState.getPanel(options.id);
+
+        if (!config) {
+          // Fallback for unknown panel ids (e.g. stale layout JSON)
+          const el = document.createElement('div');
+          el.textContent = `Unknown panel "${options.id}"`;
+          return {
+            element: el,
+            init() {},
+            dispose() {},
+          };
+        }
+
+        const el = document.createElement('div');
+        el.style.width = '100%';
+        el.style.height = '100%';
+        el.style.overflow = 'auto';
+
+        // Svelte instance is created lazily in init() so the element is
+        // already attached to the DOM when mount runs.
+        let comp: Record<string, unknown> | undefined;
+
+        return {
+          element: el,
+
+          init(_params: GroupPanelPartInitParameters) {
+            comp = mount(config.component, {
+              target: el,
+              props: config.props ?? {},
+            });
+            mountedComponents.set(options.id, { instance: comp, element: el });
+          },
+
+          dispose() {
+            if (comp) {
+              void unmount(comp);
+              mountedComponents.delete(options.id);
+            }
+          },
+        };
+      },
+    });
+
+    // Expose API to the reactive dock state singleton
+    dockState.setApi(dockview.api);
+
+    // Build layout: try localStorage first, then initialLayout prop, then defaults
+    const savedLayout = loadLayout();
+    if (savedLayout) {
+      try {
+        dockview.fromJSON(savedLayout as SerializedDockview);
+        applyPanelConstraints();
+        checkForMissingPanels();
+      } catch (e) {
+        console.warn('Failed to restore saved dock layout, falling back to defaults:', e);
+        buildDefaultLayout();
+      }
+    } else if (initialLayout) {
+      try {
+        dockview.fromJSON(initialLayout as SerializedDockview);
+        applyPanelConstraints();
+        checkForMissingPanels();
+      } catch (e) {
+        console.warn('Failed to restore dock layout, falling back to defaults:', e);
+        buildDefaultLayout();
+      }
+    } else {
+      buildDefaultLayout();
+    }
+
+    // On first launch (no saved layout, never welcomed), auto-open the
+    // New Project dialog so the user can pick their canvas size.
+    const WELCOMED_KEY = 'pixelweaver-welcomed';
+    const isFirstLaunch = !savedLayout && !initialLayout && !localStorage.getItem(WELCOMED_KEY);
+    let welcomeTimeout: ReturnType<typeof setTimeout> | undefined;
+    if (isFirstLaunch) {
+      welcomeTimeout = setTimeout(() => {
+        dialogState.openNewProject();
+        localStorage.setItem(WELCOMED_KEY, '1');
+      }, 500);
+    }
+
+    // Auto-save layout on changes (debounced 500ms)
+    let saveTimeout: ReturnType<typeof setTimeout>;
+    const dv = dockview;
+    const layoutDisposable = dv.api.onDidLayoutChange(() => {
+      clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(() => {
+        const layout = dv.toJSON();
+        saveLayout(layout);
+      }, 500);
+    });
+
+    return () => {
+      clearTimeout(welcomeTimeout);
+      clearTimeout(saveTimeout);
+      layoutDisposable.dispose();
+      // Tear down every mounted Svelte component
+      for (const { instance } of mountedComponents.values()) {
+        void unmount(instance);
+      }
+      mountedComponents.clear();
+      dockview?.dispose();
+    };
+  });
+
+  /**
+   * After restoring a saved layout, check if any panels that are now
+   * registered were missing from that layout (e.g. panels added by plugins
+   * since the layout was saved). If so, push an info notification so the
+   * user can reset the layout to pick them up.
+   */
+  function checkForMissingPanels(): void {
+    if (!dockview) return;
+
+    const registered = new Set(dockState.panels.keys());
+    const inLayout = new Set(dockview.api.panels.map((p) => p.id));
+    const missing = [...registered].filter((id) => !inLayout.has(id));
+
+    if (missing.length > 0) {
+      const names = missing
+        .map((id) => dockState.getPanel(id)?.title ?? id)
+        .join(', ');
+
+      notificationState.push({
+        id: 'missing-panels',
+        message: `New panels available: ${names}`,
+        type: 'info',
+        priority: 10,
+        action: {
+          label: 'Reset Layout',
+          callback: () => {
+            // Clear saved layout and rebuild from scratch
+            clearLayout();
+            if (dockview) dockview.clear();
+            buildDefaultLayout();
+            notificationState.dismiss('missing-panels');
+          },
+        },
+      });
+    }
+  }
+
+  /**
+   * Arrange registered panels into the dock according to their declared
+   * `position` property. Non-closeable panels (toolbars) each get their
+   * own split; closeable panels in the same position are tabbed together.
+   */
+  /** Entry pairing a panel's registry key with its config */
+  type PanelEntry = [id: string, config: PanelConfig];
+
+  function buildDefaultLayout(): void {
+    if (!dockview) return;
+    // Alias so nested closures don't re-check the nullable outer binding.
+    const dv = dockview;
+
+    const entries: PanelEntry[] = [...dockState.panels.entries()];
+
+    // Bucket by position
+    const center: PanelEntry[] = [];
+    const right: PanelEntry[] = [];
+    const bottom: PanelEntry[] = [];
+    const left: PanelEntry[] = [];
+    const top: PanelEntry[] = [];
+
+    for (const entry of entries) {
+      switch (entry[1].position) {
+        case 'right':
+          right.push(entry);
+          break;
+        case 'bottom':
+          bottom.push(entry);
+          break;
+        case 'left':
+          left.push(entry);
+          break;
+        case 'top':
+          top.push(entry);
+          break;
+        default:
+          // 'center' or unspecified
+          center.push(entry);
+      }
+    }
+
+    // Helper: add a group of panels in a given direction.
+    // Non-closeable panels (toolbar-like) each get their own split.
+    // Closeable panels are tabbed together in one group.
+    const addGroup = (
+      group: PanelEntry[],
+      direction: 'left' | 'right' | 'above' | 'below',
+    ) => {
+      if (group.length === 0) return;
+
+      // Separate non-closeable (toolbar-like) from closeable (regular panels)
+      const fixed = group.filter(([, c]) => c.closeable === false);
+      const tabbed = group.filter(([, c]) => c.closeable !== false);
+
+      // Each fixed panel gets its own split
+      for (const [id, config] of fixed) {
+        dv.api.addPanel({
+          id,
+          title: config.title,
+          component: id,
+          position: { direction },
+          initialWidth: config.minWidth,
+          initialHeight: config.minHeight,
+          minimumWidth: config.minWidth,
+          maximumWidth: config.maxWidth,
+          minimumHeight: config.minHeight,
+          maximumHeight: config.maxHeight,
+        });
+      }
+
+      // Closeable panels tab together in one group
+      const firstEntry = tabbed[0];
+      if (firstEntry !== undefined) {
+        const [firstId, firstConfig] = firstEntry;
+        const isHorizontal = direction === 'left' || direction === 'right';
+        dv.api.addPanel({
+          id: firstId,
+          title: firstConfig.title,
+          component: firstId,
+          position: { direction },
+          initialWidth: isHorizontal ? 200 : undefined,
+          initialHeight: !isHorizontal ? 120 : undefined,
+          minimumWidth: firstConfig.minWidth,
+          maximumWidth: firstConfig.maxWidth,
+          minimumHeight: firstConfig.minHeight,
+          maximumHeight: firstConfig.maxHeight,
+        });
+
+        for (let i = 1; i < tabbed.length; i++) {
+          const entry = tabbed[i];
+          if (entry === undefined) continue;
+          const [id, config] = entry;
+          dv.api.addPanel({
+            id,
+            title: config.title,
+            component: id,
+            position: { referencePanel: firstId, direction: 'within' },
+            minimumWidth: config.minWidth,
+            maximumWidth: config.maxWidth,
+            minimumHeight: config.minHeight,
+            maximumHeight: config.maxHeight,
+          });
+        }
+      }
+    };
+
+    // Center panels first (they become the main area)
+    for (const [id, config] of center) {
+      dv.api.addPanel({
+        id,
+        title: config.title,
+        component: id,
+      });
+    }
+
+    // Add groups in order: top, right, bottom, then left LAST.
+    // Left toolbar is added last so it spans the full dock height
+    // (including the bottom area), rather than being a sibling of
+    // only the center row.
+    addGroup(top, 'above');
+    addGroup(right, 'right');
+    addGroup(bottom, 'below');
+    addGroup(left, 'left');
+
+    // Apply group-level constraints after all panels are added
+    applyPanelConstraints();
+  }
+
+  /**
+   * Apply group-level constraints to panels based on their PanelConfig.
+   * Called after both buildDefaultLayout() and fromJSON() since dockview
+   * does NOT serialize constraints.
+   *
+   * Toolbar panels (fixed dimensions where min === max) get their header
+   * hidden and group locked. The canvas panel (closeable: false but NOT
+   * fixed-dimension) only gets its header hidden -- it must NOT be locked
+   * or it blocks resizing of adjacent panels.
+   */
+  function applyPanelConstraints(): void {
+    if (!dockview) return;
+
+    for (const panel of dockview.api.panels) {
+      const config = dockState.getPanel(panel.id);
+      if (!config) continue;
+
+      // A panel is "toolbar-like" if it has fixed dimensions (min === max)
+      const isFixedWidth = config.minWidth !== undefined && config.maxWidth !== undefined && config.minWidth === config.maxWidth;
+      const isFixedHeight = config.minHeight !== undefined && config.maxHeight !== undefined && config.minHeight === config.maxHeight;
+      const isToolbar = isFixedWidth || isFixedHeight;
+
+      if (isToolbar) {
+        panel.group.header.hidden = true;
+        // 'no-drop-target' prevents other panels being dropped into this group
+        panel.group.locked = 'no-drop-target';
+      }
+
+      // Hide header on canvas (closeable: false, not a toolbar) but DON'T lock it
+      if (config.closeable === false && !isToolbar) {
+        panel.group.header.hidden = true;
+      }
+
+      // Apply size constraints to the group
+      const constraints: Record<string, number | undefined> = {};
+      if (config.minWidth !== undefined) constraints.minimumWidth = config.minWidth;
+      if (config.maxWidth !== undefined) constraints.maximumWidth = config.maxWidth;
+      if (config.minHeight !== undefined) constraints.minimumHeight = config.minHeight;
+      if (config.maxHeight !== undefined) constraints.maximumHeight = config.maxHeight;
+
+      if (Object.keys(constraints).length > 0) {
+        panel.group.api.setConstraints(constraints);
+      }
+    }
+  }
+</script>
+
+<div class="dock-container" bind:this={containerEl}></div>
+
+<style>
+  .dock-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+</style>

package/src/lib/dock/TabAddMenu.svelte

@@ -0,0 +1,90 @@
+<!--
+  TabAddMenu -- context menu shown when the "+" button in a dockview tab bar
+  is clicked. Displays actions relevant to adding new content (New Project,
+  Open File, etc.). Positioned at the provided (x, y) coordinates.
+-->
+<script lang="ts">
+  import { executeOrDispatch, getCommandForDispatch } from '../core/command-runner.js';
+
+  interface Props {
+    /** Pixel position for the menu */
+    x: number;
+    y: number;
+    /** Close callback */
+    onClose: () => void;
+  }
+
+  let { x, y, onClose }: Props = $props();
+
+  // Static menu items that invoke registered commands
+  const items = [
+    { label: 'New Project', commandId: 'new_project_dialog' },
+    { label: 'Open File', commandId: 'open_file_dialog' },
+  ];
+
+  function handleClick(commandId: string) {
+    const cmd = getCommandForDispatch(commandId);
+    if (cmd) {
+      executeOrDispatch(commandId, cmd);
+    }
+    onClose();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+<div class="menu-backdrop" onclick={onClose}>
+  <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+  <div class="menu" style:left="{x}px" style:top="{y}px" onclick={(e) => { e.stopPropagation(); }}>
+    {#each items as item (item.commandId)}
+      <button class="menu-item" onclick={() => { handleClick(item.commandId); }}>
+        {item.label}
+      </button>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .menu-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 2000;
+  }
+
+  .menu {
+    position: fixed;
+    min-width: 160px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: 4px 0;
+    z-index: 2001;
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 5px 12px;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .menu-item:hover {
+    background: var(--bg-secondary);
+  }
+</style>

package/src/lib/dock/dock-persistence.ts

@@ -0,0 +1,46 @@
+const STORAGE_KEY = 'pixelweaver:dock-layout';
+
+/**
+ * Bump this number whenever the default layout changes significantly
+ * (new panels, changed positions/sizes). Stale saved layouts with an
+ * older version are discarded on load so buildDefaultLayout() runs.
+ */
+const LAYOUT_VERSION = 5;
+
+/** Save the current layout to localStorage */
+export function saveLayout(layout: object): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ version: LAYOUT_VERSION, layout }));
+  } catch {
+    // Silently fail on quota/security errors
+  }
+}
+
+/** Load saved layout from localStorage, or null if none/stale */
+export function loadLayout(): object | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as { version?: unknown; layout?: unknown } | null;
+    // Reject layouts from older versions
+    if (parsed && typeof parsed === 'object' && 'version' in parsed) {
+      if (parsed.version !== LAYOUT_VERSION) return null;
+      const layout = parsed.layout;
+      if (layout && typeof layout === 'object') return layout;
+      return null;
+    }
+    // Legacy format (no version wrapper) -- discard
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/** Clear saved layout */
+export function clearLayout(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Silently fail
+  }
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Dock registration plugin -- registers all dockable panels with the
+ * central panel registry during bootstrap. The DockLayout component reads
+ * these registrations to build the default layout.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import CanvasViewport from '../canvas/CanvasViewport.svelte';
+import ColorPicker from '../ui/ColorPicker.svelte';
+import LayerPanel from '../ui/LayerPanel.svelte';
+import FrameStrip from '../ui/FrameStrip.svelte';
+
+export const dockPlugin: PluginModule = {
+  name: 'ui/dock',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addPanel('canvas', {
+      title: 'Canvas',
+      component: CanvasViewport,
+      position: 'center',
+      closeable: false,
+    });
+
+    api.addPanel('colors', {
+      title: 'Colors',
+      component: ColorPicker,
+      position: 'right',
+      minWidth: 180,
+      maxWidth: 300,
+    });
+
+    api.addPanel('layers', {
+      title: 'Layers',
+      component: LayerPanel,
+      position: 'right',
+      minWidth: 160,
+      maxWidth: 300,
+    });
+
+    api.addPanel('frames', {
+      title: 'Animation',
+      component: FrameStrip,
+      position: 'bottom',
+      minHeight: 80,
+      maxHeight: 150,
+    });
+  },
+};