feat(view): show default artboard canvas

app/app.ts

@@ -7,10 +7,18 @@ import { createAppStore } from "@editor/store";
 
 export type ImageStudioApp = ReturnType<typeof createImageStudioApp>;
 
-export function createImageStudioApp(options?: { documentName?: string }) {
+export function createImageStudioApp(options?: { documentName?: string; createDefaultArtboard?: boolean }) {
   const registry = createCommandRegistry([...viewportCommands, ...selectionCommands, ...documentCommands]);
   const store = createAppStore(createInitialAppState(options?.documentName), registry);
 
+  if (options?.createDefaultArtboard !== false) {
+    store.dispatch("document.addArtboard", {
+      id: crypto.randomUUID(),
+      name: "Artboard 1",
+      bounds: { x: -400, y: -300, w: 800, h: 600 },
+    });
+  }
+
   return {
     registry,
     store,

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;
   }
 }