From a460d6ea051cfc6cfd921a3dc13bff3f35baa821 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Fri, 3 Jul 2026 09:47:05 +0200
Subject: [PATCH] feat(view): wire app instance into frontend

---
 view/App.tsx      | 29 ++++++++++++++++++++---------
 view/frontend.tsx |  4 +++-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/view/App.tsx b/view/App.tsx
index 7c82f21..4a98125 100644
--- a/view/App.tsx
+++ b/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">
-      <div className="container mx-auto flex min-h-screen flex-col items-center justify-center gap-6 p-8 text-center">
-        <div className="space-y-2">
-          <h1 className="text-4xl font-bold tracking-tight">Image Studio</h1>
-          <p className="text-muted-foreground">A minimal Bun, React, Tailwind CSS, and shadcn/ui starter.</p>
+    <main className="flex min-h-screen 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">
+          {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>
   );
 }
diff --git a/view/frontend.tsx b/view/frontend.tsx
index 3443539..505b949 100644
--- a/view/frontend.tsx
+++ b/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>
 );