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/bottom-controls/ColorPicker.tsx

@@ -29,12 +29,12 @@ export function BottomControlColorPicker({ value, onValueChange, ...props }: Bot
     <div className="flex items-center gap-3">
       <button
         type="button"
-        className="grid size-10 place-items-center rounded-full border border-white/40 bg-transparent text-white transition hover:border-white focus:outline-none focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white"
+        className="grid size-8 place-items-center rounded-md border border-white/20 bg-white/[0.03] text-white transition hover:border-white/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/50"
         aria-label={props["aria-label"]}
         title={value}
         onClick={() => inputRef.current?.click()}
       >
-        <span className="size-6 rounded-full border border-white/25" style={{ backgroundColor: value }} />
+        <span className="size-5 rounded border border-white/20" style={{ backgroundColor: value }} />
       </button>
       <input
         ref={inputRef}
@@ -45,7 +45,7 @@ export function BottomControlColorPicker({ value, onValueChange, ...props }: Bot
         onChange={(event) => onValueChange(event.target.value)}
       />
       <input
-        className="h-10 w-24 bg-transparent px-2 font-mono text-base uppercase text-white outline-none transition placeholder:text-white/30 focus:text-white"
+        className="h-8 w-20 bg-transparent px-2 font-mono text-xs uppercase text-white outline-none transition placeholder:text-white/25 focus:text-white"
         value={draft}
         aria-label={`${props["aria-label"]} hex value`}
         spellCheck={false}