@kerusiweb/react 2.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-2026 Arsyad "Shad Ahm" Ahmad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,306 @@
+# @kerusiweb/react
+
+A React seat map that renders [Kerusi](https://github.com/ShadAhm/kerusi)
+documents as interactive, accessible inline SVG.
+
+```bash
+npm install @kerusiweb/core @kerusiweb/react
+```
+
+Requires React 18.3+ or 19. Function components and hooks; no context, no
+provider, no global state.
+
+This package is the React binding only — the components and the `useKerusiState`
+hook. The document types, the conformance validator, the render model and its
+geometry live in its peer
+[`@kerusiweb/core`](https://www.npmjs.com/package/@kerusiweb/core), which is
+framework-free; import them from there.
+
+## Import the stylesheet
+
+Once, anywhere in your app:
+
+```ts
+import '@kerusiweb/react/styles.css';
+```
+
+It carries layout, opacity, cursor, paint order and the focus ring — nothing
+else. Every colour is bound inline by the components, so the theming tiers below
+keep working.
+
+---
+
+## `<KerusiSeatmap>`
+
+```tsx
+import { useState } from 'react';
+import { KerusiSeatmap } from '@kerusiweb/react';
+import type { KerusiMap, KerusiState } from '@kerusiweb/core';
+import '@kerusiweb/react/styles.css';
+
+export function Booking({ map, state }: { map: KerusiMap; state: KerusiState }) {
+  const [picked, setPicked] = useState<readonly string[]>([]);
+
+  return (
+    <KerusiSeatmap
+      map={map}
+      state={state}
+      selection={picked}
+      onSelectionChange={setPicked}
+      showLegend
+      onSeatDisallowed={(e) => explain(e.reason)}
+    />
+  );
+}
+```
+
+`selection` is a plain list of seat ids. Nothing is mutated, so it works with
+`useState`, a reducer, or any store you already have.
+
+### Props
+
+**Documents**
+
+| Prop      | Type            | Default    |                                                                             |
+| --------- | --------------- | ---------- | --------------------------------------------------------------------------- |
+| `map`     | `KerusiMap`     | _required_ | The static venue layout.                                                    |
+| `state`   | `KerusiState`   | —          | Live availability. Merged by `Seat.id`; an absent seat is available (§5.1). |
+| `session` | `KerusiSession` | —          | The optional map↔event join (§5.3). Validated against the map and state.    |
+
+**Selection**
+
+| Prop                 | Type                            | Default         |                                                                         |
+| -------------------- | ------------------------------- | --------------- | ----------------------------------------------------------------------- |
+| `selection`          | `readonly string[]`             | —               | Selected seat ids. Supplying this makes the component controlled.       |
+| `defaultSelection`   | `readonly string[]`             | `[]`            | The initial selection when uncontrolled. Ignored if `selection` is set. |
+| `onSelectionChange`  | `(selection) => void`           | —               | Fires on every change, controlled or not.                               |
+| `selectableStatuses` | `SeatRenderStatus[]`            | `['available']` | Which statuses a seat may be picked in.                                 |
+| `companionMode`      | `'auto' \| 'independent'`       | `'auto'`        | `auto` selects a seat's whole companion closure together (§4.6).        |
+| `maxSelection`       | `number`                        | —               | Cap on selected seats. Counts a companion closure as its full size.     |
+| `seatSelectable`     | `(seat: RenderSeat) => boolean` | —               | A final say, applied after the status test. **Memoize it** — see below. |
+| `interactive`        | `boolean`                       | `true`          | `false` renders read-only.                                              |
+
+Controlled and uncontrolled work the way they do for `<input>`: pass
+`selection` + `onSelectionChange` to own it yourself, or pass neither and let
+the component keep it. Passing `selection` without `onSelectionChange` renders a
+selection the user cannot change — occasionally what you want, usually a
+mistake.
+
+**Appearance**
+
+| Prop                              | Type                  | Default          |                                                                                                                                 |
+| --------------------------------- | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `colors`                          | `KerusiSeatmapColors` | theme defaults   | Per-status fills, element tones, focus ring, backdrop. See [Theming](#theming).                                                 |
+| `typeColors`                      | `boolean`             | `true`           | Let an available seat take its `SeatType.color` (§4.7).                                                                         |
+| `seatSize`                        | `number`              | `28`             | Grid cell edge, in viewBox units.                                                                                               |
+| `seatGap`                         | `number`              | `6`              | Gap between grid cells.                                                                                                         |
+| `freeformBasis`                   | `number`              | `1000`           | Freeform viewBox width; height follows the aspect ratio.                                                                        |
+| `unitScale`                       | `number`              | `1`              | CSS pixels per viewBox unit. Caps each section at its natural size so a narrow section and a wide one draw seats the same size. |
+| `showSectionLabels`               | `boolean`             | `true`           |                                                                                                                                 |
+| `showLegend` / `showLegendPrices` | `boolean`             | `false` / `true` |                                                                                                                                 |
+| `className` / `style`             | —                     | —                | Applied to the root element, alongside `kerusi-seatmap`.                                                                        |
+
+**Sections**
+
+| Prop               | Type                                   |                                                                     |
+| ------------------ | -------------------------------------- | ------------------------------------------------------------------- |
+| `sectionIds`       | `readonly string[]`                    | Render only these, in this order. Default: all, by `Section.index`. |
+| `sectionOverrides` | `Record<string, SectionRenderOptions>` | Per-section `hidden`, `aspectRatio`, `seatSize`, `label`.           |
+
+**Localization, validation, lifecycle**
+
+| Prop               | Type                            | Default                      |                                                                        |
+| ------------------ | ------------------------------- | ---------------------------- | ---------------------------------------------------------------------- |
+| `locale`           | `string`                        | `KerusiMap.locale` ?? `'en'` | BCP-47. Resolves `Section.label` / `SeatType.label` locale maps.       |
+| `rtl`              | `boolean \| 'auto'`             | `'auto'`                     | Mirrors layout and arrow direction. `auto` derives it from the locale. |
+| `ariaStrings`      | `SeatAriaStrings`               | English                      | Every announced phrase, for translation.                               |
+| `validate`         | `'collect' \| 'throw' \| 'off'` | `'collect'`                  | `collect` reports through `onValidationIssues` and renders anyway.     |
+| `expireHolds`      | `boolean`                       | `false`                      | Revert a lapsed `holdExpires` to available on a ticker.                |
+| `expiryIntervalMs` | `number`                        | `1000`                       |                                                                        |
+
+`validate="throw"` throws a `KerusiValidationError` **during render**, so an
+error boundary catches it. `collect` never throws.
+
+### Callbacks
+
+| Prop                              | Payload                      |                                                                                                        |
+| --------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `onSelectionChange`               | `readonly string[]`          | The selection after the change.                                                                        |
+| `onSeatSelect` / `onSeatDeselect` | `SeatInteraction`            | The `RenderSeat`, the resulting selection, and every seat that changed (companions included).          |
+| `onSeatDisallowed`                | `SeatDisallowed`             | `reason` is `booked`, `held`, `blocked`, `not-selectable`, `max-selection` or `companion-unavailable`. |
+| `onSeatFocus`                     | `RenderSeat`                 |                                                                                                        |
+| `onValidationIssues`              | `readonly KerusiViolation[]` | Called whenever the documents change.                                                                  |
+
+### The `ref`
+
+```tsx
+const map = useRef<KerusiSeatmapHandle>(null);
+// map.current.summary    -> { seats, total, unpriced }
+// map.current.focusSeat('A12')
+```
+
+### Memoizing props
+
+The render model is rebuilt whenever `map`, `state` or the interaction props
+change identity. Object and function props declared inline get a new identity
+every render, so hoist or memoize the ones that are not primitives:
+
+```tsx
+const seatSelectable = useCallback((seat: RenderSeat) => seat.price != null, []);
+const colors = useMemo(() => ({ selectedBg: '#8b6ad6' }), []);
+```
+
+`map` and `state` are usually stable already if they come from state or a query
+cache. `selectableStatuses` and `sectionOverrides` have stable defaults, so you
+only need to think about them if you pass your own.
+
+### The seat glyph
+
+**Colour means seat type; shape means status.** A seat's fill is always its
+`SeatType.color`, or the theme's `availableBg` when the type has none — it does
+not change when the seat is held or booked. `selected` is the one deliberate
+exception: it owns the seat's colour outright, so your own picks are never
+ambiguous, and a purple fill on its own would in any case fail WCAG 1.4.1 (Use
+of Colour) for anyone who cannot distinguish it — hence the shape cues. Held
+seats take a wash and a hollow occupant figure; booked ones a wash and a solid
+figure; selected ones a bright core inside a frame.
+
+### Theming
+
+Colors resolve through three tiers, highest first:
+
+1. A `--kerusi-*` custom property in **your** stylesheet.
+2. The **`colors` prop** — a partial `KerusiSeatmapColors`, merged over the defaults.
+3. The library default.
+
+The library never writes a `--kerusi-*` property onto its own root, which is
+what keeps that order true: every fill is emitted as
+`var(--kerusi-selected-bg, <the resolved prop value>)`. Use whichever tier fits
+— the prop for values known at build time, CSS for anything that has to respond
+to a media query or a theme class.
+
+```css
+.kerusi-seatmap {
+  --kerusi-selected-bg: #8b6ad6;
+  --kerusi-available-bg: #2f6b45;
+}
+
+@media (prefers-color-scheme: dark) {
+  .kerusi-seatmap {
+    --kerusi-element-bg: #232a36;
+  }
+}
+```
+
+Every key of `KerusiSeatmapColors` has a property, kebab-cased:
+
+| Prop key                              | Custom property                                             |
+| ------------------------------------- | ----------------------------------------------------------- |
+| `availableBg` / `availableFg`         | `--kerusi-available-bg` / `--kerusi-available-fg`           |
+| `selectedBg` / `selectedFg`           | `--kerusi-selected-bg` / `--kerusi-selected-fg`             |
+| `heldBg` / `heldFg`                   | `--kerusi-held-bg` / `--kerusi-held-fg`                     |
+| `bookedBg` / `bookedFg`               | `--kerusi-booked-bg` / `--kerusi-booked-fg`                 |
+| `blockedBg` / `blockedFg`             | `--kerusi-blocked-bg` / `--kerusi-blocked-fg`               |
+| `elementBg` / `elementFg`             | `--kerusi-element-bg` / `--kerusi-element-fg`               |
+| `elementAccentBg` / `elementAccentFg` | `--kerusi-element-accent-bg` / `--kerusi-element-accent-fg` |
+| `elementMutedBg` / `elementMutedFg`   | `--kerusi-element-muted-bg` / `--kerusi-element-muted-fg`   |
+| `focusRing`                           | `--kerusi-focus-ring`                                       |
+| `backdrop`                            | `--kerusi-backdrop`                                         |
+
+### Keyboard
+
+Tab moves between sections; each section keeps its own tab stop. Within a
+section, arrow keys follow the §4.3.1 `col` order — so an aisle, which is a
+column no seat occupies, is stepped across rather than into.
+
+| Key                      |                                    |
+| ------------------------ | ---------------------------------- |
+| `←` `→`                  | Previous / next seat in the row    |
+| `↑` `↓`                  | Nearest column in the adjacent row |
+| `Home` / `End`           | First / last seat of the row       |
+| `Ctrl+Home` / `Ctrl+End` | First / last seat of the section   |
+| `PageUp` / `PageDown`    | First / last seat of the section   |
+| `Enter` / `Space`        | Toggle                             |
+| `Escape`                 | Clear the selection                |
+
+Each seat is a `role="button"` announcing its position, type, price, status,
+every `Seat.accessibility` property and its attributes. A polite live region
+reports the running selection and any disallowed reason.
+
+---
+
+## `<KerusiLegend>`
+
+Rendered inline by `showLegend`, or placed anywhere yourself:
+
+```tsx
+<KerusiLegend legend={model.legend} locale="ms" showPrices />
+```
+
+It resolves swatches through the same path as the seat fills, so the two cannot
+drift apart. Every availability swatch — not just **Selected** — draws the seat
+glyph itself rather than a flat colour, because shape is the cue the map uses
+for status.
+
+---
+
+## `useKerusiState`
+
+Live availability, fed by deltas from whatever transport you use. The ordering,
+gap detection and hold expiry all come from `@kerusiweb/core`; the hook only
+holds them in React state.
+
+```tsx
+const availability = useKerusiState(initialState, { expiryIntervalMs: 1000 });
+
+useEffect(() => {
+  const socket = new WebSocket(url);
+  socket.onmessage = (e) => {
+    if (availability.apply(JSON.parse(e.data)).outcome === 'gap') {
+      refetch().then(availability.reset);
+    }
+  };
+  return () => socket.close();
+}, [availability.apply, availability.reset]);
+
+<KerusiSeatmap map={map} state={availability.state} />;
+```
+
+`apply`, `reset` and `tick` keep a stable identity across renders, so an effect
+can subscribe once. It also exposes `needsRefetch` and `heldSeats` — every
+currently-held seat with the time left on its hold, soonest first.
+
+Deltas that are stale, duplicate or scoped to another session are discarded.
+
+> **Gap detection needs a sequence.** §5.2 requires `updatedAt` to be strictly
+> increasing but not contiguous, so it cannot by itself distinguish "a delta was
+> lost" from "nothing happened for a while". The hook detects gaps when the
+> transport supplies a monotonic sequence — `metadata.seq` by default, or your
+> own `sequenceOf` reader. A gapped delta is still applied, so the map degrades
+> rather than freezes while you re-fetch.
+
+---
+
+## Working with the format directly
+
+All of this lives in `@kerusiweb/core` and is pure — no React import — so it can
+run in a test, a build step, a server component or a route loader.
+
+```ts
+import {
+  buildRenderModel, // KerusiMap + KerusiState -> the resolved render model
+  checkKerusiMap, // every violation, no throw
+  validateKerusiMap, // throws on the first error
+  validateDocumentSet, // map / session / state joins
+  resolveSeatPrice, // the §4.9 precedence order
+  resolveLocalizedText, // string | Record<string, string> -> string
+  formatMoney, // minor units -> "RM 45.00", "¥1,200", "KD 12.500"
+  summarizeSelection, // seats, total, unpriced count
+  computeSectionLayout, // placed geometry for one section
+  buildNavigationGraph, // per-seat keyboard neighbours
+} from '@kerusiweb/core';
+```
+
+---
+
+MIT © Arsyad "Shad Ahm" Ahmad

package/dist/kerusi-legend.d.ts

@@ -0,0 +1,29 @@
+import type { KerusiSeatmapColors, RenderLegendEntry } from '@kerusiweb/core';
+export interface KerusiLegendProps {
+    /** From `RenderMap.legend`. */
+    legend: readonly RenderLegendEntry[];
+    locale?: string;
+    colors?: Required<KerusiSeatmapColors>;
+    /** Whether an available seat takes its type color — mirrors the seatmap prop. */
+    typeColors?: boolean;
+    showPrices?: boolean;
+    /** Hide types no seat in the rendered map actually uses. */
+    hideUnusedTypes?: boolean;
+    headingSeatTypes?: string;
+    headingAvailability?: string;
+}
+/**
+ * A key for a seat map: its seat types on one side, its availability states on
+ * the other.
+ *
+ * This ships in the library rather than being left to each application because
+ * the swatch colors must come from the *same* resolution path as the seat
+ * fills — `SeatType.color` when the document supplies one, the theme's
+ * available color when it does not. Re-deriving that in application code is how
+ * a legend ends up disagreeing with the map it describes.
+ *
+ * It is opt-in: `<KerusiSeatmap showLegend />` renders it inline, or use
+ * `<KerusiLegend>` directly to place it anywhere.
+ */
+export declare function KerusiLegend({ legend, locale, colors, typeColors, showPrices, hideUnusedTypes, headingSeatTypes, headingAvailability, }: KerusiLegendProps): import("react").JSX.Element;
+//# sourceMappingURL=kerusi-legend.d.ts.map

package/dist/kerusi-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kerusi-legend.d.ts","sourceRoot":"","sources":["../src/kerusi-legend.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAuB,MAAM,iBAAiB,CAAC;AAcnG,MAAM,WAAW,iBAAiB;IAChC,+BAA+B;IAC/B,MAAM,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IACvC,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAuBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAa,EACb,MAA8B,EAC9B,UAAiB,EACjB,UAAiB,EACjB,eAAsB,EACtB,gBAA+B,EAC/B,mBAAoC,GACrC,EAAE,iBAAiB,+BAsFnB"}

package/dist/kerusi-legend.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cssVar, DEFAULT_KERUSI_COLORS, formatMoney, occupantFillFor, occupantStrokeFor, readableOn, seatBodyPath, seatCoreFill, seatOccupantPath, seatOccupantStroke, seatSelectedFrame, seatWashFill, } from '@kerusiweb/core';
+/** The swatch's viewBox edge; the seat glyph is drawn to fill it. */
+const GLYPH_SIZE = 16;
+const GLYPH_BODY = seatBodyPath(0, 0, GLYPH_SIZE, GLYPH_SIZE);
+/** The selected swatch's frame width, and the core it leaves inside itself. */
+const GLYPH_FRAME = seatSelectedFrame(GLYPH_SIZE, GLYPH_SIZE);
+const GLYPH_CORE_SIZE = GLYPH_SIZE - GLYPH_FRAME * 2;
+const GLYPH_CORE = seatBodyPath(0, 0, GLYPH_SIZE, GLYPH_SIZE, GLYPH_FRAME);
+const GLYPH_OCCUPANT = seatOccupantPath(0, 0, GLYPH_SIZE, GLYPH_SIZE);
+const GLYPH_OCCUPANT_STROKE = seatOccupantStroke(GLYPH_SIZE, GLYPH_SIZE);
+/** The selected swatch's figure sits on the core, so it is drawn to the core. */
+const GLYPH_CORE_OCCUPANT = seatOccupantPath(GLYPH_FRAME, GLYPH_FRAME, GLYPH_CORE_SIZE, GLYPH_CORE_SIZE);
+const GLYPH_CORE_OCCUPANT_STROKE = seatOccupantStroke(GLYPH_CORE_SIZE, GLYPH_CORE_SIZE);
+/**
+ * A key for a seat map: its seat types on one side, its availability states on
+ * the other.
+ *
+ * This ships in the library rather than being left to each application because
+ * the swatch colors must come from the *same* resolution path as the seat
+ * fills — `SeatType.color` when the document supplies one, the theme's
+ * available color when it does not. Re-deriving that in application code is how
+ * a legend ends up disagreeing with the map it describes.
+ *
+ * It is opt-in: `<KerusiSeatmap showLegend />` renders it inline, or use
+ * `<KerusiLegend>` directly to place it anywhere.
+ */
+export function KerusiLegend({ legend, locale = 'en', colors = DEFAULT_KERUSI_COLORS, typeColors = true, showPrices = true, hideUnusedTypes = true, headingSeatTypes = 'Seat types', headingAvailability = 'Availability', }) {
+    const types = legend.filter((entry) => !hideUnusedTypes || entry.seatCount > 0);
+    const statuses = statusEntries(colors);
+    return (_jsxs("div", { className: "kerusi-legend", children: [types.length > 0 && (_jsxs("div", { className: "kerusi-legend__block", children: [_jsx("h4", { className: "kerusi-legend__heading", children: headingSeatTypes }), _jsx("ul", { className: "kerusi-legend__list", children: types.map((entry) => {
+                            const typeColor = (typeColors && entry.color) || null;
+                            const price = entry.price ? formatMoney(entry.price, locale) : '';
+                            return (_jsxs("li", { className: "kerusi-legend__item", children: [_jsx("span", { className: "kerusi-legend__swatch", "aria-hidden": "true", style: {
+                                            background: typeColor ?? cssVar('availableBg', colors.availableBg),
+                                            // Mirrors `seatTextFill`: only a document-supplied color
+                                            // needs guessing at.
+                                            color: typeColor
+                                                ? readableOn(typeColor)
+                                                : cssVar('availableFg', colors.availableFg),
+                                        } }), _jsx("span", { className: "kerusi-legend__label", children: entry.label }), showPrices && price && _jsx("span", { className: "kerusi-legend__price", children: price })] }, entry.id));
+                        }) })] })), _jsxs("div", { className: "kerusi-legend__block", children: [_jsx("h4", { className: "kerusi-legend__heading", children: headingAvailability }), _jsx("ul", { className: "kerusi-legend__list", children: statuses.map((status) => (_jsxs("li", { className: "kerusi-legend__item", children: [_jsxs("svg", { className: "kerusi-legend__swatch kerusi-legend__swatch--glyph", "aria-hidden": "true", focusable: "false", viewBox: `0 0 ${GLYPH_SIZE} ${GLYPH_SIZE}`, children: [_jsx("path", { d: GLYPH_BODY, style: { fill: status.fill } }), hasWash(status.kind) && (_jsx("path", { d: GLYPH_BODY, style: { fill: seatWashFill(status.kind, colors) }, opacity: "0.5" })), status.kind === 'selected' && (_jsx("path", { d: GLYPH_CORE, style: { fill: seatCoreFill(colors) } })), hasOccupant(status.kind) && (_jsx("path", { d: status.kind === 'selected' ? GLYPH_CORE_OCCUPANT : GLYPH_OCCUPANT, className: `kerusi-legend__occupant kerusi-legend__occupant--${status.kind}`, strokeWidth: status.kind === 'selected'
+                                                ? GLYPH_CORE_OCCUPANT_STROKE
+                                                : GLYPH_OCCUPANT_STROKE, style: {
+                                                fill: occupantFillFor(status.kind, colors),
+                                                stroke: occupantStrokeFor(status.kind, colors),
+                                            } }))] }), _jsx("span", { className: "kerusi-legend__label", children: status.label })] }, status.key))) })] })] }));
+}
+// Colour means seat type; shape means status (see `seatFill`'s doc comment).
+// Held and booked swatches share the plain "available" body colour — the map's
+// colour there is always whatever the seat's own type supplies, which the
+// legend has no single value for — and are told apart by their wash and
+// occupant figure instead, same as on the map.
+function statusEntries(colors) {
+    const available = cssVar('availableBg', colors.availableBg);
+    return [
+        { key: 'available', label: 'Available', kind: 'plain', fill: available },
+        {
+            key: 'selected',
+            label: 'Selected',
+            kind: 'selected',
+            fill: cssVar('selectedBg', colors.selectedBg),
+        },
+        { key: 'held', label: 'On hold', kind: 'held', fill: available },
+        { key: 'booked', label: 'Booked', kind: 'booked', fill: available },
+        {
+            key: 'blocked',
+            label: 'Blocked',
+            kind: 'blocked',
+            fill: cssVar('blockedBg', colors.blockedBg),
+        },
+    ];
+}
+function hasWash(kind) {
+    return kind === 'held' || kind === 'booked';
+}
+function hasOccupant(kind) {
+    return kind === 'selected' || kind === 'held' || kind === 'booked';
+}
+//# sourceMappingURL=kerusi-legend.js.map

package/dist/kerusi-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kerusi-legend.js","sourceRoot":"","sources":["../src/kerusi-legend.tsx"],"names":[],"mappings":"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"}

package/dist/kerusi-seatmap.d.ts

@@ -0,0 +1,20 @@
+import type { KerusiSeatmapHandle, KerusiSeatmapProps } from './types.js';
+/**
+ * Renders a Kerusi seat map.
+ *
+ * Takes a `KerusiMap` and its `KerusiState` directly — no adapter, no
+ * intermediate row model. Each `Section` becomes its own `<svg>` with its own
+ * layout mode and proportions, seats take their color from the map's legend,
+ * every seat is keyboard-reachable and announced with its type, price, status
+ * and §4.3.4 accessibility properties, and selection is an immutable list of
+ * seat ids.
+ *
+ * ```tsx
+ * <KerusiSeatmap map={map} state={state} selection={picked} onSelectionChange={setPicked} />
+ * ```
+ *
+ * Import the stylesheet once, anywhere in the app:
+ * `import '@kerusiweb/react/styles.css'`.
+ */
+export declare const KerusiSeatmap: import("react").ForwardRefExoticComponent<KerusiSeatmapProps & import("react").RefAttributes<KerusiSeatmapHandle>>;
+//# sourceMappingURL=kerusi-seatmap.d.ts.map

package/dist/kerusi-seatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kerusi-seatmap.d.ts","sourceRoot":"","sources":["../src/kerusi-seatmap.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAGnB,MAAM,YAAY,CAAC;AAOpB;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,oHAmazB,CAAC"}