@kerusiweb/angular 2.0.0

package/fesm2022/kerusiweb-angular.mjs

@@ -0,0 +1,871 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, model, signal, effect } from '@angular/core';
+import { DEFAULT_KERUSI_COLORS, seatFill, seatTextFill, cssVar, seatBodyPath, seatOccupantVariant, seatSelectedFrame, seatCoreFill, seatWashFill, seatOccupantPath, seatOccupantStroke, occupantFillFor, occupantStrokeFor, elementStyle, elementFill, elementTextFill, screenPath, readableOn, formatMoney, DEFAULT_SEAT_ARIA_STRINGS, errorsOf, KerusiValidationError, validateDocumentSet, expireHolds, buildRenderModel, resolveMapLocale, isRtlLocale, resolveColors, computeSectionLayout, buildNavigationGraph, seatAriaLabel, summarizeSelection, toggleSeatSelection, disallowedAnnouncement, DEFAULT_SEQUENCE_READER, heldSeats, applyStateDeltaOrdered } from '@kerusiweb/core';
+
+/**
+ * Draws one Kerusi `Section` as a single `<svg>`.
+ *
+ * One SVG per section — rather than section groups inside a shared canvas — is
+ * what makes per-section `aspectRatio` and mixed grid/freeform modes work: each
+ * gets its own `viewBox` and its own intrinsic proportions, and CSS is free to
+ * stack, wrap or column them. It also puts the section heading in real DOM,
+ * where a screen reader can use it as a landmark.
+ *
+ * This component holds no state. It takes a placed layout and emits intent.
+ */
+class KerusiSectionComponent {
+    section = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+    layout = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Currently selected seat ids. */
+    selection = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** The seat holding the section's single tab stop, if any. */
+    focusedSeatId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedSeatId" }] : /* istanbul ignore next */ []));
+    /** Per-seat accessible names, keyed by seat id. */
+    ariaLabels = input(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
+    colors = input(DEFAULT_KERUSI_COLORS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    /** Whether an available seat may take its `SeatType.color` (§4.7). */
+    typeColors = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** When false, seats render but do not respond to pointer or keyboard. */
+    interactive = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS pixels per viewBox unit, at the section's natural size.
+     *
+     * Without a cap every section stretches to the full container width, so in a
+     * four-tier theatre the narrow box row would draw seats several times the
+     * size of the orchestra's. Capping each section at its own intrinsic width
+     * keeps a seat the same size everywhere; a section too wide to fit still
+     * scales down to the container.
+     */
+    unitScale = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitScale" }] : /* istanbul ignore next */ []));
+    seatActivate = output();
+    seatFocused = output();
+    seatKeydown = output();
+    viewBox = computed(() => `0 0 ${this.layout().width} ${this.layout().height}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    /** The section's natural width in CSS pixels; it never draws wider. */
+    naturalWidth = computed(() => this.layout().width * this.unitScale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "naturalWidth" }] : /* istanbul ignore next */ []));
+    isSelected(placed) {
+        return this.selection().has(placed.seat.id);
+    }
+    fill(placed) {
+        return seatFill(placed.seat, this.isSelected(placed), this.colors(), this.typeColors());
+    }
+    textFill(placed) {
+        return seatTextFill(placed.seat, this.isSelected(placed), this.colors(), this.typeColors());
+    }
+    backdrop() {
+        return cssVar('backdrop', this.colors().backdrop);
+    }
+    // --- the seat glyph -------------------------------------------------------
+    /** The seat's outline: square-ish front, tapered back — shape carries facing. */
+    bodyPath(placed) {
+        return seatBodyPath(placed.x, placed.y, placed.width, placed.height);
+    }
+    /** `null` for an available or blocked seat — nothing to mark. */
+    occupantVariant(placed) {
+        return seatOccupantVariant(placed.seat, this.isSelected(placed));
+    }
+    /**
+     * The box a seat's decorative marks are drawn to: the seat's own, or — when
+     * it is selected — the core plate's, which is inset by the frame width.
+     *
+     * Everything over a selected seat sits on the core, so it all has to be
+     * measured from the core. Drawing to the seat's box instead leaves the
+     * occupant's hips crossing the frame, where a figure tinted `selectedBg`
+     * lands on a frame filled `selectedBg` and reads as a hard nub. Since the
+     * core is an exact scaled copy of the body (see {@link seatSelectedFrame}),
+     * routing through here reproduces every clearance the mark had against the
+     * body, scaled — so the frame width stays free to change.
+     */
+    markBox(placed) {
+        if (!this.isSelected(placed)) {
+            return placed;
+        }
+        const frame = seatSelectedFrame(placed.width, placed.height);
+        return {
+            x: placed.x + frame,
+            y: placed.y + frame,
+            width: placed.width - frame * 2,
+            height: placed.height - frame * 2,
+        };
+    }
+    /** The bright plate inside a selected seat's frame. */
+    corePath(placed) {
+        const box = this.markBox(placed);
+        return seatBodyPath(box.x, box.y, box.width, box.height);
+    }
+    coreFill() {
+        return seatCoreFill(this.colors());
+    }
+    /** The dimming wash over a held or booked seat's type colour. */
+    washFill(placed) {
+        // Only called for held/booked seats — see the template's @if.
+        return seatWashFill(placed.seat.status, this.colors());
+    }
+    /** The occupant figure for a marked seat, sized to whatever it sits on. */
+    occupantPath(placed) {
+        const box = this.markBox(placed);
+        return seatOccupantPath(box.x, box.y, box.width, box.height);
+    }
+    occupantStroke(placed) {
+        const box = this.markBox(placed);
+        return seatOccupantStroke(box.width, box.height);
+    }
+    // The wheelchair marker keeps the same relative corner it always had; only
+    // the box it is relative to changes, so a selected seat's dot stays whole
+    // instead of being bitten off by the frame.
+    wheelchairCx(placed) {
+        const box = this.markBox(placed);
+        return box.x + box.width * 0.82;
+    }
+    wheelchairCy(placed) {
+        const box = this.markBox(placed);
+        return box.y + box.height * 0.18;
+    }
+    wheelchairRadius(placed) {
+        return this.markBox(placed).width * 0.13;
+    }
+    /**
+     * A core-coloured outline behind a selected seat's number, painted under the
+     * glyphs via `paint-order`.
+     *
+     * The label is centred on the occupant's shoulder line, so without this it is
+     * `selectedBg` over a `selectedBg` silhouette — the figure, not the plate, is
+     * what it actually has to contrast against. The halo also rescues a label too
+     * long for the core, which would otherwise run onto the frame and vanish into
+     * it.
+     *
+     * Bound here rather than in the stylesheet on purpose: a CSS
+     * `var(--kerusi-selected-fg, …)` rule would carry the library default as its
+     * fallback and silently skip the `[colors]` input tier, which only the
+     * TypeScript side can resolve.
+     */
+    labelHalo(placed) {
+        return this.isSelected(placed) ? seatCoreFill(this.colors()) : 'none';
+    }
+    labelHaloWidth(placed) {
+        return this.isSelected(placed) ? placed.fontSize * 0.22 : 0;
+    }
+    /** Solid for selected/booked; `none` for held, which draws hollow instead. */
+    occupantFill(variant) {
+        return occupantFillFor(variant, this.colors());
+    }
+    occupantStrokeColor(variant) {
+        return occupantStrokeFor(variant, this.colors());
+    }
+    /** The section's single tab stop; every other seat is reachable by arrow key. */
+    tabIndex(placed) {
+        if (!this.interactive()) {
+            return -1;
+        }
+        return placed.seat.id === this.focusedSeatId() ? 0 : -1;
+    }
+    ariaLabel(placed) {
+        return this.ariaLabels().get(placed.seat.id) ?? placed.seat.label;
+    }
+    seatClasses(placed) {
+        const seat = placed.seat;
+        return [
+            'kerusi-seat',
+            `kerusi-seat--${seat.status}`,
+            this.isSelected(placed) ? 'kerusi-seat--selected' : '',
+            seat.selectable ? '' : 'kerusi-seat--unselectable',
+            seat.accessibility?.wheelchairAccessible ? 'kerusi-seat--wheelchair' : '',
+            seat.companions.length > 0 ? 'kerusi-seat--companion' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /** SVG rotate() about the item's center; null when it does not rotate. */
+    transform(item) {
+        return item.rotation ? `rotate(${item.rotation} ${item.centerX} ${item.centerY})` : null;
+    }
+    /** Cancels the parent <g>'s rotation so the label stays upright and stays put. */
+    counterRotate(item) {
+        return item.rotation ? `rotate(${-item.rotation} ${item.centerX} ${item.centerY})` : null;
+    }
+    // --- elements -------------------------------------------------------------
+    style(placed) {
+        return elementStyle(placed.element.kind);
+    }
+    elementFillOf(placed) {
+        return elementFill(this.style(placed).tone, this.colors());
+    }
+    elementTextFillOf(placed) {
+        return elementTextFill(this.style(placed).tone, this.colors());
+    }
+    screenPathOf(placed) {
+        return screenPath(placed.x, placed.y, placed.width, placed.height);
+    }
+    /** The corner radius for a rectangular element; a stage reads as squarer. */
+    radiusOf(placed) {
+        return this.style(placed).shape === 'stage' ? 2 : Math.min(placed.height * 0.25, 6);
+    }
+    // --- interaction ----------------------------------------------------------
+    onSeatClick(placed) {
+        if (this.interactive()) {
+            this.seatActivate.emit(placed.seat.id);
+        }
+    }
+    onSeatFocus(placed) {
+        if (this.interactive()) {
+            this.seatFocused.emit(placed.seat.id);
+        }
+    }
+    onKeydown(event) {
+        if (this.interactive()) {
+            this.seatKeydown.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSectionComponent, isStandalone: true, selector: "kerusi-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, focusedSeatId: { classPropertyName: "focusedSeatId", publicName: "focusedSeatId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabels: { classPropertyName: "ariaLabels", publicName: "ariaLabels", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seatActivate: "seatActivate", seatFocused: "seatFocused", seatKeydown: "seatKeydown" }, ngImport: i0, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    <g\r\n      class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n      [attr.transform]=\"transform(placed)\"\r\n    >\r\n      @switch (style(placed).shape) {\r\n        @case ('screen') {\r\n          <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n        }\r\n        @case ('void') {\r\n          <rect\r\n            class=\"kerusi-element__void\"\r\n            [attr.x]=\"placed.x\"\r\n            [attr.y]=\"placed.y\"\r\n            [attr.width]=\"placed.width\"\r\n            [attr.height]=\"placed.height\"\r\n            [style.stroke]=\"elementTextFillOf(placed)\"\r\n            fill=\"none\"\r\n          />\r\n        }\r\n        @default {\r\n          <rect\r\n            [attr.x]=\"placed.x\"\r\n            [attr.y]=\"placed.y\"\r\n            [attr.width]=\"placed.width\"\r\n            [attr.height]=\"placed.height\"\r\n            [attr.rx]=\"radiusOf(placed)\"\r\n            [style.fill]=\"elementFillOf(placed)\"\r\n          />\r\n        }\r\n      }\r\n      @if (placed.element.label && style(placed).showLabel) {\r\n        <text\r\n          class=\"kerusi-element__label\"\r\n          text-anchor=\"middle\"\r\n          dominant-baseline=\"central\"\r\n          [attr.x]=\"placed.centerX\"\r\n          [attr.y]=\"placed.centerY\"\r\n          [attr.font-size]=\"placed.fontSize\"\r\n          [style.fill]=\"elementTextFillOf(placed)\"\r\n          [attr.transform]=\"counterRotate(placed)\"\r\n        >\r\n          {{ placed.element.label }}\r\n        </text>\r\n      }\r\n    </g>\r\n  }\r\n\r\n  @for (placed of layout().seats; track placed.seat.id) {\r\n    <g\r\n      [class]=\"seatClasses(placed)\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"isSelected(placed)\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @let variant = occupantVariant(placed);\r\n      <!-- Tapered toward the back, square at the front, so which way the seat\r\n           faces is legible from the outline alone. -->\r\n      <path class=\"kerusi-seat__box\" [attr.d]=\"bodyPath(placed)\" [style.fill]=\"fill(placed)\" />\r\n      @if (variant === 'held' || variant === 'booked') {\r\n        <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n             instead, so the type colour still reads on a busy map. -->\r\n        <path\r\n          class=\"kerusi-seat__wash\"\r\n          [attr.d]=\"bodyPath(placed)\"\r\n          [style.fill]=\"washFill(placed)\"\r\n        />\r\n      }\r\n      @if (variant === 'selected') {\r\n        <!-- Selection is the one state drawn from two tones: the body above is\r\n             the frame, this is the bright core inside it. Whichever way the\r\n             host page is themed, one of the two separates from it \u2014 which is\r\n             why nothing here has to know about the page. -->\r\n        <path class=\"kerusi-seat__core\" [attr.d]=\"corePath(placed)\" [style.fill]=\"coreFill()\" />\r\n      }\r\n      @if (variant) {\r\n        <!-- Deliberately not counter-rotated: the occupant leans with the\r\n             seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n             progress. -->\r\n        <path\r\n          class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ variant }}\"\r\n          [attr.d]=\"occupantPath(placed)\"\r\n          [attr.stroke-width]=\"occupantStroke(placed)\"\r\n          [style.fill]=\"occupantFill(variant)\"\r\n          [style.stroke]=\"occupantStrokeColor(variant)\"\r\n        />\r\n      }\r\n      <text\r\n        class=\"kerusi-seat__label\"\r\n        text-anchor=\"middle\"\r\n        dominant-baseline=\"central\"\r\n        [attr.x]=\"placed.centerX\"\r\n        [attr.y]=\"placed.centerY\"\r\n        [attr.font-size]=\"placed.fontSize\"\r\n        [style.fill]=\"textFill(placed)\"\r\n        [style.stroke]=\"labelHalo(placed)\"\r\n        [attr.stroke-width]=\"labelHaloWidth(placed)\"\r\n        [attr.transform]=\"counterRotate(placed)\"\r\n      >\r\n        {{ placed.seat.label }}\r\n      </text>\r\n      @if (placed.seat.accessibility?.wheelchairAccessible) {\r\n        <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n        <circle\r\n          class=\"kerusi-seat__wheelchair\"\r\n          [attr.cx]=\"wheelchairCx(placed)\"\r\n          [attr.cy]=\"wheelchairCy(placed)\"\r\n          [attr.r]=\"wheelchairRadius(placed)\"\r\n          [style.fill]=\"textFill(placed)\"\r\n        />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.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;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.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:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kerusi-section', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"kerusi-section-svg\"\r\n  role=\"presentation\"\r\n  focusable=\"false\"\r\n  [style.--kerusi-focus-ring-input]=\"colors().focusRing\"\r\n  [attr.viewBox]=\"viewBox()\"\r\n  [style.max-width.px]=\"naturalWidth()\"\r\n  preserveAspectRatio=\"xMidYMid meet\"\r\n>\r\n  <rect\r\n    x=\"0\"\r\n    y=\"0\"\r\n    [attr.width]=\"layout().width\"\r\n    [attr.height]=\"layout().height\"\r\n    [style.fill]=\"backdrop()\"\r\n  />\r\n\r\n  <!-- Elements first, so a screen or stage sits behind the seats it faces. -->\r\n  @for (placed of layout().elements; track placed.element.id) {\r\n    <g\r\n      class=\"kerusi-element kerusi-element--{{ placed.element.kind }}\"\r\n      [attr.transform]=\"transform(placed)\"\r\n    >\r\n      @switch (style(placed).shape) {\r\n        @case ('screen') {\r\n          <path [attr.d]=\"screenPathOf(placed)\" [style.fill]=\"elementFillOf(placed)\" />\r\n        }\r\n        @case ('void') {\r\n          <rect\r\n            class=\"kerusi-element__void\"\r\n            [attr.x]=\"placed.x\"\r\n            [attr.y]=\"placed.y\"\r\n            [attr.width]=\"placed.width\"\r\n            [attr.height]=\"placed.height\"\r\n            [style.stroke]=\"elementTextFillOf(placed)\"\r\n            fill=\"none\"\r\n          />\r\n        }\r\n        @default {\r\n          <rect\r\n            [attr.x]=\"placed.x\"\r\n            [attr.y]=\"placed.y\"\r\n            [attr.width]=\"placed.width\"\r\n            [attr.height]=\"placed.height\"\r\n            [attr.rx]=\"radiusOf(placed)\"\r\n            [style.fill]=\"elementFillOf(placed)\"\r\n          />\r\n        }\r\n      }\r\n      @if (placed.element.label && style(placed).showLabel) {\r\n        <text\r\n          class=\"kerusi-element__label\"\r\n          text-anchor=\"middle\"\r\n          dominant-baseline=\"central\"\r\n          [attr.x]=\"placed.centerX\"\r\n          [attr.y]=\"placed.centerY\"\r\n          [attr.font-size]=\"placed.fontSize\"\r\n          [style.fill]=\"elementTextFillOf(placed)\"\r\n          [attr.transform]=\"counterRotate(placed)\"\r\n        >\r\n          {{ placed.element.label }}\r\n        </text>\r\n      }\r\n    </g>\r\n  }\r\n\r\n  @for (placed of layout().seats; track placed.seat.id) {\r\n    <g\r\n      [class]=\"seatClasses(placed)\"\r\n      role=\"button\"\r\n      [attr.tabindex]=\"tabIndex(placed)\"\r\n      [attr.aria-label]=\"ariaLabel(placed)\"\r\n      [attr.aria-pressed]=\"isSelected(placed)\"\r\n      [attr.aria-disabled]=\"!placed.seat.selectable\"\r\n      [attr.data-seat-id]=\"placed.seat.id\"\r\n      [attr.transform]=\"transform(placed)\"\r\n      (click)=\"onSeatClick(placed)\"\r\n      (focus)=\"onSeatFocus(placed)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      @let variant = occupantVariant(placed);\r\n      <!-- Tapered toward the back, square at the front, so which way the seat\r\n           faces is legible from the outline alone. -->\r\n      <path class=\"kerusi-seat__box\" [attr.d]=\"bodyPath(placed)\" [style.fill]=\"fill(placed)\" />\r\n      @if (variant === 'held' || variant === 'booked') {\r\n        <!-- Colour stays the seat type's; a taken seat recedes under a wash\r\n             instead, so the type colour still reads on a busy map. -->\r\n        <path\r\n          class=\"kerusi-seat__wash\"\r\n          [attr.d]=\"bodyPath(placed)\"\r\n          [style.fill]=\"washFill(placed)\"\r\n        />\r\n      }\r\n      @if (variant === 'selected') {\r\n        <!-- Selection is the one state drawn from two tones: the body above is\r\n             the frame, this is the bright core inside it. Whichever way the\r\n             host page is themed, one of the two separates from it \u2014 which is\r\n             why nothing here has to know about the page. -->\r\n        <path class=\"kerusi-seat__core\" [attr.d]=\"corePath(placed)\" [style.fill]=\"coreFill()\" />\r\n      }\r\n      @if (variant) {\r\n        <!-- Deliberately not counter-rotated: the occupant leans with the\r\n             seat. Solid = settled (yours, or sold); hollow = a hold still in\r\n             progress. -->\r\n        <path\r\n          class=\"kerusi-seat__occupant kerusi-seat__occupant--{{ variant }}\"\r\n          [attr.d]=\"occupantPath(placed)\"\r\n          [attr.stroke-width]=\"occupantStroke(placed)\"\r\n          [style.fill]=\"occupantFill(variant)\"\r\n          [style.stroke]=\"occupantStrokeColor(variant)\"\r\n        />\r\n      }\r\n      <text\r\n        class=\"kerusi-seat__label\"\r\n        text-anchor=\"middle\"\r\n        dominant-baseline=\"central\"\r\n        [attr.x]=\"placed.centerX\"\r\n        [attr.y]=\"placed.centerY\"\r\n        [attr.font-size]=\"placed.fontSize\"\r\n        [style.fill]=\"textFill(placed)\"\r\n        [style.stroke]=\"labelHalo(placed)\"\r\n        [attr.stroke-width]=\"labelHaloWidth(placed)\"\r\n        [attr.transform]=\"counterRotate(placed)\"\r\n      >\r\n        {{ placed.seat.label }}\r\n      </text>\r\n      @if (placed.seat.accessibility?.wheelchairAccessible) {\r\n        <!-- A corner marker, not a different fill: availability owns the fill. -->\r\n        <circle\r\n          class=\"kerusi-seat__wheelchair\"\r\n          [attr.cx]=\"wheelchairCx(placed)\"\r\n          [attr.cy]=\"wheelchairCy(placed)\"\r\n          [attr.r]=\"wheelchairRadius(placed)\"\r\n          [style.fill]=\"textFill(placed)\"\r\n        />\r\n      }\r\n    </g>\r\n  }\r\n</svg>\r\n", styles: [":host{display:block}.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;-webkit-user-select:none;user-select:none;font-family:inherit}.kerusi-seat__label{paint-order:stroke;stroke-linejoin:round}.kerusi-seat__wash{pointer-events:none;opacity:.5}.kerusi-seat__core,.kerusi-seat__occupant{pointer-events:none}.kerusi-seat__occupant--selected{opacity:.2}.kerusi-seat__occupant--booked{opacity:.55}.kerusi-seat__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-seat--selected .kerusi-seat__label{font-weight:600}.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:.7}\n"] }]
+        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], focusedSeatId: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusedSeatId", required: false }] }], ariaLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabels", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], seatActivate: [{ type: i0.Output, args: ["seatActivate"] }], seatFocused: [{ type: i0.Output, args: ["seatFocused"] }], seatKeydown: [{ type: i0.Output, args: ["seatKeydown"] }] } });
+
+/**
+ * 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: `<kerusi-seatmap [showLegend]="true">` renders it inline, or
+ * use `<kerusi-legend>` directly to place it anywhere.
+ */
+class KerusiLegendComponent {
+    /** From `RenderMap.legend`. */
+    legend = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []));
+    locale = input('en', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    colors = input(DEFAULT_KERUSI_COLORS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    /** Whether an available seat takes its type color — mirrors the seatmap input. */
+    typeColors = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    showPrices = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPrices" }] : /* istanbul ignore next */ []));
+    /** Hide types no seat in the rendered map actually uses. */
+    hideUnusedTypes = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideUnusedTypes" }] : /* istanbul ignore next */ []));
+    headingSeatTypes = input('Seat types', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingSeatTypes" }] : /* istanbul ignore next */ []));
+    headingAvailability = input('Availability', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingAvailability" }] : /* istanbul ignore next */ []));
+    types = computed(() => this.legend().filter((entry) => !this.hideUnusedTypes() || entry.seatCount > 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "types" }] : /* istanbul ignore next */ []));
+    // 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.
+    statuses = computed(() => {
+        const c = this.colors();
+        const available = cssVar('availableBg', c.availableBg);
+        return [
+            { key: 'available', label: 'Available', kind: 'plain', fill: available },
+            {
+                key: 'selected',
+                label: 'Selected',
+                kind: 'selected',
+                fill: cssVar('selectedBg', c.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', c.blockedBg) },
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
+    swatch(entry) {
+        return (this.typeColors() && entry.color) || cssVar('availableBg', this.colors().availableBg);
+    }
+    swatchText(entry) {
+        const typeColor = this.typeColors() && entry.color;
+        // Mirrors `seatTextFill`: only a document-supplied color needs guessing at.
+        return typeColor ? readableOn(typeColor) : cssVar('availableFg', this.colors().availableFg);
+    }
+    // --- status swatches -------------------------------------------------------
+    //
+    // Availability is now signalled by shape, not colour, so every status swatch
+    // (bar "available" and "blocked") draws the same glyph the map does rather
+    // than a flat square. A legend that showed only flat colour would teach a
+    // cue the map no longer uses.
+    /** The swatch's viewBox edge; the seat glyph is drawn to fill it. */
+    glyphSize = 16;
+    glyphBody = seatBodyPath(0, 0, this.glyphSize, this.glyphSize);
+    /** The selected swatch's frame width, and the core it leaves inside itself. */
+    glyphFrame = seatSelectedFrame(this.glyphSize, this.glyphSize);
+    glyphCoreSize = this.glyphSize - this.glyphFrame * 2;
+    glyphCore = seatBodyPath(0, 0, this.glyphSize, this.glyphSize, this.glyphFrame);
+    glyphOccupant = seatOccupantPath(0, 0, this.glyphSize, this.glyphSize);
+    glyphOccupantStroke = seatOccupantStroke(this.glyphSize, this.glyphSize);
+    /** The selected swatch's figure sits on the core, so it is drawn to the core. */
+    glyphCoreOccupant = seatOccupantPath(this.glyphFrame, this.glyphFrame, this.glyphCoreSize, this.glyphCoreSize);
+    glyphCoreOccupantStroke = seatOccupantStroke(this.glyphCoreSize, this.glyphCoreSize);
+    occupantPathOf(variant) {
+        return variant === 'selected' ? this.glyphCoreOccupant : this.glyphOccupant;
+    }
+    occupantStrokeWidthOf(variant) {
+        return variant === 'selected' ? this.glyphCoreOccupantStroke : this.glyphOccupantStroke;
+    }
+    hasWash(kind) {
+        return kind === 'held' || kind === 'booked';
+    }
+    hasOccupant(kind) {
+        return kind === 'selected' || kind === 'held' || kind === 'booked';
+    }
+    washFillOf(kind) {
+        return seatWashFill(kind, this.colors());
+    }
+    occupantFillOf(variant) {
+        return occupantFillFor(variant, this.colors());
+    }
+    occupantStrokeOf(variant) {
+        return occupantStrokeFor(variant, this.colors());
+    }
+    coreFill() {
+        return seatCoreFill(this.colors());
+    }
+    price(entry) {
+        return entry.price ? formatMoney(entry.price, this.locale()) : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiLegendComponent, isStandalone: true, selector: "kerusi-legend", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: true, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, showPrices: { classPropertyName: "showPrices", publicName: "showPrices", isSignal: true, isRequired: false, transformFunction: null }, hideUnusedTypes: { classPropertyName: "hideUnusedTypes", publicName: "hideUnusedTypes", isSignal: true, isRequired: false, transformFunction: null }, headingSeatTypes: { classPropertyName: "headingSeatTypes", publicName: "headingSeatTypes", isSignal: true, isRequired: false, transformFunction: null }, headingAvailability: { classPropertyName: "headingAvailability", publicName: "headingAvailability", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\">\r\n            <span\r\n              class=\"kerusi-legend__swatch\"\r\n              aria-hidden=\"true\"\r\n              [style.background]=\"swatch(entry)\"\r\n              [style.color]=\"swatchText(entry)\"\r\n            ></span>\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiLegendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kerusi-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kerusi-legend\">\r\n  @if (types().length) {\r\n    <div class=\"kerusi-legend__block\">\r\n      <h4 class=\"kerusi-legend__heading\">{{ headingSeatTypes() }}</h4>\r\n      <ul class=\"kerusi-legend__list\">\r\n        @for (entry of types(); track entry.id) {\r\n          <li class=\"kerusi-legend__item\">\r\n            <span\r\n              class=\"kerusi-legend__swatch\"\r\n              aria-hidden=\"true\"\r\n              [style.background]=\"swatch(entry)\"\r\n              [style.color]=\"swatchText(entry)\"\r\n            ></span>\r\n            <span class=\"kerusi-legend__label\">{{ entry.label }}</span>\r\n            @if (showPrices() && price(entry)) {\r\n              <span class=\"kerusi-legend__price\">{{ price(entry) }}</span>\r\n            }\r\n          </li>\r\n        }\r\n      </ul>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"kerusi-legend__block\">\r\n    <h4 class=\"kerusi-legend__heading\">{{ headingAvailability() }}</h4>\r\n    <ul class=\"kerusi-legend__list\">\r\n      @for (status of statuses(); track status.key) {\r\n        <li class=\"kerusi-legend__item\">\r\n          <!-- Shape carries status now, so every swatch draws the seat glyph\r\n               rather than a flat colour \u2014 a flat swatch would teach a cue the\r\n               map itself no longer uses. -->\r\n          <svg\r\n            class=\"kerusi-legend__swatch kerusi-legend__swatch--glyph\"\r\n            aria-hidden=\"true\"\r\n            focusable=\"false\"\r\n            [attr.viewBox]=\"'0 0 ' + glyphSize + ' ' + glyphSize\"\r\n          >\r\n            <path [attr.d]=\"glyphBody\" [style.fill]=\"status.fill\" />\r\n            @if (hasWash(status.kind)) {\r\n              <path [attr.d]=\"glyphBody\" [style.fill]=\"washFillOf(status.kind)\" opacity=\"0.5\" />\r\n            }\r\n            @if (status.kind === 'selected') {\r\n              <!-- Two tones, same as the map: the body above is the frame, this\r\n                   is the core inside it. -->\r\n              <path [attr.d]=\"glyphCore\" [style.fill]=\"coreFill()\" />\r\n            }\r\n            @if (hasOccupant(status.kind)) {\r\n              <path\r\n                [attr.d]=\"occupantPathOf(status.kind)\"\r\n                class=\"kerusi-legend__occupant kerusi-legend__occupant--{{ status.kind }}\"\r\n                [attr.stroke-width]=\"occupantStrokeWidthOf(status.kind)\"\r\n                [style.fill]=\"occupantFillOf(status.kind)\"\r\n                [style.stroke]=\"occupantStrokeOf(status.kind)\"\r\n              />\r\n            }\r\n          </svg>\r\n          <span class=\"kerusi-legend__label\">{{ status.label }}</span>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem}.kerusi-legend__block{display:flex;flex-direction:column;gap:.4rem;min-width:0}.kerusi-legend__heading{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65}.kerusi-legend__list{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;list-style:none}.kerusi-legend__item{display:inline-flex;align-items:center;gap:.4rem}.kerusi-legend__swatch{display:inline-block;flex:none;width:.85rem;height:.85rem;border-radius:3px}.kerusi-legend__swatch--glyph{border-radius:0;overflow:visible}.kerusi-legend__occupant--selected{opacity:.2}.kerusi-legend__occupant--booked{opacity:.55}.kerusi-legend__occupant--held{opacity:.75;stroke-linecap:round;stroke-linejoin:round}.kerusi-legend__price{opacity:.7;font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: true }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], showPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrices", required: false }] }], hideUnusedTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideUnusedTypes", required: false }] }], headingSeatTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingSeatTypes", required: false }] }], headingAvailability: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingAvailability", required: false }] }] } });
+
+/**
+ * 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 set of
+ * seat ids the caller can two-way bind.
+ *
+ * ```html
+ * <kerusi-seatmap [map]="map" [state]="state" [(selection)]="picked" />
+ * ```
+ */
+class KerusiSeatmapComponent {
+    host = inject((ElementRef));
+    // --- documents ------------------------------------------------------------
+    map = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "map" }] : /* istanbul ignore next */ []));
+    state = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** The optional map↔event join (§5.3). Validated against the map and state. */
+    session = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "session" }] : /* istanbul ignore next */ []));
+    // --- selection ------------------------------------------------------------
+    /** Selected seat ids. Two-way: `[(selection)]`, or read-only with `[selection]`. */
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    // --- localization ---------------------------------------------------------
+    /** Overrides `KerusiMap.locale` (BCP-47). */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Right-to-left rendering. `auto` derives it from the resolved locale. */
+    rtl = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
+    /** Overrides the built-in English announcement strings. */
+    ariaStrings = input(DEFAULT_SEAT_ARIA_STRINGS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaStrings" }] : /* istanbul ignore next */ []));
+    // --- appearance -----------------------------------------------------------
+    colors = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    /** Let an available seat take its `SeatType.color` (§4.7). */
+    typeColors = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []));
+    /** Grid cell edge, in viewBox units. */
+    seatSize = input(28, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatSize" }] : /* istanbul ignore next */ []));
+    /** Gap between grid cells, in viewBox units. */
+    seatGap = input(6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatGap" }] : /* istanbul ignore next */ []));
+    /** Freeform viewBox width; height follows the section's aspect ratio. */
+    freeformBasis = input(1000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "freeformBasis" }] : /* istanbul ignore next */ []));
+    /**
+     * CSS pixels per viewBox unit. Caps each section at its natural size so a
+     * narrow section and a wide one in the same map draw seats the same size.
+     */
+    unitScale = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unitScale" }] : /* istanbul ignore next */ []));
+    showSectionLabels = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSectionLabels" }] : /* istanbul ignore next */ []));
+    showLegend = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
+    showLegendPrices = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLegendPrices" }] : /* istanbul ignore next */ []));
+    // --- section control ------------------------------------------------------
+    /** Render only these sections, in this order. Default: all, by `Section.index`. */
+    sectionIds = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionIds" }] : /* istanbul ignore next */ []));
+    sectionOverrides = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionOverrides" }] : /* istanbul ignore next */ []));
+    // --- interaction ----------------------------------------------------------
+    /** Statuses in which a seat may be picked. Default: `['available']`. */
+    selectableStatuses = input(['available'], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectableStatuses" }] : /* istanbul ignore next */ []));
+    /** `auto` selects a seat's companion closure together (§4.6). */
+    companionMode = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "companionMode" }] : /* istanbul ignore next */ []));
+    maxSelection = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSelection" }] : /* istanbul ignore next */ []));
+    /** A final say on selectability, applied after the status test. */
+    seatSelectable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seatSelectable" }] : /* istanbul ignore next */ []));
+    /** When false the map renders read-only: no pointer or keyboard interaction. */
+    interactive = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /**
+     * Revert a lapsed `holdExpires` to available on a ticker (§5.1). Off by
+     * default — a renderer should stay passive unless asked.
+     */
+    expireHolds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expireHolds" }] : /* istanbul ignore next */ []));
+    expiryIntervalMs = input(1000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expiryIntervalMs" }] : /* istanbul ignore next */ []));
+    // --- validation -----------------------------------------------------------
+    validate = input('collect', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "validate" }] : /* istanbul ignore next */ []));
+    // --- outputs --------------------------------------------------------------
+    seatSelect = output();
+    seatDeselect = output();
+    seatDisallowed = output();
+    seatFocus = output();
+    /** Emitted whenever the documents change, in `collect` mode. */
+    validationIssues = output();
+    // --- internal state -------------------------------------------------------
+    /**
+     * The seat holding each section's tab stop, keyed by section id.
+     *
+     * Per section, not 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.
+     */
+    focusedSeatIds = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedSeatIds" }] : /* istanbul ignore next */ []));
+    announcement = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+    /** Bumped by the hold ticker to force the state to be re-derived. */
+    expiryTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expiryTick" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const issues = this.issues();
+            if (this.validate() !== 'off') {
+                this.validationIssues.emit(issues);
+            }
+            if (this.validate() === 'throw') {
+                const [first] = errorsOf(issues);
+                if (first) {
+                    throw new KerusiValidationError(first.message, first.rule, first.id, issues);
+                }
+            }
+        });
+        // Keep every section's tab stop pointing at a seat that still exists.
+        effect(() => {
+            const model = this.renderMap();
+            const current = this.focusedSeatIds();
+            const next = {};
+            let changed = Object.keys(current).length !== model.sections.length;
+            for (const section of model.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;
+                }
+            }
+            if (changed) {
+                this.focusedSeatIds.set(next);
+            }
+        });
+        effect((onCleanup) => {
+            if (!this.expireHolds()) {
+                return;
+            }
+            const handle = setInterval(() => this.expiryTick.update((n) => n + 1), this.expiryIntervalMs());
+            onCleanup(() => clearInterval(handle));
+        });
+    }
+    // --- derived model --------------------------------------------------------
+    issues = computed(() => this.validate() === 'off'
+        ? []
+        : validateDocumentSet({
+            map: this.map(),
+            state: this.state(),
+            session: this.session(),
+        }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []));
+    /** The state actually rendered — with lapsed holds reverted when asked. */
+    effectiveState = computed(() => {
+        const state = this.state();
+        if (!state || !this.expireHolds()) {
+            return state;
+        }
+        this.expiryTick();
+        return expireHolds(state);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
+    renderMap = computed(() => buildRenderModel(this.map(), this.effectiveState(), {
+        locale: this.locale(),
+        sectionIds: this.visibleSectionIds(),
+        selectableStatuses: this.selectableStatuses(),
+        seatSelectable: this.seatSelectable(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderMap" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => resolveMapLocale(this.map(), this.locale()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    isRtl = computed(() => this.rtl() === 'auto' ? isRtlLocale(this.resolvedLocale()) : this.rtl() === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+    resolvedColors = computed(() => resolveColors(this.colors()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColors" }] : /* istanbul ignore next */ []));
+    selectionSet = computed(() => new Set(this.selection()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionSet" }] : /* istanbul ignore next */ []));
+    /** Placed geometry per section, keyed by section id. */
+    layouts = computed(() => {
+        const overrides = this.sectionOverrides();
+        return new Map(this.renderMap().sections.map((section) => {
+            const override = overrides[section.id] ?? {};
+            return [
+                section.id,
+                computeSectionLayout(section, {
+                    seatSize: override.seatSize ?? this.seatSize(),
+                    seatGap: this.seatGap(),
+                    freeformBasis: this.freeformBasis(),
+                    aspectRatio: override.aspectRatio,
+                    rtl: this.isRtl(),
+                }),
+            ];
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layouts" }] : /* istanbul ignore next */ []));
+    /** Navigation graphs per section — arrows move within, Tab moves between. */
+    graphs = computed(() => new Map(this.renderMap().sections.map((section) => [
+        section.id,
+        buildNavigationGraph(section, { rtl: this.isRtl() }),
+    ])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "graphs" }] : /* istanbul ignore next */ []));
+    ariaLabels = computed(() => {
+        const locale = this.resolvedLocale();
+        const strings = this.ariaStrings();
+        return new Map([...this.renderMap().seatsById.values()].map((seat) => [
+            seat.id,
+            seatAriaLabel(seat, locale, strings),
+        ]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabels" }] : /* istanbul ignore next */ []));
+    mapLabel = computed(() => this.renderMap().name ?? `Seat map ${this.renderMap().id}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mapLabel" }] : /* istanbul ignore next */ []));
+    /** Live-region text: the running selection, or the last disallowed reason. */
+    liveMessage = computed(() => this.announcement(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveMessage" }] : /* istanbul ignore next */ []));
+    /** The selection's seats and total, for callers that want it off the template. */
+    summary = computed(() => summarizeSelection(this.renderMap(), this.selection()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    // --- template helpers -----------------------------------------------------
+    layoutFor(section) {
+        return this.layouts().get(section.id);
+    }
+    labelFor(section) {
+        return this.sectionOverrides()[section.id]?.label ?? section.label;
+    }
+    labelId(section) {
+        return `kerusi-section-${this.renderMap().id}-${section.id}`;
+    }
+    /** The seat holding this section's tab stop. */
+    focusedSeatIn(section) {
+        return this.focusedSeatIds()[section.id] ?? null;
+    }
+    // --- interaction ----------------------------------------------------------
+    onSeatActivate(seatId) {
+        const model = this.renderMap();
+        const seat = model.seatsById.get(seatId);
+        if (!seat) {
+            return;
+        }
+        const outcome = toggleSeatSelection(this.selection(), seatId, {
+            seatsById: model.seatsById,
+            companionMode: this.companionMode(),
+            maxSelection: this.maxSelection(),
+        });
+        if (outcome.kind === 'disallowed') {
+            this.announce(disallowedAnnouncement(seat, outcome.reason, this.ariaStrings()));
+            this.seatDisallowed.emit({ seat, reason: outcome.reason });
+            return;
+        }
+        this.selection.set(outcome.selection);
+        const event = {
+            seat,
+            selection: outcome.selection,
+            changed: outcome.changed,
+        };
+        (outcome.kind === 'select' ? this.seatSelect : this.seatDeselect).emit(event);
+        this.announceSelection(outcome.selection);
+    }
+    onSeatFocused(seatId) {
+        const seat = this.renderMap().seatsById.get(seatId);
+        if (!seat) {
+            return;
+        }
+        this.setFocusedSeat(seat.sectionId, seatId);
+        this.seatFocus.emit(seat);
+    }
+    /**
+     * Arrow keys walk the navigation graph, which orders seats by `col` in grid
+     * and mixed sections — §4.3.1's logical adjacency — so the aisle that is a
+     * skipped column is stepped across rather than into.
+     */
+    onKeydown(section, event) {
+        const seatId = event.target?.dataset?.['seatId'];
+        if (!seatId) {
+            return;
+        }
+        const graph = this.graphs().get(section.id);
+        const neighbours = graph?.neighbours.get(seatId);
+        if (!graph) {
+            return;
+        }
+        let target;
+        switch (event.key) {
+            case 'ArrowLeft':
+                target = neighbours?.left;
+                break;
+            case 'ArrowRight':
+                target = neighbours?.right;
+                break;
+            case 'ArrowUp':
+                target = neighbours?.up;
+                break;
+            case 'ArrowDown':
+                target = neighbours?.down;
+                break;
+            case 'Home':
+                target = event.ctrlKey ? graph.first : neighbours?.rowStart;
+                break;
+            case 'End':
+                target = event.ctrlKey ? graph.last : neighbours?.rowEnd;
+                break;
+            case 'PageUp':
+                target = graph.first;
+                break;
+            case 'PageDown':
+                target = graph.last;
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.onSeatActivate(seatId);
+                return;
+            case 'Escape':
+                if (this.selection().length > 0) {
+                    event.preventDefault();
+                    this.selection.set([]);
+                    this.announceSelection([]);
+                }
+                return;
+            default:
+                return;
+        }
+        if (target) {
+            event.preventDefault();
+            this.moveFocusTo(section.id, target);
+        }
+    }
+    setFocusedSeat(sectionId, seatId) {
+        if (this.focusedSeatIds()[sectionId] === seatId) {
+            return;
+        }
+        this.focusedSeatIds.update((all) => ({ ...all, [sectionId]: seatId }));
+    }
+    /**
+     * Moves the roving tab stop, then the DOM focus that follows it.
+     *
+     * 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.
+     * Scanning the rendered nodes avoids both problems.
+     */
+    moveFocusTo(sectionId, seatId) {
+        this.setFocusedSeat(sectionId, seatId);
+        const nodes = this.host.nativeElement.querySelectorAll('[data-seat-id]');
+        for (const node of Array.from(nodes)) {
+            if (node.dataset['seatId'] === seatId) {
+                node.focus?.();
+                return;
+            }
+        }
+    }
+    announceSelection(selection) {
+        const strings = this.ariaStrings();
+        if (selection.length === 0) {
+            this.announce(strings.selectionEmpty);
+            return;
+        }
+        const { total } = summarizeSelection(this.renderMap(), selection);
+        this.announce(strings.selectionSummary(selection.length, formatTotal(total, this.resolvedLocale())));
+    }
+    announce(message) {
+        // Re-announce an identical message by clearing first; a live region that
+        // sees no text change stays silent.
+        this.announcement.set('');
+        queueMicrotask(() => this.announcement.set(message));
+    }
+    visibleSectionIds() {
+        const explicit = this.sectionIds();
+        const overrides = this.sectionOverrides();
+        const hidden = Object.entries(overrides)
+            .filter(([, o]) => o.hidden)
+            .map(([id]) => id);
+        if (explicit) {
+            return explicit.filter((id) => !hidden.includes(id));
+        }
+        if (hidden.length === 0) {
+            return undefined;
+        }
+        return (this.map().sections ?? []).map((s) => s.id).filter((id) => !hidden.includes(id));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatmapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: KerusiSeatmapComponent, isStandalone: true, selector: "kerusi-seatmap", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, ariaStrings: { classPropertyName: "ariaStrings", publicName: "ariaStrings", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, seatSize: { classPropertyName: "seatSize", publicName: "seatSize", isSignal: true, isRequired: false, transformFunction: null }, seatGap: { classPropertyName: "seatGap", publicName: "seatGap", isSignal: true, isRequired: false, transformFunction: null }, freeformBasis: { classPropertyName: "freeformBasis", publicName: "freeformBasis", isSignal: true, isRequired: false, transformFunction: null }, unitScale: { classPropertyName: "unitScale", publicName: "unitScale", isSignal: true, isRequired: false, transformFunction: null }, showSectionLabels: { classPropertyName: "showSectionLabels", publicName: "showSectionLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showLegendPrices: { classPropertyName: "showLegendPrices", publicName: "showLegendPrices", isSignal: true, isRequired: false, transformFunction: null }, sectionIds: { classPropertyName: "sectionIds", publicName: "sectionIds", isSignal: true, isRequired: false, transformFunction: null }, sectionOverrides: { classPropertyName: "sectionOverrides", publicName: "sectionOverrides", isSignal: true, isRequired: false, transformFunction: null }, selectableStatuses: { classPropertyName: "selectableStatuses", publicName: "selectableStatuses", isSignal: true, isRequired: false, transformFunction: null }, companionMode: { classPropertyName: "companionMode", publicName: "companionMode", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, seatSelectable: { classPropertyName: "seatSelectable", publicName: "seatSelectable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, expireHolds: { classPropertyName: "expireHolds", publicName: "expireHolds", isSignal: true, isRequired: false, transformFunction: null }, expiryIntervalMs: { classPropertyName: "expiryIntervalMs", publicName: "expiryIntervalMs", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", seatSelect: "seatSelect", seatDeselect: "seatDeselect", seatDisallowed: "seatDisallowed", seatFocus: "seatFocus", validationIssues: "validationIssues" }, ngImport: i0, template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.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}\n"], dependencies: [{ kind: "component", type: KerusiSectionComponent, selector: "kerusi-section", inputs: ["section", "layout", "selection", "focusedSeatId", "ariaLabels", "colors", "typeColors", "interactive", "unitScale"], outputs: ["seatActivate", "seatFocused", "seatKeydown"] }, { kind: "component", type: KerusiLegendComponent, selector: "kerusi-legend", inputs: ["legend", "locale", "colors", "typeColors", "showPrices", "hideUnusedTypes", "headingSeatTypes", "headingAvailability"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: KerusiSeatmapComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kerusi-seatmap', changeDetection: ChangeDetectionStrategy.OnPush, imports: [KerusiSectionComponent, KerusiLegendComponent], template: "<div\r\n  class=\"kerusi-seatmap\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"mapLabel()\"\r\n  [attr.dir]=\"isRtl() ? 'rtl' : null\"\r\n  [attr.lang]=\"resolvedLocale()\"\r\n>\r\n  @for (section of renderMap().sections; track section.id) {\r\n    <section\r\n      class=\"kerusi-seatmap__section kerusi-seatmap__section--{{ section.layoutMode }}\"\r\n      role=\"group\"\r\n      [attr.aria-labelledby]=\"labelFor(section) ? labelId(section) : null\"\r\n      [attr.aria-label]=\"labelFor(section) ? null : section.id\"\r\n    >\r\n      @if (showSectionLabels() && labelFor(section)) {\r\n        <h3 class=\"kerusi-section-label\" [id]=\"labelId(section)\">{{ labelFor(section) }}</h3>\r\n      }\r\n\r\n      <kerusi-section\r\n        [section]=\"section\"\r\n        [layout]=\"layoutFor(section)\"\r\n        [selection]=\"selectionSet()\"\r\n        [focusedSeatId]=\"focusedSeatIn(section)\"\r\n        [ariaLabels]=\"ariaLabels()\"\r\n        [colors]=\"resolvedColors()\"\r\n        [typeColors]=\"typeColors()\"\r\n        [unitScale]=\"unitScale()\"\r\n        [interactive]=\"interactive()\"\r\n        (seatActivate)=\"onSeatActivate($event)\"\r\n        (seatFocused)=\"onSeatFocused($event)\"\r\n        (seatKeydown)=\"onKeydown(section, $event)\"\r\n      />\r\n    </section>\r\n  }\r\n\r\n  @if (showLegend()) {\r\n    <kerusi-legend\r\n      [legend]=\"renderMap().legend\"\r\n      [locale]=\"resolvedLocale()\"\r\n      [colors]=\"resolvedColors()\"\r\n      [typeColors]=\"typeColors()\"\r\n      [showPrices]=\"showLegendPrices()\"\r\n    />\r\n  }\r\n\r\n  <p class=\"kerusi-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ liveMessage() }}</p>\r\n</div>\r\n", styles: [":host{display:block}.kerusi-seatmap{display:flex;flex-direction:column;gap:1.25rem}.kerusi-seatmap__section{display:flex;flex-direction:column;gap:.4rem}.kerusi-section-label{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.75}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], ariaStrings: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaStrings", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], seatSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSize", required: false }] }], seatGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatGap", required: false }] }], freeformBasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeformBasis", required: false }] }], unitScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitScale", required: false }] }], showSectionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSectionLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showLegendPrices: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegendPrices", required: false }] }], sectionIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIds", required: false }] }], sectionOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOverrides", required: false }] }], selectableStatuses: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableStatuses", required: false }] }], companionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "companionMode", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], seatSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "seatSelectable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], expireHolds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expireHolds", required: false }] }], expiryIntervalMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "expiryIntervalMs", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], seatSelect: [{ type: i0.Output, args: ["seatSelect"] }], seatDeselect: [{ type: i0.Output, args: ["seatDeselect"] }], seatDisallowed: [{ type: i0.Output, args: ["seatDisallowed"] }], seatFocus: [{ type: i0.Output, args: ["seatFocus"] }], validationIssues: [{ type: i0.Output, args: ["validationIssues"] }] } });
+function formatTotal(total, locale) {
+    return total ? formatMoney(total, locale) : '';
+}
+
+/**
+ * The Kerusi-native seat map: `<kerusi-seatmap>`, its section renderer, and an
+ * optional legend.
+ *
+ * The selection, theming and announcement helpers they are built from are
+ * framework-free and live in `@kerusiweb/core`.
+ */
+
+/**
+ * A signal-backed live view of a {@link KerusiState}.
+ *
+ * Construct it directly — `new KerusiStateStore(initialState)` — and feed it
+ * deltas from whatever transport you use. It is deliberately not an
+ * `@Injectable`: this is a rendering library, and an application that already
+ * owns its availability state should keep owning it.
+ */
+class KerusiStateStore {
+    _state;
+    _needsRefetch = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_needsRefetch" }] : /* istanbul ignore next */ []));
+    _now;
+    clock;
+    sequenceOf;
+    lastSequence;
+    constructor(initial, opts = {}) {
+        this._state = signal(initial, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+        this.clock = opts.now ?? (() => new Date());
+        this.sequenceOf = opts.sequenceOf ?? DEFAULT_SEQUENCE_READER;
+        this._now = signal(this.clock(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_now" }] : /* istanbul ignore next */ []));
+    }
+    /** The current availability snapshot. */
+    get state() {
+        return this._state.asReadonly();
+    }
+    /** The timestamp of the most recently applied document. */
+    updatedAt = computed(() => this._state().updatedAt, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "updatedAt" }] : /* istanbul ignore next */ []));
+    /**
+     * 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).
+     */
+    get needsRefetch() {
+        return this._needsRefetch.asReadonly();
+    }
+    /** Every currently-held seat, with the time left on its hold. */
+    heldSeats = computed(() => heldSeats(this._state(), this._now()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heldSeats" }] : /* istanbul ignore next */ []));
+    /** Offers a delta to the store. Returns what happened to it. */
+    apply(delta) {
+        const result = applyStateDeltaOrdered(this._state(), delta, {
+            sequenceOf: this.sequenceOf,
+            lastSequence: this.lastSequence,
+        });
+        if (result.outcome === 'applied' || result.outcome === 'gap') {
+            this._state.set(result.state);
+            const seq = this.sequenceOf(delta);
+            if (seq !== undefined) {
+                this.lastSequence = seq;
+            }
+        }
+        if (result.outcome === 'gap') {
+            this._needsRefetch.set(true);
+        }
+        return result;
+    }
+    /**
+     * Replaces the state wholesale — the post-refetch path. Clears the
+     * refetch flag and forgets the delta sequence.
+     */
+    reset(state) {
+        this._state.set(state);
+        this._needsRefetch.set(false);
+        this.lastSequence = undefined;
+        this._now.set(this.clock());
+    }
+    /** Reverts lapsed holds and refreshes `heldSeats` countdowns. */
+    tick() {
+        const now = this.clock();
+        this._now.set(now);
+        const next = expireHolds(this._state(), now);
+        if (next !== this._state()) {
+            this._state.set(next);
+        }
+    }
+    /**
+     * Runs {@link tick} on an interval. Returns a function that stops it — call
+     * that from `DestroyRef.onDestroy` or `ngOnDestroy`.
+     */
+    startExpiryTicker(intervalMs = 1000) {
+        const handle = setInterval(() => this.tick(), intervalMs);
+        return () => clearInterval(handle);
+    }
+}
+
+/*
+ * Public API Surface of @kerusiweb/angular
+ *
+ * The Angular binding only. Document types, the render model and the view
+ * helpers live in @kerusiweb/core — import them from there.
+ */
+// --- Components -------------------------------------------------------------
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KerusiLegendComponent, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
+//# sourceMappingURL=kerusiweb-angular.mjs.map