@inkra/react 0.0.0-stage → 0.1.0

package/dist/internal/usePencilSurface.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { PencilSurfaceVariant } from './surfaceRenderer.js';
+export declare function usePencilSurface(rootRef: RefObject<HTMLElement | null>, canvasRef: RefObject<HTMLCanvasElement | null>, borderRef: RefObject<HTMLCanvasElement | null>, variant: PencilSurfaceVariant, seed: string | number, clipContent: boolean, radius?: number): void;

package/dist/internal/usePencilSurface.js

@@ -0,0 +1,108 @@
+import { useBrowserLayoutEffect } from './useBrowserLayoutEffect.js';
+import { PENCIL_RENDERER_VERSION, effectiveDpr } from './cache.js';
+import { observeCanvasRecovery } from './recovery.js';
+import { seedToNumber } from './random.js';
+import { drawPencilSurface } from './surfaceRenderer.js';
+function token(style, name, fallback) {
+    return style.getPropertyValue(name).trim() || fallback;
+}
+export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, clipContent, radius) {
+    useBrowserLayoutEffect(() => {
+        const root = rootRef.current;
+        const canvas = canvasRef.current;
+        if (!root || !canvas)
+            return undefined;
+        let frame = 0;
+        let lastPaint = '';
+        let disposed = false;
+        const paint = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const width = root.clientWidth;
+            const height = root.clientHeight;
+            if (width < 6 || height < 6)
+                return;
+            const dpr = effectiveDpr(2);
+            const style = getComputedStyle(root);
+            const paper = token(style, '--inkra-paper', '#fcfcfa');
+            const ink = variant === 'action' || variant === 'outline'
+                ? token(style, '--inkra-accent-strong', '#234e39')
+                : variant === 'danger'
+                    ? token(style, '--inkra-danger', '#873e36')
+                    : token(style, '--inkra-border-strong', '#778575');
+            const dark = style.colorScheme.includes('dark');
+            const wash = variant === 'selection'
+                ? token(style, '--inkra-selection-pigment', dark ? '#c6b873' : '#769566')
+                : variant === 'danger'
+                    ? token(style, '--inkra-danger-soft', '#d49b8b')
+                    : variant === 'badge'
+                        ? token(style, '--inkra-coral-soft', '#f8ebe7')
+                        : variant === 'quiet'
+                            ? token(style, '--inkra-accent-soft', '#e6efe8')
+                            : token(style, '--inkra-accent', '#2e634a');
+            const numericSeed = seedToNumber(seed);
+            const paintKey = JSON.stringify([
+                PENCIL_RENDERER_VERSION,
+                variant,
+                numericSeed,
+                width,
+                height,
+                dpr,
+                paper,
+                ink,
+                wash,
+                dark,
+                clipContent,
+                radius,
+            ]);
+            if (paintKey === lastPaint && !canvas.getContext('2d')?.isContextLost?.())
+                return;
+            try {
+                const points = drawPencilSurface(canvas, borderRef.current, width, height, variant, numericSeed, dpr, { paper, dark, ink, wash }, radius);
+                if (clipContent && points) {
+                    root.style.setProperty('--inkra-pencil-clip', `polygon(${points.map(([x, y]) => `${x / width * 100}% ${y / height * 100}%`).join(',')})`);
+                }
+                else {
+                    root.style.removeProperty('--inkra-pencil-clip');
+                }
+                delete root.dataset.pencilFallback;
+                lastPaint = paintKey;
+            }
+            catch {
+                root.dataset.pencilFallback = 'true';
+                root.style.removeProperty('--inkra-pencil-clip');
+                lastPaint = '';
+            }
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(paint);
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(root);
+        window.addEventListener('resize', schedule, { passive: true });
+        const appearance = new MutationObserver(schedule);
+        appearance.observe(document.documentElement, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['data-theme', 'data-inkra-theme'],
+        });
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', schedule);
+        const stopRecovery = observeCanvasRecovery(() => {
+            lastPaint = '';
+            schedule();
+        });
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            resize?.disconnect();
+            appearance.disconnect();
+            colorScheme.removeEventListener('change', schedule);
+            window.removeEventListener('resize', schedule);
+            cancelAnimationFrame(frame);
+        };
+    }, [variant, seed, clipContent, radius, rootRef, canvasRef, borderRef]);
+}

package/dist/internal/useSelectionDrawing.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useSelectionDrawing(ref: RefObject<HTMLElement | null>, selected: boolean, animated?: boolean): void;

package/dist/internal/useSelectionDrawing.js

@@ -0,0 +1,86 @@
+import { useRef } from 'react';
+import { useBrowserLayoutEffect } from './useBrowserLayoutEffect.js';
+import { PENCIL_SELECTION_WASH } from './surfaceRenderer.js';
+// Reveal the cached pigment in alternating diagonal strokes, without repainting it.
+function drawingFrames(width, height) {
+    const angle = PENCIL_SELECTION_WASH.angle * 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;
+        const ends = [
+            (-width / 2 + sin * middle) / cos,
+            (width / 2 + sin * middle) / cos,
+            (-height / 2 - cos * middle) / sin,
+            (height / 2 - cos * middle) / sin,
+        ];
+        const left = Math.max(Math.min(ends[0], ends[1]), Math.min(ends[2], ends[3]));
+        const right = Math.min(Math.max(ends[0], ends[1]), Math.max(ends[2], ends[3]));
+        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 animation = node.animate(drawingFrames(node.clientWidth, node.clientHeight).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,52 @@
+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);
+        observer.observe(document.documentElement, { subtree: true, 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;