feat(view): show default artboard canvas

view/App.tsx

@@ -12,7 +12,7 @@ export function App({ app }: AppProps) {
   const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
 
   return (
-    <main className="flex min-h-screen flex-col bg-background text-foreground">
+    <main className="flex h-full flex-col bg-background text-foreground">
       <header className="flex h-12 items-center justify-between border-b px-4">
         <h1 className="font-semibold">Image Studio</h1>
         <div className="text-sm text-muted-foreground">

view/CanvasViewport.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { AppStore } from "@editor/store";
 import type { GlobalPointerConsumer, GlobalWheelConsumer } from "@input/index";
 import {
@@ -24,6 +24,7 @@ export function CanvasViewport({
   globalWheelConsumer = ignoreGlobalWheel,
 }: CanvasViewportProps) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [isPanning, setIsPanning] = useState(false);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -73,6 +74,7 @@ export function CanvasViewport({
       if (!consumed) return;
 
       canvas.setPointerCapture(event.pointerId);
+      setIsPanning(true);
       event.preventDefault();
     };
 
@@ -83,7 +85,10 @@ export function CanvasViewport({
 
     const handlePointerUp = (event: PointerEvent) => {
       const consumed = panHandler.pointerUp(pointerInputEventFromPointerEvent(event));
-      if (consumed) event.preventDefault();
+      if (!consumed) return;
+
+      setIsPanning(false);
+      event.preventDefault();
     };
 
     canvas.addEventListener("pointerdown", handlePointerDown);
@@ -118,5 +123,5 @@ export function CanvasViewport({
     return () => canvas.removeEventListener("wheel", handleWheel);
   }, [globalWheelConsumer, store]);
 
-  return <canvas ref={canvasRef} className="h-full w-full" />;
+  return <canvas ref={canvasRef} className={isPanning ? "h-full w-full cursor-grabbing" : "h-full w-full cursor-grab"} />;
 }

view/index.css

@@ -5,7 +5,13 @@
     @apply font-sans;
   }
 
+  html,
+  body,
+  #root {
+    @apply h-full;
+  }
+
   body {
-    @apply m-0 min-w-[320px] min-h-screen bg-background text-foreground;
+    @apply m-0 min-w-[320px] bg-background text-foreground;
   }
 }