pixelweaver 0.1.0

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

@@ -0,0 +1,156 @@
+import { dockState } from './dock-state.svelte.js';
+import type { DockviewApi } from 'dockview-core';
+
+export interface LayoutPreset {
+  name: string;
+  description: string;
+  apply: () => void;
+}
+
+/** Clear all panels and rebuild using the given builder function */
+function clearAndRebuild(builder: (api: DockviewApi) => void): void {
+  const api = dockState.api;
+  if (!api) return;
+  api.clear();
+  builder(api);
+}
+
+export const presets: LayoutPreset[] = [
+  {
+    name: 'Default',
+    description: 'Canvas center, Colors/Layers/Seam Checker right, Animation bottom',
+    apply() {
+      clearAndRebuild((api) => {
+        // Center: Canvas
+        api.addPanel({ id: 'canvas', title: 'Canvas', component: 'canvas' });
+        // Left: Drawing Tools (own split, fixed width toolbar)
+        api.addPanel({
+          id: 'toolbar-drawing-tools',
+          title: 'Drawing Tools',
+          component: 'toolbar-drawing-tools',
+          position: { direction: 'left' },
+          initialWidth: 50,
+          minimumWidth: 50,
+          maximumWidth: 50,
+        });
+        // Top: View Controls (own split, fixed height toolbar)
+        api.addPanel({
+          id: 'toolbar-view-controls',
+          title: 'View Controls',
+          component: 'toolbar-view-controls',
+          position: { direction: 'above' },
+          initialHeight: 48,
+          minimumHeight: 48,
+          maximumHeight: 48,
+        });
+        // Right: Colors + Layers tabbed
+        api.addPanel({
+          id: 'colors',
+          title: 'Colors',
+          component: 'colors',
+          position: { direction: 'right' },
+          initialWidth: 280,
+        });
+        api.addPanel({
+          id: 'layers',
+          title: 'Layers',
+          component: 'layers',
+          position: { referencePanel: 'colors', direction: 'within' },
+        });
+        api.addPanel({
+          id: 'seam-checker',
+          title: 'Seam Checker',
+          component: 'seam-checker',
+          position: { referencePanel: 'colors', direction: 'within' },
+        });
+        // Bottom: Animation
+        api.addPanel({
+          id: 'frames',
+          title: 'Animation',
+          component: 'frames',
+          position: { direction: 'below' },
+          initialHeight: 120,
+        });
+      });
+    },
+  },
+  {
+    name: 'Compact',
+    description: 'Canvas only, all panels hidden',
+    apply() {
+      clearAndRebuild((api) => {
+        api.addPanel({ id: 'canvas', title: 'Canvas', component: 'canvas' });
+        // Left: Drawing Tools only (minimal setup)
+        api.addPanel({
+          id: 'toolbar-drawing-tools',
+          title: 'Drawing Tools',
+          component: 'toolbar-drawing-tools',
+          position: { direction: 'left' },
+          initialWidth: 50,
+          minimumWidth: 50,
+          maximumWidth: 50,
+        });
+        // Top: View Controls
+        api.addPanel({
+          id: 'toolbar-view-controls',
+          title: 'View Controls',
+          component: 'toolbar-view-controls',
+          position: { direction: 'above' },
+          initialHeight: 48,
+          minimumHeight: 48,
+          maximumHeight: 48,
+        });
+      });
+    },
+  },
+  {
+    name: 'Animation',
+    description: 'Larger animation strip, canvas center, panels right',
+    apply() {
+      clearAndRebuild((api) => {
+        api.addPanel({ id: 'canvas', title: 'Canvas', component: 'canvas' });
+        // Left: Drawing Tools (own split)
+        api.addPanel({
+          id: 'toolbar-drawing-tools',
+          title: 'Drawing Tools',
+          component: 'toolbar-drawing-tools',
+          position: { direction: 'left' },
+          initialWidth: 50,
+          minimumWidth: 50,
+          maximumWidth: 50,
+        });
+        // Top: View Controls (own split)
+        api.addPanel({
+          id: 'toolbar-view-controls',
+          title: 'View Controls',
+          component: 'toolbar-view-controls',
+          position: { direction: 'above' },
+          initialHeight: 48,
+          minimumHeight: 48,
+          maximumHeight: 48,
+        });
+        api.addPanel({
+          id: 'colors',
+          title: 'Colors',
+          component: 'colors',
+          position: { direction: 'right' },
+          initialWidth: 280,
+        });
+        api.addPanel({
+          id: 'layers',
+          title: 'Layers',
+          component: 'layers',
+          position: { referencePanel: 'colors', direction: 'within' },
+        });
+        // Bottom takes more space for animation workflow
+        api.addPanel({
+          id: 'frames',
+          title: 'Animation',
+          component: 'frames',
+          position: { direction: 'below' },
+          initialHeight: 200,
+        });
+      });
+    },
+  },
+];

package/src/lib/dock/dock-state.svelte.ts

@@ -0,0 +1,77 @@
+import type { PanelConfig } from '../core/plugin-types.js';
+import { panelRegistry } from '../core/registries.svelte.js';
+import type { DockviewApi } from 'dockview-core';
+
+// Reference to the active dockview API (set by DockLayout on mount)
+let api: DockviewApi | null = $state(null);
+
+export const dockState = {
+  /** Get all registered panels (reads from the central panelRegistry) */
+  get panels(): ReadonlyMap<string, PanelConfig> {
+    return panelRegistry.getAll();
+  },
+
+  /** Get a specific panel config */
+  getPanel(id: string): PanelConfig | undefined {
+    return panelRegistry.get(id);
+  },
+
+  /** Set the dockview API reference (called by DockLayout on mount) */
+  setApi(dockApi: DockviewApi): void {
+    api = dockApi;
+  },
+
+  /** Get the dockview API */
+  get api(): DockviewApi | null {
+    return api;
+  },
+
+  /** Add a panel to the dock layout at runtime */
+  addPanel(id: string): void {
+    if (!api) return;
+    const config = panelRegistry.get(id);
+    if (!config) return;
+    api.addPanel({
+      id,
+      title: config.title,
+      // The component key matches the panel id in our createComponent factory
+      component: id,
+    });
+  },
+
+  /** Remove a panel from the dock layout */
+  removePanel(id: string): void {
+    if (!api) return;
+    const panel = api.getPanel(id);
+    if (panel) {
+      api.removePanel(panel);
+    }
+  },
+
+  /** Show/focus a panel (if it's already added) */
+  focusPanel(id: string): void {
+    if (!api) return;
+    const panel = api.getPanel(id);
+    if (panel) {
+      panel.api.setActive();
+    }
+  },
+
+  /** Check if a panel is visible in the layout */
+  isPanelVisible(id: string): boolean {
+    if (!api) return false;
+    return api.getPanel(id) !== undefined;
+  },
+
+  /** Serialize layout to JSON */
+  serializeLayout(): object | null {
+    if (!api) return null;
+    return api.toJSON();
+  },
+
+  /** Restore layout from JSON */
+  restoreLayout(layout: object): void {
+    if (!api) return;
+    api.fromJSON(layout as Parameters<DockviewApi['fromJSON']>[0]);
+  },
+};

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

@@ -0,0 +1,2 @@
+/** @deprecated Import PanelConfig from '../core/plugin-types.js' instead */
+export type { PanelConfig as DockPanelConfig } from '../core/plugin-types.js';

package/src/lib/dock/dockview-theme.css

@@ -0,0 +1,226 @@
+/*
+ * PixelWeaver dockview theme
+ *
+ * Custom dockview-core theme that maps all dockview CSS variables to
+ * PixelWeaver's design tokens (defined in app.css). Because every color
+ * references a CSS custom property, the theme automatically adapts when
+ * the user switches between dark and light mode.
+ *
+ * Apply by passing the exported `themePixelWeaver` DockviewTheme object
+ * to the DockviewComponent constructor options.
+ */
+
+.dockview-theme-pixelweaver {
+
+  /* --- Tab bar (the strip that holds tabs + action buttons) --- */
+  --dv-tabs-and-actions-container-background-color: var(--bg-toolbar);
+  --dv-tabs-and-actions-container-height: 28px;
+  --dv-tabs-and-actions-container-font-size: var(--text-sm);
+
+  /* --- Panel / group background --- */
+  --dv-group-view-background-color: var(--bg-panel);
+
+  /* --- Active group, visible (selected) tab --- */
+  --dv-activegroup-visiblepanel-tab-background-color: var(--bg-panel);
+  --dv-activegroup-visiblepanel-tab-color: var(--text-primary);
+
+  /* --- Active group, hidden (inactive) tabs --- */
+  --dv-activegroup-hiddenpanel-tab-background-color: var(--bg-toolbar);
+  --dv-activegroup-hiddenpanel-tab-color: var(--text-secondary);
+
+  /* --- Inactive group, visible tab --- */
+  --dv-inactivegroup-visiblepanel-tab-background-color: var(--bg-secondary);
+  --dv-inactivegroup-visiblepanel-tab-color: var(--text-secondary);
+
+  /* --- Inactive group, hidden tabs --- */
+  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--bg-toolbar);
+  --dv-inactivegroup-hiddenpanel-tab-color: var(--text-muted);
+
+  /* --- Tab dividers and borders --- */
+  --dv-tab-divider-color: var(--border);
+  --dv-separator-border: var(--border);
+
+  /* --- Tab sizing --- */
+  --dv-tab-font-size: var(--text-sm);
+  --dv-tab-margin: 0;
+  --dv-border-radius: 0px;
+
+  /* --- Sash (resize handle between panels) --- */
+  --dv-sash-color: transparent;
+  --dv-active-sash-color: var(--border);
+  --dv-active-sash-transition-duration: var(--transition-fast);
+  --dv-active-sash-transition-delay: 0.3s;
+
+  /* --- Drag-and-drop overlay --- */
+  --dv-drag-over-background-color: rgba(74, 158, 255, 0.12);
+  --dv-drag-over-border-color: var(--accent);
+
+  /* --- Floating panels --- */
+  --dv-floating-box-shadow: var(--shadow-md);
+  --dv-overlay-z-index: 999;
+
+  /* --- Icon hover (close button, overflow chevron, etc.) --- */
+  --dv-icon-hover-background-color: rgba(255, 255, 255, 0.08);
+
+  /* --- Scrollbar inside tab strip --- */
+  --dv-tabs-container-scrollbar-color: var(--border);
+  --dv-scrollbar-background-color: rgba(255, 255, 255, 0.12);
+
+  /* --- Paneview (accordion-style panels) --- */
+  --dv-paneview-active-outline-color: var(--accent);
+  --dv-paneview-header-border-color: var(--border);
+}
+
+/* Light theme overrides for white-overlay hover states */
+[data-theme="light"] .dockview-theme-pixelweaver {
+  --dv-icon-hover-background-color: rgba(0, 0, 0, 0.08);
+  --dv-scrollbar-background-color: rgba(0, 0, 0, 0.12);
+}
+
+/* ------------------------------------------------------------------ */
+/* Structural overrides that cannot be done via CSS variables alone    */
+/* ------------------------------------------------------------------ */
+
+/* Accent underline on the active tab in the focused group */
+.dockview-theme-pixelweaver .dv-groupview.dv-active-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-active-tab {
+  position: relative;
+}
+
+.dockview-theme-pixelweaver .dv-groupview.dv-active-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-active-tab::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--accent);
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* Subtler underline on active tab in an unfocused group */
+.dockview-theme-pixelweaver .dv-groupview.dv-inactive-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-active-tab {
+  position: relative;
+}
+
+.dockview-theme-pixelweaver .dv-groupview.dv-inactive-group
+  > .dv-tabs-and-actions-container
+  .dv-tabs-container
+  > .dv-tab.dv-active-tab::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--border);
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* Hover effect on inactive tabs */
+.dockview-theme-pixelweaver .dv-tab.dv-inactive-tab:hover {
+  background-color: var(--bg-secondary) !important;
+  color: var(--text-primary) !important;
+}
+
+/* Inherit UI font for everything inside the dock */
+.dockview-theme-pixelweaver .dv-tabs-and-actions-container,
+.dockview-theme-pixelweaver .dv-tab,
+.dockview-theme-pixelweaver .dv-default-tab {
+  font-family: var(--font-ui);
+}
+
+/* Compact tab padding */
+.dockview-theme-pixelweaver .dv-tab {
+  padding: 0 var(--space-3);
+}
+
+/* Compact close-button icon */
+.dockview-theme-pixelweaver .dv-tab .dv-default-tab .dv-default-tab-action {
+  padding: 2px;
+}
+
+.dockview-theme-pixelweaver .dv-tab .dv-svg {
+  height: 8px;
+  width: 8px;
+}
+
+/* Bottom border on the tab bar to separate it from panel content */
+.dockview-theme-pixelweaver .dv-tabs-and-actions-container {
+  border-bottom: 1px solid var(--border);
+}
+
+/* Floating panels: use panel background and theme border */
+.dockview-theme-pixelweaver .dv-resize-container {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+/* Drop target anchor styling */
+.dockview-theme-pixelweaver
+  .dv-drop-target-container
+  .dv-drop-target-anchor.dv-drop-target-anchor-container-changed {
+  opacity: 0;
+  transition: none;
+}
+
+/* Pane header matches toolbar background for visual grouping */
+.dockview-theme-pixelweaver .dv-pane-container .dv-view .dv-default-header {
+  background-color: var(--bg-toolbar);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+}
+
+/* Overflow dropdown styling */
+.dockview-theme-pixelweaver .dv-tabs-overflow-container {
+  background-color: var(--bg-panel);
+  border-color: var(--border);
+}
+
+.dockview-theme-pixelweaver .dv-tabs-overflow-dropdown-default:hover {
+  background-color: var(--bg-secondary);
+}
+
+/* "+" button in the right header action area of each tab bar */
+.dockview-theme-pixelweaver .dv-tab-add-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: 0 4px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text-muted);
+  font-size: 16px;
+  font-family: var(--font-ui);
+  line-height: 1;
+  cursor: pointer;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+}
+
+.dockview-theme-pixelweaver .dv-tab-add-btn:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+}
+
+/* Collapse the void spacer so the + button sits right after the last tab */
+.dockview-theme-pixelweaver .dv-tabs-and-actions-container .dv-void-container {
+  flex-grow: 0 !important;
+  flex-basis: 0 !important;
+  min-width: 0 !important;
+  width: 0 !important;
+  overflow: hidden !important;
+}

package/src/lib/dock/dockview-theme.ts

@@ -0,0 +1,17 @@
+/**
+ * PixelWeaver custom dockview theme.
+ *
+ * Import the CSS side-effect alongside this object:
+ *   import './dockview-theme.css';
+ *   import { themePixelWeaver } from './dockview-theme';
+ *
+ * Then pass it to the DockviewComponent constructor:
+ *   new DockviewComponent(el, { theme: themePixelWeaver, ... });
+ */
+
+import type { DockviewTheme } from 'dockview-core';
+
+export const themePixelWeaver: DockviewTheme = {
+  name: 'pixelweaver',
+  className: 'dockview-theme-pixelweaver',
+};

package/src/lib/dock/header-action-renderer.ts

@@ -0,0 +1,77 @@
+/**
+ * Factory for the dockview right-header action component.
+ *
+ * Creates a small "+" button that appears at the right end of each tab bar.
+ * Clicking it opens a context menu (TabAddMenu) with options like
+ * "New Project" and "Open File".
+ *
+ * Implements the IHeaderActionsRenderer interface required by dockview's
+ * `createRightHeaderActionComponent` option.
+ */
+
+import { mount, unmount } from 'svelte';
+import type { IHeaderActionsRenderer, IGroupHeaderProps } from 'dockview-core';
+import type { DockviewGroupPanel } from 'dockview-core';
+import TabAddMenu from './TabAddMenu.svelte';
+
+export function createRightHeaderActionComponent(
+  _group: DockviewGroupPanel,
+): IHeaderActionsRenderer {
+  const el = document.createElement('div');
+  el.style.display = 'flex';
+  el.style.alignItems = 'center';
+  el.style.height = '100%';
+
+  const btn = document.createElement('button');
+  btn.className = 'dv-tab-add-btn';
+  btn.textContent = '+';
+  btn.title = 'Add...';
+  el.appendChild(btn);
+
+  // The menu Svelte instance, mounted into a portal div when open
+  let menuInstance: Record<string, unknown> | null = null;
+  let menuHost: HTMLDivElement | null = null;
+
+  function openMenu() {
+    if (menuInstance) return; // already open
+
+    const rect = btn.getBoundingClientRect();
+    menuHost = document.createElement('div');
+    document.body.appendChild(menuHost);
+
+    menuInstance = mount(TabAddMenu, {
+      target: menuHost,
+      props: {
+        x: rect.left,
+        y: rect.bottom + 2,
+        onClose: closeMenu,
+      },
+    });
+  }
+
+  function closeMenu() {
+    if (menuInstance && menuHost) {
+      void unmount(menuInstance);
+      menuHost.remove();
+      menuInstance = null;
+      menuHost = null;
+    }
+  }
+
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    openMenu();
+  });
+
+  return {
+    element: el,
+
+    init(_params: IGroupHeaderProps) {
+      // No additional setup needed; the button is already wired up
+    },
+
+    dispose() {
+      closeMenu();
+    },
+  };
+}

package/src/lib/edit/clipboard-state.ts

@@ -0,0 +1,34 @@
+/**
+ * Clipboard State -- in-memory pixel clipboard shared between cut, copy,
+ * and paste commands. Stores pixel data as {x,y,r,g,b,a}[] where x/y are
+ * absolute canvas coordinates (not relative to the selection bounding box).
+ *
+ * Not reactive: the UI does not need to react to clipboard changes today.
+ * If that changes, upgrade this to a $state rune store.
+ */
+
+export type ClipboardPixel = {
+  x: number;
+  y: number;
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+};
+
+let clipboardBuffer: ClipboardPixel[] = [];
+
+/** Return a reference to the current clipboard contents (do not mutate). */
+export function getClipboard(): readonly ClipboardPixel[] {
+  return clipboardBuffer;
+}
+
+/** Replace the clipboard contents with the given pixels. */
+export function setClipboard(pixels: ClipboardPixel[]): void {
+  clipboardBuffer = pixels;
+}
+
+/** Whether the clipboard currently has any pixels in it. */
+export function hasClipboard(): boolean {
+  return clipboardBuffer.length > 0;
+}