@kerusiweb/react 2.0.0

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/use-kerusi-state.d.ts

@@ -0,0 +1,49 @@
+import type { DeltaApplication, HeldSeat, KerusiState, KerusiStateDelta, SequenceReader } from '@kerusiweb/core';
+export interface UseKerusiStateOptions {
+    now?: () => Date;
+    sequenceOf?: SequenceReader;
+    /**
+     * Run {@link UseKerusiState.tick} on this interval, reverting lapsed holds
+     * and refreshing the `heldSeats` countdowns. Omit to tick manually.
+     */
+    expiryIntervalMs?: number;
+}
+export interface UseKerusiState {
+    /** The current availability snapshot. */
+    state: KerusiState;
+    /** The timestamp of the most recently applied document. */
+    updatedAt: string;
+    /**
+     * True once a gap was detected in the delta stream. The consumer SHOULD
+     * re-fetch a full `KerusiState` and hand it to {@link reset} (§5.2).
+     */
+    needsRefetch: boolean;
+    /** Every currently-held seat, with the time left on its hold. */
+    heldSeats: readonly HeldSeat[];
+    /** Offers a delta to the store. Returns what happened to it. */
+    apply(delta: KerusiStateDelta): DeltaApplication;
+    /**
+     * Replaces the state wholesale — the post-refetch path. Clears the refetch
+     * flag and forgets the delta sequence.
+     */
+    reset(state: KerusiState): void;
+    /** Reverts lapsed holds and refreshes the `heldSeats` countdowns. */
+    tick(): void;
+}
+/**
+ * A live view of a {@link KerusiState}, fed by deltas from whatever transport
+ * the application uses.
+ *
+ * The ordering, gap detection and hold expiry all come from `@kerusiweb/core`;
+ * this hook only holds them in React state. It is deliberately not a context or
+ * a provider: this is a rendering library, and an application that already owns
+ * its availability state should keep owning it.
+ *
+ * ```tsx
+ * const availability = useKerusiState(initialState, { expiryIntervalMs: 1000 });
+ * useEffect(() => socket.on('delta', availability.apply), [availability.apply]);
+ * <KerusiSeatmap map={map} state={availability.state} />
+ * ```
+ */
+export declare function useKerusiState(initial: KerusiState, opts?: UseKerusiStateOptions): UseKerusiState;
+//# sourceMappingURL=use-kerusi-state.d.ts.map

package/dist/use-kerusi-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-kerusi-state.d.ts","sourceRoot":"","sources":["../src/use-kerusi-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,cAAc,EACf,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,qBAAqB;IACpC,GAAG,CAAC,EAAE,MAAM,IAAI,CAAC;IACjB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,KAAK,EAAE,WAAW,CAAC;IACnB,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,SAAS,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC/B,gEAAgE;IAChE,KAAK,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IACjD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,qEAAqE;IACrE,IAAI,IAAI,IAAI,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,WAAW,EACpB,IAAI,GAAE,qBAA0B,GAC/B,cAAc,CA4EhB"}

package/dist/use-kerusi-state.js

@@ -0,0 +1,82 @@
+import { applyStateDeltaOrdered, DEFAULT_SEQUENCE_READER, expireHolds, heldSeats as heldSeatsIn, } from '@kerusiweb/core';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/**
+ * A live view of a {@link KerusiState}, fed by deltas from whatever transport
+ * the application uses.
+ *
+ * The ordering, gap detection and hold expiry all come from `@kerusiweb/core`;
+ * this hook only holds them in React state. It is deliberately not a context or
+ * a provider: this is a rendering library, and an application that already owns
+ * its availability state should keep owning it.
+ *
+ * ```tsx
+ * const availability = useKerusiState(initialState, { expiryIntervalMs: 1000 });
+ * useEffect(() => socket.on('delta', availability.apply), [availability.apply]);
+ * <KerusiSeatmap map={map} state={availability.state} />
+ * ```
+ */
+export function useKerusiState(initial, opts = {}) {
+    const { now, sequenceOf, expiryIntervalMs } = opts;
+    const clock = useRef(now ?? (() => new Date()));
+    clock.current = now ?? clock.current;
+    const readSequence = sequenceOf ?? DEFAULT_SEQUENCE_READER;
+    const [state, setState] = useState(initial);
+    const [needsRefetch, setNeedsRefetch] = useState(false);
+    const [nowValue, setNowValue] = useState(() => clock.current());
+    const lastSequence = useRef(undefined);
+    /** Mirrors `state` so `apply` can stay referentially stable. */
+    const latest = useRef(state);
+    latest.current = state;
+    const apply = useCallback((delta) => {
+        const result = applyStateDeltaOrdered(latest.current, delta, {
+            sequenceOf: readSequence,
+            lastSequence: lastSequence.current,
+        });
+        if (result.outcome === 'applied' || result.outcome === 'gap') {
+            latest.current = result.state;
+            setState(result.state);
+            const seq = readSequence(delta);
+            if (seq !== undefined) {
+                lastSequence.current = seq;
+            }
+        }
+        if (result.outcome === 'gap') {
+            setNeedsRefetch(true);
+        }
+        return result;
+    }, [readSequence]);
+    const reset = useCallback((next) => {
+        latest.current = next;
+        setState(next);
+        setNeedsRefetch(false);
+        lastSequence.current = undefined;
+        setNowValue(clock.current());
+    }, []);
+    const tick = useCallback(() => {
+        const at = clock.current();
+        setNowValue(at);
+        const next = expireHolds(latest.current, at);
+        if (next !== latest.current) {
+            latest.current = next;
+            setState(next);
+        }
+    }, []);
+    useEffect(() => {
+        if (expiryIntervalMs === undefined) {
+            return;
+        }
+        const handle = setInterval(tick, expiryIntervalMs);
+        return () => clearInterval(handle);
+    }, [expiryIntervalMs, tick]);
+    const held = useMemo(() => heldSeatsIn(state, nowValue), [state, nowValue]);
+    return {
+        state,
+        updatedAt: state.updatedAt,
+        needsRefetch,
+        heldSeats: held,
+        apply,
+        reset,
+        tick,
+    };
+}
+//# sourceMappingURL=use-kerusi-state.js.map

package/dist/use-kerusi-state.js.map

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

package/dist/use-roving-focus.d.ts

@@ -0,0 +1,27 @@
+import type { RenderMap } from '@kerusiweb/core';
+export interface RovingFocus {
+    /** The seat holding each section's tab stop, keyed by section id. */
+    focusedSeatIds: Readonly<Record<string, string>>;
+    /** Records the tab stop without moving DOM focus — for a focus that already happened. */
+    setFocusedSeat(sectionId: string, seatId: string): void;
+    /** Moves the tab stop and the DOM focus that follows it. */
+    moveFocusTo(sectionId: string, seatId: string): void;
+    /** Focuses a seat wherever it is, if it is currently rendered. */
+    focusSeat(seatId: string): void;
+    /** Ref callback each seat `<g>` registers itself through. */
+    registerSeat(seatId: string, node: SVGGElement | null): void;
+}
+/**
+ * The roving tab stop, held per section rather than per map.
+ *
+ * Arrow keys never cross a section boundary, so a single map-wide tab stop
+ * would leave every section after the first unreachable by keyboard. Tab moves
+ * between sections, arrows move within.
+ *
+ * Seats register their DOM node here as they mount, which is what replaces the
+ * Angular binding's `querySelectorAll` scan: seat ids come from the document,
+ * so they cannot be interpolated into a selector unescaped, and `CSS.escape` is
+ * absent in jsdom and under SSR. A ref map has neither problem.
+ */
+export declare function useRovingFocus(renderMap: RenderMap): RovingFocus;
+//# sourceMappingURL=use-roving-focus.d.ts.map

package/dist/use-roving-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-roving-focus.d.ts","sourceRoot":"","sources":["../src/use-roving-focus.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACjD,yFAAyF;IACzF,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACxD,4DAA4D;IAC5D,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACrD,kEAAkE;IAClE,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC9D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,CA8DhE"}

package/dist/use-roving-focus.js

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * The roving tab stop, held per section rather than per map.
+ *
+ * Arrow keys never cross a section boundary, so a single map-wide tab stop
+ * would leave every section after the first unreachable by keyboard. Tab moves
+ * between sections, arrows move within.
+ *
+ * Seats register their DOM node here as they mount, which is what replaces the
+ * Angular binding's `querySelectorAll` scan: seat ids come from the document,
+ * so they cannot be interpolated into a selector unescaped, and `CSS.escape` is
+ * absent in jsdom and under SSR. A ref map has neither problem.
+ */
+export function useRovingFocus(renderMap) {
+    const [focusedSeatIds, setFocusedSeatIds] = useState({});
+    const nodes = useRef(new Map());
+    /** Set when a keyboard move asks for focus, consumed after the commit. */
+    const pendingFocus = useRef(null);
+    // Keep every section's tab stop pointing at a seat that still exists.
+    useEffect(() => {
+        setFocusedSeatIds((current) => {
+            const next = {};
+            let changed = Object.keys(current).length !== renderMap.sections.length;
+            for (const section of renderMap.sections) {
+                const held = current[section.id];
+                const valid = held && section.seats.some((seat) => seat.id === held);
+                const resolved = valid ? held : section.seats[0]?.id;
+                if (resolved) {
+                    next[section.id] = resolved;
+                    changed ||= resolved !== held;
+                }
+            }
+            return changed ? next : current;
+        });
+    }, [renderMap]);
+    const registerSeat = useCallback((seatId, node) => {
+        if (node) {
+            nodes.current.set(seatId, node);
+        }
+        else {
+            nodes.current.delete(seatId);
+        }
+    }, []);
+    const focusSeat = useCallback((seatId) => {
+        nodes.current.get(seatId)?.focus?.();
+    }, []);
+    const setFocusedSeat = useCallback((sectionId, seatId) => {
+        setFocusedSeatIds((all) => (all[sectionId] === seatId ? all : { ...all, [sectionId]: seatId }));
+    }, []);
+    const moveFocusTo = useCallback((sectionId, seatId) => {
+        // The target's `tabindex` only becomes 0 on the next commit, so defer the
+        // focus until then — focusing a `tabindex="-1"` node works, but leaves
+        // the tab stop and the focus ring momentarily disagreeing.
+        pendingFocus.current = seatId;
+        setFocusedSeat(sectionId, seatId);
+    }, [setFocusedSeat]);
+    useEffect(() => {
+        const target = pendingFocus.current;
+        if (target !== null) {
+            pendingFocus.current = null;
+            nodes.current.get(target)?.focus?.();
+        }
+    }, [focusedSeatIds]);
+    return { focusedSeatIds, setFocusedSeat, moveFocusTo, focusSeat, registerSeat };
+}
+//# sourceMappingURL=use-roving-focus.js.map

package/dist/use-roving-focus.js.map

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@kerusiweb/react",
+  "version": "2.0.0",
+  "description": "A React seat-map component that renders Kerusi Seat Map & Availability Format documents as interactive, accessible inline SVG.",
+  "keywords": [
+    "react",
+    "kerusi",
+    "seat-map",
+    "seatmap",
+    "seat-picker",
+    "seat-selection",
+    "svg",
+    "booking",
+    "ticketing",
+    "cinema",
+    "airline",
+    "venue"
+  ],
+  "license": "MIT",
+  "author": "Arsyad \"Shad Ahm\" Ahmad",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ShadAhm/kerusiweb.git",
+    "directory": "projects/react"
+  },
+  "homepage": "https://github.com/ShadAhm/kerusiweb",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/public-api.d.ts",
+      "default": "./dist/public-api.js"
+    },
+    "./styles.css": "./styles.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/public-api.d.ts",
+  "main": "./dist/public-api.js",
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "peerDependencies": {
+    "@kerusiweb/core": "^2.0.0",
+    "react": "^18.3.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles.css

@@ -0,0 +1,230 @@
+/*
+ * @kerusiweb/react — the one stylesheet the package ships.
+ *
+ *   import '@kerusiweb/react/styles.css';
+ *
+ * It owns layout, opacity, cursor, paint order and the focus ring, and nothing
+ * else. Every colour is bound inline by the components instead, because a
+ * `var(--kerusi-selected-bg, …)` written here would carry the *library* default
+ * as its fallback and silently skip the `colors` prop tier — only the
+ * TypeScript side can resolve that one. See `cssVar()` in @kerusiweb/core for
+ * the three tiers and their precedence.
+ */
+
+/* --- the map ------------------------------------------------------------- */
+
+.kerusi-seatmap {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.kerusi-seatmap__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.kerusi-section-label {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.75;
+}
+
+/* Visually hidden, still announced. */
+.kerusi-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* --- a section ----------------------------------------------------------- */
+
+/* The viewBox carries the proportions; CSS only decides how wide it gets. */
+.kerusi-section-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+.kerusi-seat {
+  cursor: pointer;
+  outline: none;
+}
+
+.kerusi-seat--unselectable {
+  cursor: not-allowed;
+}
+
+.kerusi-seat__label,
+.kerusi-element__label {
+  pointer-events: none;
+  user-select: none;
+  font-family: inherit;
+}
+
+/* A selected seat's number is stroked with the core colour and painted stroke
+   first, so the halo sits behind the glyphs and knocks the occupant figure out
+   from under them. Only the ordering lives here: the colour and width are bound
+   inline, for the reason at the top of this file. */
+.kerusi-seat__label {
+  paint-order: stroke;
+  stroke-linejoin: round;
+}
+
+/* No `transition: fill` here, deliberately. Every fill is a
+   `var(--kerusi-*, …)` substitution, and Chromium cannot transition a paint
+   property to a variable-derived value — the transition never advances and the
+   seat keeps its previous color for good, so a selected seat would never turn
+   selected. That covers the core's fill and the label's halo stroke too.
+   Correct color beats a 120ms fade. */
+
+/* Drawn over the seat's own type-colour fill, so a held or booked seat still
+   recedes even though its hue no longer changes. Fill colour is bound inline;
+   opacity is the only thing this rule owns. */
+.kerusi-seat__wash {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* The bright plate inside a selected seat's frame. Colour is bound inline;
+   this rule only keeps it out of hit-testing, so a click still lands on the
+   seat group. */
+.kerusi-seat__core {
+  pointer-events: none;
+}
+
+/* Fill/stroke colour is bound inline per variant; these rules only set the
+   weight each variant reads at. Solid = settled (yours, or sold); hollow = a
+   hold still in progress. */
+.kerusi-seat__occupant {
+  pointer-events: none;
+}
+
+/* Lighter than the other variants: this one is a dark mark on a bright plate,
+   and a dark mark reads heavier than a light one at the same opacity. Kept as
+   texture so it does not compete with the number sitting on top of it. */
+.kerusi-seat__occupant--selected {
+  opacity: 0.2;
+}
+
+.kerusi-seat__occupant--booked {
+  opacity: 0.55;
+}
+
+.kerusi-seat__occupant--held {
+  opacity: 0.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* The number competes with the silhouette behind it. */
+.kerusi-seat--selected .kerusi-seat__label {
+  font-weight: 600;
+}
+
+/* The focus ring is drawn on the seat box so it follows a rotated seat. It is
+   a separate mark from the selected frame — it strokes the outermost path, so a
+   focused selected seat shows both.
+
+   Two levels of fallback, so this token keeps the same precedence as every
+   other one: a `--kerusi-focus-ring` from the consumer's stylesheet wins;
+   otherwise `--kerusi-focus-ring-input`, which the component writes on the
+   `<svg>` from the `colors` prop; otherwise the inherited text color. */
+.kerusi-seat:focus-visible .kerusi-seat__box {
+  stroke: var(--kerusi-focus-ring, var(--kerusi-focus-ring-input, currentColor));
+  stroke-width: 2.5;
+  paint-order: stroke;
+}
+
+.kerusi-element__void {
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  opacity: 0.7;
+}
+
+/* --- the legend ---------------------------------------------------------- */
+
+.kerusi-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  font-size: 0.85rem;
+}
+
+.kerusi-legend__block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.kerusi-legend__heading {
+  margin: 0;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.65;
+}
+
+.kerusi-legend__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.9rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.kerusi-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.kerusi-legend__swatch {
+  display: inline-block;
+  flex: none;
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 3px;
+}
+
+/* The seat glyph carries its own corner radius in the viewBox. */
+.kerusi-legend__swatch--glyph {
+  border-radius: 0;
+  overflow: visible;
+}
+
+/* Mirrors `.kerusi-seat__occupant--*` on the map, so the key matches what it
+   is keying. Fill/stroke colour is bound inline; these set the weight. */
+.kerusi-legend__occupant--selected {
+  opacity: 0.2;
+}
+
+.kerusi-legend__occupant--booked {
+  opacity: 0.55;
+}
+
+.kerusi-legend__occupant--held {
+  opacity: 0.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.kerusi-legend__price {
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+}