feat(view): wire app instance into frontend

view/App.tsx

@@ -1,16 +1,27 @@
-import { Button } from "@/components/ui/button";
+import type { ImageStudioApp } from "@app/app";
+import { CanvasViewport } from "./CanvasViewport";
+import { useAppState } from "./useAppState";
 import "./index.css";
 
-export function App() {
+export type AppProps = {
+  app: ImageStudioApp;
+};
+
+export function App({ app }: AppProps) {
+  const state = useAppState(app.store);
+  const zoomPercent = Math.round(state.editor.viewport.zoom * 100);
+
   return (
-    <main className="min-h-screen bg-background text-foreground">
+    <main className="flex min-h-screen flex-col bg-background text-foreground">
-      <div className="container mx-auto flex min-h-screen flex-col items-center justify-center gap-6 p-8 text-center">
+      <header className="flex h-12 items-center justify-between border-b px-4">
-        <div className="space-y-2">
+        <h1 className="font-semibold">Image Studio</h1>
-          <h1 className="text-4xl font-bold tracking-tight">Image Studio</h1>
+        <div className="text-sm text-muted-foreground">
-          <p className="text-muted-foreground">A minimal Bun, React, Tailwind CSS, and shadcn/ui starter.</p>
+          {state.document.name} · {zoomPercent}% · {state.editor.viewport.size.w}×{state.editor.viewport.size.h}
-        </div>
-        <Button>Get started</Button>
         </div>
+      </header>
+      <section className="min-h-0 flex-1 bg-muted">
+        <CanvasViewport store={app.store} />
+      </section>
     </main>
   );
 }

view/frontend.tsx

@@ -5,14 +5,16 @@
  * It is included in `view/index.html`.
  */
 
+import { createImageStudioApp } from "@app/app";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
 const elem = document.getElementById("root")!;
+const imageStudioApp = createImageStudioApp();
 const app = (
   <StrictMode>
-    <App />
+    <App app={imageStudioApp} />
   </StrictMode>
 );