@inkra/react 0.12.0 → 0.14.0

package/dist/journey-map/rendering.js

@@ -0,0 +1,144 @@
+export function journeyAnimationMs(animate, duration, reducedMotion) {
+    if (!animate || reducedMotion)
+        return 0;
+    return Number.isFinite(duration) ? Math.max(0, Math.min(duration, 5000)) : 420;
+}
+export function journeyFocusZoom(overviewZoom, scale) {
+    const ratio = Number.isFinite(scale) && scale >= 1 ? Math.min(scale, 64) : 2;
+    return overviewZoom + Math.log2(ratio);
+}
+export function resolveJourneyMapRendering(rendering = 'auto') {
+    if (rendering === 'legacy')
+        return { boundaryViewport: false, terrainViewport: false, reuseCanvas: false, cacheBase: false };
+    const options = typeof rendering === 'object' ? rendering : {};
+    return {
+        boundaryViewport: options.boundaryViewport ?? true,
+        terrainViewport: options.terrainViewport ?? true,
+        reuseCanvas: options.reuseCanvas ?? true,
+        cacheBase: options.cacheBase ?? true,
+    };
+}
+const MAX_SIDE = 8192;
+const MAX_LAYER_PIXELS = 4 * 1024 * 1024;
+// One base bitmap per map; together with the visible bitmap, at most 6 Mi pixels.
+const MAX_BASE_PIXELS = 3 * 1024 * 1024;
+/** Non-overlapping newly exposed strips after moving an existing base bitmap. */
+export function journeyPanRegions(width, height, dx, dy) {
+    if (Math.abs(dx) >= width || Math.abs(dy) >= height)
+        return [[0, 0, width, height]];
+    const regions = [];
+    if (dx)
+        regions.push([dx > 0 ? 0 : width + dx, 0, Math.abs(dx), height]);
+    if (dy)
+        regions.push([Math.max(0, dx), dy > 0 ? 0 : height + dy, width - Math.abs(dx), Math.abs(dy)]);
+    return regions;
+}
+/** Pure and SSR safe: browser DPR is supplied by the caller. */
+export function journeyCanvasSize(width, height, requestedDpr) {
+    if (![width, height].every(value => Number.isFinite(value) && value > 0))
+        return;
+    const requested = Number.isFinite(requestedDpr) ? Math.max(1, Math.min(requestedDpr, 2)) : 1;
+    const dpr = Math.min(requested, MAX_SIDE / width, MAX_SIDE / height, Math.sqrt(MAX_LAYER_PIXELS / (width * height)));
+    if (dpr < 1)
+        return;
+    const pixelWidth = Math.round(width * dpr), pixelHeight = Math.round(height * dpr);
+    // Round-down adjustment prevents rounding the two sides over the pixel budget.
+    const boundedDpr = pixelWidth * pixelHeight > MAX_LAYER_PIXELS
+        ? Math.min(dpr, Math.floor(width * dpr) / width, Math.floor(height * dpr) / height) : dpr;
+    return { width, height, pixelWidth: Math.round(width * boundedDpr), pixelHeight: Math.round(height * boundedDpr), dpr: boundedDpr };
+}
+function releaseCanvas(canvas) {
+    canvas.width = 0;
+    canvas.height = 0;
+}
+export function prepareJourneyCanvas(canvas, size, reuse) {
+    const changed = canvas.width !== size.pixelWidth || canvas.height !== size.pixelHeight;
+    if (changed)
+        releaseCanvas(canvas); // Avoid an oversized intermediate width/height swap.
+    if (changed || !reuse) {
+        canvas.width = size.pixelWidth;
+        canvas.height = size.pixelHeight;
+    }
+    canvas.style.width = `${size.width}px`;
+    canvas.style.height = `${size.height}px`;
+    const context = canvas.getContext('2d');
+    if (!context || context.isContextLost?.())
+        return null;
+    // Never accumulate DPR transforms when the backing store is reused.
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.globalAlpha = 1;
+    context.globalCompositeOperation = 'source-over';
+    context.clearRect(0, 0, size.pixelWidth, size.pixelHeight);
+    context.setTransform(size.dpr, 0, 0, size.dpr, 0, 0);
+    return context;
+}
+/** Per-map, memory-only, single-entry cache. No DOM or allocation until capture. */
+export class JourneyBaseBitmap {
+    constructor() {
+        this.invalidate = () => { this.key = undefined; };
+    }
+    restore(context, key, offset = [0, 0]) {
+        if (key !== this.key || !this.canvas)
+            return false;
+        const cachedContext = this.canvas.getContext('2d');
+        if (!cachedContext || cachedContext.isContextLost?.()) {
+            this.clear();
+            return false;
+        }
+        try {
+            context.save();
+            context.setTransform(1, 0, 0, 1, 0, 0);
+            context.drawImage(this.canvas, offset[0], offset[1]);
+            return true;
+        }
+        catch {
+            this.clear();
+            return false;
+        }
+        finally {
+            context.restore();
+        }
+    }
+    capture(source, size, key) {
+        if (size.pixelWidth * size.pixelHeight > MAX_BASE_PIXELS) {
+            this.clear();
+            return;
+        }
+        try {
+            const canvas = this.canvas ?? document.createElement('canvas');
+            if (!this.canvas) {
+                canvas.addEventListener('contextlost', this.invalidate);
+                canvas.addEventListener('contextrestored', this.invalidate);
+                this.canvas = canvas;
+            }
+            this.key = undefined;
+            if (canvas.width !== size.pixelWidth || canvas.height !== size.pixelHeight) {
+                releaseCanvas(canvas);
+                canvas.width = size.pixelWidth;
+                canvas.height = size.pixelHeight;
+            }
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.()) {
+                this.clear();
+                return;
+            }
+            context.setTransform(1, 0, 0, 1, 0, 0);
+            context.clearRect(0, 0, size.pixelWidth, size.pixelHeight);
+            context.drawImage(source, 0, 0);
+            this.key = key;
+        }
+        catch {
+            // Allocation/copy failures affect optimization, never the already drawn map.
+            this.clear();
+        }
+    }
+    clear() {
+        this.key = undefined;
+        if (!this.canvas)
+            return;
+        this.canvas.removeEventListener('contextlost', this.invalidate);
+        this.canvas.removeEventListener('contextrestored', this.invalidate);
+        releaseCanvas(this.canvas);
+        this.canvas = undefined;
+    }
+}

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

@@ -3,6 +3,9 @@ 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;
+/** Conservative x bounds of polygon edges inside a horizontal strip.
+ * Hole rings may widen the bounds, but never remove visible fill. */
+export declare function terrainRowBounds(rings: readonly (readonly PencilPoint[])[], top: number, bottom: number): readonly [number, number] | undefined;
+export declare function paintTerrain(ctx: CanvasRenderingContext2D, data: GeoJsonObject, project: Project, width: number, height: number, dark: boolean, defaultKind?: string, terrainViewport?: boolean): void;
 export declare function paintStop(ctx: CanvasRenderingContext2D, x: number, y: number, seed: number, color: string, paper: string, selected: boolean): void;
 export {};

package/dist/journey-map/terrain.js

@@ -45,14 +45,38 @@ export function mapFeatures(data) {
         return [data];
     return [{ type: 'Feature', properties: {}, geometry: data }];
 }
-export function paintTerrain(ctx, data, project, width, height, dark, defaultKind = 'land') {
+/** Conservative x bounds of polygon edges inside a horizontal strip.
+ * Hole rings may widen the bounds, but never remove visible fill. */
+export function terrainRowBounds(rings, top, bottom) {
+    let left = Infinity, right = -Infinity;
+    for (const ring of rings)
+        for (let i = 0; i < ring.length; i++) {
+            const [ax, ay] = ring[i], [bx, by] = ring[(i + 1) % ring.length];
+            if ((ay < top && by < top) || (ay > bottom && by > bottom))
+                continue;
+            if (!Number.isFinite(ax) || !Number.isFinite(ay) || !Number.isFinite(bx) || !Number.isFinite(by))
+                return [-Infinity, Infinity];
+            if (ay === by) {
+                left = Math.min(left, ax, bx);
+                right = Math.max(right, ax, bx);
+                continue;
+            }
+            const low = Math.max(0, Math.min(1, (top - ay) / (by - ay)));
+            const high = Math.max(0, Math.min(1, (bottom - ay) / (by - ay)));
+            const x1 = ax + (bx - ax) * low, x2 = ax + (bx - ax) * high;
+            left = Math.min(left, x1, x2);
+            right = Math.max(right, x1, x2);
+        }
+    return left <= right ? [left, right] : undefined;
+}
+export function paintTerrain(ctx, data, project, width, height, dark, defaultKind = 'land', terrainViewport = false) {
     for (const [featureIndex, feature] of mapFeatures(data).entries()) {
         const geometry = feature.geometry;
         if (!geometry)
             continue;
         const polygons = geometry.type === 'MultiPolygon' ? geometry.coordinates : geometry.type === 'Polygon' ? [geometry.coordinates] : [];
         const kind = String(feature.properties?.id ?? defaultKind);
-        const [fill, ink] = palette[kind] ?? palette.land;
+        const [fill, ink] = palette[kind] ?? palette[defaultKind] ?? palette.land;
         for (const [polygonIndex, polygon] of polygons.entries()) {
             const rings = polygon.map(ring => ring.map(project));
             let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
@@ -87,7 +111,15 @@ export function paintTerrain(ctx, data, project, width, height, dark, defaultKin
             const spacing = kind === 'forest' ? 9 : 13;
             const seed = 21000 + featureIndex * 43 + polygonIndex;
             for (let row = Math.floor((top - origin[1]) / spacing); row <= Math.ceil((bottom - origin[1]) / spacing); row++) {
-                for (let col = Math.floor((left - origin[0]) / 36); col <= Math.ceil((right - origin[0]) / 36); col++) {
+                // Jitter, the 44px hatch, category glyphs and pencil bleed all fit this
+                // envelope. Keep the original world-grid indices and per-cell seeds.
+                const rowY = origin[1] + row * spacing;
+                const band = terrainViewport ? terrainRowBounds(rings, rowY - 25, rowY + 20) : [left, right];
+                if (!band)
+                    continue;
+                const first = Math.max(Math.floor((left - origin[0]) / 36), terrainViewport ? Math.ceil((band[0] - origin[0] - 68) / 36) : -Infinity);
+                const last = Math.min(Math.ceil((right - origin[0]) / 36), terrainViewport ? Math.floor((band[1] - origin[0] + 17) / 36) : Infinity);
+                for (let col = first; col <= last; col++) {
                     const cell = (seed ^ Math.imul(col, 73856093) ^ Math.imul(row, 19349663)) >>> 0;
                     const rng = seededRandom(cell);
                     if (rng() < .2)

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

@@ -0,0 +1,3 @@
+import type { Map } from 'leaflet';
+/** Trackpad pinch is independent of ordinary wheel scrolling and native touch zoom. */
+export declare function attachJourneyTrackpad(host: HTMLElement, map: Map): () => void;

package/dist/journey-map/trackpad.js

@@ -0,0 +1,110 @@
+/** Trackpad pinch is independent of ordinary wheel scrolling and native touch zoom. */
+export function attachJourneyTrackpad(host, map) {
+    let frame = 0;
+    let pending;
+    let gesture;
+    let touching = false;
+    let remainder = 0;
+    let lastWheel = -Infinity;
+    const clamp = (zoom) => Math.max(map.getMinZoom(), Math.min(map.getMaxZoom(), zoom));
+    const apply = () => {
+        frame = 0;
+        if (!pending)
+            return;
+        const { point, zoom } = pending;
+        pending = undefined;
+        const snap = map.options.zoomSnap ?? 0;
+        // Snap before calculating the anchor; Leaflet otherwise snaps only the
+        // final view and the coordinate under the pointer can drift.
+        const target = snap > 0 ? clamp(Math.round(zoom / snap) * snap) : zoom;
+        if (target !== map.getZoom())
+            map.setZoomAround(point, target, { animate: false });
+        // Preserve sub-snap movement across a wheel burst instead of losing tiny deltas.
+        remainder = zoom - map.getZoom();
+    };
+    const queue = (zoom, point) => {
+        pending = { zoom: clamp(zoom), point };
+        if (!frame)
+            frame = requestAnimationFrame(apply);
+    };
+    const pointAt = (event) => {
+        const size = map.getSize();
+        if (Number.isFinite(event.clientX) && Number.isFinite(event.clientY)) {
+            const point = map.mouseEventToContainerPoint(event);
+            if (point.x >= 0 && point.y >= 0 && point.x <= size.x && point.y <= size.y)
+                return point;
+        }
+        return size.divideBy(2);
+    };
+    const stop = (event) => { event.preventDefault(); event.stopImmediatePropagation(); };
+    const wheel = (event) => {
+        if (!event.ctrlKey)
+            return; // Plain two-finger scrolling continues to the page.
+        if (!Number.isFinite(event.deltaY))
+            return;
+        stop(event);
+        if (gesture || touching || event.deltaY === 0)
+            return;
+        const now = performance.now();
+        if (now - lastWheel > 160)
+            remainder = 0;
+        lastWheel = now;
+        const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? host.clientHeight : 1;
+        const pixels = Math.max(-100, Math.min(100, event.deltaY * unit));
+        queue((pending?.zoom ?? map.getZoom() + remainder) - pixels / (100 * Math.LN2), pointAt(event));
+    };
+    const start = (event) => {
+        if (touching)
+            return; // Leaflet owns physical touchscreen pinch.
+        const input = event;
+        stop(event);
+        map.stop();
+        if (frame)
+            cancelAnimationFrame(frame);
+        frame = 0;
+        pending = undefined;
+        remainder = 0;
+        gesture = { zoom: map.getZoom(), scale: input.scale && input.scale > 0 && Number.isFinite(input.scale) ? input.scale : 1, point: pointAt(input) };
+    };
+    const change = (event) => {
+        if (!gesture || touching)
+            return;
+        stop(event);
+        const scale = event.scale;
+        if (scale && scale > 0 && Number.isFinite(scale))
+            queue(gesture.zoom + Math.log2(scale / gesture.scale), gesture.point);
+    };
+    const end = (event) => {
+        change(event);
+        gesture = undefined;
+    };
+    const touch = (event) => {
+        touching = event.touches.length > 0;
+        if (touching && gesture) {
+            gesture = undefined;
+            pending = undefined;
+            if (frame)
+                cancelAnimationFrame(frame);
+            frame = 0;
+        }
+    };
+    host.addEventListener('wheel', wheel, { capture: true, passive: false });
+    host.addEventListener('gesturestart', start, { passive: false });
+    host.addEventListener('gesturechange', change, { passive: false });
+    host.addEventListener('gestureend', end, { passive: false });
+    for (const type of ['touchstart', 'touchend', 'touchcancel'])
+        host.addEventListener(type, touch, { capture: true, passive: true });
+    const cleanup = () => {
+        map.off('unload', cleanup);
+        if (frame)
+            cancelAnimationFrame(frame);
+        host.removeEventListener('wheel', wheel, true);
+        host.removeEventListener('gesturestart', start);
+        host.removeEventListener('gesturechange', change);
+        host.removeEventListener('gestureend', end);
+        for (const type of ['touchstart', 'touchend', 'touchcancel'])
+            host.removeEventListener(type, touch, true);
+    };
+    map.on('unload', cleanup);
+    return cleanup;
+}

package/dist/styles/journey-map.css

@@ -1,9 +1,11 @@
 .inkra-journey-map { min-width: 0; width: 100%; color: var(--inkra-ink); }
 .inkra-journey-map__viewport { position: relative; overflow: hidden; isolation: isolate; background: var(--inkra-paper); }
 .inkra-journey-map__host { position: absolute; inset: 0; background: transparent; font: inherit; }
-.inkra-journey-map__ink { position: absolute; inset: 0; pointer-events: none; z-index: 350; }
+.inkra-journey-map__ink { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 350; }
 .inkra-journey-map__tools { position: absolute; z-index: 600; inset-block-end: 9px; inset-inline-start: 9px; display: grid; gap: 4px; }
 .inkra-journey-map__marker { display: grid; place-items: center; }
+.inkra-journey-map__symbol, .inkra-journey-map__stop { display: block; width: 44px; height: 44px; }
+.inkra-journey-map__stop { pointer-events: none; }
 .inkra-journey-map__pin { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; text-align: center; color: var(--inkra-ink); font: 14px/1.4 var(--inkra-font-hand); }
 .inkra-journey-map__marker[aria-pressed="true"] .inkra-journey-map__pin { color: var(--inkra-accent-strong); }
 .inkra-journey-map__orientation { position: absolute; bottom: 18px; right: 18px; z-index: 600; display: flex; align-items: end; gap: 12px; pointer-events: none; }
@@ -17,3 +19,14 @@
 .inkra-journey-map__places button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
 .inkra-journey-map__places button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
 .inkra-journey-map button:focus-visible, .inkra-journey-map__marker:focus-visible { outline: 2px solid var(--inkra-focus); outline-offset: -2px; }
+
+.inkra-journey-map__portal-owner { display: contents; }
+.inkra-journey-map__custom-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--inkra-accent-strong); }
+.inkra-journey-map__custom-icon[hidden], .inkra-journey-map__stop[hidden] { display: none; }
+.inkra-journey-map__caption { position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 150px; pointer-events: none; }
+.inkra-journey-map__feature-label { padding: 3px 8px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--inkra-ink); }
+.inkra-journey-map__feature-label[data-selected="true"] { color: var(--inkra-accent-strong); }
+.inkra-journey-map__features { display: flex; flex-wrap: wrap; list-style: none; gap: 8px; padding: 0; margin: 8px 0 0; }
+.inkra-journey-map__features button { min-height: 44px; padding: 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+.inkra-journey-map__features [aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
+.inkra-journey-map__feature-hit:focus-visible { outline: 2px solid var(--inkra-focus); outline-offset: 2px; }

package/dist/styles/markdown.css

@@ -1,4 +1,5 @@
 .inkra-markdown {
+  inline-size: 100%;
   color: var(--inkra-ink);
   font-family: var(--inkra-font-body);
   font-size: var(--inkra-text-md);
@@ -203,6 +204,7 @@
 .inkra-markdown__code-text > .inkra-pencil-text__source { font-family: inherit; }
 
 .inkra-markdown__code-frame {
+  inline-size: 100%;
   margin-block: 0 var(--inkra-space-4);
   max-width: 100%;
   min-width: 0;

package/dist/styles.css

@@ -8781,6 +8781,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 }
 
 .inkra-markdown {
+  inline-size: 100%;
   color: var(--inkra-ink);
   font-family: var(--inkra-font-body);
   font-size: var(--inkra-text-md);
@@ -8985,6 +8986,7 @@ div.inkra-choice-grid > .inkra-radio-group {
 .inkra-markdown__code-text > .inkra-pencil-text__source { font-family: inherit; }
 
 .inkra-markdown__code-frame {
+  inline-size: 100%;
   margin-block: 0 var(--inkra-space-4);
   max-width: 100%;
   min-width: 0;
@@ -10018,9 +10020,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .inkra-journey-map { min-width: 0; width: 100%; color: var(--inkra-ink); }
 .inkra-journey-map__viewport { position: relative; overflow: hidden; isolation: isolate; background: var(--inkra-paper); }
 .inkra-journey-map__host { position: absolute; inset: 0; background: transparent; font: inherit; }
-.inkra-journey-map__ink { position: absolute; inset: 0; pointer-events: none; z-index: 350; }
+.inkra-journey-map__ink { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 350; }
 .inkra-journey-map__tools { position: absolute; z-index: 600; inset-block-end: 9px; inset-inline-start: 9px; display: grid; gap: 4px; }
 .inkra-journey-map__marker { display: grid; place-items: center; }
+.inkra-journey-map__symbol, .inkra-journey-map__stop { display: block; width: 44px; height: 44px; }
+.inkra-journey-map__stop { pointer-events: none; }
 .inkra-journey-map__pin { position: absolute; top: 37px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 140px; text-align: center; color: var(--inkra-ink); font: 14px/1.4 var(--inkra-font-hand); }
 .inkra-journey-map__marker[aria-pressed="true"] .inkra-journey-map__pin { color: var(--inkra-accent-strong); }
 .inkra-journey-map__orientation { position: absolute; bottom: 18px; right: 18px; z-index: 600; display: flex; align-items: end; gap: 12px; pointer-events: none; }
@@ -10035,6 +10039,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .inkra-journey-map__places button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
 .inkra-journey-map button:focus-visible, .inkra-journey-map__marker:focus-visible { outline: 2px solid var(--inkra-focus); outline-offset: -2px; }
 
+.inkra-journey-map__portal-owner { display: contents; }
+.inkra-journey-map__custom-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--inkra-accent-strong); }
+.inkra-journey-map__custom-icon[hidden], .inkra-journey-map__stop[hidden] { display: none; }
+.inkra-journey-map__caption { position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 150px; pointer-events: none; }
+.inkra-journey-map__feature-label { padding: 3px 8px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--inkra-ink); }
+.inkra-journey-map__feature-label[data-selected="true"] { color: var(--inkra-accent-strong); }
+.inkra-journey-map__features { display: flex; flex-wrap: wrap; list-style: none; gap: 8px; padding: 0; margin: 8px 0 0; }
+.inkra-journey-map__features button { min-height: 44px; padding: 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+.inkra-journey-map__features [aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
+.inkra-journey-map__feature-hit:focus-visible { outline: 2px solid var(--inkra-focus); outline-offset: 2px; }
+
 .inkra-toast__theme-anchor { display: none; }
 
 .inkra-toast__viewport {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkra/react",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
   "type": "module",
   "license": "MIT",