feat(view): add canvas viewport shell

view/CanvasViewport.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+import type { AppStore } from "@editor/store";
+
+export type CanvasViewportProps = {
+  store: AppStore;
+};
+
+export function CanvasViewport({ store }: CanvasViewportProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const resizeObserver = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+
+      const width = Math.floor(entry.contentRect.width);
+      const height = Math.floor(entry.contentRect.height);
+      canvas.width = width;
+      canvas.height = height;
+      store.dispatch("viewport.setSize", { w: width, h: height });
+    });
+
+    resizeObserver.observe(canvas);
+    return () => resizeObserver.disconnect();
+  }, [store]);
+
+  return <canvas ref={canvasRef} className="h-full w-full" />;
+}