Adds first version of the app. Local storage only.

2026-09-01 14:44:49 -05:00
commit 9710f1ee5a
44 changed files with 5865 additions and 0 deletions
@@ -0,0 +1,62 @@
+# AV Planner
+
+Plan out AV/network installs: define devices and their ports, wire them together
+on a canvas, and get a bill of materials (devices + cables, with lengths) for
+what you'll need to buy.
+
+## Stack
+
+- **React 19 + TypeScript + Vite**
+- **[@xyflow/react](https://reactflow.dev)** (React Flow) for the device/wiring canvas
+- **Zustand** for app state
+- **Tailwind CSS v4** for styling
+
+## Architecture
+
+```
+src/
+  domain/       Framework-agnostic types + logic (compatibility rules, BOM math,
+                the built-in connector/cable/device library). No React, no
+                React Flow — safe to unit test or reuse from a future backend.
+  data/         Storage abstraction. `ProjectRepository` is the interface the
+                rest of the app codes against; `LocalStorageProjectRepository`
+                is the only implementation today. Swapping in a real backend
+                later (REST/GraphQL) means adding one new implementation of
+                that interface, not touching state/UI code.
+  state/        Zustand store (`projectStore`) — the single source of truth for
+                the current project. Auto-saves to the repository (debounced)
+                on every change.
+  components/
+    canvas/     React Flow wiring surface: custom device node, custom cable
+                edge, connection validation.
+    palette/    Device library sidebar + the "new custom device" editor.
+    inspector/  Right-panel editors for the selected device or cable.
+    bom/        Bill-of-materials view.
+    layout/     App shell, top bar, panels.
+```
+
+### Data model
+
+- **PortType** — a connector kind (HDMI, XLR, Cat5e/6, ...). Two ports can be
+  wired together only if their PortTypes share a compatibility `family`.
+- **DeviceTemplate** — a reusable device shape (its ports), shown in the
+  palette. Built-ins live in `domain/library.ts`; custom ones are saved on the
+  project.
+- **Device** — an instance placed on the canvas, with its own copy of ports
+  (editing an instance never mutates its template).
+- **CableType** — a physical cable spec, scoped to a PortType family.
+- **Connection** — a wire between two ports, referencing a CableType and an
+  optional user-entered distance (there's no floor plan / scale model, so
+  length is a manual estimate per connection).
+- **Project** — devices + connections + any custom library entries. This is
+  the one object persisted (auto-saved to `localStorage`, or explicitly
+  exported/imported as JSON).
+
+## Development
+
+```bash
+npm install
+npm run dev      # start the dev server
+npm run build    # typecheck + production build
+npm run lint      # oxlint
+```