@inkra/react 0.2.0 → 0.4.3

package/dist/image-viewer/VideoResource.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __iconData as pauseIcon } from 'lucide-react/dist/esm/icons/pause.mjs';
+import { __iconData as playIcon } from 'lucide-react/dist/esm/icons/play.mjs';
+import { __iconData as volumeIcon } from 'lucide-react/dist/esm/icons/volume-2.mjs';
+import { __iconData as muteIcon } from 'lucide-react/dist/esm/icons/volume-x.mjs';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilText } from '../PencilText.js';
+import { Select } from '../select/index.js';
+import { Slider } from '../slider/index.js';
+function number(attributes, name) {
+    const value = Number(attributes[name]);
+    return Number.isFinite(value) ? value : 0;
+}
+function iconPaths(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 === 'rect') {
+            const x = number(attributes, 'x');
+            const y = number(attributes, 'y');
+            const width = number(attributes, 'width');
+            const height = number(attributes, 'height');
+            const radius = Math.min(number(attributes, 'rx'), width / 2, height / 2);
+            return [{ d: radius
+                        ? `M${x + radius} ${y}H${x + width - radius}Q${x + width} ${y} ${x + width} ${y + radius}V${y + height - radius}Q${x + width} ${y + height} ${x + width - radius} ${y + height}H${x + radius}Q${x} ${y + height} ${x} ${y + height - radius}V${y + radius}Q${x} ${y} ${x + radius} ${y}Z`
+                        : `M${x} ${y}H${x + width}V${y + height}H${x}Z` }];
+        }
+        return [];
+    });
+}
+const playPaths = iconPaths(playIcon.node);
+const pausePaths = iconPaths(pauseIcon.node);
+const volumePaths = iconPaths(volumeIcon.node);
+const mutePaths = iconPaths(muteIcon.node);
+const rates = [0.75, 1, 1.25, 1.5, 2];
+const defaultLabels = {
+    controls: 'Video controls',
+    play: 'Play video',
+    pause: 'Pause video',
+    seek: 'Seek video',
+    mute: 'Mute video',
+    unmute: 'Unmute video',
+    volume: 'Video volume',
+    rate: 'Playback speed',
+    playbackError: 'Video playback could not start.',
+    time: (current, duration) => `${formatTime(current)} / ${formatTime(duration)}`,
+};
+function clamp(value, min, max) {
+    return Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : min;
+}
+function formatTime(value) {
+    if (!Number.isFinite(value) || value < 0)
+        return '0:00';
+    const seconds = Math.floor(value);
+    return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+}
+export function VideoResource({ alt, labels: overrides, onError, onLoad, poster, src }) {
+    const videoRef = useRef(null);
+    const sourceRef = useRef(src);
+    sourceRef.current = src;
+    const mountedRef = useRef(false);
+    const generationRef = useRef(0);
+    const playRequestRef = useRef(0);
+    const callbacksRef = useRef({ onError, onLoad });
+    callbacksRef.current = { onError, onLoad };
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolumeState] = useState(1);
+    const [muted, setMutedState] = useState(false);
+    const [playbackRate, setPlaybackRateState] = useState(1);
+    const [playbackError, setPlaybackError] = useState(false);
+    const labels = { ...defaultLabels, ...overrides };
+    const sync = useCallback(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        setPlaying(!video.paused && !video.ended);
+        setCurrentTime(Number.isFinite(video.currentTime) ? video.currentTime : 0);
+        setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+        setVolumeState(video.volume);
+        setMutedState(video.muted);
+        setPlaybackRateState(video.playbackRate);
+    }, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+            generationRef.current += 1;
+            playRequestRef.current += 1;
+            videoRef.current?.pause();
+        };
+    }, []);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return undefined;
+        const handlers = {
+            loadedmetadata: () => { sync(); callbacksRef.current.onLoad?.(); },
+            durationchange: sync,
+            timeupdate: sync,
+            play: sync,
+            pause: sync,
+            ended: sync,
+            volumechange: sync,
+            ratechange: sync,
+            emptied: sync,
+            error: () => { sync(); callbacksRef.current.onError?.(); },
+        };
+        Object.entries(handlers).forEach(([name, handler]) => video.addEventListener(name, handler));
+        return () => Object.entries(handlers).forEach(([name, handler]) => video.removeEventListener(name, handler));
+    }, [sync]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return undefined;
+        generationRef.current += 1;
+        playRequestRef.current += 1;
+        video.pause();
+        try {
+            video.currentTime = 0;
+        }
+        catch { /* A source may not have a timeline yet. */ }
+        setPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        setPlaybackError(false);
+        video.load();
+        return () => { video.pause(); };
+    }, [src]);
+    const togglePlay = async () => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (!video.paused) {
+            playRequestRef.current += 1;
+            video.pause();
+            return;
+        }
+        const generation = generationRef.current;
+        const source = sourceRef.current;
+        const request = ++playRequestRef.current;
+        setPlaybackError(false);
+        try {
+            await video.play();
+            if (!mountedRef.current || generation !== generationRef.current || source !== sourceRef.current || request !== playRequestRef.current)
+                return;
+            sync();
+        }
+        catch {
+            if (!mountedRef.current || generation !== generationRef.current || source !== sourceRef.current || request !== playRequestRef.current)
+                return;
+            setPlaybackError(true);
+            sync();
+        }
+    };
+    const seek = (next) => {
+        const video = videoRef.current;
+        if (!video || !Number.isFinite(next))
+            return;
+        video.currentTime = clamp(next, 0, Number.isFinite(video.duration) ? video.duration : Math.max(0, next));
+        sync();
+    };
+    const setVolume = (next) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.volume = clamp(next, 0, 1);
+        if (video.muted && video.volume > 0)
+            video.muted = false;
+        sync();
+    };
+    const setMuted = (next) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.muted = next;
+        sync();
+    };
+    const setRate = (next) => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const rate = clamp(next, 0.25, 4);
+        video.defaultPlaybackRate = rate;
+        video.playbackRate = rate;
+        sync();
+    };
+    return _jsxs("div", { className: "inkra-image-viewer__video-resource", children: [_jsx("video", { "aria-label": alt, className: "inkra-image-viewer__video-media", controls: false, playsInline: true, poster: poster, preload: "metadata", ref: videoRef, src: src }), _jsxs("div", { "aria-label": labels.controls, className: "inkra-image-viewer__video-controls", role: "group", children: [playbackError ? _jsx(PencilText, { as: "p", className: "inkra-image-viewer__video-error", role: "alert", children: labels.playbackError }) : null, _jsx(Button, { "aria-label": playing ? labels.pause : labels.play, className: "inkra-image-viewer__video-play", onClick: () => void togglePlay(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: playing ? pausePaths : playPaths, size: 22, sourceSize: 24 }) }), _jsx("div", { className: "inkra-image-viewer__video-seek", children: _jsx(Slider, { "aria-label": labels.seek, disabled: !duration, getValueLabel: value => labels.time(value, duration), max: duration || 0, min: 0, onValueChange: values => seek(values[0] ?? 0), size: "sm", step: 0.01, value: [currentTime], variant: "inset" }) }), _jsx(PencilText, { "aria-live": "off", as: "span", className: "inkra-image-viewer__video-time", dir: "auto", children: labels.time(currentTime, duration) }), _jsxs("div", { className: "inkra-image-viewer__video-settings", children: [_jsx(Button, { "aria-label": muted ? labels.unmute : labels.mute, className: "inkra-image-viewer__video-mute", onClick: () => setMuted(!muted), size: "icon-sm", variant: "ghost", children: _jsx(PencilIcon, { decorative: true, paths: muted ? mutePaths : volumePaths, size: 22, sourceSize: 24 }) }), _jsx("div", { className: "inkra-image-viewer__video-volume", children: _jsx(Slider, { "aria-label": labels.volume, getValueLabel: value => `${Math.round(value * 100)}%`, max: 1, min: 0, onValueChange: values => setVolume(values[0] ?? 0), size: "sm", step: 0.01, value: [muted ? 0 : volume], variant: "inset" }) }), _jsxs(Select.Root, { onValueChange: value => setRate(Number(value)), value: String(playbackRate), children: [_jsx(Select.Trigger, { "aria-label": labels.rate, fullWidth: false, size: "sm", children: _jsx(Select.Value, {}) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { position: "popper", sideOffset: 4, children: _jsx(Select.Viewport, { children: rates.map(rate => _jsxs(Select.Item, { value: String(rate), children: [_jsx(Select.ItemText, { children: `${rate}x` }), _jsx(Select.ItemIndicator, {})] }, rate)) }) }) })] })] })] })] });
+}

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

@@ -1,10 +1,13 @@
 import type { ReactNode } from 'react';
 import type { PanZoomWheelMode } from '../pan-zoom/index.js';
 import type { OverlayContentProps, OverlayRootProps, OverlayTriggerProps } from '../overlay/index.js';
+import type { VideoResourceLabels } from './VideoResource.js';
 export interface ImageViewerItem {
     id: string;
     src: string;
     alt: string;
+    type?: 'image' | 'video';
+    poster?: string;
     thumbnailSrc?: string;
     thumbnailAlt?: string;
     width?: number;
@@ -68,6 +71,7 @@ export interface ImageViewerContentProps extends Omit<OverlayContentProps, 'chil
     minScale?: number;
     maxScale?: number;
     wheel?: PanZoomWheelMode;
+    videoLabels?: Partial<VideoResourceLabels>;
 }
 export declare const ImageViewerContent: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ImageViewer: Readonly<{
@@ -75,5 +79,15 @@ export declare const ImageViewer: Readonly<{
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
 }>;
+export declare const MediaViewer: Readonly<{
+    Root: typeof ImageViewerRoot;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+export type MediaViewerItem = ImageViewerItem;
+export type MediaViewerLabels = ImageViewerLabels;
+export type MediaViewerRootProps = ImageViewerRootProps;
+export type MediaViewerContentProps = ImageViewerContentProps;
+export type { VideoResourceLabels } from './VideoResource.js';
 export { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';
 export type { ImageViewerIdentifiable, ImageViewerSelection } from './model.js';

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.d.ts

@@ -1,4 +1,6 @@
 import type { InputProps } from '../form/Input.js';
+import { type InputNumberStepModifier } from './model.js';
+export type { InputNumberStepModifier } from './model.js';
 export interface InputNumberValueChangeDetails {
     reason: 'input' | 'increment' | 'decrement';
 }
@@ -9,6 +11,10 @@ export interface InputNumberProps extends Omit<InputProps, 'type' | 'value' | 'd
     min?: number;
     max?: number;
     step?: number | 'any';
+    stepModifiers?: readonly InputNumberStepModifier[];
+    pressAndHold?: boolean;
+    repeatDelay?: number;
+    repeatInterval?: number;
     controls?: boolean;
     incrementButtonLabel?: string;
     decrementButtonLabel?: string;