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/Slider.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties } from "react";
+
+export type BottomControlSliderProps = {
+  "aria-label": string;
+  min: number;
+  max: number;
+  value: number;
+  step?: number;
+  className?: string;
+  onValueChange: (value: number) => void;
+};
+
+type SliderStyle = CSSProperties & {
+  "--slider-progress": string;
+};
+
+export function BottomControlSlider({ min, max, value, step = 1, className = "", onValueChange, ...props }: BottomControlSliderProps) {
+  const progress = max === min ? 0 : ((value - min) / (max - min)) * 100;
+
+  return (
+    <input
+      {...props}
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      className={`bottom-control-slider ${className}`}
+      style={{ "--slider-progress": `${Math.max(0, Math.min(100, progress))}%` } as SliderStyle}
+      onChange={(event) => onValueChange(Number(event.target.value))}
+    />
+  );
+}