@inkra/react 0.0.0-stage → 0.2.0

package/dist/internal/useSelectionDrawing.js

@@ -0,0 +1,90 @@
+import { useRef } from 'react';
+import { useBrowserLayoutEffect } from './useBrowserLayoutEffect.js';
+import { PENCIL_SELECTION_WASH } from './surfaceRenderer.js';
+import { readRenderToken } from './renderTokens.js';
+// Reveal the cached pigment in alternating diagonal strokes, without repainting it.
+function drawingFrames(width, height, degrees) {
+    const angle = degrees * Math.PI / 180;
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const u = (Math.abs(cos) * width + Math.abs(sin) * height) / 2 + 2;
+    const v = (Math.abs(sin) * width + Math.abs(cos) * height) / 2 + 2;
+    const point = (x, y) => `${width / 2 + cos * x - sin * y}px ${height / 2 + sin * x + cos * y}px`;
+    const frames = [];
+    const strokes = 8;
+    for (let index = 0; index < strokes; index++) {
+        const top = -v + index * 2 * v / strokes;
+        const bottom = -v + (index + 1) * 2 * v / strokes;
+        // Limit travel to the visible section of this stripe, not its rotated bounds.
+        const middle = (top + bottom) / 2;
+        let left = -u;
+        let right = u;
+        for (const [direction, offset, halfExtent] of [[cos, -sin * middle, width / 2], [sin, cos * middle, height / 2]]) {
+            if (Math.abs(direction) < 1e-8)
+                continue;
+            const a = (-halfExtent - offset) / direction;
+            const b = (halfExtent - offset) / direction;
+            left = Math.max(left, Math.min(a, b));
+            right = Math.min(right, Math.max(a, b));
+        }
+        for (const progress of [0, 0.5, 1]) {
+            const x = progress === 0 ? (index % 2 ? u : -u) : progress === 1 ? (index % 2 ? -u : u) : (left + right) / 2;
+            const outline = index % 2
+                ? [[-u, -v], [u, -v], [u, bottom], [x, bottom], [x, top], [-u, top]]
+                : [[-u, -v], [u, -v], [u, top], [x, top], [x, bottom], [-u, bottom]];
+            frames.push({ clipPath: `polygon(${outline.map(([a, b]) => point(a, b)).join(',')})`, offset: (index + progress * 0.85) / strokes, easing: progress === 1 ? 'steps(1, end)' : 'linear' });
+        }
+    }
+    frames.push({ ...frames[frames.length - 1], offset: 1 });
+    return frames;
+}
+export function useSelectionDrawing(ref, selected, animated = true) {
+    const previous = useRef(selected);
+    const progress = useRef(selected ? 1 : 0);
+    useBrowserLayoutEffect(() => {
+        const changed = selected !== previous.current;
+        previous.current = selected;
+        const node = ref.current;
+        const target = selected ? 1 : 0;
+        if (!animated || !changed || !node || typeof node.animate !== 'function') {
+            progress.current = target;
+            return;
+        }
+        const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+        const forced = matchMedia('(forced-colors: active)');
+        if (reduced.matches || forced.matches || node.clientWidth < 6 || node.clientHeight < 6) {
+            progress.current = target;
+            return;
+        }
+        const duration = selected ? 480 : 320;
+        const angle = readRenderToken(getComputedStyle(node), '--inkra-wash-angle', PENCIL_SELECTION_WASH.angle, -85, 85);
+        const animation = node.animate(drawingFrames(node.clientWidth, node.clientHeight, angle).map(frame => ({ ...frame, opacity: 1 })), { duration, direction: selected ? 'normal' : 'reverse', easing: 'linear' });
+        animation.currentTime = (selected ? progress.current : 1 - progress.current) * duration;
+        let settled = false;
+        const finish = () => {
+            settled = true;
+            progress.current = target;
+            animation.cancel();
+        };
+        animation.onfinish = finish;
+        const width = node.clientWidth;
+        const height = node.clientHeight;
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => {
+            if (node.clientWidth !== width || node.clientHeight !== height)
+                finish();
+        });
+        observer?.observe(node);
+        reduced.addEventListener('change', finish);
+        forced.addEventListener('change', finish);
+        return () => {
+            // Reverse from the visible stroke when users change their mind mid-draw.
+            if (!settled)
+                progress.current = animation.effect?.getComputedTiming().progress ?? target;
+            animation.onfinish = null;
+            animation.cancel();
+            observer?.disconnect();
+            reduced.removeEventListener('change', finish);
+            forced.removeEventListener('change', finish);
+        };
+    }, [ref, selected, animated]);
+}

package/dist/internal/wash.d.ts

@@ -0,0 +1,16 @@
+export interface PencilWashOptions {
+    strength?: number;
+    spacing?: number;
+    roughness?: number;
+    inset?: number;
+    radius?: number;
+    edgeReach?: number;
+    dpr?: number;
+    angle?: number;
+}
+export declare function drawPencilWash(context: CanvasRenderingContext2D, box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, color: string, seed: number, options?: PencilWashOptions): void;

package/dist/internal/wash.js

@@ -0,0 +1,149 @@
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
+import { pencilStroke } from './stroke.js';
+const washCache = new BoundedCache(64, 32 * 1024 * 1024);
+function randomAt(index, seed) {
+    let value = Math.imul(index ^ seed, 0x45d9f3b);
+    value = Math.imul(value ^ (value >>> 16), 0x45d9f3b);
+    return ((value ^ (value >>> 16)) >>> 0) / 4294967296;
+}
+function makeWash(width, height, color, seed, dpr, settings) {
+    const { strength, spacing, roughness, inset, radius, edgeReach, angle } = settings;
+    const bleed = edgeReach ? Math.ceil(edgeReach + 4) : 0;
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.ceil((width + bleed * 2) * dpr);
+    canvas.height = Math.ceil((height + bleed * 2) * dpr);
+    const context = canvas.getContext('2d');
+    if (!context)
+        return canvas;
+    context.scale(dpr, dpr);
+    context.translate(bleed, bleed);
+    const margin = inset + spacing + roughness * 0.4;
+    const radians = angle * Math.PI / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const halfWidth = Math.max(0, width / 2 - inset);
+    const halfHeight = Math.max(0, height / 2 - inset);
+    const projectedHeight = Math.abs(sin) * halfWidth * 2 + Math.abs(cos) * halfHeight * 2;
+    const rows = Math.max(1, Math.floor(((angle ? projectedHeight : height) - margin * 2) / spacing));
+    context.save();
+    if (angle) {
+        context.beginPath();
+        context.roundRect(inset, inset, halfWidth * 2, halfHeight * 2, Math.min(radius, halfWidth, halfHeight));
+        context.clip();
+        context.translate(width / 2, height / 2);
+        context.rotate(radians);
+    }
+    for (let row = 0; row <= rows; row += 1) {
+        const noise = (offset) => randomAt(row, seed + offset);
+        const y = margin + row * spacing - (angle ? projectedHeight / 2 : 0);
+        const edgeDistance = Math.max(0, Math.min(y - inset, height - inset - y));
+        const corner = edgeDistance < radius
+            ? radius - Math.sqrt(radius * radius - (radius - edgeDistance) ** 2) : 0;
+        const leftReach = edgeReach * (0.15 + noise(359) * 0.85);
+        const rightReach = edgeReach * (0.15 + noise(383) * 0.85);
+        let left = inset + corner + noise(31) * roughness * 1.8 - leftReach;
+        let right = width - inset - corner - noise(67) * roughness * 1.8 + rightReach;
+        if (angle) {
+            // Intersect each rotated stroke with the original box, so wide controls
+            // keep short diagonal marks rather than rotating their entire surface.
+            left = -Infinity;
+            right = Infinity;
+            for (const [direction, offset, halfExtent] of [[cos, -sin * y, halfWidth], [sin, cos * y, halfHeight]]) {
+                if (Math.abs(direction) < 1e-8)
+                    continue;
+                const a = (-halfExtent - offset) / direction;
+                const b = (halfExtent - offset) / direction;
+                left = Math.max(left, Math.min(a, b));
+                right = Math.min(right, Math.max(a, b));
+            }
+            left += noise(31) * roughness * 1.8;
+            right -= noise(67) * roughness * 1.8;
+        }
+        if (right <= left)
+            continue;
+        const tilt = Math.min(4, width * 0.02) * (0.35 + noise(101) * 0.65);
+        const wave = Math.sin(row * 0.63 + seed % 19) * roughness * 0.24;
+        const edgeLift = edgeReach
+            ? (margin + edgeReach) * Math.max(0, 1 - edgeDistance / (radius + spacing * 3))
+                * (y < height / 2 ? -1 : 1)
+            : 0;
+        const points = [
+            [left, y + wave + edgeLift * noise(397)],
+            [left + (right - left) * 0.32, y - tilt * 0.3 + noise(149) - 0.5 + edgeLift * noise(401)],
+            [left + (right - left) * 0.7, y - tilt * 0.7 + noise(181) - 0.5 + edgeLift * noise(409)],
+            [right, y - tilt + wave + edgeLift * noise(419)],
+        ];
+        const feather = Math.min(1, (row + 1) / 3, (rows - row + 1) / 3);
+        context.globalAlpha = Math.min(1, strength * feather * (0.48 + noise(211) * 0.35));
+        pencilStroke(context, points, color, spacing * 1.55, seed + row * 337, 0.9, 1, false, {
+            variation: 0.94,
+            breaks: 0.28,
+            grain: 0.76,
+            gain: 2.1,
+            step: 2.2,
+            detail: 'fill',
+            taperLength: 5 + noise(257) * 8,
+        });
+        if (row % 4 === 1) {
+            context.globalAlpha = Math.min(1, strength * 0.28 * feather);
+            pencilStroke(context, points, color, 0.5, seed + row * 613, 0.65, 1, false, {
+                variation: 0.85,
+                breaks: 0.4,
+                grain: 0.8,
+                gain: 1.5,
+                step: 2.4,
+                detail: 'fill',
+                taperLength: 9,
+            });
+        }
+    }
+    context.restore();
+    context.globalCompositeOperation = 'destination-out';
+    const grains = Math.ceil((width + bleed * 2) * (height + bleed * 2) / 12);
+    for (let index = 0; index < grains; index += 1) {
+        const x = randomAt(index, seed + 811) * (width + bleed * 2) - bleed;
+        const y = randomAt(index, seed + 977) * (height + bleed * 2) - bleed;
+        const size = 0.35 + randomAt(index, seed + 1193) * 0.65;
+        context.globalAlpha = 0.2 + randomAt(index, seed + 1301) * 0.5;
+        context.fillRect(x, y, size, size * 0.6);
+    }
+    return canvas;
+}
+export function drawPencilWash(context, box, color, seed, options = {}) {
+    const width = Math.ceil(box.width);
+    const height = Math.ceil(box.height);
+    if (width < 1 || height < 1)
+        return;
+    const dpr = Math.max(1, Math.min(options.dpr ?? 1, 2));
+    const settings = {
+        strength: Math.max(0, options.strength ?? 1),
+        spacing: Math.max(1, options.spacing ?? 2),
+        roughness: Math.max(0, options.roughness ?? 3),
+        inset: Math.max(2, options.inset ?? 3),
+        radius: Math.max(0, Math.min(options.radius ?? 0, width / 2, height / 2)),
+        edgeReach: Math.max(0, Math.min(options.edgeReach ?? 0, width / 4, height / 4)),
+        angle: Number.isFinite(options.angle) ? Math.max(-85, Math.min(85, options.angle)) : 0,
+    };
+    const key = JSON.stringify([
+        PENCIL_RENDERER_VERSION,
+        width,
+        height,
+        color,
+        seed,
+        dpr,
+        settings,
+    ]);
+    let texture = washCache.get(key);
+    if (texture && !canvasIsUsable(texture)) {
+        washCache.delete(key);
+        texture = undefined;
+    }
+    if (!texture) {
+        texture = makeWash(width, height, color, seed, dpr, settings);
+        washCache.set(key, texture, canvasByteCost(texture));
+    }
+    const bleed = settings.edgeReach ? Math.ceil(settings.edgeReach + 4) : 0;
+    const scaleX = box.width / width;
+    const scaleY = box.height / height;
+    context.drawImage(texture, box.x - bleed * scaleX, box.y - bleed * scaleY, box.width + bleed * 2 * scaleX, box.height + bleed * 2 * scaleY);
+}

package/dist/journey-map/MapScale.d.ts

@@ -0,0 +1,4 @@
+import type { Map } from 'leaflet';
+export declare function MapScale({ map }: {
+    map: Map | null;
+}): import("react").JSX.Element;

package/dist/journey-map/MapScale.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { PencilText } from '../PencilText.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { pencilStroke } from '../internal/stroke.js';
+// AdventureMapScale's pencil bar and north marker, with Leaflet distance projection.
+export function MapScale({ map }) {
+    const bar = useRef(null);
+    const [label, setLabel] = useState('');
+    useEffect(() => {
+        if (!map || !bar.current)
+            return;
+        const draw = () => {
+            const canvas = bar.current;
+            if (!canvas)
+                return;
+            const size = map.getSize();
+            if (!size.x || !size.y)
+                return;
+            const maxWidth = Math.min(112, Math.max(58, size.x * .22));
+            const y = size.y - 24, x = size.x - 64 - maxWidth;
+            const meters = map.distance(map.containerPointToLatLng([x, y]), map.containerPointToLatLng([x + maxWidth, y]));
+            if (!Number.isFinite(meters) || meters <= 0)
+                return;
+            const magnitude = 10 ** Math.floor(Math.log10(meters));
+            const distance = [5, 2, 1].map(value => value * magnitude).find(value => value <= meters) ?? magnitude;
+            const width = maxWidth * distance / meters;
+            setLabel(distance >= 1000 ? `${distance / 1000} km` : `${Number(distance.toPrecision(3))} m`);
+            const dpr = Math.min(devicePixelRatio || 1, 2);
+            canvas.width = Math.ceil((width + 4) * dpr);
+            canvas.height = 12 * dpr;
+            canvas.style.width = `${width + 4}px`;
+            const context = canvas.getContext('2d');
+            if (!context)
+                return;
+            context.scale(dpr, dpr);
+            const ink = getComputedStyle(canvas).color;
+            const options = { variation: .52, breaks: .18, grain: .45, gain: 2.2, step: .4, taperLength: .5 };
+            pencilStroke(context, [[2, 8], [width + 2, 8]], ink, 1.15, 4411, .16, 3, false, options);
+            pencilStroke(context, [[2, 3], [2, 10]], ink, 1.05, 4423, .14, 2, false, options);
+            pencilStroke(context, [[width + 2, 3], [width + 2, 10]], ink, 1.05, 4439, .14, 2, false, options);
+        };
+        draw();
+        map.on('moveend zoomend resize', draw);
+        const observer = new MutationObserver(draw);
+        for (let element = bar.current; element; element = element.parentElement) {
+            observer.observe(element, { attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+        }
+        const scheme = matchMedia('(prefers-color-scheme: dark)');
+        scheme.addEventListener('change', draw);
+        return () => { map.off('moveend zoomend resize', draw); observer.disconnect(); scheme.removeEventListener('change', draw); };
+    }, [map]);
+    return _jsxs("div", { className: "inkra-journey-map__orientation", "aria-hidden": "true", children: [_jsxs("div", { className: "inkra-journey-map__scale", children: [_jsx(PencilText, { children: label }), _jsx("canvas", { ref: bar })] }), _jsxs("div", { className: "inkra-journey-map__compass", children: [_jsx(PencilText, { children: "N" }), _jsx(PencilIcon, { sourceSize: 32, size: 30, paths: [{ d: 'M16 4 9.5 24 16 20.5 22.5 24 16 4Z' }, { d: 'M16 7v13.5' }] })] })] });
+}

package/dist/journey-map/index.d.ts

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from 'react';
+import type { GeoJsonObject } from 'geojson';
+export interface JourneyPlace {
+    id: string;
+    label: string;
+    latitude: number;
+    longitude: number;
+}
+export interface JourneyRoute {
+    id: string;
+    coordinates: readonly (readonly [number, number])[];
+}
+export interface JourneyMapProps extends HTMLAttributes<HTMLDivElement> {
+    places: readonly JourneyPlace[];
+    /** [latitude, longitude]. Supplied geometry only; no routing or travel-time inference. */
+    routes?: readonly JourneyRoute[];
+    geography?: GeoJsonObject;
+    landCover?: GeoJsonObject;
+    water?: GeoJsonObject;
+    selectedPlace?: string;
+    onPlaceSelect?: (place: JourneyPlace) => void;
+    attribution: string;
+    attributionDisplay?: 'inline' | 'popover';
+    height?: number;
+    /** Controls viewport gestures, not place selection or explicit zoom buttons. */
+    interactive?: boolean;
+    scrollWheelZoom?: boolean;
+    showControls?: boolean;
+    showPlaceList?: boolean;
+    focusSelectedPlace?: boolean;
+    labels?: {
+        zoomIn: string;
+        zoomOut: string;
+        reset: string;
+        unavailable: string;
+        attribution?: string;
+    };
+}
+export declare function JourneyMap({ places, routes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay, height, interactive, scrollWheelZoom, showControls, showPlaceList, focusSelectedPlace, labels, className, ...props }: JourneyMapProps): import("react").JSX.Element;

package/dist/journey-map/index.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../Button.js';
+import { Popover } from '../overlay/index.js';
+import { PencilText } from '../PencilText.js';
+import { pencilStroke } from '../internal/stroke.js';
+import { TravelIcon } from '../internal/travelIcons.js';
+import { paintTerrain, paintStop, paintSea } from './terrain.js';
+import { MapScale } from './MapScale.js';
+import { seedToNumber } from '../internal/random.js';
+const defaults = { zoomIn: 'Zoom in', zoomOut: 'Zoom out', reset: 'Reset view', unavailable: 'Map unavailable. Choose a place below.' };
+const noRoutes = [];
+const valid = (place) => Number.isFinite(place.latitude) && Number.isFinite(place.longitude) && Math.abs(place.latitude) <= 85 && Math.abs(place.longitude) <= 180;
+export function JourneyMap({ places, routes = noRoutes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay = 'inline', height = 480, interactive = true, scrollWheelZoom = false, showControls = true, showPlaceList = false, focusSelectedPlace = false, labels = defaults, className, ...props }) {
+    const root = useRef(null);
+    const host = useRef(null);
+    const mapRef = useRef(null);
+    const fitRef = useRef(() => { });
+    const paintRef = useRef(() => { });
+    const fitZoomRef = useRef(2);
+    const selectionRef = useRef(onPlaceSelect);
+    selectionRef.current = onPlaceSelect;
+    const [ready, setReady] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const [placeLabels, setPlaceLabels] = useState([]);
+    const selectedRef = useRef(selectedPlace);
+    selectedRef.current = selectedPlace;
+    const markersRef = useRef([]);
+    useEffect(() => {
+        let cancelled = false;
+        let cleanup;
+        setReady(false);
+        setFailed(false);
+        setPlaceLabels([]);
+        void import('leaflet').then(L => {
+            if (cancelled || !host.current)
+                return;
+            const map = L.map(host.current, { zoomControl: false, attributionControl: false, scrollWheelZoom: false, zoomSnap: .1, zoomAnimation: false, fadeAnimation: false, markerZoomAnimation: false }).setView([0, 0], 2);
+            mapRef.current = map;
+            cleanup = () => { map.remove(); mapRef.current = null; markersRef.current = []; };
+            const points = places.filter(valid);
+            const boundaries = [];
+            if (geography) {
+                const layer = L.geoJSON(geography);
+                const collect = (item) => {
+                    if (item instanceof L.Polyline) {
+                        const flatten = (values) => {
+                            if (values[0] instanceof L.LatLng) {
+                                const ring = values;
+                                boundaries.push(item instanceof L.Polygon ? [...ring, ring[0]] : ring);
+                            }
+                            else
+                                values.forEach(value => { if (Array.isArray(value))
+                                    flatten(value); });
+                        };
+                        flatten(item.getLatLngs());
+                    }
+                    else if (item instanceof L.LayerGroup)
+                        item.eachLayer(collect);
+                };
+                layer.eachLayer(collect);
+            }
+            const routePoints = routes.map(route => route.coordinates.filter(([lat, lng]) => Number.isFinite(lat) && Number.isFinite(lng) && Math.abs(lat) <= 85 && Math.abs(lng) <= 180).map(([lat, lng]) => L.latLng(lat, lng)));
+            const all = [...points.map(place => L.latLng(place.latitude, place.longitude)), ...boundaries.flat(), ...routePoints.flat()];
+            let fitted = false;
+            const fit = () => {
+                map.invalidateSize();
+                const size = map.getSize();
+                if (size.x <= 0 || size.y <= 0)
+                    return;
+                if (all.length)
+                    map.fitBounds(L.latLngBounds(all), { padding: [44, 44], maxZoom: 12, animate: false });
+                fitZoomRef.current = map.getZoom();
+                fitted = true;
+            };
+            fitRef.current = fit;
+            const canvas = document.createElement('canvas');
+            canvas.className = 'inkra-journey-map__ink';
+            canvas.setAttribute('aria-hidden', 'true');
+            host.current.append(canvas);
+            let frame = 0;
+            let paintOrigin = map.containerPointToLatLng([0, 0]), paintZoom = map.getZoom();
+            const paint = () => {
+                frame = 0;
+                const { x: width, y: height } = map.getSize();
+                if (!width || !height)
+                    return;
+                const dpr = Math.min(window.devicePixelRatio || 1, 2);
+                canvas.width = Math.round(width * dpr);
+                canvas.height = Math.round(height * dpr);
+                canvas.style.width = `${width}px`;
+                canvas.style.height = `${height}px`;
+                const context = canvas.getContext('2d');
+                if (!context)
+                    return;
+                canvas.style.transform = '';
+                paintOrigin = map.containerPointToLatLng([0, 0]);
+                paintZoom = map.getZoom();
+                context.scale(dpr, dpr);
+                const style = getComputedStyle(host.current);
+                const paper = style.getPropertyValue('--inkra-paper').trim();
+                const dark = Number.parseInt(paper.replace('#', '').slice(0, 2), 16) < 100;
+                const project = (position) => { const point = map.latLngToContainerPoint([position[1], position[0]]); return [point.x, point.y]; };
+                paintSea(context, width, height, project([0, 0]));
+                if (geography)
+                    paintTerrain(context, geography, project, width, height, dark);
+                if (landCover)
+                    paintTerrain(context, landCover, project, width, height, dark);
+                if (water)
+                    paintTerrain(context, water, project, width, height, dark, 'water');
+                const draw = (line, color, seed, weight) => {
+                    const projected = line.map(point => { const p = map.latLngToContainerPoint(point); return [p.x, p.y]; });
+                    pencilStroke(context, projected, color, weight, seed, .3, 3, false, { grain: .7, breaks: .15, variation: .8, gain: 2.5, step: .8 });
+                };
+                boundaries.forEach((line, i) => draw(line, style.getPropertyValue('--inkra-border-strong').trim(), i + 137, 1.2));
+                routePoints.forEach((line, i) => draw(line, style.getPropertyValue('--inkra-accent').trim(), i + 717, 2));
+                points.forEach(place => {
+                    const p = map.latLngToContainerPoint([place.latitude, place.longitude]);
+                    paintStop(context, p.x, p.y, seedToNumber(place.id), style.getPropertyValue('--inkra-accent-strong').trim(), paper, selectedRef.current === place.id);
+                });
+            };
+            const schedule = () => { if (!frame)
+                frame = requestAnimationFrame(paint); };
+            paintRef.current = schedule;
+            // Reuse the existing raster during a pan; repaint geographical detail on rest.
+            const translate = () => {
+                const point = map.latLngToContainerPoint(paintOrigin);
+                canvas.style.transformOrigin = '0 0';
+                canvas.style.transform = `translate(${point.x}px, ${point.y}px) scale(${map.getZoomScale(map.getZoom(), paintZoom)})`;
+            };
+            const settle = () => { canvas.style.transform = ''; paintOrigin = map.containerPointToLatLng([0, 0]); paintZoom = map.getZoom(); schedule(); };
+            map.on('move', translate);
+            map.on('moveend zoomend resize', settle);
+            map.on('dragstart', () => map.stop());
+            const labelNodes = [];
+            markersRef.current = points.map(place => {
+                const node = document.createElement('span');
+                node.className = 'inkra-journey-map__pin';
+                labelNodes.push({ place, node });
+                const marker = L.marker([place.latitude, place.longitude], { icon: L.divIcon({ html: node, className: 'inkra-journey-map__marker', iconSize: [44, 44], iconAnchor: [22, 22] }), keyboard: true, title: place.label, alt: place.label }).addTo(map);
+                marker.on('click', () => selectionRef.current?.(place));
+                marker.getElement()?.setAttribute('aria-pressed', String(selectedRef.current === place.id));
+                return { place, marker };
+            });
+            setPlaceLabels(labelNodes);
+            const observer = new ResizeObserver(() => { map.invalidateSize(); if (!fitted)
+                fit(); schedule(); });
+            observer.observe(host.current);
+            const appearance = new MutationObserver(schedule);
+            for (let element = host.current; element; element = element.parentElement) {
+                appearance.observe(element, { attributes: true, attributeFilter: ['data-theme', 'data-inkra-theme'] });
+            }
+            const scheme = matchMedia('(prefers-color-scheme: dark)');
+            scheme.addEventListener('change', schedule);
+            fit();
+            schedule();
+            setReady(true);
+            cleanup = () => { cancelAnimationFrame(frame); observer.disconnect(); appearance.disconnect(); scheme.removeEventListener('change', schedule); map.remove(); canvas.remove(); mapRef.current = null; markersRef.current = []; paintRef.current = () => { }; };
+        }).catch(() => { if (!cancelled) {
+            setFailed(true);
+            cleanup?.();
+            cleanup = undefined;
+        } });
+        return () => { cancelled = true; cleanup?.(); };
+    }, [places, routes, geography, landCover, water]);
+    useEffect(() => {
+        markersRef.current.forEach(({ place, marker }) => marker.getElement()?.setAttribute('aria-pressed', String(selectedPlace === place.id)));
+        paintRef.current();
+        const place = markersRef.current.find(item => item.place.id === selectedPlace)?.place;
+        if (focusSelectedPlace && place) {
+            const map = mapRef.current;
+            map?.stop();
+            const targetZoom = fitZoomRef.current + Math.log2(10);
+            if (matchMedia('(prefers-reduced-motion: reduce)').matches)
+                map?.setView([place.latitude, place.longitude], targetZoom, { animate: false });
+            else
+                map?.flyTo([place.latitude, place.longitude], targetZoom, { duration: .85 });
+        }
+    }, [selectedPlace, focusSelectedPlace, ready]);
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map || !ready)
+            return;
+        for (const handler of [map.dragging, map.touchZoom, map.doubleClickZoom, map.boxZoom, map.keyboard]) {
+            if (interactive)
+                handler.enable();
+            else
+                handler.disable();
+        }
+        if (interactive && scrollWheelZoom)
+            map.scrollWheelZoom.enable();
+        else
+            map.scrollWheelZoom.disable();
+    }, [interactive, scrollWheelZoom, ready]);
+    return _jsxs("div", { ...props, ref: root, className: ['inkra-journey-map', className].filter(Boolean).join(' '), children: [placeLabels.map(({ place, node }) => createPortal(_jsx(PencilText, { children: place.label }), node, place.id)), _jsxs("div", { className: "inkra-journey-map__viewport", style: { height: Math.max(240, Math.min(800, height)) }, children: [attributionDisplay === 'popover' && _jsx("div", { className: "inkra-journey-map__credits", children: _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": labels.attribution ?? 'Map credits', title: labels.attribution ?? 'Map credits', children: _jsx(TravelIcon, { name: "info" }) }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { align: "end", sideOffset: 8, collisionPadding: 20, className: "inkra-journey-map__credits-content", children: [_jsx(Popover.Title, { children: labels.attribution ?? 'Map credits' }), _jsx(Popover.Description, { children: attribution })] }) })] }) }), _jsx("div", { ref: host, className: "inkra-journey-map__host", "aria-label": props['aria-label'] ?? 'Map' }), showControls && _jsxs("div", { className: "inkra-journey-map__tools", children: [_jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.zoomIn, title: labels.zoomIn, onClick: () => { mapRef.current?.stop(); mapRef.current?.zoomIn(); }, children: _jsx(TravelIcon, { name: "plus" }) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.zoomOut, title: labels.zoomOut, onClick: () => { mapRef.current?.stop(); mapRef.current?.zoomOut(); }, children: _jsx(TravelIcon, { name: "minus" }) }), _jsx(Button, { size: "icon", variant: "ghost", disabled: !ready, "aria-label": labels.reset, title: labels.reset, onClick: () => { mapRef.current?.stop(); fitRef.current(); }, children: _jsx(TravelIcon, { name: "reset" }) })] }), ready && _jsx(MapScale, { map: mapRef.current }), failed && _jsx("p", { role: "status", children: labels.unavailable })] }), attributionDisplay === 'inline' && _jsx("p", { className: "inkra-journey-map__attribution", children: attribution }), (showPlaceList || !ready || failed) && _jsx("ol", { className: "inkra-journey-map__places", children: places.filter(valid).map((place, index) => _jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": selectedPlace === place.id, onClick: () => { mapRef.current?.panTo([place.latitude, place.longitude], { animate: false }); onPlaceSelect?.(place); }, children: [_jsx("span", { "aria-hidden": "true", children: index + 1 }), _jsx(PencilText, { children: place.label })] }) }, place.id)) })] });
+}

package/dist/journey-map/terrain.d.ts

@@ -0,0 +1,8 @@
+import type { GeoJsonObject, Feature, Position } from 'geojson';
+import { type PencilPoint } from '../internal/stroke.js';
+type Project = (position: Position) => PencilPoint;
+export declare function paintSea(ctx: CanvasRenderingContext2D, width: number, height: number, anchor: PencilPoint): void;
+export declare function mapFeatures(data: GeoJsonObject): Feature[];
+export declare function paintTerrain(ctx: CanvasRenderingContext2D, data: GeoJsonObject, project: Project, width: number, height: number, dark: boolean, defaultKind?: string): void;
+export declare function paintStop(ctx: CanvasRenderingContext2D, x: number, y: number, seed: number, color: string, paper: string, selected: boolean): void;
+export {};