pixelweaver 0.1.0

package/docs/server-src-pixelweaver-state.md

@@ -0,0 +1,12 @@
+---
+title: server.src.pixelweaver.state
+description: "In-memory authoritative state for PixelWeaver projects."
+generated: true
+nav_group: "API Reference"
+nav_order: 22
+---
+<!-- generated by selfdoc gen, do not edit -->
+
+# server.src.pixelweaver.state
+
+:-: ref path="server.src.pixelweaver.state"

package/docs/server-src-pixelweaver-storage.md

@@ -0,0 +1,12 @@
+---
+title: server.src.pixelweaver.storage
+description: "Project file I/O for PixelWeaver."
+generated: true
+nav_group: "API Reference"
+nav_order: 23
+---
+<!-- generated by selfdoc gen, do not edit -->
+
+# server.src.pixelweaver.storage
+
+:-: ref path="server.src.pixelweaver.storage"

package/docs/server-src-pixelweaver-websocket.md

@@ -0,0 +1,12 @@
+---
+title: server.src.pixelweaver.websocket
+description: "WebSocket message handler for PixelWeaver."
+generated: true
+nav_group: "API Reference"
+nav_order: 24
+---
+<!-- generated by selfdoc gen, do not edit -->
+
+# server.src.pixelweaver.websocket
+
+:-: ref path="server.src.pixelweaver.websocket"

package/docs/server-src-pixelweaver.md

@@ -0,0 +1,12 @@
+---
+title: server.src.pixelweaver
+description: "PixelWeaver collaboration server."
+generated: true
+nav_group: "API Reference"
+nav_order: 1
+---
+<!-- generated by selfdoc gen, do not edit -->
+
+# server.src.pixelweaver
+
+:-: ref path="server.src.pixelweaver"

package/e2e/app-launch.test.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('App Launch', () => {
+  test('should load the application', async ({ page }) => {
+    await page.goto('/');
+    // Check that the app shell rendered
+    await expect(page.locator('canvas').first()).toBeVisible();
+  });
+
+  test('should show the menu bar', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByText('PixelWeaver')).toBeVisible();
+  });
+
+  test('should show the tool bar', async ({ page }) => {
+    await page.goto('/');
+    // The toolbar should have tool buttons
+    await expect(page.locator('.toolbar-panel')).toBeVisible();
+  });
+
+  test('should show the status bar', async ({ page }) => {
+    await page.goto('/');
+    // Status bar shows canvas dimensions
+    await expect(page.getByText('32 x 32')).toBeVisible();
+  });
+
+  test('should show the layer panel', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByText('Layers', { exact: true })).toBeVisible();
+    // Click the Layers tab to reveal its content
+    await page.getByText('Layers', { exact: true }).click();
+    // Default layer should exist
+    await expect(page.getByText('Layer 1')).toBeVisible();
+  });
+});

package/e2e/menus.test.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Menu Bar', () => {
+  test('should open File menu on click', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('File').click();
+    // Dropdown should appear with menu items
+    await expect(page.getByText('New Project')).toBeVisible();
+    await expect(page.getByText('Export')).toBeVisible();
+  });
+
+  test('should open Edit menu', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('menuitem', { name: 'Edit' }).click();
+    await expect(page.getByText('Undo')).toBeVisible();
+    await expect(page.getByText('Redo')).toBeVisible();
+  });
+
+  test('should close menu on Escape', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('File').click();
+    await expect(page.getByText('New Project')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByText('New Project')).not.toBeVisible();
+  });
+});

package/e2e/tools.test.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool Activation', () => {
+  test('should activate pencil tool with keyboard shortcut B', async ({ page }) => {
+    await page.goto('/');
+    await page.keyboard.press('b');
+    // The status bar should show the active tool
+    // Check for 'pencil' text in the status bar area
+    await expect(page.locator('.statusbar')).toContainText('pencil');
+  });
+
+  test('should activate eraser tool with keyboard shortcut E', async ({ page }) => {
+    await page.goto('/');
+    await page.keyboard.press('e');
+    await expect(page.locator('.statusbar')).toContainText('eraser');
+  });
+
+  test('should switch tools by clicking toolbar buttons', async ({ page }) => {
+    await page.goto('/');
+    // Find and click a tool button (they show tool name as text)
+    const fillButton = page.locator('.toolbar button', { hasText: /fill/i });
+    if (await fillButton.count() > 0) {
+      await fillButton.click();
+      await expect(page.locator('.statusbar')).toContainText('fill');
+    }
+  });
+});

package/e2e/undo-redo.test.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Undo/Redo', () => {
+  test('should support Ctrl+Z for undo', async ({ page }) => {
+    await page.goto('/');
+    // This is a basic test -- just verify no crash on undo with empty stack
+    await page.keyboard.press('Control+z');
+    // App should still be responsive
+    await expect(page.locator('canvas').first()).toBeVisible();
+  });
+});

package/eslint.config.js

@@ -0,0 +1,62 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import svelteParser from 'svelte-eslint-parser';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  ...ts.configs.strictTypeChecked,
+  ...svelte.configs['flat/recommended'],
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        extraFileExtensions: ['.svelte'],
+      },
+    },
+  },
+  {
+    files: ['**/*.svelte', '**/*.svelte.ts'],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: {
+        parser: ts.parser,
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        extraFileExtensions: ['.svelte'],
+      },
+    },
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    // Honor the leading-underscore convention for intentionally unused symbols.
+    // Matches the prevailing _e / _ctx / _params pattern used in callback
+    // signatures where arguments are required but unused.
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  {
+    ignores: ['dist/', 'node_modules/', 'src-tauri/', 'server/', 'scripts/', '*.config.js', '*.config.ts'],
+  },
+];

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PixelWeaver</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "pixelweaver",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "test:e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.24.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@iconify-json/lucide": "^1.2.101",
+    "@playwright/test": "^1.59.1",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tsconfig/svelte": "^5.0.8",
+    "@types/culori": "^4.0.1",
+    "@types/node": "^24.12.2",
+    "eslint": "^9.24.0",
+    "eslint-plugin-svelte": "^3.5.1",
+    "globals": "^16.0.0",
+    "jsdom": "^29.0.2",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.5.1",
+    "svelte": "^5.55.1",
+    "svelte-check": "^4.4.6",
+    "svelte-eslint-parser": "^1.2.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.32.1",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^8.0.4",
+    "vitest": "^3.1.1"
+  },
+  "dependencies": {
+    "culori": "^4.0.2",
+    "dockview-core": "^5.2.0",
+    "fflate": "^0.8.2"
+  },
+  "keywords": [
+    "rlsbl"
+  ]
+}

package/playwright.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/plugins/builtin/advanced-fill-tool.ts

@@ -0,0 +1,146 @@
+/**
+ * Advanced Fill Tool Plugin -- flood fill with color tolerance.
+ *
+ * Registers:
+ *   - Command: `flood_fill_tolerance` (tier: 'frame')
+ *   - Tool: `fill-tolerance`
+ *
+ * Extends the basic flood fill by allowing a tolerance threshold.
+ * Pixels whose color distance (OKLab) from the target pixel is within
+ * the tolerance are included in the fill region.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { PixelBuffer } from '../../src/lib/canvas/pixel-buffer.js';
+import type { Point } from './drawing-utils.js';
+import { snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from './drawing-utils.js';
+import { rgbToHex, colorDistance } from '../../src/lib/color/color-utils.js';
+import AdvFillIcon from '~icons/lucide/wand';
+
+/**
+ * Flood fill with color tolerance.
+ * Returns all connected pixels whose color distance from the starting pixel
+ * is <= tolerance (0-1 range, where 0 = exact match, 1 = any color).
+ */
+export function floodFillTolerance(
+  buffer: PixelBuffer,
+  startX: number,
+  startY: number,
+  tolerance: number,
+): Point[] {
+  if (!buffer.inBounds(startX, startY)) return [];
+
+  const [tr, tg, tb, ta] = buffer.getPixel(startX, startY);
+  const targetHex = rgbToHex(tr, tg, tb);
+  const targetIsTransparent = ta === 0;
+  const visited = new Set<number>();
+  const result: Point[] = [];
+  const queue: Point[] = [{ x: startX, y: startY }];
+  const w = buffer.width;
+
+  visited.add(startY * w + startX);
+
+  while (queue.length > 0) {
+    const next = queue.shift();
+    if (!next) break;
+    const { x, y } = next;
+    result.push({ x, y });
+
+    const neighbors: Point[] = [
+      { x: x - 1, y },
+      { x: x + 1, y },
+      { x, y: y - 1 },
+      { x, y: y + 1 },
+    ];
+
+    for (const n of neighbors) {
+      if (!buffer.inBounds(n.x, n.y)) continue;
+      const key = n.y * w + n.x;
+      if (visited.has(key)) continue;
+      visited.add(key);
+
+      const [r, g, b, a] = buffer.getPixel(n.x, n.y);
+
+      // Handle transparency matching: transparent pixels only match other transparent pixels
+      if (targetIsTransparent) {
+        if (a === 0) queue.push(n);
+        continue;
+      }
+
+      // Non-transparent target: check if neighbor is non-transparent and within tolerance
+      if (a === 0) continue;
+
+      const neighborHex = rgbToHex(r, g, b);
+      const dist = colorDistance(targetHex, neighborHex);
+      if (dist <= tolerance) {
+        queue.push(n);
+      }
+    }
+  }
+
+  return result;
+}
+
+export const advancedFillToolPlugin: PluginModule = {
+  name: 'builtin/advanced-fill',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('flood_fill_tolerance', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const { r, g, b, a } = hexToRgba(params["color"]);
+        const tolerance = params["tolerance"];
+        const region = floodFillTolerance(
+          buffer,
+          params["x"],
+          params["y"],
+          tolerance,
+        );
+
+        const snapshot = snapshotPixels(buffer, region);
+        const fillPixels = region.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, fillPixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Flood fill at (${String(params["x"])}, ${String(params["y"])}) with ${String(params["color"])} tolerance=${String(params["tolerance"])}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:fill-tolerance', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'fill-tolerance',
+      group: 'advanced',
+      order: 10,
+    });
+
+    api.addTool('fill-tolerance', {
+      icon: AdvFillIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        ctx.api.dispatch({
+          type: 'flood_fill_tolerance',
+          plugin: 'builtin/advanced-fill',
+          version: '1.0.0',
+          params: {
+            x: ctx.canvasX,
+            y: ctx.canvasY,
+            color: ctx.color,
+            tolerance: 0.1,
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};

package/plugins/builtin/circle-tool.ts

@@ -0,0 +1,186 @@
+/**
+ * Circle/Ellipse Tool Plugin -- draws ellipses and circles.
+ *
+ * Registers:
+ *   - Command: `draw_ellipse` (tier: 'frame')
+ *   - Tool: `ellipse`
+ *
+ * Click-drag defines the bounding box. Shift constrains to a perfect circle
+ * (handled at the viewport level; the command just receives cx/cy/rx/ry).
+ * Supports outline and filled modes via the `filled` param.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import {
+  ellipseOutline,
+  ellipseFilled,
+  snapshotPixels,
+  applyPixels,
+  hexToRgba,
+  makeSnapshotUndo,
+} from './drawing-utils.js';
+import { getToolOptionValue } from '../../src/lib/core/tool-options-state.svelte.js';
+import { setShapePreview, clearShapePreview } from '../../src/lib/canvas/shape-preview-state.svelte.js';
+import CircleIcon from '~icons/lucide/circle';
+import PaintBucketIcon from '~icons/lucide/paint-bucket';
+
+export const circleToolPlugin: PluginModule = {
+  name: 'builtin/circle',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_ellipse', {
+      tier: 'frame',
+      icon: CircleIcon,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const cx = params["cx"];
+        const cy = params["cy"];
+        const rx = params["rx"];
+        const ry = params["ry"];
+        const filled = params["filled"];
+        const { r, g, b, a } = hexToRgba(params["color"]);
+
+        const pointsFn = filled ? ellipseFilled : ellipseOutline;
+        const points = pointsFn(cx, cy, rx, ry);
+
+        const snapshot = snapshotPixels(buffer, points);
+        const pixels = points.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const filled = params["filled"] ? 'filled ' : '';
+        return `Drew ${filled}ellipse at (${String(params["cx"])},${String(params["cy"])}) rx=${String(params["rx"])} ry=${String(params["ry"])}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:ellipse', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'ellipse',
+      group: 'shapes',
+      order: 20,
+    });
+
+    // -- Stroke state --
+    let drawing = false;
+    let startX = 0;
+    let startY = 0;
+    let color = '';
+
+    api.addTool('ellipse', {
+      icon: CircleIcon,
+      cursor: 'crosshair',
+      options: [
+        { id: 'filled', label: 'Filled', icon: PaintBucketIcon, type: 'toggle', defaultValue: false },
+      ],
+
+      onPointerDown(_e, ctx) {
+        drawing = true;
+        startX = ctx.canvasX;
+        startY = ctx.canvasY;
+        color = ctx.color;
+      },
+
+      onPointerMove(e, ctx) {
+        if (!drawing) return;
+
+        // Shift constrains to perfect circle (equal radii)
+        let endX = ctx.canvasX;
+        let endY = ctx.canvasY;
+        if (e.shiftKey) {
+          const maxDim = Math.max(Math.abs(endX - startX), Math.abs(endY - startY));
+          endX = startX + maxDim * (Math.sign(endX - startX) || 1);
+          endY = startY + maxDim * (Math.sign(endY - startY) || 1);
+        }
+
+        // Ctrl draws from center: start becomes center, mirror endpoint
+        let previewStartX = startX;
+        let previewStartY = startY;
+        let previewEndX = endX;
+        let previewEndY = endY;
+        if (e.ctrlKey) {
+          const dx = endX - startX;
+          const dy = endY - startY;
+          previewStartX = startX - dx;
+          previewStartY = startY - dy;
+          previewEndX = startX + dx;
+          previewEndY = startY + dy;
+        }
+
+        setShapePreview({
+          type: 'ellipse',
+          startX: previewStartX,
+          startY: previewStartY,
+          endX: previewEndX,
+          endY: previewEndY,
+          color,
+          filled: getToolOptionValue('ellipse', 'filled') as boolean,
+        });
+      },
+
+      onPointerUp(e, ctx) {
+        if (!drawing) return;
+        drawing = false;
+        clearShapePreview();
+
+        // Shift constrains to perfect circle (equal radii)
+        let endX = ctx.canvasX;
+        let endY = ctx.canvasY;
+        if (e.shiftKey) {
+          const maxDim = Math.max(Math.abs(endX - startX), Math.abs(endY - startY));
+          endX = startX + maxDim * (Math.sign(endX - startX) || 1);
+          endY = startY + maxDim * (Math.sign(endY - startY) || 1);
+        }
+
+        // Ctrl draws from center: start becomes center, mirror endpoint
+        let finalStartX = startX;
+        let finalStartY = startY;
+        let finalEndX = endX;
+        let finalEndY = endY;
+        if (e.ctrlKey) {
+          const dx = endX - startX;
+          const dy = endY - startY;
+          finalStartX = startX - dx;
+          finalStartY = startY - dy;
+          finalEndX = startX + dx;
+          finalEndY = startY + dy;
+        }
+
+        // Bounding box from drag
+        const x0 = Math.min(finalStartX, finalEndX);
+        const y0 = Math.min(finalStartY, finalEndY);
+        const x1 = Math.max(finalStartX, finalEndX);
+        const y1 = Math.max(finalStartY, finalEndY);
+
+        // Derive center and radii from bounding box
+        const cx = Math.round((x0 + x1) / 2);
+        const cy = Math.round((y0 + y1) / 2);
+        const rx = Math.floor((x1 - x0) / 2);
+        const ry = Math.floor((y1 - y0) / 2);
+
+        ctx.api.dispatch({
+          type: 'draw_ellipse',
+          plugin: 'builtin/circle',
+          version: '1.0.0',
+          params: {
+            cx,
+            cy,
+            rx,
+            ry,
+            filled: getToolOptionValue('ellipse', 'filled'),
+            color,
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};