From bd60d64bc003e0694f72b7687a4885ea8109029b Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 3 Jul 2026 09:36:25 +0200
Subject: [PATCH] feat(view): add canvas viewport shell

---
 view/CanvasViewport.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 view/CanvasViewport.tsx

diff --git a/view/CanvasViewport.tsx b/view/CanvasViewport.tsx
new file mode 100644
index 0000000..253c6ab
--- /dev/null
+++ b/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" />;
+}