refactor: Update bottom controls for improved styling and functionality

- Adjusted button styles across various components for consistency and better UX.
- Enhanced layout of action controls to utilize whitespace more effectively.
- Updated slider styles for a more modern appearance and improved usability.
- Refined input fields and labels for better accessibility and readability.
- Introduced new app surface styles for a cohesive design across the application.
- Added tests for canvas cursor behavior to ensure correct cursor display during operations.

commands/workspace.test.ts

@@ -4,10 +4,20 @@ import { workspaceSetPanelCommand } from "./workspace";
 
 describe("workspace commands", () => {
   test.each(["generate", "chromaKey"] as const)("opens the %s operation without changing the persistent tool", (panel) => {
-    const state = createInitialAppState("Test");
+    const initial = createInitialAppState("Test");
+    const state = {
+      ...initial,
+      editor: {
+        ...initial.editor,
+        tools: { ...initial.editor.tools, activeTool: "brush" as const, interactionMode: { type: "tool" as const, tool: "brush" as const } },
+        brushPreview: { position: { x: 10, y: 20 } },
+        brushStrokePreview: { layerId: "layer", assetId: "asset", source: "preview" },
+      },
+    };
     const next = workspaceSetPanelCommand.execute({ state }, { panel });
     expect(next.editor.workspace.panel).toBe(panel);
-    expect(next.editor.tools.activeTool).toBe("select");
-    expect(next.editor.tools.interactionMode).toEqual({ type: "tool", tool: "select" });
+    expect(next.editor.tools.activeTool).toBe("brush");
+    expect(next.editor.brushPreview).toBeUndefined();
+    expect(next.editor.brushStrokePreview).toBeUndefined();
   });
 });

commands/workspace.ts

@@ -10,12 +10,14 @@ export const workspaceSetPanelCommand: Command<WorkspaceSetPanelPayload> = {
   history: { mode: "ignore" },
   execute({ state }, payload) {
     if (!workspacePanels.has(payload.panel)) return state;
-    if (state.editor.workspace.panel === payload.panel) return state;
+    if (state.editor.workspace.panel === payload.panel && !state.editor.brushPreview && !state.editor.brushStrokePreview) return state;
     return {
       ...state,
       editor: {
         ...state.editor,
         workspace: { panel: payload.panel },
+        brushPreview: undefined,
+        brushStrokePreview: undefined,
       },
     };
   },