lintje 0.1.1 → 0.2.0

package/dist-elements/types/components/map/{map-tile/map-tile.d.ts → map/map.d.ts}

@@ -1,24 +1,28 @@
 /**
- * `<lintje-map-tile>` — a map in its tile. The map shows a new layer at once and expects the host
+ * `<lintje-map>` — a map in its tile. The map shows a new layer at once and expects the host
  * to confirm it in the next `data`. `tile.expandable` shows the same map again in the modal; the
  * modal's own events stop here.
  *
  * Events: `lintje-mark-select` `{id, label, href?}` (`href` is the one the server minted on that
  * mark) and `lintje-layer-change` (the chosen layer's `value`). Undoing a selection is
  * `lintje-mark-select` with `id: null` and `data.clearHref`, so a page that keeps the selection
- * in the URL can drop it.
+ * in the URL can drop it. With `data.controls.lasso`, `.circle` or `.rect` a drawn area chooses
+ * every mark in it — two or more tools share one button that opens their menu:
+ * `lintje-area-select` `{area, ids}`, and `{area: null, ids: []}` when it is undone; the host
+ * keeps the area in its URL and sends it back as `selectedArea`.
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
 import { LintjeContentTileElement } from '../../shared/content-tile.js';
 import '../../feedback/announcement/announcement.js';
 import '../../../primitives/tile/tile.js';
-import type { MapTileViewData } from '../../../types.js';
-export declare class LintjeMapTile extends LintjeContentTileElement {
+import '../../../primitives/tooltip/tooltip.js';
+import type { MapData } from '../../../types.js';
+export declare class LintjeMap extends LintjeContentTileElement {
     #private;
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
-    data?: MapTileViewData | null;
+    data?: MapData | null;
     /** The chosen layer, shown before the host confirms it. */
     layer?: string;
     protected get dataSettings(): FrameSettings | undefined;
@@ -36,6 +40,6 @@ export declare class LintjeMapTile extends LintjeContentTileElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'lintje-map-tile': LintjeMapTile;
+        'lintje-map': LintjeMap;
     }
 }

package/dist-elements/types/components/shared/charts/histogram-chart/histogram-chart.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A histogram: counts in classes that touch, on an x-axis that runs on, so the labels stand on
+ * the class bounds. A median is a solid emphasis line, a threshold a dashed one.
+ */
+import { type TemplateResult } from 'lit';
+import { type PlotArea } from '../shared/scale.js';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type HistogramSpec = Extract<ChartSpec, {
+    kind: 'histogram';
+}>;
+/** A class as the tooltip and the table name it: "8 tot 10 dagen", "30 dagen of meer". */
+export declare function binLabel(bin: {
+    from: number;
+    to: number | null;
+}, unit?: string): string;
+export interface LineLabel {
+    x: number;
+    text: string;
+    /** Bold, as the median's label is, and measured so. */
+    bold?: boolean;
+}
+/**
+ * Where the labels of the median and the threshold stand: right of their line, or left of it
+ * where they would leave the drawing, and the right one a line lower when the two would touch.
+ */
+export declare function placeLineLabels(labels: LineLabel[], area: PlotArea, fontFamily?: string): {
+    x: number;
+    y: number;
+    anchor: 'start' | 'end';
+}[];
+export declare function renderHistogramChart(spec: HistogramSpec, options: ChartOptions): TemplateResult;
+export {};

package/dist-elements/types/components/shared/charts/index.d.ts

@@ -11,8 +11,10 @@ export { renderGroupedBarChart } from './grouped-bar-chart/grouped-bar-chart.js'
 export { renderStackedBarChart } from './stacked-bar-chart/stacked-bar-chart.js';
 export { renderPieChart } from './pie-chart/pie-chart.js';
 export { renderDualAxisChart } from './dual-axis-chart/dual-axis-chart.js';
+export { renderScatterChart } from './scatter-chart/scatter-chart.js';
 export { renderHeatmap, heatmapBounds, heatmapClasses } from './heatmap-chart/heatmap-chart.js';
 export type { HeatmapClass } from './heatmap-chart/heatmap-chart.js';
+export { renderHistogramChart } from './histogram-chart/histogram-chart.js';
 export { renderMap } from './map-chart/map-chart.js';
 export type { MapOptions } from './map-chart/map-chart.js';
 export { renderChartFrame, renderLegend, renderAsOfMarker } from './shared/axes.js';
@@ -34,4 +36,4 @@ export { staggerStyle, gridStaggerStyle } from './shared/stagger.js';
 export type { StyleInfo } from './shared/stagger.js';
 export { chartStyles, chartFrameStyles, pieChartStyles, heatmapStyles } from './shared/chart-styles.js';
 export { mapStyles, mapChartStyles } from './map-chart/map-styles.js';
-export type { ChartSpec, ChartKind, ChartColor, ChartLink, LineSeriesData, BarSeriesData, MapTileData, MapValue, MapVariant, MapPlotData, MapPlotVariant, } from './shared/types.js';
+export type { ChartSpec, ChartKind, ChartColor, ChartLink, LineSeriesData, BarSeriesData, ScatterPoint, ScatterSeriesData, MapSpec, MapValue, MapVariant, MapPlotData, MapPlotVariant, } from './shared/types.js';

package/dist-elements/types/components/shared/charts/map-chart/area.d.ts

@@ -0,0 +1,16 @@
+import type { MapDrawing } from './drawings.js';
+import type { MapArea } from '../shared/types.js';
+/** The great-circle distance in km. */
+export declare function distanceKm([lon1, lat1]: [number, number], [lon2, lat2]: [number, number]): number;
+/**
+ * A rectangle between two corners, as a lasso of four: in Mercator a line of one longitude or
+ * latitude is straight, so the box on the screen is the box in degrees.
+ */
+export declare function rectRing([lon1, lat1]: [number, number], [lon2, lat2]: [number, number]): [number, number][];
+/** A ring of four corners that is a rectangle: what `rectRing` draws, for the panel's words. */
+export declare function isRect(ring: [number, number][]): boolean;
+/** A ring without any area: every corner on one line of longitude or of latitude. */
+export declare const flatRing: (ring: [number, number][]) => boolean;
+export declare function inArea(area: MapArea, point: [number, number]): boolean;
+/** The ids of the marks of every drawing that lie wholly in the area, in drawing order. */
+export declare function idsInArea(area: MapArea, drawings: MapDrawing[], geo?: string): string[];

package/dist-elements/types/components/shared/charts/map-chart/drawings.d.ts

@@ -3,16 +3,20 @@
  * svg map, the basemap and the tile's CSV read the same list, so a figure always speaks the unit
  * and the series names of its own layer.
  */
-import type { MapSeriesKey, MapTileData, MapValue, MapVariant } from '../shared/types.js';
+import type { MapSeriesKey, MapSpec, MapValue, MapVariant } from '../shared/types.js';
 export type DrawingVariant = Exclude<MapVariant, 'plots'>;
 export interface MapDrawing {
     variant: DrawingVariant;
     values: MapValue[];
+    /** The layer's place in the stack, from the bottom; what keys a series switched off. */
+    index: number;
     /** The layer's name in the legend and the CSV: its `label`, or the word for its variant. */
     name: string;
     unit: string;
     /** The largest figure, at least 1: what the classes, widths and sizes scale to. */
     max: number;
+    /** The smallest figure a mark carries, for the legend's range; `max` without any. */
+    min: number;
     destination?: {
         lon: number;
         lat: number;
@@ -21,6 +25,6 @@ export interface MapDrawing {
     seriesLabels?: Partial<Record<MapSeriesKey, string>>;
 }
 /** The drawings in the order they draw, bottom first; `unit` is the map's own. */
-export declare function mapDrawings(data: MapTileData, unit: string): MapDrawing[];
+export declare function mapDrawings(data: MapSpec, unit: string): MapDrawing[];
 /** A figure and its unit, without a dangling space when the unit is empty. */
 export declare function withUnit(figure: string, unit: string): string;

package/dist-elements/types/components/shared/charts/map-chart/geo.d.ts

@@ -0,0 +1,6 @@
+export type FeatureCollection = GeoJSON.FeatureCollection<GeoJSON.MultiPolygon, {
+    id: string;
+    name: string;
+}>;
+export declare const GEOS: Record<string, FeatureCollection>;
+export declare function geoOf(name: string | undefined): FeatureCollection;

package/dist-elements/types/components/shared/charts/map-chart/leaflet.d.ts

@@ -1,8 +1,33 @@
+/**
+ * The map's surface: Leaflet carries the map — the projection, the panes, dragging, zooming and
+ * the tiles of a basemap — and the design system draws the data itself, into Leaflet's svg
+ * renderer (`marks.ts`). One instance hangs on the `ChartController`; `sync()` runs on every
+ * render. Geometry is unprojected (`*.lonlat.json`) and projected here once, at the zoom the
+ * map opens on; a pan or a zoom moves the drawing's group, not its paths.
+ */
+import * as L from 'leaflet';
 import type { ChartController } from '../shared/controller.js';
-import type { MapTileData, MapValue } from '../shared/types.js';
+import type { MapArea, MapSpec, MapTool, MapValue } from '../shared/types.js';
 export interface LeafletSyncOptions {
     unit: string;
     active: string | null;
+    /** The series the legend switched off, as `seriesKey()` names them. */
+    hidden: string[];
+    /** The layers of a stack switched off, by their place in it. */
+    hiddenLayers: number[];
+    /** The area that chose marks, and the marks it chose. */
+    area: MapArea | null;
+    chosen: string[];
+    /** The drawing tool that is on, and what a finished area goes to. */
+    tool: MapTool | null;
+    drawn: (area: MapArea) => void;
+    /** Escape with no area being drawn: the tool goes off. */
+    stopTool: () => void;
+    /** Panning with the mouse, and zooming by double click and pinch; the host may switch them off. */
+    drag: boolean;
+    zoom: boolean;
+    /** The scale bar shows: a move redraws the map so it follows. */
+    scale: boolean;
     select: (value: MapValue) => void;
     clear: () => void;
     /** Below 768 px, where a one-finger drag belongs to the page (rule 9). */
@@ -11,6 +36,8 @@ export interface LeafletSyncOptions {
 export declare class LeafletSurface {
     #private;
     constructor(controller: ChartController);
+    /** The Leaflet map, once the container has a size; a test looks at it. */
+    get map(): L.Map | null;
     /**
      * `ref` callback for the container. The map is built by the `ResizeObserver`, not here: Lit
      * commits a `ref` while the node is in its template fragment (0 × 0), and Leaflet would write
@@ -18,9 +45,20 @@ export declare class LeafletSurface {
      */
     readonly attach: (element: Element | undefined) => void;
     /** Applying synchronously is deliberate: a selection must land in the frame of its panel. */
-    sync(data: MapTileData, options: LeafletSyncOptions): void;
+    sync(data: MapSpec, options: LeafletSyncOptions): void;
     zoomIn(): void;
     zoomOut(): void;
+    /** A wheel with its key: so many doublings around the pointer, fractional. */
+    zoomBy(event: MouseEvent, doublings: number): void;
+    /**
+     * The scale bar: a round distance in metres (1, 2 or 5 times a power of ten), at most `room`
+     * px wide, measured across the middle of the view, where Mercator's scale holds for what the
+     * reader looks at.
+     */
+    scaleBar(room?: number): {
+        width: number;
+        metres: number;
+    } | null;
     home(): void;
     destroy(): void;
 }

package/dist-elements/types/components/shared/charts/map-chart/map-chart.d.ts

@@ -1,7 +1,19 @@
-/** The map: draws the pre-projected geometry from `assets/geo/`. */
+/**
+ * The map: its chrome — the legend above it, the layer switcher, the zoom buttons, the select
+ * button with its menu of tools, the scale and the selection panel — around the surface that
+ * draws it (`leaflet.ts`).
+ */
 import { type TemplateResult } from 'lit';
 import type { ChartOptions } from '../shared/controller.js';
-import type { MapTileData, MapValue } from '../shared/types.js';
+import type { MapArea, MapSpec, MapValue } from '../shared/types.js';
+import '../../../../primitives/popover/popover.js';
+/** The map's own height in a tile: on a phone taller, so all its buttons fit on the touch size. */
+export declare const MAP_HEIGHT: {
+    readonly desktop: 400;
+    readonly mobile: 280;
+};
+/** The distance of the scale, in m or km: the figure beside the bracket. */
+export declare function scaleLabel(metres: number): string;
 /**
  * What the map sends back. `description` and `selectedId` come from the map's own data, so
  * the chart options of those names are omitted.
@@ -13,5 +25,7 @@ export interface MapOptions extends Omit<ChartOptions, 'description' | 'onSelect
     /** The selection was undone (chosen mark again, empty map, Escape, close); travels the id. */
     onClear?: (previousId: string) => void;
     onLayerChange?: (value: string) => void;
+    /** An area was drawn, or undone (`null`); travels the ids of every mark in it. */
+    onArea?: (area: MapArea | null, ids: string[]) => void;
 }
-export declare function renderMap(data: MapTileData, options: MapOptions): TemplateResult;
+export declare function renderMap(data: MapSpec, options: MapOptions): TemplateResult;

package/dist-elements/types/components/shared/charts/map-chart/map-legend.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The legend above the map: a line per layer — its name, which switches the layer; its key,
+ * what its figures mean; its series, each a switch; and the hatch where it has gaps. The key is
+ * the same drawing as the map's: the classes, the sizes or the widths of its marks.
+ */
+import { type TemplateResult } from 'lit';
+import { type MapDrawing } from './drawings.js';
+/** The lines a tile shows before the rest folds under "Nog n lagen". */
+export declare const LEGEND_ROWS = 3;
+export interface MapLegendOptions {
+    drawings: MapDrawing[];
+    /** The layers switched off, by their place in the stack. */
+    hiddenLayers: number[];
+    /** The series switched off, as `seriesKey()` names them. */
+    hiddenSeries: string[];
+    /** The modal: every layer, the classes with their bounds, the sizes nested at true size. */
+    expanded: boolean;
+    /** Below 768 px: one column, the series of a layer on their own line. */
+    mobile: boolean;
+    /** A tile's legend of more than `LEGEND_ROWS` layers is unfolded. */
+    open: boolean;
+    onLayer: (index: number) => void;
+    onSeries: (key: string) => void;
+    onOpen: (open: boolean) => void;
+}
+export declare function renderMapLegend(options: MapLegendOptions): TemplateResult;

package/dist-elements/types/components/shared/charts/map-chart/marks.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The data on the map, drawn by the design system itself into Leaflet's svg: the land, then every
+ * drawing in the host's order, the first at the bottom. Geometry is projected once, at the zoom
+ * the surface took as its reference; a pan or a zoom moves the group that holds it, so a mark
+ * with a pixel size (a point, the destination of the flows) is a `__symbol` the surface places
+ * and scales back by itself. Every event a mark answers stops at the mark: the map's own click
+ * clears the selection, and its double click zooms.
+ */
+import { nothing, type SVGTemplateResult } from 'lit';
+import type { ChartController } from '../shared/controller.js';
+import { type MapDrawing } from './drawings.js';
+import type { MapArea, MapSeriesKey, MapValue } from '../shared/types.js';
+/** Longitude and latitude to the surface's reference pixels. */
+export type Project = (lon: number, lat: number) => [number, number];
+/** A shape of the map's own geometry, as a path in reference pixels. */
+export interface LandShape {
+    id: string;
+    name: string;
+    d: string;
+}
+export declare const CLASSES: string[];
+export declare function classFor(value: number, max: number): number;
+/** What every mark draws with. */
+export interface MarksContext {
+    /** The controller's id, which names the hatch pattern. */
+    id: string;
+    active: string | null;
+    /** The marks a drawn area chose: outlined as a chosen mark is, the flows beside them muted. */
+    chosen: Set<string>;
+    controller: ChartController;
+    select: (value: MapValue) => void;
+    project: Project;
+    /** On a basemap the tiles are the land: only the areas with a row are drawn. */
+    tiled: boolean;
+    /** The series the legend switched off, as `seriesKey(drawing, series)`: not drawn. */
+    hidden: Set<string>;
+    /** The layers the legend switched off, by their place in the stack: drawn `is-off`, so they can go with a motion. */
+    hiddenLayers: Set<number>;
+}
+/** The radius of a point with a figure: between 3 and 18 px, by the square root of its share. */
+export declare function pointRadius(value: number, max: number): number;
+/** A series of one layer, as the legend switches it: a colour may serve several layers. */
+export declare const seriesKey: (drawing: MapDrawing, series: MapSeriesKey) => string;
+/** A drawn area, in the reference pixels; a circle with its middle. `draft` is the area while it is drawn. */
+export declare function renderRegion(area: MapArea | null, project: Project, draft?: boolean): SVGTemplateResult | typeof nothing;
+/** The whole drawing: the hatch, the land, then the drawings in order, each as one of three kinds. */
+export declare function renderData(land: LandShape[], drawings: MapDrawing[], context: MarksContext, area?: MapArea | null): SVGTemplateResult;

package/dist-elements/types/components/shared/charts/map-chart/reveal.d.ts

@@ -11,7 +11,7 @@ export interface Box {
 /** How far a revealed mark stands off the overlay or edge it passed, in px. */
 export declare const REVEAL_MARGIN = 8;
 /** What stands over the drawing: the tile's own overlays and Leaflet's credit. */
-export declare const OVERLAYS = ".lintje-map-chart__layers, .lintje-map-chart__zoom, .lintje-map-chart__legend, .lintje-map-chart__selection, .leaflet-control";
+export declare const OVERLAYS = ".lintje-map-chart__layers, .lintje-map-chart__zoom, .lintje-map-chart__selection, .lintje-map-chart__scale-bar, .leaflet-control";
 /** The overlays in `area`, as boxes in client pixels; one that is not drawn has no size. */
 export declare function overlayBoxes(area: Element): Box[];
 /**

package/dist-elements/types/components/shared/charts/scatter-chart/scatter-chart.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Scatter plot: two value axes, a point per record. A series is a colour and the shape that
+ * colour has on a map (rule 13); a point without both values is not drawn (rule 15).
+ */
+import { type TemplateResult } from 'lit';
+import { type PlotArea } from '../shared/scale.js';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type ScatterSpec = Extract<ChartSpec, {
+    kind: 'scatter';
+}>;
+interface DataLabel {
+    label: string;
+    x: number;
+    y: number;
+    anchor: 'start' | 'end';
+}
+/**
+ * The named points' labels, above-left of their point or above-right where the left has no
+ * room. A label must stay in the drawing, clear of the other labels and of every other point;
+ * when one cannot, none shows (all or nothing).
+ */
+export declare function placeDataLabels(points: {
+    label: string;
+    x: number;
+    y: number;
+}[], names: string[], area: PlotArea, fontFamily: string): DataLabel[];
+export declare function renderScatterChart(spec: ScatterSpec, options: ChartOptions): TemplateResult;
+export {};

package/dist-elements/types/components/shared/charts/shared/axes.d.ts

@@ -8,26 +8,41 @@ export type SvgSlot = SVGTemplateResult | typeof nothing | false | null | undefi
 export interface LegendItem {
     label: string;
     color?: string;
-    shape?: 'square' | 'line' | 'dashed';
+    /** `point`: the series' symbol alone, as a scatter plot or a map draws it; `hatch` is "no data". */
+    shape?: 'square' | 'line' | 'dashed' | 'point' | 'hatch';
     /** The shape the line carries at its end, drawn on its line marker (rule 13). */
     symbol?: SeriesKey;
     hidden?: boolean;
+    /** Not a series but a reference, such as a norm: never a toggle. */
+    fixed?: boolean;
+    /** What `onToggle` receives; without it the label. */
+    key?: string;
 }
+/**
+ * A series' symbol as a scatter plot draws it, for a marker: its shape in `currentColor`, and a
+ * dark-yellow one with the edge of its text colour (`lineCasing`).
+ */
+export declare function renderSymbol(symbol: SeriesKey, color: string | undefined, centre: number): SVGTemplateResult;
 export declare function renderLegend({ items, onToggle, position, }: {
     items: LegendItem[];
     onToggle?: (label: string) => void;
     position?: 'top' | 'bottom' | 'right';
 }): TemplateResult;
+type XAnchor = 'start' | 'middle' | 'end';
 export interface ChartFrameOptions {
     area?: PlotArea;
     ticks: number[];
     max: number;
     /** Unit above the axis, e.g. "Afgehandelde aanvragen". */
     axisTitle?: string;
+    /** `anchor` defaults to the middle; the last label of a value axis ends at the plot's edge. */
     xLabels?: {
         label: string;
         x: number;
+        anchor?: XAnchor;
     }[];
+    /** The title of a value axis along the bottom, under its labels at the right. */
+    xTitle?: string;
     /** Description for screen readers; replaces the chart in the accessibility tree. */
     description: string;
     height?: number;
@@ -57,14 +72,15 @@ export declare function renderFocusRing(id: string): SVGTemplateResult;
 export declare function focusRingStyle(id: string): Record<string, string>;
 /**
  * The x labels that fit: every one while no two neighbours touch, otherwise every second,
- * third, … from the first on. Neighbours are measured pair by pair, so one long name beside
- * a short one can fit where equal day labels do not.
+ * third, … from the first on. Neighbours are measured pair by pair, each where its anchor puts
+ * it, so one long name beside a short one can fit where equal day labels do not.
  */
 export declare function thinLabels<T extends {
     label: string;
     x: number;
+    anchor?: XAnchor;
 }>(labels: T[], fontFamily?: string): T[];
-export declare function renderChartFrame({ area, ticks, max, axisTitle, xLabels, description, defs, zeroLine, formatTick, id, height, fontFamily, interactive, keys, }: ChartFrameOptions, children: SvgSlot): TemplateResult;
+export declare function renderChartFrame({ area, ticks, max, axisTitle, xLabels, xTitle, description, defs, zeroLine, formatTick, id, height, fontFamily, interactive, keys, }: ChartFrameOptions, children: SvgSlot): TemplateResult;
 /**
  * The as-of marker. Up to 6 pending hours (tail) it draws nothing and the missing hours are
  * hatched; beyond that (early) the series is cut off, with a line, a label and a note.
@@ -77,3 +93,4 @@ export declare function renderAsOfMarker({ area, index, count, label, lastValue,
     lastValue?: string;
     pendingHours: number;
 }): SvgSlot;
+export {};

package/dist-elements/types/components/shared/charts/shared/chart-icons.d.ts

@@ -5,7 +5,7 @@
  */
 import { type TemplateResult } from 'lit';
 /** One icon, or the text that stands in for it while no file has that name. */
-export declare function chartIcon(name: string, text: string, size?: number): TemplateResult | string;
+export declare function chartIcon(name: string, text: string, size?: number, flip?: 'horizontal' | 'vertical'): TemplateResult | string;
 /** The map's zoom controls, in the order the map and its skeleton draw them. */
 export declare const ZOOM_CONTROLS: readonly [{
     readonly action: 'in';
@@ -19,7 +19,8 @@ export declare const ZOOM_CONTROLS: readonly [{
     readonly label: 'Uitzoomen';
 }, {
     readonly action: 'home';
-    readonly name: 'functioneel-home';
+    readonly name: 'functioneel-refresh';
+    readonly flip: 'horizontal';
     readonly text: 'Terug';
-    readonly label: 'Terug naar het hele gebied';
+    readonly label: 'Kaart terugzetten';
 }];

package/dist-elements/types/components/shared/charts/shared/controller.d.ts

@@ -1,6 +1,8 @@
 import { type PlotArea } from './scale.js';
 import type { LeafletSurface } from '../map-chart/leaflet.js';
 import type { ChartSelection } from './mark-select.js';
+import type { SeriesKey } from './series-shapes.js';
+import type { MapArea, MapTool } from './types.js';
 /** What every `render*` takes besides its data. */
 export interface ChartOptions {
     /** The state this chart keeps between renders. One per chart. */
@@ -27,7 +29,10 @@ export declare function chartArea(options: ChartOptions, margins?: Partial<PlotA
 export interface TooltipRow {
     label: string;
     value: string;
-    color: string;
+    /** The swatch; a row without one is a plain figure. */
+    color?: string;
+    /** The series' shape instead of a square swatch, as its legend draws it. */
+    symbol?: SeriesKey;
 }
 export interface TooltipContent {
     title: string;
@@ -59,27 +64,32 @@ export declare class ChartController {
     /** What the keyboard's tooltip says, for the chart's status region; empty otherwise. */
     status: string;
     hiddenSeries: string[];
+    /** The layers of a stacked map switched off in its legend, by their place in the stack. */
+    hiddenLayers: number[];
     hoverSegment: number | null;
     selectedCell: {
         row: number;
         column: number;
     } | null;
     dimmedClass: number | null;
-    zoom: number;
-    /** The centre of the zoomed svg map, in its own units; `null` is the map's middle. */
-    mapCentre: {
-        x: number;
-        y: number;
-    } | null;
-    /** How far a revealed mark moved the view past the map's edge, in its units; `null` for none. */
-    mapNudge: {
-        x: number;
-        y: number;
-    } | null;
+    /** What a wheel without its modifier shows, until its timer clears it. */
+    mapHint: string | null;
+    mapHintTimer: ReturnType<typeof setTimeout> | null;
     mapSelection: string | null;
+    /** The drawing tool that is on: a pointer on the map then draws instead of panning. */
+    mapTool: MapTool | null;
+    /** The tool the map's one select button shows: the last one used, until a shape is chosen. */
+    mapLastTool: MapTool | null;
+    /** The menu of tools stands open, and which row takes the focus once it has drawn. */
+    mapMenuOpen: boolean;
+    mapMenuFocus: 'first' | 'last' | 'checked' | null;
+    /** A legend of more than three layers is unfolded. */
+    mapLegendOpen: boolean;
+    /** The area that chose marks, and the last one the host sent, compared as JSON. */
+    mapArea: MapArea | null;
+    hostArea: string | undefined;
     hostSelection: string | null | undefined;
-    legendOpen: boolean | null;
-    /** The Leaflet map, created lazily when the data carries a basemap; `detach()` destroys it. */
+    /** The map's surface, created on the first render; `detach()` destroys it. */
     leaflet: LeafletSurface | null;
     /** Centre and zoom of the Leaflet map. `detach()` keeps it so a re-attach does not reset. */
     leafletView: {
@@ -88,7 +98,8 @@ export declare class ChartController {
         zoom: number;
     } | null;
     private readonly notify;
-    private element;
+    /** The chart's box, once attached; the map finds its own buttons in it. */
+    element: HTMLElement | null;
     private measuring;
     private resizeObserver;
     private intersectionObserver;
@@ -128,6 +139,7 @@ export declare class ChartController {
     private watching;
     private watchEscape;
     private unwatchEscape;
+    toggleLayer(index: number): void;
     toggleSeries(label: string): void;
     private read;
     /**