Ui

app/routes/home.tsx

@@ -1,7 +1,7 @@
+import type React from "react";
 import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
 
-export function meta({}: Route.MetaArgs) {
+export function meta({ }: Route.MetaArgs) {
   return [
     { title: "New React Router App" },
     { name: "description", content: "Welcome to React Router!" },
@@ -9,5 +9,63 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  return <Welcome />;
+  return (
+    <div className="h-screen grid grid-cols-[280px_1fr]">
+      {/* Sidebar */}
+      <aside className="bg-panel p-4 space-y-4">
+        <div className="text-lg font-semibold">
+          3dplot-gen
+          <div className="text-xs text-muted">
+            CSV → 3D Plot
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <Control label="CSV file">
+            <input
+              type="file"
+              accept=".csv"
+              className="w-full text-sm file:bg-bg file:text-slate-300 file:border-0
+                         file:rounded file:px-2 file:py-1"
+            />
+          </Control>
+
+          <Control label="X axis">
+            <select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
+              <option>-</option>
+            </select>
+          </Control>
+
+          <Control label="Y axis">
+            <select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
+              <option>-</option>
+            </select>
+          </Control>
+
+          <Control label="Z axis">
+            <select className="w-full bg-bg border border-slate-700 rounded px-2 py-1">
+              <option>-</option>
+            </select>
+          </Control>
+        </div>
+      </aside>
+
+      {/* Plot */}
+      <main className="bg-plot">
+        <div
+          id="plot"
+          className="w-full h-full"
+        />
+      </main>
+    </div>
+  );
 }
+
+function Control({ label, children }: { label: string, children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <label className="text-xs text-muted">{label}</label>
+      {children}
+    </div>
+  );
+}