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/bottom-controls/styles.ts

@@ -1,21 +1,29 @@
+export function bottomControlMenuClass() {
+  return "flex w-full items-center justify-center gap-4 tabular-nums";
+}
+
+export function bottomControlFieldClass() {
+  return "flex items-center gap-3";
+}
+
 export function bottomControlDividerClass() {
-  return "mx-1 h-4 w-px bg-white/15";
+  return "h-8 w-px bg-white/15";
 }
 
 export function bottomControlLabelClass() {
-  return "text-white/60";
+  return "text-sm text-white/60";
 }
 
 export function bottomControlValueClass() {
-  return "min-w-10 text-center text-white";
+  return "min-w-16 text-center text-base text-white";
 }
 
 export function bottomControlInputClass() {
-  return "h-7 w-14 px-1 text-center text-white outline-none transition placeholder:text-white/30 focus:text-white";
+  return "h-10 w-20 px-2 text-center text-base text-white outline-none transition placeholder:text-white/30 focus:text-white";
 }
 
 export function bottomControlIconSlotClass() {
-  return "grid size-7 place-items-center rounded-full text-white/80";
+  return "grid size-12 place-items-center rounded-full text-white/80";
 }
 
 export function bottomControlButtonClass() {