@kerusiweb/angular 2.2.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerusiweb/angular",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "An Angular seat-map component that renders Kerusi Seat Map & Availability Format documents as interactive, accessible inline SVG.",
   "keywords": [
     "angular",
@@ -20,14 +20,14 @@
   "author": "Arsyad \"Shad Ahm\" Ahmad",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ShadAhm/kerusiweb.git",
+    "url": "git+https://github.com/ShadAhm/kerusiweb.git",
     "directory": "projects/angular"
   },
   "homepage": "https://github.com/ShadAhm/kerusiweb",
   "peerDependencies": {
     "@angular/common": "^22.1.0",
     "@angular/core": "^22.1.0",
-    "@kerusiweb/core": "^2.2.0"
+    "@kerusiweb/core": "^3.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/kerusiweb-angular.d.ts

@@ -1,7 +1,53 @@
 import * as _kerusiweb_core from '@kerusiweb/core';
-import { KerusiMap, KerusiState, KerusiSession, SeatAriaStrings, KerusiSeatmapColors, RenderSeat, KerusiControlStrings, DisallowedReason, KerusiViolation, KerusiViewport, RenderMap, SectionLayout, RenderSection, PlacedSeat, SeatOccupantVariant, PlacedElement, RenderLegendEntry, SequenceReader, HeldSeat, KerusiStateDelta, DeltaApplication } from '@kerusiweb/core';
+import { KerusiSeatContext, KerusiMap, KerusiState, KerusiSession, SeatAriaStrings, KerusiSeatmapColors, SeatStyleFn, RenderSeat, KerusiControlStrings, DisallowedReason, KerusiViolation, KerusiViewport, RenderMap, MapLayout, RenderSection, PlacedSection, PlacedSeat, PlacedElement, RenderLegendEntry, SeatOccupantVariant, SequenceReader, HeldSeat, KerusiStateDelta, DeltaApplication } from '@kerusiweb/core';
 import * as _angular_core from '@angular/core';
-import { Signal } from '@angular/core';
+import { TemplateRef, Signal } from '@angular/core';
+
+/**
+ * What a `kerusiSeat` template is handed for each seat (`let-seat`): the seat,
+ * whether it is selected, the stock glyph core resolved for it, and the stock
+ * drawing itself.
+ */
+interface SeatTemplateContext extends KerusiSeatContext {
+    /**
+     * The library's own drawing of this seat. Render it to keep the stock seat,
+     * or alongside your own marks to add to it:
+     *
+     * ```html
+     * <ng-container *ngTemplateOutlet="seat.defaultContent; context: { $implicit: seat }" />
+     * ```
+     */
+    defaultContent: TemplateRef<SeatTemplateOutletContext>;
+}
+/** The context object a seat template is stamped with. */
+interface SeatTemplateOutletContext {
+    $implicit: SeatTemplateContext;
+}
+/**
+ * Marks an `<ng-template>` inside `<kerusi-seatmap>` as the drawing for every
+ * seat. The library keeps each seat's `<g>`, with its role, ARIA state, tab
+ * stop, rotation and event handlers, and stamps this template inside it.
+ *
+ * The template is declared outside any `<svg>`, so Angular cannot tell its
+ * elements are SVG: prefix each one with `svg:` (`<svg:path>`, `<svg:image>`),
+ * or it is created as an unknown HTML element and draws nothing.
+ *
+ * ```html
+ * <kerusi-seatmap [map]="map">
+ *   <ng-template kerusiSeat let-seat>
+ *     <ng-container *ngTemplateOutlet="seat.defaultContent; context: { $implicit: seat }" />
+ *     <svg:circle [attr.cx]="seat.glyph.box.x" [attr.cy]="seat.glyph.box.y" r="3" />
+ *   </ng-template>
+ * </kerusi-seatmap>
+ * ```
+ */
+declare class KerusiSeatTemplateDirective {
+    readonly template: TemplateRef<SeatTemplateOutletContext>;
+    /** Types `let-seat` as a {@link SeatTemplateContext}. */
+    static ngTemplateContextGuard(_dir: KerusiSeatTemplateDirective, ctx: unknown): ctx is SeatTemplateOutletContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiSeatTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KerusiSeatTemplateDirective, "ng-template[kerusiSeat]", never, {}, {}, never, never, true, never>;
+}
 
 /** How a document with validation errors is handled. */
 type ValidationMode = 
@@ -13,11 +59,8 @@ type ValidationMode =
  | 'off';
 /** Per-section rendering overrides, keyed by `Section.id`. */
 interface SectionRenderOptions {
+    /** Leaves the section out. Its space on the canvas stays empty (D4). */
     hidden?: boolean;
-    /** Overrides `Section.aspectRatio`. */
-    aspectRatio?: string;
-    /** Overrides the seat size for this section only. */
-    seatSize?: number;
     /** Overrides the localized `Section.label`. */
     label?: string;
 }
@@ -37,8 +80,10 @@ interface SeatDisallowed {
  * 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,
+ * intermediate row model. The map is one `<svg>` whose `viewBox` is the
+ * document's canvas (§4.5), each `Section` is a group on it, every seat is
+ * drawn exactly where and as large as the document says, 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.
@@ -69,17 +114,34 @@ declare class KerusiSeatmapComponent {
     readonly colors: _angular_core.InputSignal<KerusiSeatmapColors>;
     /** Let an available seat take its `SeatType.color` (§4.7). */
     readonly typeColors: _angular_core.InputSignal<boolean>;
-    /** Grid cell edge, in viewBox units. */
-    readonly seatSize: _angular_core.InputSignal<number>;
-    /** Gap between grid cells, in viewBox units. */
-    readonly seatGap: _angular_core.InputSignal<number>;
-    /** Freeform viewBox width; height follows the section's aspect ratio. */
-    readonly freeformBasis: _angular_core.InputSignal<number>;
     /**
-     * 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.
+     * Styles for every seat of a type, keyed by `SeatType.id`: fill, label colour
+     * and classes. Never changes a selected or blocked seat's fill. Also shown in
+     * the legend.
+     */
+    readonly seatTypeStyles: _angular_core.InputSignal<Readonly<Record<string, _kerusiweb_core.KerusiSeatStyle>> | undefined>;
+    /**
+     * A style for one seat, laid over its `seatTypeStyles` entry; return nothing
+     * to leave a seat be. Never changes a selected or blocked seat's fill.
+     */
+    readonly seatStyle: _angular_core.InputSignal<SeatStyleFn | undefined>;
+    /**
+     * A `<ng-template kerusiSeat let-seat>` placed inside the map draws the inside
+     * of every seat in place of the stock glyph. See {@link KerusiSeatTemplateDirective}.
+     */
+    protected readonly seatTemplate: _angular_core.Signal<KerusiSeatTemplateDirective | undefined>;
+    /**
+     * CSS pixels per canvas unit, at most: the map never draws wider than
+     * `canvas.width × unitScale`, and scales down to a narrower container. The
+     * document fixes every seat's size and position (§4.5); this is the only
+     * sizing control. Default `1`.
      */
     readonly unitScale: _angular_core.InputSignal<number>;
+    /**
+     * Draws each section's label inside the map, at the top-left of its `bounds`.
+     * Only sections that declare `bounds` get one; every section's label is its
+     * group's accessible name either way. Default `true`.
+     */
     readonly showSectionLabels: _angular_core.InputSignal<boolean>;
     readonly showLegend: _angular_core.InputSignal<boolean>;
     readonly showLegendPrices: _angular_core.InputSignal<boolean>;
@@ -87,7 +149,7 @@ declare class KerusiSeatmapComponent {
     readonly sectionIds: _angular_core.InputSignal<readonly string[] | undefined>;
     readonly sectionOverrides: _angular_core.InputSignal<Readonly<Record<string, SectionRenderOptions>>>;
     /** Statuses in which a seat may be picked. Default: `['available']`. */
-    readonly selectableStatuses: _angular_core.InputSignal<readonly ("held" | "booked" | "available" | "blocked")[]>;
+    readonly selectableStatuses: _angular_core.InputSignal<readonly ("held" | "booked" | "blocked" | "available")[]>;
     /** `auto` selects a seat's companion closure together (§4.6). */
     readonly companionMode: _angular_core.InputSignal<"auto" | "independent">;
     readonly maxSelection: _angular_core.InputSignal<number | undefined>;
@@ -169,8 +231,14 @@ declare class KerusiSeatmapComponent {
     protected readonly showToolbar: _angular_core.Signal<boolean>;
     protected readonly atMaxZoom: _angular_core.Signal<boolean>;
     protected readonly atFit: _angular_core.Signal<boolean>;
-    /** Placed geometry per section, keyed by section id. */
-    protected readonly layouts: _angular_core.Signal<ReadonlyMap<string, SectionLayout>>;
+    /** Every seat and element placed on the canvas, mirrored as a whole in RTL (D3). */
+    protected readonly layout: _angular_core.Signal<MapLayout>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    /** `unitScale` CSS pixels per canvas unit, at most. */
+    protected readonly naturalWidth: _angular_core.Signal<number>;
+    /** The canvas's width over its height, so a maximized map can fit the whole canvas. */
+    protected readonly canvasAspect: _angular_core.Signal<string>;
+    protected readonly backdrop: _angular_core.Signal<string>;
     /** Navigation graphs per section — arrows move within, Tab moves between. */
     private readonly graphs;
     protected readonly ariaLabels: _angular_core.Signal<ReadonlyMap<string, string>>;
@@ -179,17 +247,15 @@ declare class KerusiSeatmapComponent {
     protected readonly liveMessage: _angular_core.Signal<string>;
     /** The selection's seats and total, for callers that want it off the template. */
     readonly summary: _angular_core.Signal<_kerusiweb_core.SelectionSummary>;
-    protected layoutFor(section: RenderSection): SectionLayout;
     protected labelFor(section: RenderSection): string | undefined;
-    protected labelId(section: RenderSection): string;
     /** The seat holding this section's tab stop. */
     protected focusedSeatIn(section: RenderSection): string | null;
     protected onSeatActivate(seatId: string): void;
     protected onSeatFocused(seatId: string): void;
     /**
-     * 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.
+     * Arrow keys walk the navigation graph, which follows §4.3.5 adjacency:
+     * along a row by `col`, across an aisle (a skipped `col`) rather than into
+     * it, and between rows to the seat nearest on the canvas (D6).
      */
     protected onKeydown(section: RenderSection, event: KeyboardEvent): void;
     private setFocusedSeat;
@@ -210,8 +276,15 @@ declare class KerusiSeatmapComponent {
     zoomIn(): void;
     /** Zooms out one step about the centre. No-op unless `zoomable`. */
     zoomOut(): void;
-    /** Back to fit-to-container: the map's original view. No-op unless `zoomable`. */
+    /** Back to fit-to-container: the whole canvas. No-op unless `zoomable`. */
     resetZoom(): void;
+    /**
+     * Zooms to one section: its declared `bounds`, or the box around its seats
+     * and elements when it declares none. No-op unless `zoomable`, or for a
+     * section that is not rendered.
+     */
+    zoomToSection(sectionId: string): void;
+    private zoomToCanvasRect;
     private stepZoom;
     /** Sizes in CSS pixels, read when needed: `offset*` ignores the zoom transform. */
     private measure;
@@ -247,23 +320,32 @@ declare class KerusiSeatmapComponent {
     private announce;
     private visibleSectionIds;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiSeatmapComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSeatmapComponent, "kerusi-seatmap", never, { "map": { "alias": "map"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "ariaStrings": { "alias": "ariaStrings"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatSize": { "alias": "seatSize"; "required": false; "isSignal": true; }; "seatGap": { "alias": "seatGap"; "required": false; "isSignal": true; }; "freeformBasis": { "alias": "freeformBasis"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; "showSectionLabels": { "alias": "showSectionLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showLegendPrices": { "alias": "showLegendPrices"; "required": false; "isSignal": true; }; "sectionIds": { "alias": "sectionIds"; "required": false; "isSignal": true; }; "sectionOverrides": { "alias": "sectionOverrides"; "required": false; "isSignal": true; }; "selectableStatuses": { "alias": "selectableStatuses"; "required": false; "isSignal": true; }; "companionMode": { "alias": "companionMode"; "required": false; "isSignal": true; }; "maxSelection": { "alias": "maxSelection"; "required": false; "isSignal": true; }; "seatSelectable": { "alias": "seatSelectable"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "expireHolds": { "alias": "expireHolds"; "required": false; "isSignal": true; }; "expiryIntervalMs": { "alias": "expiryIntervalMs"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "showZoomControls": { "alias": "showZoomControls"; "required": false; "isSignal": true; }; "maximizable": { "alias": "maximizable"; "required": false; "isSignal": true; }; "controlStrings": { "alias": "controlStrings"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "seatSelect": "seatSelect"; "seatDeselect": "seatDeselect"; "seatDisallowed": "seatDisallowed"; "seatFocus": "seatFocus"; "validationIssues": "validationIssues"; "viewportChange": "viewportChange"; "maximizedChange": "maximizedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSeatmapComponent, "kerusi-seatmap", never, { "map": { "alias": "map"; "required": true; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; "ariaStrings": { "alias": "ariaStrings"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatTypeStyles": { "alias": "seatTypeStyles"; "required": false; "isSignal": true; }; "seatStyle": { "alias": "seatStyle"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; "showSectionLabels": { "alias": "showSectionLabels"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showLegendPrices": { "alias": "showLegendPrices"; "required": false; "isSignal": true; }; "sectionIds": { "alias": "sectionIds"; "required": false; "isSignal": true; }; "sectionOverrides": { "alias": "sectionOverrides"; "required": false; "isSignal": true; }; "selectableStatuses": { "alias": "selectableStatuses"; "required": false; "isSignal": true; }; "companionMode": { "alias": "companionMode"; "required": false; "isSignal": true; }; "maxSelection": { "alias": "maxSelection"; "required": false; "isSignal": true; }; "seatSelectable": { "alias": "seatSelectable"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "expireHolds": { "alias": "expireHolds"; "required": false; "isSignal": true; }; "expiryIntervalMs": { "alias": "expiryIntervalMs"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "showZoomControls": { "alias": "showZoomControls"; "required": false; "isSignal": true; }; "maximizable": { "alias": "maximizable"; "required": false; "isSignal": true; }; "controlStrings": { "alias": "controlStrings"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "seatSelect": "seatSelect"; "seatDeselect": "seatDeselect"; "seatDisallowed": "seatDisallowed"; "seatFocus": "seatFocus"; "validationIssues": "validationIssues"; "viewportChange": "viewportChange"; "maximizedChange": "maximizedChange"; }, ["seatTemplate"], never, true, never>;
 }
 
 /**
- * Draws one Kerusi `Section` as a single `<svg>`.
+ * Draws one Kerusi `Section` as a `<g>` on the map's shared canvas (D1).
  *
- * 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.
+ * Sections are zones on one canvas in rev 15 (§4.1), and two may sit side by
+ * side, so a section is a group inside the map's single `<svg>` rather than an
+ * SVG of its own. Use it on a `<g>` inside an `<svg>` whose `viewBox` is the
+ * canvas: `<g kerusi-section [layout]="placed"></g>`. Its template prefixes
+ * every element with `svg:`, because Angular cannot tell from a component's
+ * own template that it will be stamped into SVG.
  *
  * This component holds no state. It takes a placed layout and emits intent.
  */
 declare class KerusiSectionComponent {
-    readonly section: _angular_core.InputSignal<RenderSection>;
-    readonly layout: _angular_core.InputSignal<SectionLayout>;
+    /** The section with its seats and elements placed on the map's canvas. */
+    readonly layout: _angular_core.InputSignal<PlacedSection>;
+    /** The section's name: its accessible name, and its drawn label when one is shown. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Draw `label` inside the SVG, at the top-left of the section's bounds. Only
+     * a section that declares `bounds` gets one (D5); otherwise the label is the
+     * group's accessible name alone.
+     */
+    readonly showLabel: _angular_core.InputSignal<boolean>;
     /** Currently selected seat ids. */
     readonly selection: _angular_core.InputSignal<ReadonlySet<string>>;
     /** The seat holding the section's single tab stop, if any. */
@@ -273,80 +355,32 @@ declare class KerusiSectionComponent {
     readonly colors: _angular_core.InputSignal<Required<KerusiSeatmapColors>>;
     /** Whether an available seat may take its `SeatType.color` (§4.7). */
     readonly typeColors: _angular_core.InputSignal<boolean>;
+    /** Styles for every seat of a type, keyed by `SeatType.id`. */
+    readonly seatTypeStyles: _angular_core.InputSignal<Readonly<Record<string, _kerusiweb_core.KerusiSeatStyle>> | undefined>;
+    /** A style for one seat, laid over its type's. */
+    readonly seatStyle: _angular_core.InputSignal<SeatStyleFn | undefined>;
+    /** Draws the inside of each seat in place of the stock glyph. */
+    readonly seatTemplate: _angular_core.InputSignal<TemplateRef<SeatTemplateOutletContext> | undefined>;
     /** When false, seats render but do not respond to pointer or keyboard. */
     readonly interactive: _angular_core.InputSignal<boolean>;
-    /**
-     * 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.
-     */
-    readonly unitScale: _angular_core.InputSignal<number>;
     readonly seatActivate: _angular_core.OutputEmitterRef<string>;
     readonly seatFocused: _angular_core.OutputEmitterRef<string>;
     readonly seatKeydown: _angular_core.OutputEmitterRef<KeyboardEvent>;
-    protected readonly viewBox: _angular_core.Signal<string>;
-    /** The section's natural width in CSS pixels; it never draws wider. */
-    protected readonly naturalWidth: _angular_core.Signal<number>;
-    protected isSelected(placed: PlacedSeat): boolean;
-    protected fill(placed: PlacedSeat): string;
-    protected textFill(placed: PlacedSeat): string;
-    protected backdrop(): string;
-    /** The seat's outline: square-ish front, tapered back — shape carries facing. */
-    protected bodyPath(placed: PlacedSeat): string;
-    /** `null` for an available or blocked seat — nothing to mark. */
-    protected occupantVariant(placed: PlacedSeat): SeatOccupantVariant | null;
-    /**
-     * 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.
-     */
-    private markBox;
-    /** The bright plate inside a selected seat's frame. */
-    protected corePath(placed: PlacedSeat): string;
-    protected coreFill(): string;
-    /** The dimming wash over a held or booked seat's type colour. */
-    protected washFill(placed: PlacedSeat): string;
-    /** The occupant figure for a marked seat, sized to whatever it sits on. */
-    protected occupantPath(placed: PlacedSeat): string;
-    protected occupantStroke(placed: PlacedSeat): number;
-    protected wheelchairCx(placed: PlacedSeat): number;
-    protected wheelchairCy(placed: PlacedSeat): number;
-    protected wheelchairRadius(placed: PlacedSeat): number;
+    /** Whether the label is drawn: asked for, present, and with declared bounds to sit in. */
+    protected readonly drawsLabel: _angular_core.Signal<boolean>;
+    protected readonly labelFill: _angular_core.Signal<string>;
     /**
-     * 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.
+     * Every seat with its glyph resolved, once per change of layout, selection or
+     * theme rather than once per binding per change detection.
      */
-    protected labelHalo(placed: PlacedSeat): string;
-    protected labelHaloWidth(placed: PlacedSeat): number;
-    /** Solid for selected/booked; `none` for held, which draws hollow instead. */
-    protected occupantFill(variant: SeatOccupantVariant): string;
-    protected occupantStrokeColor(variant: SeatOccupantVariant): string;
+    protected readonly seats: _angular_core.Signal<{
+        placed: PlacedSeat;
+        selected: boolean;
+        glyph: _kerusiweb_core.SeatGlyph;
+    }[]>;
     /** The section's single tab stop; every other seat is reachable by arrow key. */
     protected tabIndex(placed: PlacedSeat): number;
     protected ariaLabel(placed: PlacedSeat): string;
-    protected seatClasses(placed: PlacedSeat): string;
     /** SVG rotate() about the item's center; null when it does not rotate. */
     protected transform(item: PlacedSeat | PlacedElement): string | null;
     /** Cancels the parent <g>'s rotation so the label stays upright and stays put. */
@@ -365,7 +399,7 @@ declare class KerusiSectionComponent {
     protected onSeatFocus(placed: PlacedSeat): void;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiSectionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSectionComponent, "kerusi-section", never, { "section": { "alias": "section"; "required": true; "isSignal": true; }; "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "focusedSeatId": { "alias": "focusedSeatId"; "required": false; "isSignal": true; }; "ariaLabels": { "alias": "ariaLabels"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "unitScale": { "alias": "unitScale"; "required": false; "isSignal": true; }; }, { "seatActivate": "seatActivate"; "seatFocused": "seatFocused"; "seatKeydown": "seatKeydown"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiSectionComponent, "g[kerusi-section]", never, { "layout": { "alias": "layout"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "focusedSeatId": { "alias": "focusedSeatId"; "required": false; "isSignal": true; }; "ariaLabels": { "alias": "ariaLabels"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatTypeStyles": { "alias": "seatTypeStyles"; "required": false; "isSignal": true; }; "seatStyle": { "alias": "seatStyle"; "required": false; "isSignal": true; }; "seatTemplate": { "alias": "seatTemplate"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "seatActivate": "seatActivate"; "seatFocused": "seatFocused"; "seatKeydown": "seatKeydown"; }, never, never, true, never>;
 }
 
 /** Which marks, beyond the body fill, a status swatch draws. */
@@ -398,6 +432,8 @@ declare class KerusiLegendComponent {
     readonly colors: _angular_core.InputSignal<Required<KerusiSeatmapColors>>;
     /** Whether an available seat takes its type color — mirrors the seatmap input. */
     readonly typeColors: _angular_core.InputSignal<boolean>;
+    /** Mirrors the seatmap input: a type's style is what its swatch shows. */
+    readonly seatTypeStyles: _angular_core.InputSignal<Readonly<Record<string, _kerusiweb_core.KerusiSeatStyle>> | undefined>;
     readonly showPrices: _angular_core.InputSignal<boolean>;
     /** Hide types no seat in the rendered map actually uses. */
     readonly hideUnusedTypes: _angular_core.InputSignal<boolean>;
@@ -406,6 +442,8 @@ declare class KerusiLegendComponent {
     protected readonly types: _angular_core.Signal<RenderLegendEntry[]>;
     protected readonly statuses: _angular_core.Signal<StatusEntry[]>;
     protected swatch(entry: RenderLegendEntry): string;
+    /** The swatch outline for a type styled with its own shape; `undefined` keeps the square. */
+    protected typeShape(entry: RenderLegendEntry): string | undefined;
     protected swatchText(entry: RenderLegendEntry): string;
     /** The swatch's viewBox edge; the seat glyph is drawn to fill it. */
     protected readonly glyphSize = 16;
@@ -429,7 +467,7 @@ declare class KerusiLegendComponent {
     protected coreFill(): string;
     protected price(entry: RenderLegendEntry): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KerusiLegendComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiLegendComponent, "kerusi-legend", never, { "legend": { "alias": "legend"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "showPrices": { "alias": "showPrices"; "required": false; "isSignal": true; }; "hideUnusedTypes": { "alias": "hideUnusedTypes"; "required": false; "isSignal": true; }; "headingSeatTypes": { "alias": "headingSeatTypes"; "required": false; "isSignal": true; }; "headingAvailability": { "alias": "headingAvailability"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KerusiLegendComponent, "kerusi-legend", never, { "legend": { "alias": "legend"; "required": true; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "typeColors": { "alias": "typeColors"; "required": false; "isSignal": true; }; "seatTypeStyles": { "alias": "seatTypeStyles"; "required": false; "isSignal": true; }; "showPrices": { "alias": "showPrices"; "required": false; "isSignal": true; }; "hideUnusedTypes": { "alias": "hideUnusedTypes"; "required": false; "isSignal": true; }; "headingSeatTypes": { "alias": "headingSeatTypes"; "required": false; "isSignal": true; }; "headingAvailability": { "alias": "headingAvailability"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -478,5 +516,5 @@ declare class KerusiStateStore {
     startExpiryTicker(intervalMs?: number): () => void;
 }
 
-export { KerusiLegendComponent, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
-export type { SeatDisallowed, SeatInteraction, SectionRenderOptions, ValidationMode };
+export { KerusiLegendComponent, KerusiSeatTemplateDirective, KerusiSeatmapComponent, KerusiSectionComponent, KerusiStateStore };
+export type { SeatDisallowed, SeatInteraction, SeatTemplateContext, SeatTemplateOutletContext, SectionRenderOptions, ValidationMode };