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.

renderer/transform-controls.ts

@@ -5,8 +5,8 @@ import { clearScreenRect } from "./clear-rect";
 import { documentRectToScreenRect } from "./screen-rect";
 import type { RgbaColor, ScreenRect, WebGlRendererContext } from "./types";
 
-const handleColor: RgbaColor = [1, 1, 1, 1];
-const handleBorderColor: RgbaColor = [0.1, 0.65, 1, 1];
+const handleFillColor: RgbaColor = [0, 0, 0, 0.88];
+const handleBorderColor: RgbaColor = [1, 1, 1, 0.95];
 
 export function renderTransformControls(context: WebGlRendererContext, document: ImageDocument, editor: EditorState) {
   const target = selectedTransformTarget(document, editor.selection);
@@ -16,12 +16,12 @@ export function renderTransformControls(context: WebGlRendererContext, document:
   const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
   for (const handle of transformHandleRects(rect)) {
     clearScreenRect(context, handle.border, handleBorderColor);
-    clearScreenRect(context, handle.fill, handleColor);
+    clearScreenRect(context, handle.fill, handleFillColor);
   }
 }
 
 function transformHandleRects(rect: ScreenRect) {
-  const size = 8;
+  const size = 12;
   const border = 2;
   const half = size / 2;
   const points = [