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.

view/CanvasViewport.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from "react";
 import type { ImageDocument } from "@core/document";
-import type { AppState, MaskEditState } from "@editor/state";
+import { isOperationWorkspacePanel, type AppState, type MaskEditState, type WorkspacePanel } from "@editor/state";
 import type { AppStore } from "@editor/store";
 import type { InteractionMode } from "@editor/tools";
 import type { GlobalKeybindConsumer, GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
@@ -40,7 +40,13 @@ export function CanvasViewport({
   useCanvasInput(canvasRef, store, inputOptions);
   const brushHint = brushUnavailableHint(cursorState.document, cursorState.editor);
   const hasBrushPreview = Boolean(cursorState.hasBrushPreview && !brushHint && canPreviewBrush(cursorState.document, cursorState.editor));
-  const cursorClass = canvasCursorClass(cursorState.editor.tools.interactionMode, cursorState.isPanning, hasBrushPreview, !brushHint);
+  const cursorClass = canvasCursorClass(
+    cursorState.editor.tools.interactionMode,
+    cursorState.isPanning,
+    hasBrushPreview,
+    !brushHint,
+    isOperationWorkspacePanel(cursorState.panel),
+  );
 
   return (
     <canvas
@@ -57,6 +63,7 @@ type CanvasCursorState = {
   editor: BrushTargetEditorState;
   hasBrushPreview: boolean;
   isPanning: boolean;
+  panel: WorkspacePanel;
 };
 
 function selectCanvasCursorState(state: AppState): CanvasCursorState {
@@ -72,6 +79,7 @@ function selectCanvasCursorState(state: AppState): CanvasCursorState {
     },
     hasBrushPreview: Boolean(state.editor.brushPreview),
     isPanning: state.editor.pointerSession?.type === "pan",
+    panel: state.editor.workspace.panel,
   };
 }
 
@@ -80,6 +88,7 @@ function canvasCursorStatesEqual(a: CanvasCursorState, b: CanvasCursorState): bo
     a.document === b.document &&
     a.hasBrushPreview === b.hasBrushPreview &&
     a.isPanning === b.isPanning &&
+    a.panel === b.panel &&
     a.editor.selection === b.editor.selection &&
     a.editor.tools.activeTool === b.editor.tools.activeTool &&
     interactionModesEqual(a.editor.tools.interactionMode, b.editor.tools.interactionMode) &&