@inkra/react 0.3.0 → 0.5.0

package/dist/internal/textRenderer.js

@@ -9,6 +9,11 @@ export const pencilLettering = Object.freeze({
 });
 export const pencilHandwriting = '"Trip Map Hand","HanziPen SC","Hannotate SC","Kaiti SC","STKaiti",cursive';
 const TEXT_PIXEL_LIMIT = 524288;
+export function boundedTextResolution(width, height, dpr) {
+    if (![width, height, dpr].every(value => Number.isFinite(value) && value > 0))
+        return 0;
+    return Math.floor(Math.min(Math.max(2, Math.min(4, Math.ceil(dpr * 2))), Math.sqrt(TEXT_PIXEL_LIMIT / (width * height)), 8192 / width, 8192 / height));
+}
 const textCache = new BoundedCache(160, 16 * 1024 * 1024);
 const glyphCache = new BoundedCache(512, 8 * 1024 * 1024);
 const clamp = (value) => Math.max(0, Math.min(1, value));
@@ -75,14 +80,15 @@ export function renderPencilText(text, options) {
     if (text.length > 256 || !Number.isFinite(size) || size <= 0 || size > 128) {
         throw new RangeError('Pencil text exceeds the bounded renderer input');
     }
-    const resolution = Math.max(2, Math.min(4, Math.ceil(dpr * 2)));
-    const font = `400 ${size}px ${family}`;
+    let resolution = Math.max(2, Math.min(4, Math.ceil(dpr * 2)));
+    const font = `${options.style ?? 'normal'} ${options.weight ?? '400'} ${size}px ${family}`;
     const fontReady = document.fonts?.check(font, text) ?? false;
     const key = cache ? JSON.stringify([
         PENCIL_RENDERER_VERSION,
+        'adaptive-text-raster-v1',
         text,
         size,
-        family,
+        font,
         color,
         seed,
         dpr,
@@ -113,7 +119,9 @@ export function renderPencilText(text, options) {
     const descent = Math.ceil(size * 0.35);
     const width = advance + padding * 2;
     const height = ascent + descent + padding * 2;
-    if (width * height * resolution ** 2 > TEXT_PIXEL_LIMIT) {
+    // Wide lines on Retina displays can retain pencil ink at a lower sampling rate.
+    resolution = boundedTextResolution(width, height, dpr);
+    if (resolution < 1) {
         throw new RangeError('Pencil text exceeds the bounded pixel budget');
     }
     mask.width = width * resolution;
@@ -131,7 +139,7 @@ export function renderPencilText(text, options) {
                 const characterSeed = (options.glyphSeed ^ Math.imul(character.charCodeAt(0), 16777619)
                     ^ Math.imul(index % 3, 374761393)) >>> 0;
                 const glyphKey = JSON.stringify([
-                    PENCIL_RENDERER_VERSION, character, size, family, color, characterSeed,
+                    PENCIL_RENDERER_VERSION, character, size, font, color, characterSeed,
                     resolution, settings, document.fonts?.check(font, character),
                 ]);
                 let glyph = glyphCache.get(glyphKey);

package/dist/internal/usePencilSurface.js

@@ -3,9 +3,13 @@ import { PENCIL_RENDERER_VERSION, effectiveDpr } from './cache.js';
 import { observeCanvasRecovery } from './recovery.js';
 import { seedToNumber } from './random.js';
 import { drawPencilSurface } from './surfaceRenderer.js';
+import { releaseSurfaceBitmaps } from './surfaceBudget.js';
+import { observeSurfaceViewport, surfaceIsNearViewport } from './surfaceVisibility.js';
 import { maxStrokeRoughness, pencilRenderDefaults, readRenderToken } from './renderTokens.js';
 function token(style, name, fallback) {
-    return style.getPropertyValue(name).trim() || fallback;
+    const value = style.getPropertyValue(name).trim() || fallback;
+    // Offscreen material canvases have no inherited DOM foreground.
+    return value.toLowerCase() === 'currentcolor' ? style.color : value;
 }
 export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, clipContent, radius) {
     useBrowserLayoutEffect(() => {
@@ -16,10 +20,18 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
         let frame = 0;
         let lastPaint = '';
         let disposed = false;
+        let deferOffscreen = false;
         const paint = () => {
             frame = 0;
             if (disposed)
                 return;
+            if (deferOffscreen && !surfaceIsNearViewport(root)) {
+                // A new canvas otherwise retains its implicit 300x150 blank bitmap.
+                // Keep valid painted pixels when merely scrolling out of view.
+                if (!lastPaint)
+                    releaseSurfaceBitmaps(canvas, borderRef.current);
+                return;
+            }
             const width = root.clientWidth;
             const height = root.clientHeight;
             if (width < 6 || height < 6)
@@ -80,6 +92,7 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
                 lastPaint = paintKey;
             }
             catch {
+                releaseSurfaceBitmaps(canvas, borderRef.current);
                 root.dataset.pencilFallback = 'true';
                 root.style.removeProperty('--inkra-pencil-clip');
                 lastPaint = '';
@@ -89,6 +102,8 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
             if (!frame)
                 frame = requestAnimationFrame(paint);
         };
+        const stopViewport = observeSurfaceViewport(root, schedule);
+        deferOffscreen = stopViewport !== undefined;
         const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
         resize?.observe(root);
         window.addEventListener('resize', schedule, { passive: true });
@@ -106,6 +121,7 @@ export function usePencilSurface(rootRef, canvasRef, borderRef, variant, seed, c
         return () => {
             disposed = true;
             stopRecovery();
+            stopViewport?.();
             resize?.disconnect();
             inheritedStyle.disconnect();
             colorScheme.removeEventListener('change', schedule);

package/dist/internal/wash.js

@@ -1,4 +1,4 @@
-import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, boundedCanvasSize, canvasByteCost, canvasIsUsable } from './cache.js';
 import { pencilStroke } from './stroke.js';
 const washCache = new BoundedCache(64, 32 * 1024 * 1024);
 function randomAt(index, seed) {
@@ -9,9 +9,10 @@ function randomAt(index, seed) {
 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 pixels = boundedCanvasSize(width + bleed * 2, height + bleed * 2, dpr);
     const canvas = document.createElement('canvas');
-    canvas.width = Math.ceil((width + bleed * 2) * dpr);
-    canvas.height = Math.ceil((height + bleed * 2) * dpr);
+    canvas.width = pixels.width;
+    canvas.height = pixels.height;
     const context = canvas.getContext('2d');
     if (!context)
         return canvas;

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

@@ -36,4 +36,4 @@ export interface JourneyMapProps extends HTMLAttributes<HTMLDivElement> {
         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;
+export declare function JourneyMap({ places, routes, geography, landCover, water, selectedPlace, onPlaceSelect, attribution, attributionDisplay, height, interactive, scrollWheelZoom, showControls, showPlaceList, focusSelectedPlace, labels: labelOverrides, className, ...props }: JourneyMapProps): import("react").JSX.Element;

package/dist/journey-map/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../Button.js';
@@ -9,10 +10,12 @@ 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 defaults = (t) => ({ zoomIn: t('common.zoomIn'), zoomOut: t('common.zoomOut'), reset: t('common.resetView'), unavailable: t('map.unavailable') });
 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 }) {
+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: labelOverrides, className, ...props }) {
+    const { t } = useInkraLocale();
+    const labels = { ...defaults(t), ...labelOverrides };
     const root = useRef(null);
     const host = useRef(null);
     const mapRef = useRef(null);
@@ -193,5 +196,5 @@ export function JourneyMap({ places, routes = noRoutes, geography, landCover, wa
         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)) })] });
+    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 ?? t('map.credits'), title: labels.attribution ?? t('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 ?? t('map.credits') }), _jsx(Popover.Description, { children: attribution })] }) })] }) }), _jsx("div", { ref: host, className: "inkra-journey-map__host", "aria-label": props['aria-label'] ?? t('map.label') }), 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.js

@@ -55,11 +55,16 @@ export function paintTerrain(ctx, data, project, width, height, dark, defaultKin
         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])));
+            let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+            for (const ring of rings)
+                for (const [x, y] of ring) {
+                    minX = Math.min(minX, x);
+                    maxX = Math.max(maxX, x);
+                    minY = Math.min(minY, y);
+                    maxY = Math.max(maxY, y);
+                }
+            const left = Math.max(0, minX), right = Math.min(width, maxX);
+            const top = Math.max(0, minY), bottom = Math.min(height, maxY);
             if (left >= right || top >= bottom)
                 continue;
             ctx.save();

package/dist/keypad/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useId, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
@@ -20,7 +21,9 @@ function keyVariant(key) {
         return 'secondary';
     return 'default';
 }
-export const Keypad = forwardRef(function Keypad({ 'aria-label': ariaLabel, className, defaultValue = '', disabled = false, emptyContent = null, label = 'Keypad', layout, maxLength, onConfirm, onKeyPress, onValueChange, value, ...props }, ref) {
+export const Keypad = forwardRef(function Keypad(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { 'aria-label': ariaLabel, className, defaultValue = '', disabled = false, emptyContent = null, label = t('keypad.label'), layout, maxLength, onConfirm, onKeyPress, onValueChange, value, ...props } = inkraProps;
     const id = useId();
     const controlled = value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);

package/dist/layout/index.js

@@ -56,7 +56,7 @@ const LayoutSidebar = forwardRef(function LayoutSidebar({ as: Element = 'aside',
 const LayoutContent = forwardRef(function LayoutContent({ as: Element = 'div', padding = 5, className, style, ...props }, ref) {
     return _jsx(Box, { as: Element, ...props, ref: ref, className: classes('inkra-layout__content', className), style: { padding: space(padding), ...style } });
 });
-export const Layout = Object.freeze({
+export const Layout = /* @__PURE__ */ Object.freeze({
     Root: LayoutRoot, Header: LayoutHeader, Body: LayoutBody,
     Sidebar: LayoutSidebar, Content: LayoutContent, Footer: LayoutFooter,
 });

package/dist/log/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
@@ -7,16 +8,16 @@ import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 import { isNearLogBottom, shouldFollowLogUpdate } from './model.js';
-const defaultLabels = {
-    filters: 'Filter log levels',
-    allLevels: 'All',
-    pause: 'Pause automatic follow',
-    resume: 'Resume automatic follow',
-    latest: 'Go to latest record',
-    empty: 'No records yet',
-    noMatches: 'No records match the selected levels',
-    list: 'Log records',
-};
+const defaultLabels = (t) => ({
+    filters: t('log.filters'),
+    allLevels: t('common.all'),
+    pause: t('log.pause'),
+    resume: t('log.resume'),
+    latest: t('log.latest'),
+    empty: t('log.empty'),
+    noMatches: t('log.noMatches'),
+    list: t('log.list'),
+});
 const defaultTones = {
     debug: 'neutral',
     info: 'info',
@@ -42,7 +43,8 @@ function normalizedThreshold(value) {
     return Number.isFinite(value) ? Math.max(0, value) : 32;
 }
 export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className, defaultFilteredLevels, defaultPaused = false, empty, filteredLevels, items, labels: labelOverrides, levels, nearBottomThreshold, noMatches, onFilteredLevelsChange, onPausedChange, paused, showFollowControl = true, showLevelFilter = true, viewportProps, ...props }, ref) {
-    const labels = { ...defaultLabels, ...labelOverrides };
+    const { t } = useInkraLocale();
+    const labels = { ...defaultLabels(t), ...labelOverrides };
     const resolvedLevels = useMemo(() => {
         if (levels)
             return levels;
@@ -56,9 +58,11 @@ export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className,
     }, [items, levels]);
     const availableLevels = useMemo(() => new Set(resolvedLevels.map(level => level.value)), [resolvedLevels]);
     const [uncontrolledLevels, setUncontrolledLevels] = useState(defaultFilteredLevels);
-    const selectedLevels = (filteredLevels ?? uncontrolledLevels)?.filter(level => availableLevels.has(level));
+    const requestedLevels = filteredLevels ?? uncontrolledLevels;
+    const selectedLevels = useMemo(() => requestedLevels?.filter(level => availableLevels.has(level)), [requestedLevels, availableLevels]);
+    const selectedLevelSet = useMemo(() => selectedLevels === undefined ? undefined : new Set(selectedLevels), [selectedLevels]);
     const allLevelsSelected = selectedLevels == null
-        || (selectedLevels.length === resolvedLevels.length && resolvedLevels.every(level => selectedLevels.includes(level.value)));
+        || (selectedLevels.length === resolvedLevels.length && resolvedLevels.every(level => selectedLevelSet.has(level.value)));
     const [uncontrolledPaused, setUncontrolledPaused] = useState(defaultPaused);
     const resolvedPaused = paused ?? uncontrolledPaused;
     const [nearBottom, setNearBottom] = useState(true);
@@ -68,16 +72,20 @@ export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className,
     const previousPausedRef = useRef(resolvedPaused);
     const nearBottomRef = useRef(true);
     const threshold = normalizedThreshold(nearBottomThreshold);
-    const visibleItems = selectedLevels == null
+    const visibleItems = useMemo(() => selectedLevelSet === undefined
         ? items
-        : items.filter(item => item.level != null && selectedLevels.includes(item.level));
-    const itemIds = items.map(item => item.id);
-    const visibleIds = visibleItems.map(item => item.id);
+        : items.filter(item => item.level != null && selectedLevelSet.has(item.level)), [items, selectedLevelSet]);
+    const itemIds = useMemo(() => items.map(item => item.id), [items]);
+    const visibleIds = useMemo(() => visibleItems.map(item => item.id), [visibleItems]);
     const scrollToLatest = useCallback((behavior = 'smooth') => {
         const viewport = viewportRef.current;
         if (!viewport)
             return;
-        viewport.scrollTo({ top: viewport.scrollHeight, behavior });
+        const resolvedBehavior = behavior === 'smooth'
+            && viewport.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches
+            ? 'auto'
+            : behavior;
+        viewport.scrollTo({ top: viewport.scrollHeight, behavior: resolvedBehavior });
         nearBottomRef.current = true;
         setNearBottom(true);
     }, []);
@@ -99,7 +107,7 @@ export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className,
         previousItemIdsRef.current = itemIds;
         previousVisibleIdsRef.current = visibleIds;
         previousPausedRef.current = resolvedPaused;
-    }, [itemIds.join('\u0000'), resolvedPaused, scrollToLatest, visibleIds.join('\u0000')]);
+    }, [itemIds, resolvedPaused, scrollToLatest, visibleIds]);
     function changePaused(nextPaused) {
         if (paused === undefined)
             setUncontrolledPaused(nextPaused);
@@ -135,25 +143,26 @@ export const Log = forwardRef(function Log({ 'aria-label': ariaLabel, className,
     const viewportLabel = viewportProps?.['aria-label'] ?? ariaLabel ?? labels.list;
     const viewportClassName = classes('inkra-log__viewport', viewportProps?.className);
     const viewportTabIndex = viewportProps?.tabIndex ?? 0;
-    const levelMap = new Map(resolvedLevels.map(level => [level.value, level]));
+    const levelMap = useMemo(() => new Map(resolvedLevels.map(level => [level.value, level])), [resolvedLevels]);
+    const showLatest = (!nearBottom || resolvedPaused) && visibleItems.length > 0;
     return (_jsxs(PencilSurface, { ...props, as: "div", className: classes('inkra-log', className), "data-paused": resolvedPaused || undefined, "data-toolbar": ((showLevelFilter && resolvedLevels.length > 0) || showFollowControl) || undefined, ref: ref, variant: "paper", children: [(showLevelFilter && resolvedLevels.length > 0) || showFollowControl ? _jsxs("div", { className: "inkra-log__toolbar", children: [showLevelFilter && resolvedLevels.length > 0 ? _jsxs("div", { "aria-label": labels.filters, className: "inkra-log__filters", role: "group", children: [_jsx(Button, { "aria-pressed": !hasFilter, size: "sm", variant: !hasFilter ? 'secondary' : 'ghost', onClick: () => changeLevels(undefined), children: labels.allLevels }), resolvedLevels.map(level => {
-                                const selected = allLevelsSelected || selectedLevels?.includes(level.value) === true;
+                                const selected = allLevelsSelected || selectedLevelSet?.has(level.value) === true;
                                 return _jsx(Button, { "aria-pressed": selected, "data-level": level.value, "data-tone": level.tone ?? defaultTones[level.value] ?? 'neutral', size: "sm", variant: selected ? 'secondary' : 'ghost', onClick: () => {
                                         const active = selectedLevels ?? resolvedLevels.map(option => option.value);
                                         changeLevels(selected
                                             ? active.filter(value => value !== level.value)
                                             : [...active, level.value]);
                                     }, children: level.label }, level.value);
-                            })] }) : null, showFollowControl ? _jsx(Button, { "aria-pressed": resolvedPaused, className: "inkra-log__follow-control", size: "sm", startIcon: _jsx(PencilIcon, { paths: resolvedPaused ? followPaths : pausePaths, size: 18, sourceSize: 24 }), variant: "outline", onClick: () => changePaused(!resolvedPaused), children: resolvedPaused ? labels.resume : labels.pause }) : null, _jsx(PencilLine, { className: "inkra-log__toolbar-divider", seed: "inkra-log-toolbar-divider" })] }) : null, _jsx("div", { ...viewportProps, "aria-label": viewportLabel, className: viewportClassName, onKeyDown: handleViewportKeyDown, onScroll: handleScroll, ref: viewportRef, role: "region", tabIndex: viewportTabIndex, children: visibleItems.length > 0 ? _jsx("ol", { className: "inkra-log__list", children: visibleItems.map((item, index) => {
-                        const definition = item.level ? levelMap.get(item.level) : undefined;
-                        const tone = definition?.tone ?? (item.level ? defaultTones[item.level] : undefined) ?? 'neutral';
-                        return _jsxs("li", { className: "inkra-log__item", "data-has-icon": item.icon != null || undefined, "data-level": item.level, "data-tone": tone, children: [index > 0 ? _jsx(PencilLine, { className: "inkra-log__item-divider", seed: `inkra-log-item-${item.id}-divider` }) : null, item.icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-log__icon", children: item.icon }), _jsxs("div", { className: "inkra-log__record", children: [item.time == null && item.level == null ? null : _jsxs("div", { className: "inkra-log__meta", children: [item.time == null ? null : item.dateTime
-                                                    ? _jsx("time", { dateTime: item.dateTime, children: renderText(item.time) })
-                                                    : _jsx("span", { children: renderText(item.time) }), item.level == null ? null : _jsx("span", { className: "inkra-log__level", children: renderText(definition?.label ?? item.level) })] }), _jsx("div", { className: "inkra-log__content", children: renderText(item.content) })] })] }, item.id);
-                    }) }) : _jsx("div", { className: "inkra-log__empty", children: renderText(isEmpty ? (empty ?? labels.empty) : (noMatches ?? labels.noMatches)) }) }), (!nearBottom || resolvedPaused) && visibleItems.length > 0 ? _jsx("div", { className: "inkra-log__latest", children: _jsx(Button, { size: "sm", startIcon: _jsx(PencilIcon, { paths: followPaths, size: 18, sourceSize: 24 }), variant: "secondary", onClick: () => {
-                        if (resolvedPaused)
-                            changePaused(false);
-                        else
-                            scrollToLatest();
-                    }, children: resolvedPaused ? labels.resume : labels.latest }) }) : null] }));
+                            })] }) : null, showFollowControl ? _jsx(Button, { "aria-pressed": resolvedPaused, className: "inkra-log__follow-control", size: "sm", startIcon: _jsx(PencilIcon, { paths: resolvedPaused ? followPaths : pausePaths, size: 18, sourceSize: 24 }), variant: "outline", onClick: () => changePaused(!resolvedPaused), children: resolvedPaused ? labels.resume : labels.pause }) : null, _jsx(PencilLine, { className: "inkra-log__toolbar-divider", seed: "inkra-log-toolbar-divider" })] }) : null, _jsxs("div", { className: "inkra-log__viewport-frame", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-log__focus-ring", variant: "outline", seed: "inkra-log-focus" }), _jsx("div", { ...viewportProps, "aria-label": viewportLabel, className: viewportClassName, onKeyDown: handleViewportKeyDown, onScroll: handleScroll, ref: viewportRef, role: "region", tabIndex: viewportTabIndex, children: visibleItems.length > 0 ? _jsx("ol", { className: "inkra-log__list", children: visibleItems.map((item, index) => {
+                                const definition = item.level ? levelMap.get(item.level) : undefined;
+                                const tone = definition?.tone ?? (item.level ? defaultTones[item.level] : undefined) ?? 'neutral';
+                                return _jsxs("li", { className: "inkra-log__item", "data-has-icon": item.icon != null || undefined, "data-level": item.level, "data-tone": tone, children: [index > 0 ? _jsx(PencilLine, { className: "inkra-log__item-divider", seed: `inkra-log-item-${item.id}-divider` }) : null, item.icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-log__icon", children: item.icon }), _jsxs("div", { className: "inkra-log__record", children: [item.time == null && item.level == null ? null : _jsxs("div", { className: "inkra-log__meta", children: [item.time == null ? null : item.dateTime
+                                                            ? _jsx("time", { dateTime: item.dateTime, children: renderText(item.time) })
+                                                            : _jsx("span", { children: renderText(item.time) }), item.level == null ? null : _jsx("span", { className: "inkra-log__level", children: renderText(definition?.label ?? item.level) })] }), _jsx("div", { className: "inkra-log__content", children: renderText(item.content) })] })] }, item.id);
+                            }) }) : _jsx("div", { className: "inkra-log__empty", children: renderText(isEmpty ? (empty ?? labels.empty) : (noMatches ?? labels.noMatches)) }) })] }), showLatest ? _jsxs("div", { className: "inkra-log__latest", children: [_jsx(PencilLine, { className: "inkra-log__latest-divider", seed: "inkra-log-latest-divider" }), _jsx(Button, { size: "sm", startIcon: _jsx(PencilIcon, { paths: followPaths, size: 18, sourceSize: 24 }), variant: "secondary", onClick: () => {
+                            if (resolvedPaused)
+                                changePaused(false);
+                            else
+                                scrollToLatest();
+                        }, children: resolvedPaused ? labels.resume : labels.latest })] }) : null] }));
 });

package/dist/markdown/CodeBlock.d.ts

@@ -0,0 +1,19 @@
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-tsx.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-markdown.js';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface MarkdownCodeLabels {
+    plainText: string;
+    copy: string;
+    copied: string;
+    copyFailed: string;
+}
+export interface MarkdownCodeBlockProps extends Omit<ComponentPropsWithoutRef<'pre'>, 'children'> {
+    code: string;
+    codeClassName?: string;
+    labels: MarkdownCodeLabels;
+}
+export declare function MarkdownCodeBlock({ code, codeClassName, className, labels, tabIndex: _tabIndex, ...props }: MarkdownCodeBlockProps): import("react").JSX.Element;

package/dist/markdown/CodeBlock.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Prism from 'prismjs';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-tsx.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-markdown.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { Card } from '../content/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { codeIcons } from './icons.js';
+Prism.manual = true;
+const languageAliases = {
+    js: 'javascript',
+    md: 'markdown',
+    sh: 'bash',
+    shell: 'bash',
+    ts: 'typescript',
+    txt: 'plain',
+    text: 'plain',
+    plaintext: 'plain',
+};
+const languageNames = {
+    javascript: 'JavaScript', typescript: 'TypeScript', jsx: 'JSX', tsx: 'TSX',
+    bash: 'Bash', json: 'JSON', markdown: 'Markdown', css: 'CSS', html: 'HTML',
+};
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function flatten(stream, inheritedClasses = '') {
+    const tokens = Array.isArray(stream) ? stream : [stream];
+    return tokens.flatMap(token => {
+        if (typeof token === 'string')
+            return [{ text: token, classes: inheritedClasses }];
+        const aliases = Array.isArray(token.alias) ? token.alias : token.alias ? [token.alias] : [];
+        const tokenClasses = classes(inheritedClasses, `token-${token.type}`, ...aliases.map(alias => `token-${alias}`));
+        return flatten(token.content, tokenClasses);
+    });
+}
+function languageFromClassName(className) {
+    return /(?:^|\s)language-([^\s]+)/.exec(className ?? '')?.[1]?.toLowerCase();
+}
+function tokenize(code, language) {
+    const normalized = languageAliases[language ?? ''] ?? language ?? 'plain';
+    const grammar = Prism.languages[normalized] ?? Prism.languages.plain;
+    return flatten(Prism.tokenize(code, grammar)).flatMap(part => part.text.split(/(\r\n|\r|\n)/).filter(Boolean).map(text => ({ ...part, text })));
+}
+export function MarkdownCodeBlock({ code, codeClassName, className, labels, tabIndex: _tabIndex, ...props }) {
+    const language = languageFromClassName(codeClassName);
+    const normalizedLanguage = languageAliases[language ?? ''] ?? language ?? 'plain';
+    const languageLabel = normalizedLanguage === 'plain' ? labels.plainText : languageNames[normalizedLanguage] ?? language;
+    const parts = useMemo(() => tokenize(code, language), [code, language]);
+    const [status, setStatus] = useState('idle');
+    const request = useRef(0);
+    const timer = useRef(undefined);
+    useEffect(() => {
+        setStatus('idle');
+        return () => { request.current += 1; clearTimeout(timer.current); };
+    }, [code]);
+    const copyLabel = status === 'copied' ? labels.copied : status === 'failed' ? labels.copyFailed : labels.copy;
+    async function copyCode() {
+        const id = ++request.current;
+        clearTimeout(timer.current);
+        setStatus('copying');
+        try {
+            await navigator.clipboard.writeText(code);
+            if (request.current !== id)
+                return;
+            setStatus('copied');
+        }
+        catch {
+            if (request.current !== id)
+                return;
+            setStatus('failed');
+        }
+        timer.current = setTimeout(() => setStatus('idle'), 2000);
+    }
+    return _jsxs(Card.Root, { className: "inkra-markdown__code-frame", radius: 6, seed: `markdown-code-frame-${language ?? 'plain'}`, children: [_jsx(Card.Header, { className: "inkra-markdown__code-header", align: "center", action: _jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { size: "icon", variant: "ghost", "aria-label": copyLabel, "aria-busy": status === 'copying' || undefined, disabled: status === 'copying', onClick: () => void copyCode(), children: _jsx(PencilIcon, { paths: status === 'copied' ? codeIcons.check : codeIcons.copy, size: 22 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: copyLabel }) })] }) }), children: _jsxs("span", { className: "inkra-markdown__code-language", children: [_jsx(PencilIcon, { paths: normalizedLanguage === 'bash' ? codeIcons.terminal : codeIcons.code, size: 22 }), _jsx(PencilText, { children: languageLabel })] }) }), _jsx("pre", { ...props, className: classes('inkra-markdown__code-surface', className), "data-language": language ?? 'plain', tabIndex: 0, children: _jsx("code", { className: classes('inkra-markdown__code', codeClassName), children: parts.map((part, index) => /\S/.test(part.text)
+                        ? _jsx(PencilText, { className: classes('inkra-markdown__code-token', part.classes), seed: `markdown-code-${language ?? 'plain'}-${index}-${part.text}`, children: part.text }, index)
+                        : part.text) }) }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-markdown__code-focus", radius: 6, seed: "markdown-code-focus", variant: "outline" }), _jsx("span", { className: "inkra-markdown__code-status", role: "status", children: status === 'copied' ? labels.copied : status === 'failed' ? labels.copyFailed : '' })] });
+}

package/dist/markdown/Deletion.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export declare function Deletion({ children, className, ...props }: ComponentPropsWithoutRef<'del'>): import("react").JSX.Element;

package/dist/markdown/Deletion.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+export function Deletion({ children, className, ...props }) {
+    const ref = useRef(null);
+    const [lines, setLines] = useState([]);
+    useBrowserLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !document.createElement('canvas').getContext('2d'))
+            return;
+        let disposed = false;
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const box = node.getBoundingClientRect();
+            const scaleX = node.offsetWidth ? box.width / node.offsetWidth : 1;
+            const scaleY = node.offsetHeight ? box.height / node.offsetHeight : 1;
+            const fragments = [];
+            const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
+            const range = document.createRange();
+            // Use native line fragments, not one line through the whole wrapped block.
+            for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+                if (!text.textContent?.trim() || text.parentElement?.closest('[aria-hidden="true"]'))
+                    continue;
+                range.selectNodeContents(text);
+                for (const rect of range.getClientRects()) {
+                    if (!rect.width || !rect.height)
+                        continue;
+                    const top = (rect.top - box.top + rect.height * 0.52) / (scaleY || 1) - 3;
+                    const left = (rect.left - box.left) / (scaleX || 1);
+                    const width = rect.width / (scaleX || 1);
+                    const line = fragments.find(item => Math.abs(item.top - top) < 3);
+                    if (line) {
+                        const end = Math.max(line.left + line.width, left + width);
+                        line.left = Math.min(line.left, left);
+                        line.width = end - line.left;
+                    }
+                    else
+                        fragments.push({ left, top, width });
+                }
+            }
+            const next = fragments.map(line => ({
+                left: Math.round(line.left * 2) / 2,
+                top: Math.round(line.top * 2) / 2,
+                width: Math.round(line.width * 2) / 2,
+            }));
+            setLines(previous => JSON.stringify(previous) === JSON.stringify(next) ? previous : next);
+        };
+        const schedule = () => {
+            if (!disposed && !frame)
+                frame = requestAnimationFrame(measure);
+        };
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        observer?.observe(node);
+        document.fonts?.addEventListener('loadingdone', schedule);
+        document.fonts?.ready.then(schedule);
+        measure();
+        return () => {
+            disposed = true;
+            observer?.disconnect();
+            document.fonts?.removeEventListener('loadingdone', schedule);
+            cancelAnimationFrame(frame);
+        };
+    }, [children]);
+    return _jsxs("del", { ...props, className: ['inkra-markdown__deleted', className].filter(Boolean).join(' '), ref: ref, "data-pencil-strike-ready": lines.length > 0 || undefined, children: [children, lines.map((line, index) => _jsx(PencilLine, { className: "inkra-markdown__strike", seed: `markdown-strike-${index}`, weight: 0.7, roughness: 0.4, style: { left: line.left, top: line.top, width: line.width } }, index))] });
+}

package/dist/markdown/icons.d.ts

@@ -0,0 +1,14 @@
+export declare const codeIcons: {
+    copy: {
+        d: string;
+    }[];
+    check: {
+        d: string;
+    }[];
+    terminal: {
+        d: string;
+    }[];
+    code: {
+        d: string;
+    }[];
+};

package/dist/markdown/icons.js

@@ -0,0 +1,16 @@
+import { __iconData as copy } from 'lucide-react/dist/esm/icons/copy.mjs';
+import { __iconData as check } from 'lucide-react/dist/esm/icons/check.mjs';
+import { __iconData as terminal } from 'lucide-react/dist/esm/icons/terminal.mjs';
+import { __iconData as code } from 'lucide-react/dist/esm/icons/code-xml.mjs';
+function paths(data) {
+    return data.node.flatMap(([tag, attributes]) => {
+        if (tag === 'path')
+            return [{ d: attributes.d }];
+        if (tag !== 'rect')
+            return [];
+        const { x = 0, y = 0, width = 0, height = 0, rx = 0 } = Object.fromEntries(Object.entries(attributes).map(([key, value]) => [key, Number(value)]));
+        const r = Math.min(rx, width / 2, height / 2);
+        return [{ d: `M${x + r} ${y}H${x + width - r}Q${x + width} ${y} ${x + width} ${y + r}V${y + height - r}Q${x + width} ${y + height} ${x + width - r} ${y + height}H${x + r}Q${x} ${y + height} ${x} ${y + height - r}V${y + r}Q${x} ${y} ${x + r} ${y}Z` }];
+    });
+}
+export const codeIcons = { copy: paths(copy), check: paths(check), terminal: paths(terminal), code: paths(code) };

package/dist/markdown/index.d.ts

@@ -0,0 +1,17 @@
+import type { Components } from 'react-markdown';
+import { type ComponentPropsWithoutRef } from 'react';
+import { type MarkdownCodeLabels } from './CodeBlock.js';
+export interface MarkdownLabels extends Partial<MarkdownCodeLabels> {
+    code?: string;
+    table?: string;
+    taskChecked?: string;
+    taskUnchecked?: string;
+}
+export interface MarkdownProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children: string;
+    components?: Components;
+    headingLevelOffset?: number;
+    labels?: MarkdownLabels;
+    transformUrl?: (url: string, kind: 'link' | 'image') => string | null | undefined;
+}
+export declare const Markdown: import("react").ForwardRefExoticComponent<MarkdownProps & import("react").RefAttributes<HTMLDivElement>>;