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/text-asset.ts

@@ -14,6 +14,34 @@ export function textLayerRenderAsset(layer: TextLayer): Asset {
   return { id: `text-render:${layer.id}`, name: layer.name, mimeType: "image/svg+xml", source: `data:image/svg+xml,${encodeURIComponent(svg)}`, intrinsicSize: size };
 }
 
+/** Rasterizes authoritative text for the live WebGL renderer without relying on browser SVG text decoding. */
+export function rasterizedTextLayerRenderAsset(layer: TextLayer): Asset {
+  const size = measureTextLayer(layer);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(size.w));
+  canvas.height = Math.max(1, Math.ceil(size.h));
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Failed to create text rasterization context");
+
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.fillStyle = layer.style.color;
+  context.font = `${layer.style.fontStyle} ${layer.style.fontWeight} ${layer.style.fontSize}px ${JSON.stringify(layer.style.fontFamily)}, sans-serif`;
+  context.textAlign = layer.style.alignment;
+  context.textBaseline = "alphabetic";
+  const x = layer.style.alignment === "left" ? 0 : layer.style.alignment === "center" ? size.w / 2 : size.w;
+  for (const [index, line] of layer.content.split("\n").entries()) {
+    context.fillText(line || " ", x, (index + 0.82) * layer.style.fontSize * layer.style.lineHeight);
+  }
+
+  return {
+    id: `text-render:${layer.id}`,
+    name: layer.name,
+    mimeType: "image/png",
+    source: canvas.toDataURL("image/png"),
+    intrinsicSize: size,
+  };
+}
+
 function escapeXml(value: string) {
   return value.replace(/[&<>"']/g, (character) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&apos;" })[character]!);
 }