SeatMap

organisms

Interactive seat map editor — drag, select, color by tier, zoom/pan. SVG-based with hit testing. Server-driven initial state, optimistic updates.

ARIA Role: application

Demo

Demo for SeatMap (organisms)

Interactive seat map editor — drag, select, color by tier, zoom/pan. SVG-based with hit testing. Server-driven initial state, optimistic updates.

Props

Prop	Type	Required	Default	Description
`eventId`	`string`	Yes	`—`
`venueId`	`string`	Yes	`—`
`sections`	`SeatSection[]`	Yes	`—`	1-50 sections
`mode`	`'view' \| 'edit'`	Yes	`—`

TypeScript Interface

interface SeatMapProps {
  eventId: string;
  venueId: string;
  sections: SeatSection[];
  selectedSeats?: string[];
  onSeatSelect?: (seatIds: string[]) => void;
  onSeatUpdate?: (seatId: string, updates: Partial<Seat>) => Promise<void>;
  mode: 'view' | 'edit';
  tools?: ('select' | 'paint' | 'block' | 'label')[];
}

Assertions (NASA Rule 5)

[type]sections bounded 1-50; mode required (NASA Rule 2 + 5)(NASA Rule 2 + 5)
[aria]SVG has role='application' aria-label='Seat map'; each seat is focusable with aria-label(WCAG 2.1.1, 4.1.2)

Usage

Import

import { Seatmap } from '@epasslive/design-system'

Basic

<Seatmap />

With Variants

<Seatmap variant="primary" size="md" />