aarbitandClaude Sonnet 5
7e37dc5676
Below md width, the app now forces view-only (same canEdit mechanism as a shared view-only diagram) rather than trying to support touch editing: palette and inspector panels hide, editing controls disable, and the top bar collapses to just Diagrams + Account. A bottom tab bar swaps between a full-screen canvas and a full-screen Bill of Materials, since there's no room for both side by side. Canvas gets a few mobile-specific trims too: MiniMap and the interactivity lock button hide whenever canEdit is false (the lock button doesn't actually grant editing either way — nodesDraggable/ nodesConnectable already override it — so leaving it visible would just be misleading), and h-screen is replaced with h-dvh throughout so the layout doesn't get clipped by a mobile browser's collapsing address bar. Also fixes quick-add's anti-stack offset (24px — far smaller than a device node) to actually tile devices apart instead of leaving them nearly overlapping, and logs a deferred "Auto-arrange" layout feature in organized-ideas.md, surfaced by mobile visitors having no way to fix an overlapping diagram themselves. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017DUU6CnxECCDeqDNYJgr5x
Diagrav
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 (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.tsand 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
npm install
npm run dev # start the dev server
npm run build # typecheck + production build
npm run lint # oxlint