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

@@ -5,7 +5,7 @@ import type { Rect } from "@core/geometry";
 import type { AppStore } from "@editor/store";
 import type { TransformTarget } from "@editor/transform";
 import { BottomControlDivider } from "./Divider";
-import { bottomControlIconSlotClass, bottomControlInputClass, bottomControlLabelClass } from "./styles";
+import { bottomControlFieldClass, bottomControlIconSlotClass, bottomControlInputClass, bottomControlLabelClass, bottomControlMenuClass } from "./styles";
 
 export type TransformControlsProps = {
   bounds: Rect;
@@ -39,9 +39,9 @@ export function TransformControls({ bounds, target, dispatch }: TransformControl
   };
 
   return (
-    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+    <div className={bottomControlMenuClass()}>
       <span className={bottomControlIconSlotClass()}>
-        <BoundingBox size={16} weight="regular" />
+        <BoundingBox size={24} weight="regular" />
       </span>
       <BottomControlDivider />
       <BoundsInput label="X" field="x" draft={draft.x} setDraft={setDraft} commitField={commitField} />
@@ -67,7 +67,7 @@ function BoundsInput({
   commitField: (field: BoundsField) => void;
 }) {
   return (
-    <label className="flex items-center gap-1">
+    <label className={bottomControlFieldClass()}>
       <span className={bottomControlLabelClass()}>{label}</span>
       <input
         className={bottomControlInputClass()}