refactor: Update bottom controls for improved styling and functionality

- Adjusted button styles across various components for consistency and better UX.
- Enhanced layout of action controls to utilize whitespace more effectively.
- Updated slider styles for a more modern appearance and improved usability.
- Refined input fields and labels for better accessibility and readability.
- Introduced new app surface styles for a cohesive design across the application.
- Added tests for canvas cursor behavior to ensure correct cursor display during operations.

renderer/layers.ts

@@ -10,7 +10,7 @@ import type { ImageTextureRenderer } from "./image-textures";
 import { documentRectToScreenRect } from "./screen-rect";
 import type { RgbaColor, ScreenRect, WebGlRendererContext } from "./types";
 import type { AdjustmentPass } from "./adjustment-pass";
-import { textLayerRenderAsset } from "./text-asset";
+import { rasterizedTextLayerRenderAsset } from "./text-asset";
 
 const imageLayerColor: RgbaColor = [0.38, 0.42, 0.5, 1];
 const imageLayerInsetColor: RgbaColor = [0.48, 0.54, 0.64, 1];
@@ -77,7 +77,7 @@ function renderTextLayer(context: WebGlRendererContext, documentIndex: DocumentR
   const bounds = resolveIndexedLayerBounds(documentIndex, layer);
   if (!bounds) return;
   const rect = documentRectToScreenRect(context.canvas, bounds, editor.viewport);
-  imageTextureRenderer.render(textLayerRenderAsset(layer), rect, clipRect, opacity, layer.transform.rotation);
+  imageTextureRenderer.render(rasterizedTextLayerRenderAsset(layer), rect, clipRect, opacity, layer.transform.rotation);
 }
 
 function renderLeafLayer(