SDK reference — `@seatpano/sdk` 0.1

`load(options): Promise<VenueMap>`

Option	Type	Default	Notes
`container`	`string \| HTMLElement`	required	Mounted in a shadow root; theme via CSS variables on the element
`venue`	`string`	required	Venue slug
`apiBase`	`string`	—	Hosted API root. Preferred in production
`apiKey`	`string`	—	Sent as `X-Api-Key`
`baseUrl`	`string`	`""`	Static host containing `/venues/{slug}/manifest.json`. Used when `apiBase` is absent
`assetBase`	`string`	derived	Prefix for image paths
`event`	`string`	—	Reserved for API-driven availability (host fetches and calls `setAvailability` today)
`product`	`string`	first	Event configuration (e.g. `bulls`, `blackhawks`, `events-180`). Pass it from the event; it selects renders, geometry and surface, and hides the in-map dropdown
`level`	`string`	first	Map level id
`view`	`string`	`"seat"`	`seat` or `interior`
`theme`	`"flat" \| "aerial"`	`"flat"`	Flat polygons with a painted playing surface, or polygons over the aerial render
`surface`	`"auto" \| "baseball" \| "basketball" \| "hockey" \| "football" \| "soccer" \| "stage" \| "none"`	`"auto"`	Flat theme only. `auto` follows the manifest's per-product surface. Fitted to the seating hole; baseball snaps to HomePlate / CenterField / PitchersMound hotspots and, when the manifest carries `surfaceSpec`, draws the real fence line, warning track, batter's eye, bullpens and pool from feet-based dimensions
`showProductSwitch`	`boolean`	auto	Event-configuration dropdown (e.g. Bulls / Blackhawks / 180° / 360°). Shown when the venue has more than one product
`availability`	`string[] \| null`	`null`	Sellable section keys. `null` = everything in the manifest
`popover`	`{ enabled, thumbnail, view3d, view3dLabel, galleryScope, loadingMs, source3d }`	enabled, thumbnail, `"viewer"`, `"product"`, `3000`, `"auto"`	`view3d`: `"viewer"` opens the section viewer (below), `"image"` lightbox, `"iomedia"` new tab, `"none"` event only
`showLevelTabs`	`boolean`	auto	Shown when the product has more than one level
`showZoom`	`boolean`	`true`
`accent`	`string`	`#1f5eff`	Shortcut for `--vm-accent`
`branding`	`string`	—	Small "Powered by …" badge in the viewer

Instance methods

Method	Description
`on(name, fn) → unsubscribe` / `off(name, fn)`	Subscribe to events
`select(section, vantage?) → boolean`	Select; switches level if needed; false if unknown or unavailable
`clearSelection()`
`setAvailability(sections \| null)`	Re-shade; clears selection if it became unavailable
`setLevel(id)`, `setProduct(id)`, `setView(view)`
`getViews(section) → SectionViews \| null`	All stills, vantage rows, thumb, deep link, with asset base applied
`getSelection() → Selection \| null`
`getLevels()`, `getProducts()`
`openViewer(section?)`	Runs the configured `view3d` action and emits `view3d`
`destroy()`

Events

Event	Payload
`ready`	`{ venue, build_id, levels, products, sections }`
`select`	`Selection` — `{ section, vantage, level, product, view, image, mode, views }`
`deselect`	`{}`
`hover`	`{ section \| null, label, vantage }`
`view3d`	`Selection`
`level`	`{ level }`
`product`	`{ product }`
`error`	`{ message }`

Theming

Set CSS custom properties on the container. Defaults in packages/sdk/src/styles.ts.

#venue-map {
  --vm-accent: #1f5eff;            /* selected section */
  --vm-fill: #9ec5fb;              /* available (blue) */
  --vm-fill-hover: #6ea8f7;
  --vm-fill-unavailable: #d7dae0;  /* nothing on sale */
  --vm-context: #e3e6ea;           /* stage, clubs, concourse */
  --vm-label: #2f3640;
  --vm-grass: #7cb864; --vm-grass-2: #86c26c; --vm-dirt: #e7c98f;
  --vm-court: #dcae70; --vm-ice: #eef6ff; --vm-line: #fff;
  --vm-radius: 12px;
  --vm-font: Inter, sans-serif;
}

Sections with row bands (drill-down)

Bowl sections that IOMEDIA renders per row band are shown as one polygon at rest. The first click selects the whole section (select with vantage: null), zooms the map onto it and reveals the bands, each labelled Row N. Clicking a band refines the selection (select with vantage set) and the popover shows that row's view. Closing the popover or calling clearSelection() collapses the bands and resets the zoom. Hosts filter by section on the first event and may filter further by vantage.

Zoom is continuous (−/+ buttons, ×1.4 per step, 1–4×); the viewport scrolls to keep the expanded section centred.

Popover

Thumbnail + "Click to View 3D", the section name, and a Seat / Interior toggle when the section offers both views for the current product.

Section viewer (`view3d: "viewer"`)

Overlay with Back, fullscreen, prev/next arrows, and a gallery strip:

3D tile — source3d: "auto" (default) prefers the native 360° panorama: the SDK's own WebGL cube-map viewer (mountPano, no dependencies) rendering the six cube faces the build ships under panos. Drag / touch to look around, wheel or pinch to zoom, arrow keys, double-click to reset. No third-party UI, no pricing, no branding. When a build has no faces for the view, it falls back to the IOMEDIA Virtual Venue in an iframe. The route comes from the manifest's products[].embed: "direct" is the app's chromeless panorama-only router (works on newer hosts such as Chase Field), "full" is the whole sales app (United Center hosts, where /direct stalls). A loading cover (blurred thumbnail + spinner) hides the frame for at least popover.loadingMs (default 3 s) and until it has loaded.
Stills — with galleryScope: "product" (default) only the modes for the current event configuration (Blackhawks · Seat, Blackhawks · Interior), plus their row vantages (… · Row 16). "all" shows every mode.

Keyboard: Esc closes, ←/→ cycle. Events: view3d on open, viewerClose on close. buildGallery(views, manifest, product, mode, { scope, direct, source3d, vantage }), toEmbedUrl(vrUrl) and mountPano(container, faces, opts) are exported for hosts that render their own viewer with view3d: "none".

Accessibility

Sections are focusable buttons with labels; Enter/Space selects. Level tabs use role="tablist". The lightbox closes on Escape or click.

SDK reference — @seatpano/sdk 0.1

load(options): Promise<VenueMap>