feat: enhance bottom controls and UI components

- Updated BottomControlsIsland for improved layout and styling.
- Refactored LayersSheet to enhance usability and visual consistency.
- Modified ToolOverlay for better tool selection experience.
- Improved BrushControls with new ColorPicker and Slider components.
- Enhanced PanControls and TransformControls for better user interaction.
- Updated ZoomControls for consistent button sizes and styles.
- Introduced new styles for bottom controls in styles.ts and index.css.
- Added BottomControlColorPicker, BottomControlSelectMenu, and BottomControlSlider components for better modularity and reusability.

view/ToolOverlay.tsx

@@ -15,7 +15,7 @@ export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverl
   return (
     <nav
       aria-label="Tools"
-      className="pointer-events-auto flex flex-col gap-1 rounded-lg border border-white/10 bg-black/70 p-1 text-white shadow-xl backdrop-blur"
+      className="pointer-events-auto flex w-20 flex-col items-center gap-3 rounded-full p-2 text-white backdrop-blur-xl"
     >
       {availableToolIds.map((tool) => {
         const active = isToolHighlighted(tool, activeTool, interactionMode);
@@ -31,7 +31,7 @@ export function ToolOverlay({ activeTool, interactionMode, dispatch }: ToolOverl
             className={buttonClass(active)}
             onClick={() => dispatch(commandIds.toolSetActive, { tool })}
           >
-            <Icon size={22} weight={active ? "fill" : "regular"} />
+            <Icon size={24} weight={active ? "fill" : "regular"} />
           </button>
         );
       })}
@@ -58,5 +58,6 @@ function isToolHighlighted(tool: ToolId, activeTool: ToolId, interactionMode: In
 }
 
 function buttonClass(active: boolean) {
-  return `grid size-9 place-items-center rounded-md transition focus:outline-none focus-visible:outline-none ${active ? "bg-white text-black" : "text-white/80 hover:bg-white/10 hover:text-white"}`;
+  const base = "inline-flex size-12 items-center justify-center rounded-full text-xs font-medium transition focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30";
+  return active ? `${base} bg-white text-black hover:bg-white hover:text-black` : `${base} text-white/75 hover:bg-white/10 hover:text-white`;
 }