build: add react vite scaffold

src/App.test.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { describe, expect, test } from "vitest";
+import { AppStateView } from "./App";
+
+describe("React app dashboard state view", () => {
+  test("renders loading dashboard state", () => {
+    const html = renderToString(
+      <AppStateView
+        dashboard={{
+          state: "loading",
+          title: "Loading Dashboard",
+          subtitle: "Fetching active model",
+          message: "Waiting for the active dashboard document.",
+        }}
+      />,
+    );
+
+    expect(html).toContain("Loading Dashboard");
+    expect(html).toContain("Fetching active model");
+  });
+});

src/App.tsx

@@ -0,0 +1,32 @@
+import type { DashboardRuntimeState } from "$lib/server/dashboard";
+
+export function AppStateView({
+  dashboard,
+}: {
+  dashboard: DashboardRuntimeState;
+}) {
+  if (dashboard.state === "ready") {
+    return <main>{dashboard.document.metadata.title}</main>;
+  }
+
+  return (
+    <main className="state-shell" data-dashboard-state={dashboard.state}>
+      <h1>{dashboard.title}</h1>
+      <p>{dashboard.subtitle}</p>
+      <p>{dashboard.message}</p>
+    </main>
+  );
+}
+
+export default function App() {
+  return (
+    <AppStateView
+      dashboard={{
+        state: "loading",
+        title: "Loading Dashboard",
+        subtitle: "Fetching active model",
+        message: "Waiting for the active dashboard document.",
+      }}
+    />
+  );
+}

src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./app.css";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("Missing React root element");
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

src/svelte-shim.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svelte" {
+  const component: any;
+  export default component;
+}
+
+declare module "*.css" {}