Add Interactive Maplogistics-ai/app
Spec drafted for the live delivery map. Inspecting the Figma for details. Awaiting your review/approval before delegating implementation.
The Live Map must read as a polished, production-grade dispatcher console — not a map with widgets bolted on. Every surface is measured against the Figma design.
Fidelity Checklist
- Color palette (brand, status: en route / arriving / delivered / delayed, neutrals, map-tinted surfaces) encoded as tokens.
- Type scale (font family, sizes, weights, line-heights, letter-spacing) matches Figma; correct web fonts loaded with fallbacks.
- Light theme complete; dark/map-dark surface tokens defined
- Icon set matches Figma (size, stroke, optical alignment)
- Zoom control disabled state at min/max zoom rendered per design.
- Destination pin variants (active, arriving, delivered, delayed)
- Dropped pin has its own styled variant + drag affordance.
- Status badges use correct status color tokens
- Loading skeletons/empty states for rail and card match design.
- Contrast (WCAG AA) verified for text/markers over the map at multiple zoom levels.
