@inkra/react 0.3.0 → 0.4.3

package/dist/form/Textarea.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
+import { PencilLine } from '../PencilLine.js';
 import { PencilText } from '../PencilText.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { Button } from '../Button.js';
 import { Progress } from '../display/index.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
+import { InputAction } from './InputAction.js';
 const resizePaths = [{ d: 'M12 3v18M8 7l4-4 4 4M8 17l4 4 4-4' }];
 const defaultCountLabel = ({ remaining }) => remaining < 0 ? `${-remaining} over limit` : `${remaining} remaining`;
-export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = defaultCountLabel, resize = 'none', resizeLabel = 'Resize text area', ...props }, ref) {
+export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', variant = 'outline', endAction, countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = defaultCountLabel, resize = 'none', resizeLabel = 'Resize text area', ...props }, ref) {
     const generatedId = useId();
     const textareaRef = useRef(null);
     const [uncontrolledCount, setUncontrolledCount] = useState(() => String(props.defaultValue ?? '').length);
@@ -69,11 +71,11 @@ export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaD
     });
     const resolvedSeed = seed ?? `inkra-textarea-${state.id ?? generatedId}`;
     const classes = ['inkra-textarea', className].filter(Boolean).join(' ');
-    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, style: { ...props.style, ...(resize === 'vertical' && height !== undefined ? { height } : {}), resize: 'none' }, onInput: event => {
+    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, "data-variant": variant, "data-end-action": endAction != null || undefined, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: variant === 'underline' ? 'ghost' : state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, style: { ...props.style, ...(resize === 'vertical' && height !== undefined ? { height } : {}), resize: 'none' }, onInput: event => {
                         if (!controlled)
                             setUncontrolledCount(event.currentTarget.value.length);
                         props.onInput?.(event);
-                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), (hasCount || resize === 'vertical') && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), resize === 'vertical' && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": 1200, "aria-valuenow": Math.round(measuredHeight ?? minimumHeight), disabled: state.disabled, onPointerDown: event => {
+                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), endAction != null && _jsx("div", { className: "inkra-textarea__end-action", children: _jsx(InputAction, { disabled: Boolean(state.disabled), seed: `${resolvedSeed}-action`, children: endAction }) }), (hasCount || resize === 'vertical') && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), resize === 'vertical' && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": 1200, "aria-valuenow": Math.round(measuredHeight ?? minimumHeight), disabled: state.disabled, onPointerDown: event => {
                                 if (event.button !== 0)
                                     return;
                                 drag.current = { y: event.clientY, height: textareaRef.current?.getBoundingClientRect().height ?? minimumHeight };
@@ -98,5 +100,5 @@ export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaD
                                 else
                                     return;
                                 event.preventDefault();
-                            }, children: _jsx(PencilIcon, { paths: resizePaths, size: 22 }) })] })] }) }));
+                            }, children: _jsx(PencilIcon, { paths: resizePaths, size: 22 }) })] }), variant === 'underline' && _jsx(PencilLine, { className: "inkra-textarea__underline", seed: `${resolvedSeed}-underline` })] }) }));
 });

package/dist/hotkey/index.d.ts

@@ -25,6 +25,7 @@ export interface HotkeyInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     conflictMessage?: string;
     platform?: HotkeyPlatform;
     placeholder?: string;
+    recordingLabel?: string;
     clearable?: boolean;
     clearButtonLabel?: string;
     blurOnCapture?: boolean;

package/dist/hotkey/index.js

@@ -34,7 +34,7 @@ export const Hotkey = forwardRef(function Hotkey({ 'aria-label': ariaLabel, clas
     const label = formatHotkey(normalized, resolvedPlatform);
     return (_jsx("kbd", { ...props, "aria-label": ariaLabel ?? label, className: classes('inkra-hotkey', className), "data-platform": resolvedPlatform, "data-size": size, ref: ref, children: tokens.map((token, index) => (_jsxs("span", { className: "inkra-hotkey__part", children: [index > 0 && resolvedPlatform !== 'mac' ? (_jsx("span", { "aria-hidden": "true", className: "inkra-hotkey__separator", children: separator ?? '+' })) : null, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-hotkey__key", radius: 4, seed: `${hotkeySignature(normalized)}-${resolvedPlatform}-${index}`, variant: "quiet", children: _jsx(PencilText, { seed: `${hotkeySignature(normalized)}-${resolvedPlatform}-${index}-label`, children: token }) })] }, `${token}-${index}`))) }));
 });
-export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, blurOnCapture = true, className, classNames = {}, clearable = true, clearButtonLabel = 'Clear shortcut', conflict, conflictMessage = 'Shortcut already assigned', defaultValue = null, disabled, id, invalid = false, onBlur, onCancel, onCompositionEnd, onCompositionStart, onConflict, onFocus, onKeyDown, onValueChange, placeholder = 'Press shortcut', platform = 'auto', readOnly, required, seed, size = 'md', validateHotkey, value, ...props }, forwardedRef) {
+export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, blurOnCapture = true, className, classNames = {}, clearable = true, clearButtonLabel = 'Clear shortcut', conflict, conflictMessage = 'Shortcut already assigned', defaultValue = null, disabled, id, invalid = false, onBlur, onCancel, onCompositionEnd, onCompositionStart, onConflict, onFocus, onKeyDown, onValueChange, placeholder = 'Press shortcut', platform = 'auto', readOnly, recordingLabel = 'Press a shortcut...', required, seed, size = 'md', validateHotkey, value, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputRef = useRef(null);
     const composingRef = useRef(false);
@@ -48,18 +48,20 @@ export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby':
     const currentSignature = hotkeySignature(currentValue);
     const validationMessage = externalConflict ?? (localConflict?.signature === currentSignature ? localConflict.message : undefined);
     const messageId = validationMessage ? `${id ?? generatedId}-hotkey-conflict` : undefined;
+    const statusId = `${id ?? generatedId}-hotkey-status`;
     const state = useResolvedControlProps({
         id,
         required,
         disabled,
         readOnly,
         invalid: invalid || Boolean(validationMessage),
-        'aria-describedby': [ariaDescribedBy, messageId].filter(Boolean).join(' ') || undefined,
+        'aria-describedby': [ariaDescribedBy, statusId, messageId].filter(Boolean).join(' ') || undefined,
         'aria-errormessage': validationMessage ? messageId : ariaErrorMessage,
         'aria-invalid': ariaInvalid,
     });
     const resolvedSeed = seed ?? `inkra-hotkey-input-${state.id ?? generatedId}`;
     const displayValue = currentValue ? formatHotkey(currentValue, resolvedPlatform) : '';
+    const recording = focused && !state.disabled && !state.readOnly;
     useImperativeHandle(forwardedRef, () => inputRef.current);
     const updateValue = (nextValue, details) => {
         if (!isControlled)
@@ -119,12 +121,12 @@ export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby':
         setFocused(false);
         onBlur?.(event);
     };
-    return (_jsxs("span", { className: classes('inkra-hotkey-input', classNames.root), "data-disabled": state.disabled || undefined, "data-focus-within": focused || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: [_jsxs(PencilSurface, { as: "span", className: classes('inkra-hotkey-input__control', classNames.control), clipContent: true, seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("input", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, "aria-label": ariaLabel, autoComplete: "off", className: classes('inkra-hotkey-input__native', className, classNames.input), disabled: state.disabled, id: state.id, inputMode: "none", onBlur: handleBlur, onChange: () => { }, onCompositionEnd: event => {
+    return (_jsxs("span", { className: classes('inkra-hotkey-input', classNames.root), "data-disabled": state.disabled || undefined, "data-focus-within": focused || undefined, "data-invalid": state.invalid || undefined, "data-recording": recording || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: [_jsxs(PencilSurface, { as: "span", className: classes('inkra-hotkey-input__control', classNames.control), clipContent: true, seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("input", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, "aria-label": ariaLabel, autoComplete: "off", className: classes('inkra-hotkey-input__native', className, classNames.input), disabled: state.disabled, id: state.id, inputMode: "none", onBlur: handleBlur, onChange: () => { }, onCompositionEnd: event => {
                             composingRef.current = false;
                             onCompositionEnd?.(event);
                         }, onCompositionStart: event => {
                             composingRef.current = true;
                             onCompositionStart?.(event);
-                        }, onFocus: handleFocus, onKeyDown: handleKeyDown, readOnly: state.readOnly, ref: inputRef, required: state.required, spellCheck: false, value: displayValue }), _jsx("span", { "aria-hidden": "true", className: classes('inkra-hotkey-input__value', classNames.value), children: currentValue ? _jsx(Hotkey, { value: currentValue, platform: resolvedPlatform, size: size }) : _jsx(PencilText, { className: "inkra-hotkey-input__placeholder", seed: `${resolvedSeed}-placeholder`, children: placeholder }) }), clearable && currentValue ? (_jsx("button", { "aria-label": clearButtonLabel, className: "inkra-hotkey-input__clear", disabled: state.disabled || state.readOnly, onClick: clear, onPointerDown: event => event.preventDefault(), title: clearButtonLabel, type: "button", children: _jsx(PencilIcon, { paths: clearPaths, seed: `${resolvedSeed}-clear`, size: size === 'sm' ? 18 : size === 'lg' ? 26 : 22, sourceSize: 24 }) })) : null] }), validationMessage ? (_jsx(PencilText, { as: "span", className: classes('inkra-hotkey-input__message', classNames.message), id: messageId, role: "alert", seed: `${resolvedSeed}-message`, children: validationMessage })) : null] }));
+                        }, onFocus: handleFocus, onKeyDown: handleKeyDown, readOnly: state.readOnly, ref: inputRef, required: state.required, spellCheck: false, value: displayValue }), _jsx("span", { "aria-hidden": "true", className: classes('inkra-hotkey-input__value', classNames.value), children: recording ? (_jsx(PencilText, { className: "inkra-hotkey-input__recording", seed: `${resolvedSeed}-recording`, children: recordingLabel })) : currentValue ? (_jsx(Hotkey, { value: currentValue, platform: resolvedPlatform, size: size })) : (_jsx(PencilText, { className: "inkra-hotkey-input__placeholder", seed: `${resolvedSeed}-placeholder`, children: placeholder })) }), clearable && currentValue ? (_jsx("button", { "aria-label": clearButtonLabel, className: "inkra-hotkey-input__clear", disabled: state.disabled || state.readOnly, onClick: clear, onPointerDown: event => event.preventDefault(), title: clearButtonLabel, type: "button", children: _jsx(PencilIcon, { paths: clearPaths, seed: `${resolvedSeed}-clear`, size: size === 'sm' ? 18 : size === 'lg' ? 26 : 22, sourceSize: 24 }) })) : null, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-hotkey-input__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" })] }), _jsx("span", { "aria-live": "polite", className: "inkra-hotkey-input__status", id: statusId, children: recording ? recordingLabel : '' }), validationMessage ? (_jsx(PencilText, { as: "span", className: classes('inkra-hotkey-input__message', classNames.message), id: messageId, role: "alert", seed: `${resolvedSeed}-message`, children: validationMessage })) : null] }));
 });
 export { detectHotkeyPlatform, formatHotkey, getHotkeyTokens, hotkeyFromKeyboardEvent, hotkeySignature, normalizeHotkey, };

package/dist/hover-card/index.js

@@ -131,7 +131,7 @@ export const HoverCardContent = forwardRef(function HoverCardContent({ avoidColl
 export const HoverCardTitle = PopoverTitle;
 export const HoverCardDescription = PopoverDescription;
 export const HoverCardClose = PopoverClose;
-export const HoverCard = Object.freeze({
+export const HoverCard = /* @__PURE__ */ Object.freeze({
     Root: HoverCardRoot,
     Trigger: HoverCardTrigger,
     Content: HoverCardContent,

package/dist/image-cropper/index.js

@@ -124,8 +124,10 @@ export const ImageCropper = forwardRef(function ImageCropper({ alt, aspect = 1,
             return undefined;
         const update = () => {
             const rect = stage.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0)
-                setStageSize({ width: rect.width, height: rect.height });
+            if (rect.width > 0 && rect.height > 0) {
+                setStageSize(current => current.width === rect.width && current.height === rect.height
+                    ? current : { width: rect.width, height: rect.height });
+            }
         };
         update();
         const observer = new ResizeObserver(update);

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

@@ -0,0 +1,21 @@
+export interface VideoResourceLabels {
+    controls: string;
+    play: string;
+    pause: string;
+    seek: string;
+    mute: string;
+    unmute: string;
+    volume: string;
+    rate: string;
+    playbackError: string;
+    time: (current: number, duration: number) => string;
+}
+export interface VideoResourceProps {
+    src: string;
+    poster?: string;
+    alt: string;
+    labels?: Partial<VideoResourceLabels>;
+    onError?: () => void;
+    onLoad?: () => void;
+}
+export declare function VideoResource({ alt, labels: overrides, onError, onLoad, poster, src }: VideoResourceProps): import("react").JSX.Element;

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';