@inkra/react 0.0.0-stage → 0.1.0

package/dist/journey-map/index.js

@@ -0,0 +1,195 @@
+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);
+            appearance.observe(document.documentElement, { subtree: true, 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 {};

package/dist/journey-map/terrain.js

@@ -0,0 +1,127 @@
+import { pencilStroke } from '../internal/stroke.js';
+import { seededRandom } from '../internal/random.js';
+// Palette, anchored hatch and category glyphs adapted from adventure/pencil/brush.js.
+const palette = {
+    land: ['#e6e2af', '#83924a'], forest: ['#a7c7ad', '#3c7356'], crop: ['#e6c17b', '#9c7536'],
+    shrub: ['#c8c38f', '#797742'], bare: ['#cec4d9', '#83708e'], snow: ['#f4f5f1', '#94afb7'],
+    wetland: ['#a6c7c6', '#437e82'], urban: ['#d49b8b', '#975b4f'], water: ['#87bbc0', '#4d91a0'],
+};
+const stroke = (ctx, points, color, seed, width = .6) => pencilStroke(ctx, points, color, width, seed, .3, 1, false, { variation: 1, breaks: .45, grain: .78, gain: 1.7, step: 1 });
+let seaTile;
+export function paintSea(ctx, width, height, anchor) {
+    if (!seaTile) {
+        seaTile = document.createElement('canvas');
+        seaTile.width = seaTile.height = 512;
+        const ink = seaTile.getContext('2d');
+        if (!ink) {
+            seaTile = undefined;
+            return;
+        }
+        const rng = seededRandom(4801);
+        for (let i = 0; i < 320; i++) {
+            const x = rng() * 512, y = rng() * 512, length = 9 + rng() * 49;
+            ink.globalAlpha = .1 + rng() * .2;
+            for (const [dx, dy] of [[0, 0], [-512, 0], [0, 512], [-512, 512]]) {
+                ink.save();
+                ink.translate(dx, dy);
+                stroke(ink, [[x, y], [x + length * .5, y - length * .09], [x + length, y - length * .18]], '#4d91a0', 8100 + i, .5 + i % 4 * .1);
+                ink.restore();
+            }
+        }
+    }
+    const pattern = ctx.createPattern(seaTile, 'repeat');
+    if (!pattern)
+        return;
+    pattern.setTransform(new DOMMatrix().translate(anchor[0], anchor[1]));
+    ctx.save();
+    ctx.fillStyle = pattern;
+    ctx.fillRect(0, 0, width, height);
+    ctx.restore();
+}
+export function mapFeatures(data) {
+    if (data.type === 'FeatureCollection')
+        return data.features;
+    if (data.type === 'Feature')
+        return [data];
+    return [{ type: 'Feature', properties: {}, geometry: data }];
+}
+export function paintTerrain(ctx, data, project, width, height, dark, defaultKind = 'land') {
+    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;
+        for (const [polygonIndex, polygon] of polygons.entries()) {
+            const rings = polygon.map(ring => ring.map(project));
+            const points = rings.flat();
+            if (!points.length)
+                continue;
+            const left = Math.max(0, Math.min(...points.map(p => p[0]))), right = Math.min(width, Math.max(...points.map(p => p[0])));
+            const top = Math.max(0, Math.min(...points.map(p => p[1]))), bottom = Math.min(height, Math.max(...points.map(p => p[1])));
+            if (left >= right || top >= bottom)
+                continue;
+            ctx.save();
+            ctx.beginPath();
+            for (const ring of rings) {
+                ring.forEach(([x, y], index) => index ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+                ctx.closePath();
+            }
+            ctx.clip('evenodd');
+            if (defaultKind === 'land' && kind === 'land') {
+                ctx.fillStyle = dark ? '#191d1e' : '#fdfcf8';
+                ctx.fillRect(left, top, right - left, bottom - top);
+            }
+            ctx.fillStyle = fill;
+            ctx.globalAlpha = dark ? .16 : .45;
+            ctx.fillRect(left, top, right - left, bottom - top);
+            ctx.globalAlpha = dark ? .75 : .65;
+            // Anchor the sampling lattice to geographic coordinates, never the viewport.
+            const origin = project([0, 0]);
+            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++) {
+                    const cell = (seed ^ Math.imul(col, 73856093) ^ Math.imul(row, 19349663)) >>> 0;
+                    const rng = seededRandom(cell);
+                    if (rng() < .2)
+                        continue;
+                    const x = origin[0] + col * 36 + rng() * 12, y = origin[1] + row * spacing + rng() * 5;
+                    const length = 14 + rng() * 30;
+                    stroke(ctx, [[x, y], [x + length * .45, y - length * .14], [x + length, y - length * .28]], dark ? fill : ink, cell, .65);
+                    if (kind === 'forest')
+                        stroke(ctx, [[x - 3, y], [x, y - 7], [x + 3, y], [x, y - 4], [x, y + 2]], dark ? fill : ink, cell + 1);
+                    else if (kind === 'bare')
+                        stroke(ctx, [[x - 5, y + 3], [x, y - 5], [x + 5, y + 3]], dark ? fill : ink, cell + 1);
+                    else if (kind === 'crop')
+                        stroke(ctx, [[x - 3, y - 3], [x + 5, y - 1], [x + 4, y + 3]], dark ? fill : ink, cell + 1);
+                }
+            }
+            ctx.restore();
+        }
+    }
+}
+// The original stopMarker.js uses an irregular ring and separate pencil fill passes.
+export function paintStop(ctx, x, y, seed, color, paper, selected) {
+    const ring = (radius) => Array.from({ length: 73 }, (_, i) => {
+        const angle = i / 72 * Math.PI * 2;
+        const r = radius + Math.sin(angle * 3 + seed * .71) * .48 + Math.sin(angle * 5 - seed * .71) * .24;
+        return [x + Math.cos(angle) * r, y + Math.sin(angle) * r * .95];
+    });
+    const outline = ring(11);
+    ctx.save();
+    ctx.beginPath();
+    outline.forEach(([px, py], i) => i ? ctx.lineTo(px, py) : ctx.moveTo(px, py));
+    ctx.closePath();
+    ctx.fillStyle = paper;
+    ctx.fill();
+    for (let row = -9; row <= 9; row += 1.6) {
+        const half = Math.sqrt(Math.max(0, 81 - row * row));
+        stroke(ctx, [[x - half, y + row + .7], [x + half, y + row - .7]], color, seed + row * 13, 1.4);
+    }
+    pencilStroke(ctx, outline, color, 1.4, seed, .3, 3, true, { variation: .8, breaks: .18, grain: .66, gain: 2.7, step: .5 });
+    if (selected)
+        pencilStroke(ctx, ring(16), color, 1.4, seed + 29, .3, 3, true, { variation: .8, breaks: .3, grain: .66, gain: 2.7, step: .5 });
+    ctx.restore();
+}

package/dist/overlay/Overlay.d.ts

@@ -0,0 +1,65 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ButtonProps } from '../Button.js';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type OverlayRootProps = DialogPrimitive.DialogProps;
+export declare function OverlayRoot(props: OverlayRootProps): import("react").JSX.Element;
+export type OverlayTriggerProps = DialogPrimitive.DialogTriggerProps;
+export declare const OverlayTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type OverlayPortalProps = DialogPrimitive.DialogPortalProps;
+export declare function OverlayPortal({ children, ...props }: OverlayPortalProps): import("react").JSX.Element;
+export type OverlayBackdropProps = DialogPrimitive.DialogOverlayProps;
+export declare const OverlayBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface OverlayContentProps extends DialogPrimitive.DialogContentProps {
+    /** Plain preserves the padded legacy content; sections fixes Header/Footer around a scrolling Body. */
+    layout?: 'plain' | 'sections';
+    seed?: string | number;
+    surfaceVariant?: PencilSurfaceVariant;
+    surfaceRadius?: number;
+    surfaceClassName?: string;
+}
+export declare const OverlayContent: import("react").ForwardRefExoticComponent<OverlayContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface OverlayTitleProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const OverlayTitle: import("react").ForwardRefExoticComponent<OverlayTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface OverlayDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const OverlayDescription: import("react").ForwardRefExoticComponent<OverlayDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export type OverlayCloseProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+export declare const OverlayClose: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export interface OverlayCloseButtonProps extends Omit<ButtonProps, 'children' | 'size' | 'variant' | 'loading' | 'aria-label' | 'type'> {
+    label?: string;
+}
+export declare const OverlayCloseButton: import("react").ForwardRefExoticComponent<OverlayCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface OverlayHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    divided?: boolean;
+    showClose?: boolean;
+    closeLabel?: string;
+    action?: ReactNode;
+}
+export declare const OverlayHeader: import("react").ForwardRefExoticComponent<OverlayHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type OverlayBodyProps = ComponentPropsWithoutRef<'div'>;
+export declare const OverlayBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface OverlayFooterProps extends ComponentPropsWithoutRef<'div'> {
+    divided?: boolean;
+    align?: 'start' | 'center' | 'end';
+}
+export declare const OverlayFooter: import("react").ForwardRefExoticComponent<OverlayFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Overlay: Readonly<{
+    Root: typeof OverlayRoot;
+    Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof OverlayPortal;
+    Backdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<OverlayContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<OverlayHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<OverlayFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    CloseButton: import("react").ForwardRefExoticComponent<OverlayCloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Title: import("react").ForwardRefExoticComponent<OverlayTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<OverlayDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

package/dist/overlay/Overlay.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { forwardRef, useId } from 'react';
+import { __iconData as closeIcon } from 'lucide-react/dist/esm/icons/x.mjs';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function OverlayRoot(props) {
+    return (_jsx(PortalThemeProvider, { children: _jsx(DialogPrimitive.Root, { ...props }) }));
+}
+export const OverlayTrigger = forwardRef(function OverlayTrigger(props, forwardedRef) {
+    const ref = usePortalTriggerRef(forwardedRef);
+    return _jsx(DialogPrimitive.Trigger, { ...props, ref: ref });
+});
+export function OverlayPortal({ children, ...props }) {
+    return (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const OverlayBackdrop = forwardRef(function OverlayBackdrop({ className, ...props }, ref) {
+    return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-overlay__backdrop', className), ref: ref }));
+});
+export const OverlayContent = forwardRef(function OverlayContent({ children, className, layout = 'plain', seed, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-overlay__content', className), "data-layout": layout, ref: ref, children: _jsx(PencilSurface, { className: classes('inkra-overlay__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-overlay-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-overlay__content-body", children: children }) }) }));
+});
+export const OverlayTitle = forwardRef(function OverlayTitle({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Title, { ...props, className: classes('inkra-overlay__title', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-overlay-title-${id}`, children: children }) }));
+});
+export const OverlayDescription = forwardRef(function OverlayDescription({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Description, { ...props, className: classes('inkra-overlay__description', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-overlay-description-${id}`, children: children }) }));
+});
+export const OverlayClose = forwardRef(function OverlayClose(props, ref) {
+    return _jsx(DialogPrimitive.Close, { ...props, ref: ref });
+});
+const closePaths = closeIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+export const OverlayCloseButton = forwardRef(function OverlayCloseButton({ label = 'Close', className, onFocus, ...props }, ref) {
+    return _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { ...props, ref: ref, type: "button", size: "icon", variant: "ghost", className: classes('inkra-overlay__close-button', className), "aria-label": label, onFocus: event => {
+                                onFocus?.(event);
+                                const dialog = event.currentTarget.closest('[role="dialog"]');
+                                // Initial dialog focus must not open a tooltip that consumes the first Escape.
+                                if (dialog && (!event.relatedTarget || !dialog.contains(event.relatedTarget)))
+                                    event.preventDefault();
+                            }, children: _jsx(PencilIcon, { paths: closePaths, size: 30, sourceSize: 24, decorative: true }) }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { side: "bottom", align: "end", children: label }) })] }) });
+});
+export const OverlayHeader = forwardRef(function OverlayHeader({ children, className, divided = true, showClose = true, closeLabel = 'Close', action, ...props }, ref) {
+    const id = useId();
+    return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__header', className), "data-divided": divided || undefined, children: [_jsx("div", { className: "inkra-overlay__heading", children: children }), (action || showClose) && _jsxs("div", { className: "inkra-overlay__header-actions", children: [action, showClose && _jsx(OverlayCloseButton, { label: closeLabel })] }), divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-header-${id}` })] });
+});
+export const OverlayBody = forwardRef(function OverlayBody({ className, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes('inkra-overlay__body', className) });
+});
+export const OverlayFooter = forwardRef(function OverlayFooter({ children, className, divided = true, align = 'end', ...props }, ref) {
+    const id = useId();
+    return _jsxs("div", { ...props, ref: ref, className: classes('inkra-overlay__footer', className), "data-divided": divided || undefined, "data-align": align, children: [divided && _jsx(PencilLine, { className: "inkra-overlay__section-divider", seed: `overlay-footer-${id}` }), children] });
+});
+export const Overlay = Object.freeze({
+    Root: OverlayRoot,
+    Trigger: OverlayTrigger,
+    Portal: OverlayPortal,
+    Backdrop: OverlayBackdrop,
+    Content: OverlayContent,
+    Header: OverlayHeader,
+    Body: OverlayBody,
+    Footer: OverlayFooter,
+    CloseButton: OverlayCloseButton,
+    Title: OverlayTitle,
+    Description: OverlayDescription,
+    Close: OverlayClose,
+});

package/dist/overlay/Popover.d.ts

@@ -0,0 +1,43 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { ComponentPropsWithoutRef } from 'react';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type PopoverRootProps = PopoverPrimitive.PopoverProps;
+export declare function PopoverRoot(props: PopoverRootProps): import("react").JSX.Element;
+export type PopoverAnchorProps = PopoverPrimitive.PopoverAnchorProps;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverPortalProps = PopoverPrimitive.PopoverPortalProps;
+export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").JSX.Element;
+export interface PopoverContentProps extends PopoverPrimitive.PopoverContentProps {
+    arrowProps?: PopoverArrowProps;
+    seed?: string | number;
+    showArrow?: boolean;
+    surfaceVariant?: PencilSurfaceVariant;
+    surfaceRadius?: number;
+    surfaceClassName?: string;
+}
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Title>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const PopoverTitle: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface PopoverDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Description>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const PopoverDescription: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export type PopoverCloseProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type PopoverArrowProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>;
+export declare const Popover: Readonly<{
+    Root: typeof PopoverRoot;
+    Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof PopoverPortal;
+    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

package/dist/overlay/Popover.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export function PopoverRoot(props) {
+    return (_jsx(PortalThemeProvider, { children: _jsx(PopoverPrimitive.Root, { ...props }) }));
+}
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwardedRef) {
+    const ref = usePortalTriggerRef(forwardedRef);
+    return _jsx(PopoverPrimitive.Trigger, { ...props, ref: ref });
+});
+export function PopoverPortal({ children, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+    const id = useId();
+    return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
+});
+export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(PopoverPrimitive.Title, { ...props, className: classes('inkra-popover__title', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-popover-title-${id}`, children: children }) }));
+});
+export const PopoverDescription = forwardRef(function PopoverDescription({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(PopoverPrimitive.Description, { ...props, className: classes('inkra-popover__description', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-popover-description-${id}`, children: children }) }));
+});
+export const PopoverClose = forwardRef(function PopoverClose(props, ref) {
+    return _jsx(PopoverPrimitive.Close, { ...props, ref: ref });
+});
+export const Popover = Object.freeze({
+    Root: PopoverRoot,
+    Anchor: PopoverAnchor,
+    Trigger: PopoverTrigger,
+    Portal: PopoverPortal,
+    Content: PopoverContent,
+    Title: PopoverTitle,
+    Description: PopoverDescription,
+    Close: PopoverClose,
+});

package/dist/overlay/index.d.ts

@@ -0,0 +1,4 @@
+export { Overlay, OverlayBackdrop, OverlayClose, OverlayContent, OverlayHeader, OverlayBody, OverlayFooter, OverlayCloseButton, OverlayDescription, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from './Overlay.js';
+export type { OverlayBackdropProps, OverlayCloseProps, OverlayContentProps, OverlayHeaderProps, OverlayBodyProps, OverlayFooterProps, OverlayCloseButtonProps, OverlayDescriptionProps, OverlayPortalProps, OverlayRootProps, OverlayTitleProps, OverlayTriggerProps, } from './Overlay.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverRoot, PopoverTitle, PopoverTrigger, } from './Popover.js';
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverPortalProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from './Popover.js';

package/dist/overlay/index.js

@@ -0,0 +1,2 @@
+export { Overlay, OverlayBackdrop, OverlayClose, OverlayContent, OverlayHeader, OverlayBody, OverlayFooter, OverlayCloseButton, OverlayDescription, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from './Overlay.js';
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverRoot, PopoverTitle, PopoverTrigger, } from './Popover.js';

package/dist/overlay/themeBridge.d.ts

@@ -0,0 +1,8 @@
+import type { ForwardedRef, ReactNode } from 'react';
+export declare function PortalThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePortalTriggerRef<Element extends HTMLElement>(forwardedRef: ForwardedRef<Element>): (node: Element | null) => void;
+export declare const PortalThemeBridge: import("react").ForwardRefExoticComponent<{
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;