aarbit
26f41b3d4a
Per organized-ideas.md §8: the storage layer (DiagramRepository etc.) was already renamed in an earlier phase; this finishes it everywhere else. - domain/types.ts: Project -> Diagram. domain/project.ts -> domain/diagram.ts (createEmptyProject -> createEmptyDiagram, default name "Untitled Diagram"). - domain/compatibility.ts, domain/bom.ts: Project param/type -> Diagram. - data/exportImport.ts: ProjectImportError -> DiagramImportError, projectToJson/downloadProjectFile/readProjectFile/normalizeProject -> their Diagram equivalents. - state/projectStore.ts -> state/diagramStore.ts: useProjectStore -> useDiagramStore, the `project` field -> `diagram`, newProject/renameProject/ importProject/applyRestoredProject -> *Diagram, restoredProjectUpdatedAt -> restoredDiagramUpdatedAt. - Every component updated to match, compiler-guided (tsc -b enumerated each remaining call site after the core rename, the same approach used for the earlier catalog-parameter refactor). - README updated for the terminology, and to match the repository class names (which had already been renamed but the README hadn't caught up). No backend/schema changes: the JSON shape stored in diagrams.data never changed, only TypeScript-side identifiers, so existing diagrams are unaffected. One SQL comment fixed for accuracy (no migration needed). Verified: tsc -b and oxlint clean; grepped src/ for any remaining Project/project reference (none) after the sweep.
66 lines
2.8 KiB
Markdown
66 lines
2.8 KiB
Markdown
# 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. `DiagramRepository` is the interface the
|
|
rest of the app codes against; `SupabaseDiagramRepository` is
|
|
the active implementation, with `LocalStorageDiagramRepository`
|
|
kept as a reference/fallback. Swapping storage means adding
|
|
one new implementation of that interface, not touching
|
|
state/UI code.
|
|
state/ Zustand store (`diagramStore`) — the single source of truth for
|
|
the current diagram. 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` and seed the public catalog;
|
|
custom ones are your own private catalog entries (or submitted for public
|
|
review).
|
|
- **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).
|
|
- **Diagram** — devices + connections. This is the one object persisted
|
|
(auto-saved to Supabase, or explicitly exported/imported as JSON); the
|
|
catalog (PortType/CableType/DeviceTemplate/category) is shared and global,
|
|
not part of any one diagram.
|
|
|
|
## Development
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev # start the dev server
|
|
npm run build # typecheck + production build
|
|
npm run lint # oxlint
|
|
```
|