@inkra/react 0.3.0 → 0.4.3

package/dist/image-viewer/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { __iconData as chevronLeftIcon } from 'lucide-react/dist/esm/icons/chevron-left.mjs';
 import { __iconData as chevronRightIcon } from 'lucide-react/dist/esm/icons/chevron-right.mjs';
 import { __iconData as imageOffIcon } from 'lucide-react/dist/esm/icons/image-off.mjs';
+import { __iconData as playIcon } from 'lucide-react/dist/esm/icons/play.mjs';
 import { __iconData as rotateIcon } from 'lucide-react/dist/esm/icons/rotate-cw.mjs';
 import { __iconData as zoomInIcon } from 'lucide-react/dist/esm/icons/zoom-in.mjs';
 import { __iconData as zoomOutIcon } from 'lucide-react/dist/esm/icons/zoom-out.mjs';
@@ -11,14 +12,17 @@ import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { PanZoom } from '../pan-zoom/index.js';
-import { OverlayBackdrop, OverlayContent, OverlayDescription, OverlayHeader, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from '../overlay/index.js';
+import { OverlayBackdrop, OverlayCloseButton, OverlayContent, OverlayDescription, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from '../overlay/index.js';
+import { lucideNodesToPencilPaths } from './lucideGeometry.js';
 import { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';
-const chevronLeftPaths = chevronLeftIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-const chevronRightPaths = chevronRightIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-const imageOffPaths = imageOffIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-const rotatePaths = rotateIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-const zoomInPaths = zoomInIcon.node.map(([, attributes]) => ({ d: attributes.d }));
-const zoomOutPaths = zoomOutIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+import { VideoResource } from './VideoResource.js';
+const chevronLeftPaths = lucideNodesToPencilPaths(chevronLeftIcon.node);
+const chevronRightPaths = lucideNodesToPencilPaths(chevronRightIcon.node);
+const imageOffPaths = lucideNodesToPencilPaths(imageOffIcon.node);
+const playPaths = lucideNodesToPencilPaths(playIcon.node);
+const rotatePaths = lucideNodesToPencilPaths(rotateIcon.node);
+const zoomInPaths = lucideNodesToPencilPaths(zoomInIcon.node);
+const zoomOutPaths = lucideNodesToPencilPaths(zoomOutIcon.node);
 const ImageViewerContext = createContext(null);
 function useImageViewerContext() {
     const context = useContext(ImageViewerContext);
@@ -73,9 +77,10 @@ export function ImageViewerRoot({ activeId, defaultActiveId, defaultOpen = false
         activeItem: selection.index < 0 ? null : items[selection.index],
         activeIndex: selection.index,
         loop,
+        open: openControlled ? Boolean(open) : internalOpen,
         selectIndex,
         step,
-    }), [items, loop, selectIndex, selection.index, step]);
+    }), [internalOpen, items, loop, open, openControlled, selectIndex, selection.index, step]);
     return (_jsx(ImageViewerContext.Provider, { value: context, children: _jsx(OverlayRoot, { ...props, open: openControlled ? open : internalOpen, onOpenChange: (nextOpen) => {
                 if (!openControlled)
                     setInternalOpen(nextOpen);
@@ -108,23 +113,46 @@ const defaultLabels = {
 function directionFor(node) {
     return getComputedStyle(node).direction === 'rtl' ? 'rtl' : 'ltr';
 }
-export const ImageViewerContent = forwardRef(function ImageViewerContent({ className, emptyState, labels: labelOverrides, onOpenAutoFocus, renderImage, rotatable = false, showThumbnails = true, zoomable = true, minScale = 0.5, maxScale = 6, wheel = 'modifier', ...props }, forwardedRef) {
-    const { activeIndex, activeItem, items, loop, selectIndex, step } = useImageViewerContext();
+export const ImageViewerContent = forwardRef(function ImageViewerContent({ className, emptyState, labels: labelOverrides, onOpenAutoFocus, renderImage, rotatable = false, showThumbnails = true, zoomable = true, minScale = 0.5, maxScale = 6, videoLabels, wheel = 'modifier', ...props }, forwardedRef) {
+    const { activeIndex, activeItem, items, loop, open, selectIndex, step } = useImageViewerContext();
     const labels = { ...defaultLabels, ...labelOverrides };
     const stageRef = useRef(null);
+    const thumbnailsRef = useRef(null);
     const thumbnailRefs = useRef(new Map());
     const panZoomRef = useRef(null);
-    const [failedIds, setFailedIds] = useState(() => new Set());
+    const focusFrameRef = useRef(null);
+    const fitFrameRef = useRef(null);
+    useEffect(() => () => {
+        if (focusFrameRef.current !== null)
+            cancelAnimationFrame(focusFrameRef.current);
+        if (fitFrameRef.current !== null)
+            cancelAnimationFrame(fitFrameRef.current);
+    }, []);
+    const [failedResources, setFailedResources] = useState(() => new Set());
     const [attempts, setAttempts] = useState({});
     const [rotation, setRotation] = useState(0);
     const total = items.length;
     const atStart = activeIndex <= 0;
     const atEnd = activeIndex >= total - 1;
+    const activeItemType = activeItem?.type ?? 'image';
+    const activeItemKey = activeItem ? JSON.stringify([activeItemType, activeItem.id, activeItem.src]) : undefined;
+    const activeResourceRef = useRef(activeItemKey);
+    activeResourceRef.current = activeItemKey;
     useEffect(() => {
-        if (activeItem)
-            thumbnailRefs.current.get(activeItem.id)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        const thumbnail = activeItem ? thumbnailRefs.current.get(activeItem.id) : undefined;
+        const viewport = thumbnailsRef.current;
+        if (thumbnail && viewport) {
+            const item = thumbnail.getBoundingClientRect();
+            const clip = viewport.getBoundingClientRect();
+            if (item.left < clip.left)
+                viewport.scrollLeft -= clip.left - item.left;
+            else if (item.right > clip.right)
+                viewport.scrollLeft += item.right - clip.right;
+        }
         setRotation(0);
-    }, [activeItem]);
+        setFailedResources(current => activeItemKey && current.has(activeItemKey) ? new Set([activeItemKey]) : new Set());
+        setAttempts(current => activeItemKey && current[activeItemKey] !== undefined ? { [activeItemKey]: current[activeItemKey] } : {});
+    }, [activeItemKey]);
     const handleStageKeyDown = (event) => {
         if (event.target !== event.currentTarget)
             return;
@@ -149,72 +177,97 @@ export const ImageViewerContent = forwardRef(function ImageViewerContent({ class
     const selectThumbnail = (index, reason = 'thumbnail') => {
         selectIndex(index, reason);
         const item = items[index];
-        if (item)
-            requestAnimationFrame(() => thumbnailRefs.current.get(item.id)?.focus());
+        if (focusFrameRef.current !== null)
+            cancelAnimationFrame(focusFrameRef.current);
+        focusFrameRef.current = item ? requestAnimationFrame(() => {
+            focusFrameRef.current = null;
+            thumbnailRefs.current.get(item.id)?.focus();
+        }) : null;
     };
     const renderDefaultImage = (item, { key, ...imageProps }) => (_jsx("img", { ...imageProps, draggable: false }, key));
-    const failed = activeItem ? failedIds.has(activeItem.id) : false;
-    const imageProps = activeItem ? {
-        alt: activeItem.alt,
-        className: 'inkra-image-viewer__image',
-        height: activeItem.height,
-        key: `${activeItem.id}:${attempts[activeItem.id] ?? 0}`,
-        onError: () => setFailedIds(current => new Set(current).add(activeItem.id)),
-        onLoad: () => setFailedIds(current => {
-            if (!current.has(activeItem.id))
-                return current;
-            const next = new Set(current);
-            next.delete(activeItem.id);
-            return next;
-        }),
-        src: activeItem.src,
-        width: activeItem.width,
-    } : null;
+    const failed = activeItemKey ? failedResources.has(activeItemKey) : false;
+    const imageProps = activeItem && activeItemKey && activeItemType === 'image' ? (() => {
+        const resourceKey = activeItemKey;
+        return {
+            alt: activeItem.alt,
+            className: 'inkra-image-viewer__image',
+            height: activeItem.height,
+            key: `${resourceKey}:${attempts[resourceKey] ?? 0}`,
+            onError: () => setFailedResources(current => new Set(current).add(resourceKey)),
+            onLoad: () => setFailedResources(current => {
+                if (!current.has(resourceKey))
+                    return current;
+                const next = new Set(current);
+                next.delete(resourceKey);
+                return next;
+            }),
+            src: activeItem.src,
+            width: activeItem.width,
+        };
+    })() : null;
     return (_jsxs(OverlayPortal, { children: [_jsx(OverlayBackdrop, {}), _jsxs(OverlayContent, { ...props, className: ['inkra-image-viewer', className].filter(Boolean).join(' '), layout: "sections", onOpenAutoFocus: (event) => {
                     onOpenAutoFocus?.(event);
                     if (event.defaultPrevented)
                         return;
                     event.preventDefault();
                     stageRef.current?.focus();
-                }, ref: forwardedRef, surfaceRadius: 8, children: [_jsxs(OverlayHeader, { closeLabel: labels.close, children: [_jsx(OverlayTitle, { children: labels.title }), _jsx(OverlayDescription, { className: "inkra-image-viewer__description", children: labels.description }), total > 0 ? _jsx(PencilText, { as: "span", className: "inkra-image-viewer__counter", children: labels.imagePosition(activeIndex + 1, total) }) : null] }), _jsx("div", { className: "inkra-image-viewer__body", children: activeItem && imageProps ? _jsx(_Fragment, { children: _jsxs("div", { "aria-label": activeItem.alt, className: "inkra-image-viewer__stage", onKeyDown: handleStageKeyDown, ref: stageRef, tabIndex: 0, children: [failed ? _jsxs("div", { className: "inkra-image-viewer__state", role: "alert", children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.failedTitle }), _jsx(PencilText, { as: "p", children: labels.failedDescription(activeItem) }), _jsx(Button, { variant: "outline", onClick: () => {
-                                                    const failedId = activeItem.id;
-                                                    setFailedIds(current => {
+                }, ref: forwardedRef, surfaceRadius: 0, surfaceVariant: "ghost", children: [_jsx(OverlayTitle, { className: "inkra-image-viewer__accessible-label", children: labels.title }), _jsx(OverlayDescription, { className: "inkra-image-viewer__accessible-label", children: labels.description }), _jsxs("div", { className: "inkra-image-viewer__close-control", children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-image-viewer__close-paper", radius: 8, seed: "image-viewer-close-paper", variant: "paper" }), _jsx(OverlayCloseButton, { className: "inkra-image-viewer__close", label: labels.close })] }), _jsx("div", { className: "inkra-image-viewer__body", children: activeItem && activeItemKey ? _jsx(_Fragment, { children: _jsxs("div", { "aria-label": activeItem.alt, className: "inkra-image-viewer__stage", onKeyDown: handleStageKeyDown, ref: stageRef, tabIndex: 0, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-image-viewer__stage-focus", radius: 6, seed: `image-viewer-stage-${activeItem.id}`, variant: "outline" }), failed ? _jsxs("div", { className: "inkra-image-viewer__state", role: "alert", children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.failedTitle }), _jsx(PencilText, { as: "p", children: labels.failedDescription(activeItem) }), _jsx(Button, { variant: "outline", onClick: () => {
+                                                    if (!activeItemKey)
+                                                        return;
+                                                    const failedKey = activeItemKey;
+                                                    setFailedResources(current => {
                                                         const next = new Set(current);
-                                                        next.delete(failedId);
+                                                        next.delete(failedKey);
                                                         return next;
                                                     });
-                                                    setAttempts(current => ({ ...current, [failedId]: (current[failedId] ?? 0) + 1 }));
-                                                }, children: labels.retry })] }) : _jsx(PanZoom, { "aria-label": labels.panZoom(activeItem), centerOnInit: true, className: "inkra-image-viewer__pan-zoom", fitOnInit: "contain", keyboard: zoomable, maxScale: maxScale, minScale: minScale, pan: zoomable, pinch: zoomable, readOnly: !zoomable, ref: panZoomRef, wheel: zoomable ? wheel : 'disabled', children: _jsx("div", { className: "inkra-image-viewer__image-transform", style: { transform: `rotate(${rotation}deg)` }, children: (renderImage ?? renderDefaultImage)(activeItem, imageProps) }) }, activeItem.id), !failed && (zoomable || rotatable) ? _jsxs("div", { className: "inkra-image-viewer__tools", role: "group", "aria-label": labels.panZoom(activeItem), "data-pan-zoom-no-drag": true, children: [zoomable ? _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": labels.zoomOut, onClick: () => void panZoomRef.current?.zoomOut(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomOutPaths, size: 24, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.resetZoom, onClick: () => void panZoomRef.current?.reset(), size: "sm", variant: "outline", children: "100%" }), _jsx(Button, { "aria-label": labels.zoomIn, onClick: () => void panZoomRef.current?.zoomIn(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomInPaths, size: 24, sourceSize: 24 }) })] }) : null, rotatable ? _jsx(Button, { "aria-label": labels.rotate, onClick: () => {
+                                                    setAttempts(current => ({ ...current, [failedKey]: (current[failedKey] ?? 0) + 1 }));
+                                                }, children: labels.retry })] }) : activeItemType === 'video' && open ? _jsx(VideoResource, { alt: activeItem.alt, labels: videoLabels, onError: () => setFailedResources(current => new Set(current).add(activeItemKey)), onLoad: () => setFailedResources(current => {
+                                            if (!current.has(activeItemKey))
+                                                return current;
+                                            const next = new Set(current);
+                                            next.delete(activeItemKey);
+                                            return next;
+                                        }), poster: activeItem.poster, src: activeItem.src }, activeItemKey) : imageProps ? _jsx(PanZoom, { "aria-label": labels.panZoom(activeItem), centerOnInit: true, className: "inkra-image-viewer__pan-zoom", fitOnInit: "contain", keyboard: zoomable, maxScale: maxScale, minScale: minScale, pan: zoomable, pinch: zoomable, readOnly: !zoomable, ref: panZoomRef, wheel: zoomable ? wheel : 'disabled', children: _jsx("div", { className: "inkra-image-viewer__image-transform", style: { transform: `rotate(${rotation}deg)` }, children: (renderImage ?? renderDefaultImage)(activeItem, imageProps) }) }, activeItemKey) : null, total > 1 && activeItemType === 'image' ? _jsxs("div", { className: "inkra-image-viewer__navigation", children: [_jsx(Button, { "aria-label": labels.previous, className: "inkra-image-viewer__previous", disabled: !loop && atStart, onClick: () => step(-1), size: "icon", variant: "secondary", children: _jsx(PencilIcon, { decorative: true, paths: chevronLeftPaths, size: 30, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.next, className: "inkra-image-viewer__next", disabled: !loop && atEnd, onClick: () => step(1), size: "icon", variant: "secondary", children: _jsx(PencilIcon, { decorative: true, paths: chevronRightPaths, size: 30, sourceSize: 24 }) })] }) : null] }) }) : _jsxs("div", { className: "inkra-image-viewer__state", ref: stageRef, tabIndex: 0, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-image-viewer__stage-focus", radius: 6, seed: "image-viewer-empty-stage", variant: "outline" }), emptyState ?? _jsxs(_Fragment, { children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.emptyTitle }), _jsx(PencilText, { as: "p", children: labels.emptyDescription })] })] }) }), (activeItem || (showThumbnails && total > 1)) ? _jsxs("div", { className: "inkra-image-viewer__bottom", children: [_jsxs("div", { className: "inkra-image-viewer__bottom-row", children: [total > 0 ? _jsx(PencilText, { as: "span", className: "inkra-image-viewer__counter", dir: "auto", children: labels.imagePosition(activeIndex + 1, total) }) : null, activeItem && activeItemType === 'image' && !failed && (zoomable || rotatable) ? _jsxs("div", { className: "inkra-image-viewer__tools", role: "group", "aria-label": labels.panZoom(activeItem), "data-pan-zoom-no-drag": true, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-image-viewer__tools-paper", radius: 8, seed: `image-viewer-tools-${activeItem.id}`, variant: "paper" }), zoomable ? _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": labels.zoomOut, onClick: () => void panZoomRef.current?.zoomOut(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomOutPaths, size: 24, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.resetZoom, onClick: () => void panZoomRef.current?.reset(), size: "sm", variant: "outline", children: "100%" }), _jsx(Button, { "aria-label": labels.zoomIn, onClick: () => void panZoomRef.current?.zoomIn(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomInPaths, size: 24, sourceSize: 24 }) })] }) : null, rotatable ? _jsx(Button, { "aria-label": labels.rotate, onClick: () => {
                                                     setRotation(current => (current + 90) % 360);
-                                                    requestAnimationFrame(() => void panZoomRef.current?.fit({ mode: 'contain' }));
-                                                }, size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: rotatePaths, size: 24, sourceSize: 24 }) }) : null] }) : null, total > 1 ? _jsxs("div", { className: "inkra-image-viewer__navigation", children: [_jsx(Button, { "aria-label": labels.previous, className: "inkra-image-viewer__previous", disabled: !loop && atStart, onClick: () => step(-1), size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: chevronLeftPaths, size: 30, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.next, className: "inkra-image-viewer__next", disabled: !loop && atEnd, onClick: () => step(1), size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: chevronRightPaths, size: 30, sourceSize: 24 }) })] }) : null] }) }) : _jsx("div", { className: "inkra-image-viewer__state", ref: stageRef, tabIndex: 0, children: emptyState ?? _jsxs(_Fragment, { children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.emptyTitle }), _jsx(PencilText, { as: "p", children: labels.emptyDescription })] }) }) }), showThumbnails && total > 1 ? _jsx("div", { "aria-label": labels.thumbnails, className: "inkra-image-viewer__thumbnails", role: "listbox", children: items.map((item, index) => {
-                            const selected = index === activeIndex;
-                            return _jsxs("button", { "aria-label": labels.thumbnail(item, index + 1, total), "aria-selected": selected, className: "inkra-image-viewer__thumbnail", onClick: () => selectIndex(index, 'thumbnail'), onKeyDown: (event) => {
-                                    const rtl = directionFor(event.currentTarget) === 'rtl';
-                                    let nextIndex = index;
-                                    if (event.key === 'ArrowLeft')
-                                        nextIndex = nextImageViewerIndex(total, index, rtl ? 1 : -1, loop);
-                                    else if (event.key === 'ArrowRight')
-                                        nextIndex = nextImageViewerIndex(total, index, rtl ? -1 : 1, loop);
-                                    else if (event.key === 'Home')
-                                        nextIndex = 0;
-                                    else if (event.key === 'End')
-                                        nextIndex = total - 1;
-                                    else
-                                        return;
-                                    event.preventDefault();
-                                    selectThumbnail(nextIndex, event.key === 'Home' ? 'home' : event.key === 'End' ? 'end' : 'thumbnail');
-                                }, ref: (node) => {
-                                    if (node)
-                                        thumbnailRefs.current.set(item.id, node);
-                                    else
-                                        thumbnailRefs.current.delete(item.id);
-                                }, role: "option", tabIndex: selected ? 0 : -1, type: "button", children: [_jsx(PencilSurface, { as: "span", className: "inkra-image-viewer__thumbnail-surface", radius: 6, variant: selected ? 'selection' : 'outline', children: _jsx("img", { alt: "", className: "inkra-image-viewer__thumbnail-image", draggable: false, src: item.thumbnailSrc ?? item.src }) }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-image-viewer__thumbnail-focus", radius: 6, variant: "outline" })] }, item.id);
-                        }) }) : null] })] }));
+                                                    if (fitFrameRef.current !== null)
+                                                        cancelAnimationFrame(fitFrameRef.current);
+                                                    const resourceKey = activeItemKey;
+                                                    fitFrameRef.current = requestAnimationFrame(() => {
+                                                        fitFrameRef.current = null;
+                                                        if (activeResourceRef.current === resourceKey)
+                                                            void panZoomRef.current?.fit({ mode: 'contain' });
+                                                    });
+                                                }, size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: rotatePaths, size: 24, sourceSize: 24 }) }) : null] }) : null, activeItem && activeItemType === 'video' && total > 1 ? _jsxs("div", { className: "inkra-image-viewer__video-navigation", role: "group", "aria-label": labels.thumbnails, children: [_jsx(Button, { "aria-label": labels.previous, disabled: !loop && atStart, onClick: () => step(-1), size: "icon-sm", variant: "secondary", children: _jsx(PencilIcon, { decorative: true, paths: chevronLeftPaths, size: 24, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.next, disabled: !loop && atEnd, onClick: () => step(1), size: "icon-sm", variant: "secondary", children: _jsx(PencilIcon, { decorative: true, paths: chevronRightPaths, size: 24, sourceSize: 24 }) })] }) : null] }), showThumbnails && total > 1 ? _jsx("div", { "aria-label": labels.thumbnails, className: "inkra-image-viewer__thumbnails", ref: thumbnailsRef, role: "listbox", children: items.map((item, index) => {
+                                    const selected = index === activeIndex;
+                                    return _jsxs("button", { "aria-label": labels.thumbnail(item, index + 1, total), "aria-selected": selected, className: "inkra-image-viewer__thumbnail", onClick: () => selectIndex(index, 'thumbnail'), onKeyDown: (event) => {
+                                            const rtl = directionFor(event.currentTarget) === 'rtl';
+                                            let nextIndex = index;
+                                            if (event.key === 'ArrowLeft')
+                                                nextIndex = nextImageViewerIndex(total, index, rtl ? 1 : -1, loop);
+                                            else if (event.key === 'ArrowRight')
+                                                nextIndex = nextImageViewerIndex(total, index, rtl ? -1 : 1, loop);
+                                            else if (event.key === 'Home')
+                                                nextIndex = 0;
+                                            else if (event.key === 'End')
+                                                nextIndex = total - 1;
+                                            else
+                                                return;
+                                            event.preventDefault();
+                                            selectThumbnail(nextIndex, event.key === 'Home' ? 'home' : event.key === 'End' ? 'end' : 'thumbnail');
+                                        }, ref: (node) => {
+                                            if (node)
+                                                thumbnailRefs.current.set(item.id, node);
+                                            else
+                                                thumbnailRefs.current.delete(item.id);
+                                        }, role: "option", tabIndex: selected ? 0 : -1, type: "button", children: [_jsx(PencilSurface, { as: "span", className: "inkra-image-viewer__thumbnail-surface", radius: 6, variant: selected ? 'selection' : 'outline', children: (item.thumbnailSrc ?? item.poster ?? (item.type === 'video' ? undefined : item.src))
+                                                    ? _jsx("img", { alt: "", className: "inkra-image-viewer__thumbnail-image", draggable: false, src: item.thumbnailSrc ?? item.poster ?? item.src })
+                                                    : _jsx(PencilIcon, { decorative: true, paths: item.type === 'video' ? playPaths : imageOffPaths, size: 30, sourceSize: 24 }) }), item.type === 'video' ? _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-image-viewer__thumbnail-video", radius: 6, variant: "paper", children: _jsx(PencilIcon, { decorative: true, paths: playPaths, size: 18, sourceSize: 24 }) }) : null, _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-image-viewer__thumbnail-focus", radius: 6, variant: "outline" })] }, item.id);
+                                }) }) : null] }) : null] })] }));
 });
-export const ImageViewer = Object.freeze({
+export const ImageViewer = /* @__PURE__ */ Object.freeze({
     Root: ImageViewerRoot,
     Trigger: ImageViewerTrigger,
     Content: ImageViewerContent,
 });
+export const MediaViewer = ImageViewer;
 export { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';

package/dist/image-viewer/lucideGeometry.d.ts

@@ -0,0 +1,3 @@
+import type { PencilIconPath } from '../PencilIcon.js';
+export type LucideIconNode = readonly [string, Record<string, string>];
+export declare function lucideNodesToPencilPaths(nodes: readonly LucideIconNode[]): readonly PencilIconPath[];

package/dist/image-viewer/lucideGeometry.js

@@ -0,0 +1,19 @@
+function number(attributes, name) {
+    const value = Number(attributes[name]);
+    return Number.isFinite(value) ? value : 0;
+}
+export function lucideNodesToPencilPaths(nodes) {
+    return nodes.flatMap(([tag, attributes]) => {
+        if (tag === 'path' && attributes.d)
+            return [{ d: attributes.d }];
+        if (tag === 'line')
+            return [{ d: `M${number(attributes, 'x1')} ${number(attributes, 'y1')}L${number(attributes, 'x2')} ${number(attributes, 'y2')}` }];
+        if (tag === 'circle') {
+            const cx = number(attributes, 'cx');
+            const cy = number(attributes, 'cy');
+            const radius = number(attributes, 'r');
+            return [{ d: `M${cx - radius} ${cy}A${radius} ${radius} 0 1 0 ${cx + radius} ${cy}A${radius} ${radius} 0 1 0 ${cx - radius} ${cy}` }];
+        }
+        return [];
+    });
+}

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from './audio-player/index.js';
 export * from './carousel/index.js';
 export * from './choice-grid/index.js';
 export * from './color-picker/index.js';
+export * from './color-swatch/index.js';
 export * from './context-menu/index.js';
 export * from './dockable-panel/index.js';
 export * from './editable/index.js';
@@ -62,6 +63,7 @@ export * from './transfer/index.js';
 export * from './tree-select/index.js';
 export * from './typewriter/index.js';
 export * from './virtual-list/index.js';
+export * from './markdown/index.js';
 export type { ButtonGroupOrientation, ButtonAlign, ButtonLoadingPosition, ButtonGroupProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, } from './Button.js';
 export { PencilLine } from './PencilLine.js';
 export type { PencilLineOrientation, PencilLineProps } from './PencilLine.js';

package/dist/index.js

@@ -38,6 +38,7 @@ export * from './audio-player/index.js';
 export * from './carousel/index.js';
 export * from './choice-grid/index.js';
 export * from './color-picker/index.js';
+export * from './color-swatch/index.js';
 export * from './context-menu/index.js';
 export * from './dockable-panel/index.js';
 export * from './editable/index.js';
@@ -62,6 +63,7 @@ export * from './transfer/index.js';
 export * from './tree-select/index.js';
 export * from './typewriter/index.js';
 export * from './virtual-list/index.js';
+export * from './markdown/index.js';
 export { PencilLine } from './PencilLine.js';
 export { PencilSurface } from './PencilSurface.js';
 export { PencilText } from './PencilText.js';

package/dist/input-number/index.js

@@ -25,9 +25,12 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
     const holdRef = useRef(null);
     const timerRef = useRef(undefined);
     const suppressClickRef = useRef(false);
+    const removeHoldListeners = useRef(undefined);
     const stopHolding = useCallback(() => {
         clearTimeout(timerRef.current);
         timerRef.current = undefined;
+        removeHoldListeners.current?.();
+        removeHoldListeners.current = undefined;
         const hold = holdRef.current;
         holdRef.current = null;
         if (hold?.button.hasPointerCapture?.(hold.pointerId)) {
@@ -37,7 +40,8 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
             catch { /* The pointer may already be inactive. */ }
         }
     }, []);
-    useEffect(() => {
+    // Idle controls do not need global pointer, keyboard or visibility listeners.
+    const listenWhileHolding = () => {
         const onVisibilityChange = () => { if (document.hidden)
             stopHolding(); };
         const onPointerEnd = (event) => {
@@ -56,8 +60,7 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
         window.addEventListener('keydown', updateModifiers);
         window.addEventListener('keyup', updateModifiers);
         document.addEventListener('visibilitychange', onVisibilityChange);
-        return () => {
-            stopHolding();
+        removeHoldListeners.current = () => {
             window.removeEventListener('blur', stopHolding);
             window.removeEventListener('pointerup', onPointerEnd);
             window.removeEventListener('pointercancel', onPointerEnd);
@@ -65,7 +68,8 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
             window.removeEventListener('keyup', updateModifiers);
             document.removeEventListener('visibilitychange', onVisibilityChange);
         };
-    }, [stopHolding]);
+    };
+    useEffect(() => stopHolding, [stopHolding]);
     useBrowserLayoutEffect(() => {
         if (isControlled && currentValue !== finiteValue(value))
             setDraft(format(value));
@@ -136,6 +140,7 @@ export const InputNumber = forwardRef(function InputNumber({ classNames, control
         if (!button.isConnected || button.disabled)
             return;
         holdRef.current = { button, pointerId: event.pointerId, direction, modifiers };
+        listenWhileHolding();
         try {
             button.setPointerCapture(event.pointerId);
         }

package/dist/internal/cache.d.ts

@@ -9,6 +9,10 @@ export declare class BoundedCache<Value> {
     set(key: string, value: Value, cost: number): Value;
     delete(key: string): void;
 }
+export declare function boundedCanvasSize(width: number, height: number, dpr: number): {
+    width: number;
+    height: number;
+};
 export declare function canvasByteCost(canvas: HTMLCanvasElement): number;
 export declare function canvasIsUsable(canvas: HTMLCanvasElement): boolean;
 export declare function effectiveDpr(limit?: number): number;

package/dist/internal/cache.js

@@ -15,6 +15,12 @@ export class BoundedCache {
         return entry.value;
     }
     set(key, value, cost) {
+        // A one-off oversized image must not flush every useful cached control.
+        // Invalid accounting must never disable the byte budget (NaN) either.
+        if (!Number.isFinite(cost) || cost < 0 || cost > this.maxCost || this.maxEntries < 1) {
+            this.delete(key);
+            return value;
+        }
         const previous = this.entries.get(key);
         if (previous) {
             this.totalCost -= previous.cost;
@@ -24,7 +30,7 @@ export class BoundedCache {
         this.totalCost += cost;
         while (this.entries.size > this.maxEntries || this.totalCost > this.maxCost) {
             const oldestKey = this.entries.keys().next().value;
-            if (!oldestKey)
+            if (oldestKey === undefined)
                 break;
             const oldest = this.entries.get(oldestKey);
             this.entries.delete(oldestKey);
@@ -40,6 +46,17 @@ export class BoundedCache {
         this.totalCost -= entry.cost;
     }
 }
+// Cache limits apply after drawing. Check allocation limits before asking the
+// browser for a backing store, including transient canvases that are not cached.
+export function boundedCanvasSize(width, height, dpr) {
+    const pixelWidth = Math.ceil(width * dpr);
+    const pixelHeight = Math.ceil(height * dpr);
+    if (![width, height, dpr].every(value => Number.isFinite(value) && value > 0)
+        || pixelWidth > 8192 || pixelHeight > 8192 || pixelWidth * pixelHeight > 4 * 1024 * 1024) {
+        throw new RangeError('Pencil canvas exceeds the bounded pixel budget');
+    }
+    return { width: pixelWidth, height: pixelHeight };
+}
 export function canvasByteCost(canvas) {
     return canvas.width * canvas.height * 4;
 }

package/dist/internal/iconGeometry.d.ts

@@ -0,0 +1,2 @@
+import type { PencilPoint } from './stroke.js';
+export declare function cachedPathParts(data: string): readonly PencilPoint[][];

package/dist/internal/iconGeometry.js

@@ -0,0 +1,32 @@
+import { BoundedCache, PENCIL_RENDERER_VERSION } from './cache.js';
+const geometryCache = new BoundedCache(256, 180000);
+export function cachedPathParts(data) {
+    // Limit both parsing input and samples before allocating. Cache eviction only
+    // bounds retained geometry, not the work needed to construct a huge path.
+    if (data.length > 65536)
+        throw new RangeError('Pencil icon path exceeds the bounded input');
+    const key = `${PENCIL_RENDERER_VERSION}:${data}`;
+    const cached = geometryCache.get(key);
+    if (cached)
+        return cached;
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', data);
+    const length = path.getTotalLength();
+    const count = Math.max(1, Math.ceil(length / 0.25));
+    if (!Number.isFinite(length) || length < 0 || count > 16384) {
+        throw new RangeError('Pencil icon path exceeds the bounded sampling budget');
+    }
+    const parts = [[]];
+    for (let index = 0; index <= count; index += 1) {
+        const point = path.getPointAtLength(length * index / count);
+        if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+            throw new RangeError('Pencil icon path contains invalid coordinates');
+        }
+        const activePart = parts[parts.length - 1];
+        const previous = activePart[activePart.length - 1];
+        if (previous && Math.hypot(point.x - previous[0], point.y - previous[1]) > 0.5)
+            parts.push([]);
+        parts[parts.length - 1].push([point.x, point.y]);
+    }
+    return geometryCache.set(key, parts, parts.reduce((total, part) => total + part.length, 0));
+}

package/dist/internal/renderTokens.d.ts

@@ -1,5 +1,9 @@
 export declare const pencilRenderDefaults: Readonly<{
     strokeWidth: 2;
+    iconStrokeWidth: 1.5;
+    iconBreaks: 0.18;
+    iconBreakCount: 1;
+    iconPressureVariation: 0.82;
     strokeRoughness: 1.5;
     washStrength: 0.8;
     washSpacing: 2;

package/dist/internal/renderTokens.js

@@ -1,5 +1,9 @@
 export const pencilRenderDefaults = Object.freeze({
     strokeWidth: 2,
+    iconStrokeWidth: 1.5,
+    iconBreaks: 0.18,
+    iconBreakCount: 1,
+    iconPressureVariation: 0.82,
     strokeRoughness: 1.5,
     washStrength: 0.8,
     washSpacing: 2,

package/dist/internal/stroke.d.ts

@@ -2,6 +2,12 @@ export type PencilPoint = readonly [x: number, y: number];
 export interface StrokeSettings {
     variation?: number;
     breaks?: number;
+    continuousBreaks?: boolean;
+    /** Maximum gaps per path; short paths reduce the actual count. */
+    breakCount?: number;
+    /** Display pixels per path unit, excluding device pixel ratio. */
+    breakScale?: number;
+    fitPressure?: boolean;
     grain?: number;
     taperLength?: number;
     scale?: number;
@@ -20,5 +26,6 @@ export declare function strokeProfile(at: number, total: number, seed: number, s
     contact: number;
     deposit: number;
     taper: number;
+    gapDistance: number;
 };
 export declare function pencilStroke(context: CanvasRenderingContext2D, points: readonly PencilPoint[], color: string, width: number, seed: number, amplitude: number, passes?: number, closed?: boolean, settings?: StrokeSettings): void;

package/dist/internal/stroke.js

@@ -14,14 +14,52 @@ export function strokeProfile(at, total, seed, settings = {}) {
     const variation = settings.variation ?? 1;
     const breaks = settings.breaks ?? 0.8;
     const grainValue = settings.grain ?? 0.7;
-    const force = clamp(0.12 + noise(at / 19, seed + 17) * 0.97
+    let force = clamp(0.12 + noise(at / 19, seed + 17) * 0.97
         + (noise(at / 5.3, seed + 39) - 0.5) * 0.3);
+    if (settings.fitPressure && total > 0 && total < 48) {
+        // Short icon paths need a full pressure gesture, not a nearly flat slice
+        // of the long-stroke noise. Blend back to the original profile by 48 units.
+        const phase = (at / total + hash(0, seed + 61)) * Math.PI * 2;
+        const gesture = 0.25 + (1 - Math.cos(phase)) * 0.35
+            + (noise(at / 5.3, seed + 39) - 0.5) * 0.08;
+        const blend = clamp((48 - total) / 24);
+        force = force * (1 - blend) + gesture * blend;
+    }
     const pressure = clamp(0.72 * (1 - variation) + force * variation);
     let contact = 1;
-    const cell = Math.floor(at / 37);
-    for (let index = cell - 1; index <= cell + 1; index += 1) {
-        if (hash(index, seed + 277) > breaks * 0.9)
+    let gapDistance = Infinity;
+    // Reserve at least 12 CSS pixels per gap, measured over the full path.
+    // Display size affects density, but device pixel ratio must not affect it.
+    const breakScale = Number.isFinite(settings.breakScale) && settings.breakScale > 0 ? settings.breakScale : 1;
+    const gapCount = Number.isFinite(settings.breakCount)
+        ? Math.max(0, Math.min(12, Math.floor(settings.breakCount), Math.floor(total * breakScale / 12)))
+        : undefined;
+    const gapSpacing = settings.continuousBreaks
+        ? gapCount ? total / gapCount : Math.min(37, Math.max(1, total))
+        : 37;
+    const cell = Math.floor(at / gapSpacing);
+    // A fixed iteration count also terminates for out-of-range numeric input.
+    for (let offset = -1; offset <= 1; offset += 1) {
+        const index = cell + offset;
+        if (!settings.continuousBreaks && hash(index, seed + 277) > breaks * 0.9)
+            continue;
+        if (settings.continuousBreaks) {
+            if (gapCount !== undefined && (index < 0 || index >= gapCount))
+                continue;
+            const amount = clamp(breaks);
+            if (!amount)
+                continue;
+            // Fixed locations with linearly growing gap and feather widths avoid
+            // switching an entire gap on when a slider crosses a random threshold.
+            const middle = gapSpacing * (index + (gapCount === undefined
+                ? 0.2 + hash(index, seed + 283) * 0.6
+                : 0.3 + hash(index, seed + 283) * 0.4));
+            const gapScale = Math.min(1, gapSpacing / 24);
+            const halfGap = (1.1 + hash(index, seed + 293) * 3.6) * amount * gapScale;
+            gapDistance = Math.min(gapDistance, Math.abs(at - middle) - halfGap - 2.1 * amount * gapScale);
+            contact = Math.min(contact, clamp((Math.abs(at - middle) - halfGap) / (2.1 * amount * gapScale)));
             continue;
+        }
         const middle = index * 37 + 5 + hash(index, seed + 283) * 27;
         const halfGap = (1.1 + hash(index, seed + 293) * 3.6) * breaks;
         contact = Math.min(contact, clamp((Math.abs(at - middle) - halfGap) / 2.1));
@@ -29,13 +67,22 @@ export function strokeProfile(at, total, seed, settings = {}) {
     const tooth = noise(at * 1.6, seed + 401);
     const deposit = clamp((tooth - grainValue * 0.22) / Math.max(0.2, 1 - grainValue * 0.22));
     const taper = 0.2 + 0.8 * clamp(Math.min(at, total - at) / (settings.taperLength ?? 3));
-    return { pressure, contact, deposit, taper };
+    return { pressure, contact, deposit, taper, gapDistance };
 }
 export function pencilStroke(context, points, color, width, seed, amplitude, passes = 2, closed = false, settings = {}) {
-    if (points.length < 2)
+    const pointCount = points.length;
+    if (pointCount < 2 || pointCount > 65536)
         return;
+    // Validate the coordinates we retain, without scanning then cloning them again.
+    const line = [];
+    for (let index = 0; index < pointCount; index += 1) {
+        const point = points[index];
+        const x = point[0], y = point[1];
+        if (!Number.isFinite(x) || !Number.isFinite(y))
+            return;
+        line.push([x, y]);
+    }
     const scale = Math.max(0.4, settings.scale ?? 1);
-    const line = points.map(point => [...point]);
     const lastPoint = line[line.length - 1];
     if (closed && Math.hypot(line[0][0] - lastPoint[0], line[0][1] - lastPoint[1]) > 0.01) {
         line.push(line[0]);
@@ -56,6 +103,13 @@ export function pencilStroke(context, points, color, width, seed, amplitude, pas
     const distanceOffset = settings.distanceOffset ?? 0;
     const totalDistance = settings.totalDistance ?? distanceOffset + total;
     const step = settings.step ?? (settings.detail === 'fill' ? 2.1 : 1.05);
+    // Stop invalid steps and huge geometry before entering the sampling loop.
+    if (!Number.isFinite(total) || !Number.isFinite(step) || step <= 0 || total / step > 65536
+        || !Number.isFinite(distanceOffset) || Math.abs(distanceOffset) > Number.MAX_SAFE_INTEGER
+        || !Number.isFinite(totalDistance) || Math.abs(totalDistance) > Number.MAX_SAFE_INTEGER
+        || !Number.isFinite(passes) || passes < 0 || passes > 16
+        || !Number.isFinite(settings.filaments ?? 3) || (settings.filaments ?? 3) > 16)
+        return;
     const samples = [];
     let segmentIndex = 0;
     for (let at = 0;; at = Math.min(total, at + step)) {
@@ -103,6 +157,8 @@ export function pencilStroke(context, points, color, width, seed, amplitude, pas
             if (opacity < 0.012)
                 continue;
             const nib = width * (0.3 + pressure * 1.65) * Math.pow(scale, 0.32);
+            // Round segment caps must not paint back across intentional short gaps.
+            context.lineCap = Math.min(a.gapDistance, b.gapDistance) < nib / 2 + step ? 'butt' : 'round';
             const drift = pass ? (noise(a.at / 6, seed + pass * 107) - 0.5) * width * 1.1 : 0;
             context.globalAlpha = Math.min(1, inheritedAlpha * opacity * (pass ? 0.56 : 1.2)
                 * (settings.gain ?? 1));