@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

package/data/figure/Figure.js

@@ -0,0 +1,122 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../../foundations/ground';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './figure.module.css';
+/*
+ * Figure (§8.5): `figure` + `figcaption`. The media, then the label
+ * ("Fig. 3"), the caption that says what to notice, and the credit in the
+ * same run. Text never sits on the image [D22].
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: figure.module.css; CVA function `figure`.
+ * - Axes: `kind` → photo | technical | plate (photo: `--ds-radius-8`,
+ *   caption below right-flush; technical: square, caption below
+ *   left-aligned with the label on its own line; plate: a specimen plate,
+ *   a nested `white` face with a `--border-size-1` `--role-edge` frame over
+ *   pattern-dotgrid-fine); `framed` → `framed` (technical figures: the
+ *   `--border-size-1` frame); `sideCaption` → `sideCaption` (the caption
+ *   in the adjacent column from 768 px of the figure); `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind photo, framed false, sideCaption false; color axes none
+ *   [D133].
+ * - Color fallback: inherits the scope; figures have no secondary part.
+ * - States: static.
+ * - Parts: base (`figure`, the container), media (plateMedia on plates),
+ *   caption (`figcaption`), label, text, credit.
+ * - Scope: the plate's media is a nested `kind="face"` Ground, preset
+ *   `white` (§8.5, §8.7) [D178]: a face that follows the page mode on a page
+ *   ground, a light island inside a field or the night band, written by
+ *   Ground from context [D149, D179]. Its frame is the face's --role-edge
+ *   (--primary10 on a page ground, --primary12 as an island), and a chart
+ *   on it keeps two inks. Other kinds name no scope.
+ * - Container: `base` (the `figure`) is an inline-size container: the side
+ *   caption moves beside the media from 768 px of it. Baseline without
+ *   support: caption below.
+ */
+export const figure = cva(styles.base, {
+    variants: {
+        kind: {
+            photo: styles.photo,
+            technical: styles.technical,
+            plate: styles.plate,
+        },
+        framed: {
+            true: styles.framed,
+        },
+        sideCaption: {
+            true: styles.sideCaption,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'photo',
+        framed: false,
+        sideCaption: false,
+    },
+});
+const FigureContext = React.createContext({
+    kind: 'photo',
+    primary: undefined,
+    secondary: undefined,
+});
+FigureContext.displayName = 'FigureContext';
+/**
+ * The figure. Put a `FigureMedia` and a `FigureCaption` inside. Every
+ * figure gets a caption or a credit, for print; figure and caption never
+ * separate across printed pages.
+ */
+export function Figure(props) {
+    const { kind, framed, sideCaption, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const context = React.useMemo(() => ({
+        kind: kind ?? 'photo',
+        primary: (primary ?? undefined),
+        secondary: (secondary ?? undefined),
+    }), [kind, primary, secondary]);
+    return (React.createElement(FigureContext.Provider, { value: context },
+        React.createElement("figure", { ...rest, ...scope, className: figure({ kind, framed, sideCaption, primary, secondary, className }) })));
+}
+/**
+ * The media box: an `img`, `svg` or chart. Photos fill the column;
+ * technical figures keep their native width and never scale up [D78]. A
+ * decorative photo (empty `alt`) is left out of print. On a plate it is the
+ * nested `white` face, which takes the figure's `primary` and `secondary`.
+ */
+export function FigureMedia(props) {
+    const { className, ref, ...rest } = props;
+    const { kind, primary, secondary } = React.useContext(FigureContext);
+    if (kind === 'plate') {
+        return (React.createElement(Ground, { ...rest, ref: ref, kind: "face", preset: "white", primary: primary, secondary: secondary, render: React.createElement("div", null), className: cx(`${styles.media} ${styles.plateMedia}`, className) }));
+    }
+    return React.createElement("div", { ...rest, ref: ref, className: cx(styles.media, className) });
+}
+/**
+ * The caption: the label in `type-data`, the caption text (the children)
+ * in `type-caption` and the credit in `type-small`, all `--role-muted`.
+ * Number figures only where the text refers to them.
+ */
+export function FigureCaption(props) {
+    const { number, numbering = 'short', label, detail, credit, className, children, ...rest } = props;
+    const generated = number == null
+        ? null
+        : numbering === 'catalog'
+            ? `Figure ${String(number).padStart(3, '0')}`
+            : `Fig. ${number}`;
+    const labelText = label ?? generated;
+    return (React.createElement("figcaption", { ...rest, className: cx(styles.caption, className) },
+        labelText == null ? null : (React.createElement("span", { className: styles.label },
+            labelText,
+            detail ? ' (DETAIL)' : null)),
+        labelText != null && children != null ? ' ' : null,
+        children == null ? null : React.createElement("span", { className: styles.text }, children),
+        credit != null && (labelText != null || children != null) ? ' ' : null,
+        credit == null ? null : React.createElement("span", { className: styles.credit }, credit)));
+}
+//# sourceMappingURL=Figure.js.map

package/data/figure/Figure.js.map

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

package/data/figure/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/figure/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/data/figure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/data/figure/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/data/map/Map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Map.d.ts","sourceRoot":"","sources":["../../src/data/map/Map.tsx"],"names":[],"mappings":"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"}

package/data/map/Map.js

@@ -0,0 +1,500 @@
+'use client';
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import { Toolbar } from '@base-ui/react/toolbar';
+import { cva } from 'class-variance-authority';
+import { Accordion, AccordionItem } from '../../disclosure/accordion';
+import { Button } from '../../actions/button';
+import { Figure, FigureCaption, FigureMedia } from '../figure';
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from '../../overlays/tooltip';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { PatternDefs, patternId, safeId, } from '../../utils/seriesPatterns';
+import { useColorScheme } from '../../utils/useColorScheme';
+import { Link } from '../../actions/link';
+import { MapCanvas } from './MapCanvas';
+import styles from './map.module.css';
+/*
+ * Map (§8.10) [D169, D191]: a map figure with an in-flow zoom Toolbar and an
+ * index, as a progressive enhancement over the static map. The base is
+ * either an SVG drawing in role variables (it follows the mode and prints as
+ * black line through the remap) or a vector map: OpenStreetMap data in a
+ * Protomaps PMTiles archive, drawn by MapLibre GL JS (loaded on demand) with
+ * a style built from the role variables at runtime, a non-CSS consumer that
+ * rebuilds on mode and scope changes through useColorScheme [D158]. Only the
+ * canvas is MapLibre's: the view, markers, labels and controls are ours.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: map.module.css; CVA function `map`.
+ * - Axes: `kind` → technical | location (the frame: technical
+ *   --ds-radius-none with a --border-size-1 --role-rule frame; location
+ *   --ds-radius-20 with a --border-size-2 --primary12 frame and a text
+ *   address); `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind technical; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: frame `:focus-visible` → the ring; frame `data-dragging` → the
+ *   grabbing cursor; marker `:hover` → edge up one tier, `aria-pressed`
+ *   (selected, its index entry open) → the inverse pair, `:focus-visible` →
+ *   the ring; zoom Buttons are outline icon-only Buttons with Button's D181
+ *   hover (the --role-soft-hover fill, the glyph at its interactive weight)
+ *   and `data-disabled` at the ends, per §9.2.
+ * - Parts: base, layout, media (the FigureMedia), title, toolbar,
+ *   zoomLevel, frame, canvas (MapLibre's container), snapshot (the print
+ *   image), drawing, drawingContent, overlay, marker (+ markerSquare,
+ *   markerDiamond, markerNumber), label, attribution, address, index,
+ *   indexGroup, indexHead, indexTitle, indexNumber, instructions, fallback,
+ *   printNote, printUrl, printQr; the drawing kit's line classes. The
+ *   caption is the Figure's FigureCaption (§8.5).
+ * - Scope: none. Container: `base`, named `map` (the Figure inside is a
+ *   container too): the map, then the index; side by side 2:1 from 1024 px
+ *   (§5.10.2).
+ *
+ * Zoom steps are discrete and announced; the map pans by drag or the arrow
+ * keys, zooms by the toolbar, + and − or a pinch; the wheel never captures
+ * page scroll and one finger scrolls the page. Markers, labels, strokes and
+ * pattern pitches keep their screen size at every zoom [I7]. Changes are
+ * instant. Print shows the reset extent, the index and the URL; a vector
+ * map prints a snapshot rendered ahead of time in the print palette (or
+ * `printFallback`) and its credit with the copyright URL.
+ */
+export const map = cva(styles.base, {
+    variants: {
+        kind: {
+            technical: styles.technical,
+            location: styles.location,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'technical',
+    },
+});
+const defaultMessages = {
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    reset: 'Reset map view',
+    toolbar: 'Map controls',
+    instructions: 'Drag or use the arrow keys to pan; press plus or minus to zoom. The index lists every place.',
+    zoomStatus: (level, levels) => `Zoom ${level} of ${levels}`,
+    index: 'Index',
+};
+/** Pan step for an arrow key, --size-px-9. */
+const PAN_STEP = 64;
+/** Pointer travel before a press becomes a drag. */
+const DRAG_THRESHOLD = 4;
+/** Pinch ratio that takes one zoom step. */
+const PINCH_STEP = 1.4;
+/** MapLibre's world at zoom 0, px: vector maps position in 512 px tiles. */
+const WORLD_TILE = 512;
+/** Keep a panned-to marker this far inside the frame edge. */
+const MARKER_MARGIN = 32;
+/** The Web Mercator latitude limit. */
+const MAX_LATITUDE = 85.05112878;
+const patternClassNames = {
+    mark: styles.patternMark,
+    dot: styles.patternDot,
+    ground: styles.patternGround,
+};
+const markerShapeClass = {
+    circle: undefined,
+    square: styles.markerSquare,
+    diamond: styles.markerDiamond,
+};
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function lonToU(lon) {
+    return (lon + 180) / 360;
+}
+function latToV(lat) {
+    const phi = (clamp(lat, -MAX_LATITUDE, MAX_LATITUDE) * Math.PI) / 180;
+    return (1 - Math.log(Math.tan(phi) + 1 / Math.cos(phi)) / Math.PI) / 2;
+}
+function uToLon(u) {
+    return u * 360 - 180;
+}
+function vToLat(v) {
+    return (Math.atan(Math.sinh(Math.PI * (1 - 2 * v))) * 180) / Math.PI;
+}
+function pad(value, digits) {
+    return String(value).padStart(digits, '0');
+}
+/** Keeps the view inside the base: a half-window from each edge, or centered when it fits. */
+function clampView(view, mode, size, tileSize) {
+    const scale = 2 ** view.zoom;
+    const world = tileSize * scale;
+    const halfU = mode === 'drawing' ? 0.5 / scale : size.width / 2 / world;
+    const halfV = mode === 'drawing' ? 0.5 / scale : size.height / 2 / world;
+    const fit = (value, half) => half >= 0.5 ? 0.5 : clamp(value, half, 1 - half);
+    return { zoom: view.zoom, u: fit(view.u, halfU), v: fit(view.v, halfV) };
+}
+/** Screen px per normalized unit, across and down. */
+function pixelsPerUnit(mode, zoom, size, tileSize) {
+    const scale = 2 ** zoom;
+    return mode === 'drawing'
+        ? [size.width * scale, size.height * scale]
+        : [tileSize * scale, tileSize * scale];
+}
+/**
+ * The minimal credit the tiles need: "© OpenStreetMap", its name linked to
+ * the copyright page, whose URL Link prints beside it (§7.6.1). Protomaps
+ * asks for no credit, and MapLibre (BSD) needs none on the map.
+ */
+function OsmCredit() {
+    return (React.createElement(React.Fragment, null,
+        '© ',
+        React.createElement(Link, { href: "https://www.openstreetmap.org/copyright", muted: true }, "OpenStreetMap")));
+}
+/** One zoom control: an icon-only Button (tag-tier glyph) in the Toolbar, named, with a Tooltip. */
+function ToolButton({ icon, label, disabled, onClick }) {
+    return (React.createElement(Tooltip, null,
+        React.createElement(TooltipTrigger, { render: React.createElement(Toolbar.Button, { disabled: disabled, onClick: onClick, render: React.createElement(Button, { variant: "outline", iconOnly: true, size: "lg", icon: icon, focusableWhenDisabled: true }, label) }) }),
+        React.createElement(TooltipPopup, { side: "bottom" }, label)));
+}
+/**
+ * A map figure (§8.10) with the pan-and-zoom interactive map of v1 [D169]:
+ * a caps title, an in-flow Toolbar (zoom in, zoom out, reset view), the
+ * framed map with numbered index markers, the caption, and the index, an
+ * Accordion that is the complete non-visual route to every place.
+ * Selecting an index entry pans its marker into view and opens its
+ * details; selecting a marker opens its entry. Print shows the static map
+ * at the reset extent (or `printFallback`), the full index, and the URL
+ * beside its QR code.
+ */
+export function Map(props) {
+    const { kind, title, caption, figureLabel, address, drawing, pmtiles, routes = [], markers = [], labels = [], selected, defaultSelected = null, onSelectedChange, headingLevel = 3, printFallback, url, qr, oneInk = false, primary, secondary, messages, className, style, ...rest } = props;
+    const scope = useScopeAttributes();
+    const id = safeId(React.useId(), 'map');
+    const text = { ...defaultMessages, ...messages };
+    const frameRef = React.useRef(null);
+    const scheme = useColorScheme(frameRef);
+    // The base, reduced to primitives so callbacks stay stable.
+    const mode = pmtiles ? 'pmtiles' : 'drawing';
+    const tileSize = WORLD_TILE;
+    const drawingWidth = drawing?.width ?? 1;
+    const drawingHeight = drawing?.height ?? 1;
+    const minZoom = pmtiles ? (pmtiles.minZoom ?? Math.max(0, pmtiles.zoom - 3)) : 0;
+    const maxZoom = Math.max(minZoom, pmtiles ? (pmtiles.maxZoom ?? Math.min(19, pmtiles.zoom + 4)) : (drawing?.maxZoom ?? 3));
+    const resetZoom = clamp(pmtiles ? pmtiles.zoom : (drawing?.zoom ?? 0), minZoom, maxZoom);
+    const resetU = pmtiles
+        ? lonToU(pmtiles.center[0])
+        : drawing?.center
+            ? drawing.center[0] / drawingWidth
+            : 0.5;
+    const resetV = pmtiles
+        ? latToV(pmtiles.center[1])
+        : drawing?.center
+            ? drawing.center[1] / drawingHeight
+            : 0.5;
+    const ratio = pmtiles ? (pmtiles.ratio ?? 3 / 2) : drawingWidth / drawingHeight;
+    const [view, setView] = React.useState({ u: resetU, v: resetV, zoom: resetZoom });
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const [printing, setPrinting] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
+    const [snapshotReady, setSnapshotReady] = React.useState(false);
+    const [innerSelected, setInnerSelected] = React.useState(defaultSelected);
+    const current = selected !== undefined ? selected : innerSelected;
+    const drag = React.useRef(null);
+    const select = React.useCallback((next) => {
+        if (selected === undefined)
+            setInnerSelected(next);
+        onSelectedChange?.(next);
+    }, [selected, onSelectedChange]);
+    const pointOf = React.useCallback((item) => {
+        if (mode === 'pmtiles') {
+            return item.lon == null || item.lat == null
+                ? null
+                : { u: lonToU(item.lon), v: latToV(item.lat) };
+        }
+        return item.x == null || item.y == null
+            ? null
+            : { u: item.x / drawingWidth, v: item.y / drawingHeight };
+    }, [mode, drawingWidth, drawingHeight]);
+    const panBy = React.useCallback((dx, dy) => {
+        setView((previous) => {
+            const [perU, perV] = pixelsPerUnit(mode, previous.zoom, size, tileSize);
+            if (!perU || !perV)
+                return previous;
+            return clampView({ zoom: previous.zoom, u: previous.u - dx / perU, v: previous.v - dy / perV }, mode, size, tileSize);
+        });
+    }, [mode, size, tileSize]);
+    const zoomBy = React.useCallback((step) => {
+        setView((previous) => {
+            const zoom = clamp(previous.zoom + step, minZoom, maxZoom);
+            return zoom === previous.zoom
+                ? previous
+                : clampView({ ...previous, zoom }, mode, size, tileSize);
+        });
+    }, [minZoom, maxZoom, mode, size, tileSize]);
+    const reset = React.useCallback(() => {
+        setView(clampView({ u: resetU, v: resetV, zoom: resetZoom }, mode, size, tileSize));
+    }, [resetU, resetV, resetZoom, mode, size, tileSize]);
+    /** Pans a marker into view unless it already is, keeping the zoom step. */
+    const panTo = React.useCallback((marker) => {
+        const point = pointOf(marker);
+        if (!point)
+            return;
+        setView((previous) => {
+            const [perU, perV] = pixelsPerUnit(mode, previous.zoom, size, tileSize);
+            const inView = Math.abs((point.u - previous.u) * perU) <= size.width / 2 - MARKER_MARGIN &&
+                Math.abs((point.v - previous.v) * perV) <= size.height / 2 - MARKER_MARGIN;
+            return inView
+                ? previous
+                : clampView({ zoom: previous.zoom, u: point.u, v: point.v }, mode, size, tileSize);
+        });
+    }, [pointOf, mode, size, tileSize]);
+    // The frame's size: snapshot cover, drawing pattern scale, pan conversions.
+    React.useEffect(() => {
+        const node = frameRef.current;
+        if (!node)
+            return undefined;
+        const update = () => setSize({ width: node.clientWidth, height: node.clientHeight });
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    // Print shows the reset extent, never the reader's view.
+    React.useEffect(() => {
+        const before = () => flushSync(() => setPrinting(true));
+        const after = () => setPrinting(false);
+        window.addEventListener('beforeprint', before);
+        window.addEventListener('afterprint', after);
+        return () => {
+            window.removeEventListener('beforeprint', before);
+            window.removeEventListener('afterprint', after);
+        };
+    }, []);
+    // Two fingers pan and pinch in zoom steps; one finger scrolls the page.
+    React.useEffect(() => {
+        const node = frameRef.current;
+        if (!node)
+            return undefined;
+        let last = null;
+        let pinchBase = 0;
+        const read = (event) => {
+            const [a, b] = [event.touches[0], event.touches[1]];
+            return {
+                x: (a.clientX + b.clientX) / 2,
+                y: (a.clientY + b.clientY) / 2,
+                distance: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
+            };
+        };
+        const start = (event) => {
+            if (event.touches.length !== 2)
+                return;
+            const reading = read(event);
+            last = reading;
+            pinchBase = reading.distance;
+        };
+        const move = (event) => {
+            if (event.touches.length !== 2 || !last)
+                return;
+            event.preventDefault();
+            const reading = read(event);
+            panBy(reading.x - last.x, reading.y - last.y);
+            last = reading;
+            if (pinchBase > 0 && reading.distance / pinchBase >= PINCH_STEP) {
+                zoomBy(1);
+                pinchBase = reading.distance;
+            }
+            else if (pinchBase > 0 && pinchBase / reading.distance >= PINCH_STEP) {
+                zoomBy(-1);
+                pinchBase = reading.distance;
+            }
+        };
+        const end = (event) => {
+            if (event.touches.length < 2)
+                last = null;
+        };
+        node.addEventListener('touchstart', start, { passive: true });
+        node.addEventListener('touchmove', move, { passive: false });
+        node.addEventListener('touchend', end);
+        node.addEventListener('touchcancel', end);
+        return () => {
+            node.removeEventListener('touchstart', start);
+            node.removeEventListener('touchmove', move);
+            node.removeEventListener('touchend', end);
+            node.removeEventListener('touchcancel', end);
+        };
+    }, [panBy, zoomBy]);
+    const onKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowLeft':
+                panBy(PAN_STEP, 0);
+                break;
+            case 'ArrowRight':
+                panBy(-PAN_STEP, 0);
+                break;
+            case 'ArrowUp':
+                panBy(0, PAN_STEP);
+                break;
+            case 'ArrowDown':
+                panBy(0, -PAN_STEP);
+                break;
+            case '+':
+            case '=':
+                zoomBy(1);
+                break;
+            case '-':
+            case '_':
+                zoomBy(-1);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    };
+    const onPointerDown = (event) => {
+        if (event.pointerType === 'touch' || event.button !== 0)
+            return;
+        drag.current = { pointer: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
+    };
+    const onPointerMove = (event) => {
+        const state = drag.current;
+        if (!state || state.pointer !== event.pointerId)
+            return;
+        const dx = event.clientX - state.x;
+        const dy = event.clientY - state.y;
+        if (!state.moved) {
+            if (Math.hypot(dx, dy) < DRAG_THRESHOLD)
+                return;
+            state.moved = true;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            setDragging(true);
+        }
+        state.x = event.clientX;
+        state.y = event.clientY;
+        panBy(dx, dy);
+    };
+    const onPointerEnd = (event) => {
+        const state = drag.current;
+        if (!state || state.pointer !== event.pointerId)
+            return;
+        drag.current = null;
+        if (state.moved) {
+            setDragging(false);
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+        }
+    };
+    // What renders: the reset extent while printing, always inside the base.
+    const shown = clampView(printing ? { u: resetU, v: resetV, zoom: resetZoom } : view, mode, size, tileSize);
+    const scale = 2 ** shown.zoom;
+    const position = (u, v) => mode === 'drawing'
+        ? {
+            left: `${((u - shown.u) * scale + 0.5) * 100}%`,
+            top: `${((v - shown.v) * scale + 0.5) * 100}%`,
+        }
+        : {
+            left: `calc(50% + ${(u - shown.u) * tileSize * scale}px)`,
+            top: `calc(50% + ${(v - shown.v) * tileSize * scale}px)`,
+        };
+    const kit = React.useMemo(() => ({
+        fill: {
+            water: `url(#${patternId(id, 'water')})`,
+            green: `url(#${patternId(id, 'green')})`,
+            planned: `url(#${patternId(id, 'planned')})`,
+        },
+        line: {
+            boundary: styles.boundary,
+            subdivision: styles.subdivision,
+            road: styles.road,
+            street: styles.street,
+            path: styles.path,
+            building: styles.building,
+            area: styles.area,
+            route: styles.route,
+            altRoute: styles.altRoute,
+        },
+    }), [id]);
+    const digits = Math.max(2, String(markers.length).length);
+    const numbered = markers.map((marker, index) => ({
+        marker,
+        number: pad(index + 1, digits),
+        entryId: `${id}-entry-${index + 1}`,
+    }));
+    const groups = [];
+    numbered.forEach((entry) => {
+        const found = groups.find((group) => group.name === entry.marker.group);
+        if (found)
+            found.entries.push(entry);
+        else
+            groups.push({ name: entry.marker.group, entries: [entry] });
+    });
+    const selectFromMap = (entry) => {
+        const next = current === entry.marker.id ? null : entry.marker.id;
+        select(next);
+        if (next)
+            document.getElementById(entry.entryId)?.scrollIntoView({ block: 'nearest' });
+    };
+    const selectFromIndex = (values, entries) => {
+        const next = values[values.length - 1];
+        if (next) {
+            select(next);
+            const entry = entries.find((item) => item.marker.id === next);
+            if (entry)
+                panTo(entry.marker);
+        }
+        else if (entries.some((item) => item.marker.id === current)) {
+            select(null);
+        }
+    };
+    const instructionsId = `${id}-instructions`;
+    const levels = maxZoom - minZoom + 1;
+    const frameStyle = { '--map-ratio': ratio };
+    return (React.createElement("div", { ...rest, ...scope, style: style, className: map({
+            kind,
+            primary,
+            secondary,
+            className: cx(printFallback != null && styles.hasFallback, className) || undefined,
+        }) },
+        React.createElement("div", { className: cx(styles.layout, markers.length > 0 && styles.withIndex) },
+            React.createElement(Figure, { kind: "technical" },
+                React.createElement(FigureMedia, { className: styles.media },
+                    React.createElement("p", { className: styles.title }, title),
+                    React.createElement(TooltipProvider, null,
+                        React.createElement(Toolbar.Root, { className: styles.toolbar, "aria-label": text.toolbar },
+                            React.createElement(ToolButton, { icon: "zoom_in", label: text.zoomIn, disabled: view.zoom >= maxZoom, onClick: () => zoomBy(1) }),
+                            React.createElement(ToolButton, { icon: "zoom_out", label: text.zoomOut, disabled: view.zoom <= minZoom, onClick: () => zoomBy(-1) }),
+                            React.createElement(ToolButton, { icon: "recenter", label: text.reset, disabled: false, onClick: reset }),
+                            React.createElement("output", { className: styles.zoomLevel, "aria-live": "polite" }, text.zoomStatus(view.zoom - minZoom + 1, levels)))),
+                    React.createElement("div", { ref: frameRef, className: styles.frame, style: frameStyle, role: "region", "aria-roledescription": "map", "aria-label": title, "aria-describedby": instructionsId, tabIndex: 0, "data-dragging": dragging ? '' : undefined, "data-print-empty": pmtiles && printFallback == null && !snapshotReady ? '' : undefined, onKeyDown: onKeyDown, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd },
+                        pmtiles ? (React.createElement(MapCanvas, { source: pmtiles, center: [uToLon(shown.u), vToLat(shown.v)], zoom: shown.zoom, resetCenter: pmtiles.center, resetZoom: resetZoom, routes: routes, oneInk: oneInk, rootRef: frameRef, themeKey: `${scheme} ${primary ?? ''} ${secondary ?? ''}`, width: size.width, height: size.height, ratio: ratio, snapshot: printFallback == null, onSnapshotChange: setSnapshotReady })) : null,
+                        drawing ? (React.createElement("svg", { className: styles.drawing, viewBox: `${(shown.u - 0.5 / scale) * drawingWidth} ${(shown.v - 0.5 / scale) * drawingHeight} ${drawingWidth / scale} ${drawingHeight / scale}`, preserveAspectRatio: "xMidYMid meet", "aria-hidden": "true", focusable: "false" },
+                            React.createElement(PatternDefs, { prefix: id, oneInk: oneInk, map: true, scale: size.width ? drawingWidth / (size.width * scale) : 1, classNames: patternClassNames }),
+                            React.createElement("g", { className: styles.drawingContent }, drawing.render(kit)))) : null,
+                        React.createElement("div", { className: styles.overlay },
+                            labels.map((label) => {
+                                const point = pointOf(label);
+                                return point ? (React.createElement("span", { key: label.id, className: styles.label, style: position(point.u, point.v), "aria-hidden": "true" }, label.text)) : null;
+                            }),
+                            numbered.map((entry) => {
+                                const point = pointOf(entry.marker);
+                                if (!point)
+                                    return null;
+                                return (React.createElement("button", { key: entry.marker.id, type: "button", tabIndex: -1, className: cx(styles.marker, markerShapeClass[entry.marker.shape ?? 'circle']), style: position(point.u, point.v), "aria-label": `${entry.number} ${entry.marker.name}`, "aria-pressed": current === entry.marker.id, onClick: () => selectFromMap(entry) },
+                                    React.createElement("span", { className: styles.markerNumber, "aria-hidden": "true" }, entry.number)));
+                            }))),
+                    printFallback != null ? React.createElement("div", { className: styles.fallback }, printFallback) : null,
+                    pmtiles ? (React.createElement("p", { className: styles.attribution }, pmtiles.attribution ?? React.createElement(OsmCredit, null))) : null,
+                    address != null ? React.createElement("p", { className: styles.address }, address) : null),
+                caption != null || figureLabel != null ? (React.createElement(FigureCaption, { label: figureLabel }, caption)) : null),
+            markers.length > 0 ? (React.createElement("section", { className: styles.index, "aria-label": text.index }, groups.map((group, groupIndex) => (React.createElement("div", { key: group.name ?? `group-${groupIndex}`, className: styles.indexGroup },
+                group.name ? React.createElement("p", { className: styles.indexHead }, group.name) : null,
+                React.createElement(Accordion, { multiple: false, value: current != null && group.entries.some((entry) => entry.marker.id === current)
+                        ? [current]
+                        : [], onValueChange: (values) => selectFromIndex(values, group.entries) }, group.entries.map((entry) => (React.createElement(AccordionItem, { key: entry.marker.id, id: entry.entryId, value: entry.marker.id, headingLevel: headingLevel, title: React.createElement("span", { className: styles.indexTitle },
+                        React.createElement("span", { className: styles.indexNumber }, `${entry.number} `),
+                        entry.marker.name) }, entry.marker.details))))))))) : null),
+        React.createElement("p", { id: instructionsId, className: styles.instructions }, text.instructions),
+        url ? (React.createElement("p", { className: styles.printNote },
+            React.createElement("span", { className: styles.printUrl }, url),
+            qr != null ? React.createElement("span", { className: styles.printQr }, qr) : null)) : null));
+}
+//# sourceMappingURL=Map.js.map