Panelogram Retail Shelf Planner

Problem

Laying out one bay of retail shelving to scale usually means guesswork or a heavyweight planogram suite. A merchandiser needs exact shelf widths, used and free space per shelf, and a printable report grouped by shelf.

System boundary

A local-first, single-page planning tool that draws one shelving bay to scale in SVG with millimetre rulers, drag-and-drop product placement, capacity and clearance checks, CSV product import and a printable shelf report. Everything runs in the browser: no server, no account, no network dependency after first load.

Architecture

A pure TypeScript domain core (geometry rules, document mutations, validating persistence, CSV import, reporting) sits under a thin React shell with snapshot undo and debounced localStorage autosave. All dimensions are integer millimetres and all money is integer cents, formatted only at display time.

Constraints and decisions

1. 01One geometry module is the single source of capacity, clearance, snapping and offset maths; the interface is never allowed to recompute those numbers inline.
2. 02Validation fails closed: a broken import is rejected with a reason instead of silently repaired, and an unparseable price is never coerced to zero.

Verification

39 unit tests over the domain core exercise every numbered geometry rule, report totals, CSV edge cases and lossless persistence round trips, alongside strict TypeScript and a scripted browser capture check.

Current readiness

A usable alpha, deliberately scoped to one bay in a single browser session, with a committed production bundle and a documented GitHub Pages publishing path. No accounts, sync or collaboration by design.