Phase 3: room features (modes, room size, doors, wall screens, obstacles, import/export)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-17 12:53:40 -04:00
parent d98ce8ddb7
commit 7ec02ed9ed
10 changed files with 1050 additions and 39 deletions
@@ -0,0 +1,25 @@
+import type { Mode } from "./Room";
+
+export function ModeToggle({ mode, onChange }: { mode: Mode; onChange: (m: Mode) => void }) {
+  const seg = (m: Mode): React.CSSProperties => ({
+    flex: 1,
+    height: 30,
+    border: "none",
+    borderRadius: 6,
+    cursor: "pointer",
+    font: "600 13px system-ui, sans-serif",
+    background: mode === m ? "#fff" : "transparent",
+    color: mode === m ? "#222" : "#666",
+    boxShadow: mode === m ? "0 1px 3px rgba(0,0,0,0.15)" : "none",
+  });
+  return (
+    <div style={{ gridColumn: "1 / -1", display: "flex", gap: 2, padding: 3, background: "#d9d9d9", borderRadius: 9 }}>
+      <button style={seg("layout")} onClick={() => onChange("layout")}>
+        Layout
+      </button>
+      <button style={seg("room")} onClick={() => onChange("room")}>
+        Room
+      </button>
+    </div>
+  );
+}