@inkra/react 0.2.0 → 0.4.3

package/dist/internal/surfaceRenderer.js

@@ -2,6 +2,8 @@ import { pencilPaper } from './paper.js';
 import { pencilStroke } from './stroke.js';
 import { drawPencilWash } from './wash.js';
 import { pencilRenderDefaults } from './renderTokens.js';
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
+import { releaseSurfaceBitmaps, resizeSurfaceBitmap, resolveSurfaceAllocation } from './surfaceBudget.js';
 export const PENCIL_ACTION_WASH = Object.freeze({
     lightStrength: 0.2,
     darkStrength: 0.12,
@@ -71,19 +73,27 @@ function paperPattern(context, color, dark, dpr) {
     }
     return pattern;
 }
-export function drawPencilSurface(canvas, borderCanvas, width, height, variant, seed, dpr, theme, radius) {
+function allocateSurface(canvas, borderCanvas, width, height, dpr, bleed) {
+    const allocation = resolveSurfaceAllocation(width, height, dpr, bleed, borderCanvas ? 2 : 1);
+    if (!allocation.ok) {
+        releaseSurfaceBitmaps(canvas, borderCanvas);
+        throw new RangeError(`PencilSurface allocation rejected: ${allocation.reason}`);
+    }
+    return allocation;
+}
+function paintPencilSurface(canvas, borderCanvas, width, height, variant, seed, allocation, theme, radius) {
     const bleed = variant === 'wash' ? 12 : 0;
-    canvas.width = Math.ceil((width + bleed * 2) * dpr);
-    canvas.height = Math.ceil((height + bleed * 2) * dpr);
+    const renderDpr = allocation.dpr;
+    resizeSurfaceBitmap(canvas, allocation.width, allocation.height);
     const context = canvas.getContext('2d');
-    if (!context)
+    if (!context) {
+        releaseSurfaceBitmaps(canvas, borderCanvas);
         throw new Error('Canvas 2D is unavailable');
+    }
+    if (borderCanvas)
+        resizeSurfaceBitmap(borderCanvas, allocation.width, allocation.height);
     context.setTransform(canvas.width / (width + bleed * 2), 0, 0, canvas.height / (height + bleed * 2), 0, 0);
     if (variant === 'wash') {
-        if (borderCanvas) {
-            borderCanvas.width = canvas.width;
-            borderCanvas.height = canvas.height;
-        }
         context.translate(bleed, bleed);
         drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
             strength: theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48,
@@ -93,40 +103,28 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
             inset: 2,
             radius: 8,
             edgeReach: 8,
-            dpr,
+            dpr: renderDpr,
         });
         return undefined;
     }
     if (variant === 'selection') {
-        if (borderCanvas) {
-            borderCanvas.width = canvas.width;
-            borderCanvas.height = canvas.height;
-        }
         drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
             strength: (theme.dark ? PENCIL_SELECTION_WASH.darkStrength : PENCIL_SELECTION_WASH.lightStrength) * (theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48),
             spacing: theme.washSettings?.spacing ?? PENCIL_SELECTION_WASH.spacing,
             roughness: theme.washSettings?.roughness ?? PENCIL_SELECTION_WASH.roughness,
             inset: PENCIL_SELECTION_WASH.inset,
-            radius: PENCIL_SELECTION_WASH.radius,
+            radius: radius !== undefined && Number.isFinite(radius) ? Math.max(0, Math.min(radius, 8)) : PENCIL_SELECTION_WASH.radius,
             edgeReach: PENCIL_SELECTION_WASH.edgeReach,
             angle: theme.washSettings?.angle ?? PENCIL_SELECTION_WASH.angle,
-            dpr,
+            dpr: renderDpr,
         });
         return undefined;
     }
     if (variant === 'ghost') {
-        if (borderCanvas) {
-            borderCanvas.width = canvas.width;
-            borderCanvas.height = canvas.height;
-        }
         return undefined;
     }
     if (variant === 'full') {
-        if (borderCanvas) {
-            borderCanvas.width = canvas.width;
-            borderCanvas.height = canvas.height;
-        }
-        context.fillStyle = paperPattern(context, theme.paper, theme.dark, dpr);
+        context.fillStyle = paperPattern(context, theme.paper, theme.dark, renderDpr);
         context.fillRect(0, 0, width, height);
         return undefined;
     }
@@ -144,7 +142,7 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
             context.lineTo(...point);
         context.closePath();
         context.clip();
-        context.fillStyle = paperPattern(context, theme.paper, theme.dark, dpr);
+        context.fillStyle = paperPattern(context, theme.paper, theme.dark, renderDpr);
         context.fillRect(0, 0, width, height);
         if (strength) {
             drawPencilWash(context, { x: 0, y: 0, width, height }, theme.wash, seed, {
@@ -152,15 +150,13 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
                 ...theme.washSettings,
                 strength: strength * (theme.washSettings?.strength ?? pencilRenderDefaults.washStrength / 0.48),
                 radius: resolvedRadius,
-                dpr,
+                dpr: renderDpr,
             });
         }
         context.restore();
     }
     let borderContext = context;
     if (borderCanvas) {
-        borderCanvas.width = canvas.width;
-        borderCanvas.height = canvas.height;
         const separateContext = borderCanvas.getContext('2d');
         if (separateContext) {
             separateContext.setTransform(canvas.width / width, 0, 0, canvas.height / height, 0, 0);
@@ -176,3 +172,66 @@ export function drawPencilSurface(canvas, borderCanvas, width, height, variant,
     });
     return points;
 }
+const surfaceCache = new BoundedCache(64, 16 * 1024 * 1024);
+// Admit only a repeat within the recent working set. Cold mounts and long scans
+// must not pay for snapshots that will be evicted before they are ever reused.
+const surfaceRequests = new BoundedCache(64, 64);
+function copyCanvas(source, target) {
+    resizeSurfaceBitmap(target, source.width, source.height);
+    const context = target.getContext('2d');
+    if (!context || context.isContextLost?.())
+        throw new Error('Canvas 2D is unavailable');
+    context.drawImage(source, 0, 0);
+}
+export function drawPencilSurface(canvas, borderCanvas, width, height, variant, seed, dpr, theme, radius) {
+    // Transparent surfaces have no pixels to allocate or cache.
+    if (variant === 'ghost') {
+        canvas.width = canvas.height = 0;
+        if (borderCanvas)
+            borderCanvas.width = borderCanvas.height = 0;
+        return undefined;
+    }
+    const bleed = variant === 'wash' ? 12 : 0;
+    const allocation = allocateSurface(canvas, borderCanvas, width, height, dpr, bleed);
+    const key = JSON.stringify([
+        PENCIL_RENDERER_VERSION, variant, width, height, seed, allocation.dpr, Boolean(borderCanvas), radius,
+        theme.paper, theme.dark, theme.ink, theme.wash, theme.strokeWidth, theme.strokeRoughness,
+        theme.washSettings?.strength, theme.washSettings?.spacing,
+        theme.washSettings?.roughness, theme.washSettings?.angle,
+    ]);
+    const cached = surfaceCache.get(key);
+    if (cached?.valid && canvasIsUsable(cached.ink) && (!cached.border || canvasIsUsable(cached.border))) {
+        copyCanvas(cached.ink, canvas);
+        if (cached.border && borderCanvas)
+            copyCanvas(cached.border, borderCanvas);
+        return cached.points?.map(([x, y]) => [x, y]);
+    }
+    if (cached)
+        surfaceCache.delete(key);
+    const points = paintPencilSurface(canvas, borderCanvas, width, height, variant, seed, allocation, theme, radius);
+    const cost = canvasByteCost(canvas) + (borderCanvas ? canvasByteCost(borderCanvas) : 0);
+    const repeated = surfaceRequests.get(key) === true;
+    surfaceRequests.set(key, true, 1);
+    // Keep the cache useful for repeated controls, not a single large panel.
+    if (repeated && cost <= 2 * 1024 * 1024) {
+        try {
+            const ink = document.createElement('canvas');
+            const border = borderCanvas ? document.createElement('canvas') : null;
+            copyCanvas(canvas, ink);
+            if (border && borderCanvas)
+                copyCanvas(borderCanvas, border);
+            const image = { ink, border, points: points?.map(([x, y]) => [x, y]), valid: true };
+            // A restored context can report healthy after losing all of its pixels.
+            // Keep that entry invalid even if loss and restoration precede the next hit.
+            const invalidate = () => { image.valid = false; };
+            ink.addEventListener?.('contextlost', invalidate, { once: true });
+            border?.addEventListener?.('contextlost', invalidate, { once: true });
+            surfaceCache.set(key, image, cost);
+        }
+        catch {
+            // Caching is optional: a snapshot allocation failure must not discard a
+            // successfully painted live surface.
+        }
+    }
+    return points;
+}

package/dist/internal/surfaceVisibility.d.ts

@@ -0,0 +1,3 @@
+export declare function surfaceIsNearViewport(root: HTMLElement, margin?: number): boolean;
+/** One observer per document, explicitly released after the final subscription. */
+export declare function observeSurfaceViewport(root: HTMLElement, refresh: () => void): (() => void) | undefined;

package/dist/internal/surfaceVisibility.js

@@ -0,0 +1,60 @@
+// Keep visible/prewarm surfaces synchronous. An offscreen surface retains DOM,
+// geometry and any existing bitmap; only its decorative paint is deferred.
+export function surfaceIsNearViewport(root, margin = 240) {
+    const view = root.ownerDocument?.defaultView;
+    if (!view || !Number.isFinite(view.innerWidth) || !Number.isFinite(view.innerHeight)
+        || typeof root.getBoundingClientRect !== 'function')
+        return true;
+    const rect = root.getBoundingClientRect();
+    if (![rect.left, rect.right, rect.top, rect.bottom].every(Number.isFinite))
+        return true;
+    return rect.bottom >= -margin && rect.top <= view.innerHeight + margin
+        && rect.right >= -margin && rect.left <= view.innerWidth + margin;
+}
+const documents = new WeakMap();
+/** One observer per document, explicitly released after the final subscription. */
+export function observeSurfaceViewport(root, refresh) {
+    if (typeof IntersectionObserver === 'undefined' || !root.ownerDocument)
+        return undefined;
+    const document = root.ownerDocument;
+    let state = documents.get(document);
+    if (!state) {
+        const callbacks = new Map();
+        try {
+            const observer = new IntersectionObserver(entries => {
+                for (const entry of entries)
+                    if (entry.isIntersecting)
+                        callbacks.get(entry.target)?.();
+            }, { rootMargin: '240px', threshold: 0 });
+            state = { observer, callbacks };
+            documents.set(document, state);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    const current = state;
+    current.callbacks.set(root, refresh);
+    try {
+        current.observer.observe(root);
+    }
+    catch {
+        current.callbacks.delete(root);
+        if (!current.callbacks.size) {
+            current.observer.disconnect();
+            documents.delete(document);
+        }
+        return undefined;
+    }
+    return () => {
+        // Ignore a stale unsubscribe if a newer owner registered the same element.
+        if (current.callbacks.get(root) !== refresh)
+            return;
+        current.callbacks.delete(root);
+        current.observer.unobserve(root);
+        if (!current.callbacks.size) {
+            current.observer.disconnect();
+            documents.delete(document);
+        }
+    };
+}

package/dist/internal/textRenderer.d.ts

@@ -19,6 +19,8 @@ export declare const pencilHandwriting = "\"Trip Map Hand\",\"HanziPen SC\",\"Ha
 export declare function renderPencilText(text: string, options: {
     size: number;
     family?: string;
+    weight?: string;
+    style?: string;
     color: string;
     seed: number;
     dpr: number;

package/dist/internal/textRenderer.js

@@ -76,13 +76,13 @@ export function renderPencilText(text, options) {
         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}`;
+    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,
         text,
         size,
-        family,
+        font,
         color,
         seed,
         dpr,
@@ -131,7 +131,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/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/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

@@ -56,9 +56,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 +70,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 +105,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 +141,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;