pixelweaver 0.1.0

package/server/tests/test_websocket.py

@@ -0,0 +1,275 @@
+"""Tests for the WebSocket message handler."""
+
+from __future__ import annotations
+
+import uuid
+from typing import Any
+from unittest.mock import AsyncMock
+
+import pytest
+
+from pixelweaver.connections import ConnectionManager
+from pixelweaver.state import ServerState
+from pixelweaver.websocket import handle_message
+
+# Shorter aliases for type hints in test signatures
+SS = ServerState
+CM = ConnectionManager
+
+
+def _make_ws() -> AsyncMock:
+    """Create a mock WebSocket."""
+    ws = AsyncMock()
+    ws.send_json = AsyncMock()
+    return ws
+
+
+def _make_command_msg(
+    msg_id: str | None = None,
+    cmd_id: str | None = None,
+) -> dict[str, Any]:
+    """Build a valid command message dict."""
+    return {
+        "type": "command",
+        "id": msg_id or str(uuid.uuid4()),
+        "command": {
+            "type": "draw_pixels",
+            "plugin": "builtin/pencil",
+            "version": "1.0.0",
+            "params": {"x": 5, "y": 10},
+            "id": cmd_id or str(uuid.uuid4()),
+            "timestamp": 1234567890,
+        },
+    }
+
+
+@pytest.fixture()
+def state_with_project() -> ServerState:
+    """ServerState with one active project."""
+    state = ServerState()
+    state.create_project("test", 32, 32)
+    return state
+
+
+@pytest.fixture()
+def mgr() -> ConnectionManager:
+    return ConnectionManager()
+
+
+class TestCommandHandling:
+    @pytest.mark.asyncio
+    async def test_command_ack(self, state_with_project: SS, mgr: CM):
+        ws = _make_ws()
+        msg = _make_command_msg(msg_id="m1", cmd_id="c1")
+        await handle_message(ws, msg, state_with_project, mgr)
+
+        # Should have sent an ack
+        ws.send_json.assert_called()
+        sent = ws.send_json.call_args_list[0][0][0]
+        assert sent["type"] == "command_ack"
+        assert sent["id"] == "m1"
+        assert sent["command_id"] == "c1"
+        assert sent["success"] is True
+
+    @pytest.mark.asyncio
+    async def test_command_stored_in_history(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        msg = _make_command_msg()
+        await handle_message(ws, msg, state_with_project, mgr)
+
+        project = state_with_project.get_active_project()
+        assert project is not None
+        assert len(project.command_history) == 1
+        assert project.command_history[0]["type"] == "draw_pixels"
+
+    @pytest.mark.asyncio
+    async def test_command_broadcast_to_others(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws1 = _make_ws()
+        ws2 = _make_ws()
+        # Register ws2 as another connected client
+        mgr.active_connections.append(ws2)
+
+        msg = _make_command_msg()
+        await handle_message(ws1, msg, state_with_project, mgr)
+
+        # ws2 should have received a broadcast
+        ws2.send_json.assert_called_once()
+        broadcast = ws2.send_json.call_args[0][0]
+        assert broadcast["type"] == "command_broadcast"
+        assert broadcast["source"] == "client"
+
+    @pytest.mark.asyncio
+    async def test_command_reject_no_project(self, mgr: CM):
+        """Command without active project should be rejected."""
+        state = ServerState()
+        ws = _make_ws()
+        msg = _make_command_msg(msg_id="m1", cmd_id="c1")
+        await handle_message(ws, msg, state, mgr)
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "command_reject"
+        assert sent["error"] == "No active project"
+
+
+class TestSyncRequest:
+    @pytest.mark.asyncio
+    async def test_sync_returns_state(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        msg = {"type": "sync_request", "id": "s1"}
+        await handle_message(ws, msg, state_with_project, mgr)
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "state_sync"
+        assert sent["id"] == "s1"
+        assert "project" in sent["state"]
+        assert sent["state"]["project"]["name"] == "test"
+
+
+class TestUndoRedo:
+    @pytest.mark.asyncio
+    async def test_undo_pops_command(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+
+        # First add a command
+        msg = _make_command_msg(msg_id="m1", cmd_id="c1")
+        await handle_message(ws, msg, state_with_project, mgr)
+
+        project = state_with_project.get_active_project()
+        assert project is not None
+        assert len(project.command_history) == 1
+
+        # Now undo
+        ws.send_json.reset_mock()
+        undo_msg = {"type": "undo", "id": "u1"}
+        await handle_message(ws, undo_msg, state_with_project, mgr)
+
+        assert len(project.command_history) == 0
+        assert len(project.redo_stack) == 1
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "command_ack"
+        assert sent["id"] == "u1"
+        assert sent["command_id"] == "c1"
+
+    @pytest.mark.asyncio
+    async def test_redo_restores_command(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+
+        # Add then undo a command
+        msg = _make_command_msg(msg_id="m1", cmd_id="c1")
+        await handle_message(ws, msg, state_with_project, mgr)
+        undo_msg = {"type": "undo", "id": "u1"}
+        await handle_message(ws, undo_msg, state_with_project, mgr)
+
+        project = state_with_project.get_active_project()
+        assert project is not None
+        assert len(project.command_history) == 0
+
+        # Redo
+        ws.send_json.reset_mock()
+        redo_msg = {"type": "redo", "id": "r1"}
+        await handle_message(ws, redo_msg, state_with_project, mgr)
+
+        assert len(project.command_history) == 1
+        assert len(project.redo_stack) == 0
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "command_ack"
+        assert sent["command_id"] == "c1"
+
+    @pytest.mark.asyncio
+    async def test_undo_empty_history_returns_error(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        undo_msg = {"type": "undo", "id": "u1"}
+        await handle_message(ws, undo_msg, state_with_project, mgr)
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "error"
+        assert "Nothing to undo" in sent["error"]
+
+    @pytest.mark.asyncio
+    async def test_redo_empty_stack_returns_error(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        redo_msg = {"type": "redo", "id": "r1"}
+        await handle_message(ws, redo_msg, state_with_project, mgr)
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "error"
+        assert "Nothing to redo" in sent["error"]
+
+    @pytest.mark.asyncio
+    async def test_new_command_clears_redo_stack(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+
+        # Add, undo, then add new command
+        msg1 = _make_command_msg(cmd_id="c1")
+        await handle_message(ws, msg1, state_with_project, mgr)
+        undo_msg = {"type": "undo", "id": "u1"}
+        await handle_message(ws, undo_msg, state_with_project, mgr)
+
+        project = state_with_project.get_active_project()
+        assert project is not None
+        assert len(project.redo_stack) == 1
+
+        msg2 = _make_command_msg(cmd_id="c2")
+        await handle_message(ws, msg2, state_with_project, mgr)
+
+        # Redo stack should be cleared after a new command
+        assert len(project.redo_stack) == 0
+
+
+class TestInvalidMessages:
+    @pytest.mark.asyncio
+    async def test_unknown_type_returns_error(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        bad_msg = {"type": "bogus", "id": "x"}
+        await handle_message(ws, bad_msg, state_with_project, mgr)
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "error"
+
+    @pytest.mark.asyncio
+    async def test_missing_fields_returns_error(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        bad_msg = {"type": "command"}
+        await handle_message(ws, bad_msg, state_with_project, mgr)
+
+        sent = ws.send_json.call_args[0][0]
+        assert sent["type"] == "error"
+
+    @pytest.mark.asyncio
+    async def test_dirty_callback_called(
+        self, state_with_project: SS, mgr: CM,
+    ):
+        ws = _make_ws()
+        dirty_called = False
+
+        def on_dirty():
+            nonlocal dirty_called
+            dirty_called = True
+
+        msg = _make_command_msg()
+        await handle_message(
+            ws, msg, state_with_project, mgr, on_dirty=on_dirty,
+        )
+        assert dirty_called

package/src/App.svelte

@@ -0,0 +1,107 @@
+<!-- PixelWeaver main application shell -->
+<script lang="ts">
+  import MenuBar from './lib/ui/MenuBar.svelte';
+  import NotificationBanner from './lib/ui/notifications/NotificationBanner.svelte';
+  import StatusBar from './lib/ui/StatusBar.svelte';
+  import NewProjectDialog from './lib/ui/NewProjectDialog.svelte';
+  import ExportDialog from './lib/ui/ExportDialog.svelte';
+  import ResizeDialog from './lib/ui/ResizeDialog.svelte';
+  import PromptDialog from './lib/ui/PromptDialog.svelte';
+  import RecoveryDialog from './lib/ui/RecoveryDialog.svelte';
+  import CommandPalette from './lib/ui/command-palette/CommandPalette.svelte';
+  import BisectionExportDialog from './lib/variants/BisectionExportDialog.svelte';
+  import { dialogState } from './lib/ui/dialog-state.svelte.js';
+  import { hasUnsavedChanges } from './lib/core/dispatcher.js';
+  import type { Component } from 'svelte';
+
+  // Lazy-load DockLayout so dockview-core (209KB) is deferred from the initial bundle.
+  let DockLayout: Component | null = $state(null);
+
+  $effect(() => {
+    import('./lib/dock/DockLayout.svelte').then(mod => {
+      DockLayout = mod.default;
+    });
+  });
+
+  // Warn the user before closing the tab if there are unsaved changes.
+  $effect(() => {
+    function onBeforeUnload(e: BeforeUnloadEvent) {
+      if (hasUnsavedChanges()) {
+        e.preventDefault();
+      }
+    }
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => window.removeEventListener('beforeunload', onBeforeUnload);
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="app-shell" oncontextmenu={(e) => { e.preventDefault(); }}>
+  <MenuBar />
+  <NotificationBanner />
+
+  <main class="workspace">
+    <div class="dock-area">
+      {#if DockLayout}
+        <DockLayout />
+      {:else}
+        <div class="dock-loading">Loading workspace...</div>
+      {/if}
+    </div>
+  </main>
+
+  <StatusBar />
+</div>
+
+<NewProjectDialog open={dialogState.newProjectOpen} onClose={() => { dialogState.closeNewProject(); }} />
+<ExportDialog open={dialogState.exportOpen} onClose={() => { dialogState.closeExport(); }} />
+<ResizeDialog open={dialogState.resizeCanvasOpen} onClose={() => { dialogState.closeResizeCanvas(); }} />
+<PromptDialog
+  open={dialogState.promptOpen}
+  title={dialogState.promptConfig?.title ?? ''}
+  message={dialogState.promptConfig?.message ?? ''}
+  defaultValue={dialogState.promptConfig?.defaultValue ?? ''}
+  placeholder={dialogState.promptConfig?.placeholder ?? ''}
+  validate={dialogState.promptConfig?.validate}
+  onConfirm={(value: string) => dialogState.promptConfig?.onConfirm(value)}
+  onCancel={() => { dialogState.closePrompt(); }}
+/>
+<BisectionExportDialog
+  open={dialogState.bisectionExportOpen}
+  groupId={dialogState.bisectionExportGroupId}
+  onClose={() => { dialogState.closeBisectionExport(); }}
+/>
+<RecoveryDialog />
+<CommandPalette />
+
+<style>
+  .app-shell {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .workspace {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .dock-area {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .dock-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary, #888);
+    font-size: 14px;
+    background: var(--surface-primary, #1e1e1e);
+  }
+</style>

package/src/app.css

@@ -0,0 +1,215 @@
+/* PixelWeaver global styles and theme variables */
+
+/* --- Font import --- */
+@import '@fontsource-variable/inter';
+
+/* --- Design tokens (theme-independent) --- */
+:root {
+  --font-ui: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 8px;
+  --space-4: 12px;
+  --space-5: 16px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 48px;
+
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
+
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+  --transition-fast: 100ms ease;
+  --transition-normal: 200ms ease;
+
+  --text-xs: 10px;
+  --text-sm: 11px;
+  --text-base: 12px;
+  --text-lg: 13px;
+  --text-xl: 14px;
+}
+
+/* --- Dark theme (default) --- */
+:root,
+[data-theme="dark"] {
+  --bg-primary: #1e1e1e;
+  --bg-secondary: #252525;
+  --bg-canvas: #121212;
+  --bg-panel: #272727;
+  --bg-toolbar: #1a1a1a;
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --text-muted: #666666;
+  --accent: #4a9eff;
+  --accent-hover: #6ab4ff;
+  --text-on-accent: #ffffff;
+  --border: #3a3a3a;
+  --error: #e5534b;
+  --warning: #d4a04a;
+  --success: #34d67c;
+}
+
+/* --- Light theme --- */
+[data-theme="light"] {
+  --bg-primary: #f0f0f0;
+  --bg-secondary: #e4e4e4;
+  --bg-canvas: #ffffff;
+  --bg-panel: #f5f5f5;
+  --bg-toolbar: #eaeaea;
+  --text-primary: #1a1a1a;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  --accent: #2563eb;
+  --accent-hover: #3b82f6;
+  --text-on-accent: #ffffff;
+  --border: #d0d0d0;
+  --error: #dc2626;
+  --warning: #d97706;
+  --success: #16a34a;
+}
+
+/* --- Base typography and rendering --- */
+:root {
+  font-family: var(--font-ui);
+  font-size: var(--text-base);
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* --- CSS reset --- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Smooth theme transitions -- scoped to UI chrome only.
+ * Applying to * caused unnecessary transition overhead on canvas elements,
+ * SVG icons, dockview internals, color pickers, and animations.
+ */
+body,
+#app,
+div,
+span,
+header,
+nav,
+section,
+aside,
+footer,
+button,
+input,
+textarea,
+select,
+label,
+a,
+li,
+ul,
+ol,
+table,
+th,
+td {
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+/* SVG icons get fill transition for theme switch, but not their child shapes */
+:where(svg) {
+  transition: fill 150ms ease;
+}
+
+/* Performance-critical elements must never have transitions from the global rule */
+canvas,
+video {
+  transition: none;
+}
+
+/* Form elements inherit font from parent instead of browser defaults */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+/* Media elements default to block */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* --- Scrollbar styling (dual approach for Tauri cross-platform) --- */
+
+/* Standard scrollbar (Chrome 121+, Firefox 64+) */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+/* WebKit fallback (WebKitGTK, older WKWebView) */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* --- Layout --- */
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+#app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+/* Allow text selection in input fields */
+input, textarea, [contenteditable] {
+  user-select: text;
+}
+
+/* --- Focus indicators for keyboard accessibility --- */
+
+/* Show a visible outline when an element receives keyboard focus */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Suppress the always-visible :focus outline for mouse/pointer users */
+:focus:not(:focus-visible) {
+  outline: none;
+}