@openviking/react 0.1.1 → 0.1.3

package/dist/30~0.js

@@ -0,0 +1,1332 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment, Suspense, cloneElement, forwardRef, lazy, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useOverlayPosition } from "./o~0.js";
+function FilePreviewEditor({ draft, text, loading, failed, saveFailed, saving, onChange, onCancel }) {
+    if (loading) return /*#__PURE__*/ jsx("div", {
+        className: "ov-file-preview__state",
+        role: "status",
+        children: /*#__PURE__*/ jsx("p", {
+            className: "ov-file-preview__state-title",
+            children: text.loading
+        })
+    });
+    if (failed) return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-preview__state",
+        role: "alert",
+        children: [
+            /*#__PURE__*/ jsx("p", {
+                className: "ov-file-preview__state-title",
+                children: text.loadFailed
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                className: "ov-file-preview__button",
+                onClick: onCancel,
+                children: text.leaveEditing
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-preview__editor",
+        children: [
+            /*#__PURE__*/ jsx("textarea", {
+                className: "ov-file-preview__textarea",
+                value: draft,
+                readOnly: saving,
+                "aria-label": text.editor,
+                spellCheck: false,
+                onChange: (event)=>onChange(event.target.value)
+            }),
+            saveFailed ? /*#__PURE__*/ jsx("p", {
+                className: "ov-file-preview__notice",
+                role: "alert",
+                children: text.saveFailed
+            }) : null
+        ]
+    });
+}
+function encodeText(content) {
+    return new TextEncoder().encode(content);
+}
+function toFileSource(source) {
+    const { content, file, url, fileName, fileType } = source;
+    if ('string' == typeof content) return {
+        kind: 'bytes',
+        bytes: encodeText(content),
+        name: fileName,
+        ...fileType ? {
+            fileType
+        } : {}
+    };
+    if (file) return {
+        kind: 'file',
+        file: file instanceof File ? file : new File([
+            file
+        ], fileName),
+        name: fileName,
+        ...fileType ? {
+            fileType
+        } : {}
+    };
+    if (url) return {
+        kind: 'url',
+        url,
+        name: fileName,
+        ...fileType ? {
+            fileType
+        } : {}
+    };
+}
+function readCopyableText(source) {
+    const { content } = source;
+    return 'string' == typeof content && content.length > 0 ? content : void 0;
+}
+function isEmptyFile(source) {
+    return '' === source.content;
+}
+function StatePanel({ title, description, action, icon }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-preview__state",
+        role: "status",
+        children: [
+            icon,
+            /*#__PURE__*/ jsx("p", {
+                className: "ov-file-preview__state-title",
+                children: title
+            }),
+            description ? /*#__PURE__*/ jsx("p", {
+                className: "ov-file-preview__state-description",
+                children: description
+            }) : null,
+            action
+        ]
+    });
+}
+function EmptyFileState({ text }) {
+    return /*#__PURE__*/ jsx(StatePanel, {
+        title: text.fileEmpty
+    });
+}
+function LoadingState({ text }) {
+    return /*#__PURE__*/ jsx(StatePanel, {
+        title: text.loading ?? 'Loading…',
+        icon: /*#__PURE__*/ jsx("span", {
+            className: "ov-file-preview__spinner"
+        })
+    });
+}
+function LoadFailedState({ text, description, onRetry }) {
+    return /*#__PURE__*/ jsx(StatePanel, {
+        title: text.loadFailed,
+        description: description,
+        action: onRetry ? /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: "ov-file-preview__button",
+            onClick: onRetry,
+            children: text.retry
+        }) : void 0
+    });
+}
+function UnsupportedState({ text, onDownload }) {
+    return /*#__PURE__*/ jsx(StatePanel, {
+        title: text.unsupported,
+        action: onDownload ? /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: "ov-file-preview__button",
+            onClick: onDownload,
+            children: text.download
+        }) : void 0
+    });
+}
+function TruncatedNotice({ text }) {
+    return /*#__PURE__*/ jsx("p", {
+        className: "ov-file-preview__notice",
+        children: text.truncated
+    });
+}
+const Viewer = /*#__PURE__*/ lazy(async ()=>{
+    const { FilePreviewViewer } = await import("./file-preview-viewer~0.js");
+    return {
+        default: FilePreviewViewer
+    };
+});
+function LazyFilePreviewViewer(props) {
+    return /*#__PURE__*/ jsx(Suspense, {
+        fallback: /*#__PURE__*/ jsx(LoadingState, {
+            text: props.text
+        }),
+        children: /*#__PURE__*/ jsx(Viewer, {
+            ...props
+        })
+    });
+}
+function FilePreviewBody({ fileTab, text, locale, viewMode, editing, onViewModeChange, onHandleChange, onViewModesChange, onDownload, onLinkClick, onCancelEditing }) {
+    if (editing.editing || editing.loadingEdit || editing.editFailed) return /*#__PURE__*/ jsx(FilePreviewEditor, {
+        draft: editing.draft,
+        text: text,
+        loading: editing.loadingEdit,
+        failed: editing.editFailed,
+        saveFailed: editing.saveFailed,
+        saving: editing.saving,
+        onChange: editing.updateDraft,
+        onCancel: onCancelEditing
+    });
+    if (fileTab.loading) return /*#__PURE__*/ jsx(LoadingState, {
+        text: text
+    });
+    if (isEmptyFile(fileTab.source)) return /*#__PURE__*/ jsx(EmptyFileState, {
+        text: text
+    });
+    return /*#__PURE__*/ jsx(LazyFilePreviewViewer, {
+        tab: fileTab,
+        text: text,
+        locale: locale,
+        viewMode: viewMode,
+        onViewModeChange: onViewModeChange,
+        onDownload: onDownload,
+        onHandleChange: onHandleChange,
+        onViewModesChange: onViewModesChange,
+        onLinkClick: onLinkClick
+    });
+}
+const DEFAULT_LABELS = {
+    close: 'Close'
+};
+function useMergedRef(ref, target) {
+    const merged = useCallback((node)=>{
+        target.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref,
+        target
+    ]);
+    return merged;
+}
+function Tooltip({ children, content, placement = 'top', trigger = 'hover', delay = 300, disabled = false, className, style, onOpenChange, labels }) {
+    const text = {
+        ...DEFAULT_LABELS,
+        ...labels
+    };
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const timerRef = useRef(void 0);
+    const [surfaceNode, setSurfaceNode] = useState(null);
+    const id = useId();
+    const position = useOverlayPosition(open, triggerRef, surfaceNode, placement);
+    const change = useCallback((next)=>{
+        setOpen(next);
+        onOpenChange?.(next);
+    }, [
+        onOpenChange
+    ]);
+    const clearTimer = useCallback(()=>{
+        if (void 0 !== timerRef.current) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = void 0;
+        }
+    }, []);
+    useEffect(()=>clearTimer, [
+        clearTimer
+    ]);
+    useEffect(()=>{
+        if (disabled) {
+            clearTimer();
+            setOpen(false);
+        }
+    }, [
+        disabled,
+        clearTimer
+    ]);
+    useEffect(()=>{
+        if (!open || 'click' !== trigger) return;
+        const onPointerDown = (event)=>{
+            const target = event.target;
+            if (surfaceNode?.contains(target) || triggerRef.current?.contains(target)) return;
+            change(false);
+        };
+        const onKeyDown = (event)=>{
+            if ('Escape' === event.key) change(false);
+        };
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return ()=>{
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        change,
+        open,
+        surfaceNode,
+        trigger
+    ]);
+    const show = ()=>{
+        if (disabled) return;
+        if ('click' === trigger) return void change(!open);
+        clearTimer();
+        timerRef.current = window.setTimeout(()=>{
+            change(true);
+            timerRef.current = void 0;
+        }, delay);
+    };
+    const hide = ()=>{
+        if ('click' === trigger) return;
+        clearTimer();
+        change(false);
+    };
+    const child = children;
+    const childProps = child.props;
+    const childRef = child.ref;
+    const mergedRef = useMergedRef(childRef, triggerRef);
+    const triggerElement = /*#__PURE__*/ cloneElement(child, {
+        ref: mergedRef,
+        'aria-describedby': open && 'hover' === trigger ? id : void 0,
+        'aria-expanded': 'click' === trigger ? open : void 0,
+        onMouseEnter: (event)=>{
+            childProps.onMouseEnter?.(event);
+            if ('hover' === trigger) show();
+        },
+        onMouseLeave: (event)=>{
+            childProps.onMouseLeave?.(event);
+            if ('hover' === trigger) hide();
+        },
+        onFocus: (event)=>{
+            childProps.onFocus?.(event);
+            if ('hover' === trigger) show();
+        },
+        onBlur: (event)=>{
+            childProps.onBlur?.(event);
+            hide();
+        },
+        onClick: (event)=>{
+            childProps.onClick?.(event);
+            if ('click' === trigger) show();
+        }
+    });
+    const surface = open ? /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: setSurfaceNode,
+        id: id,
+        role: 'hover' === trigger ? 'tooltip' : 'dialog',
+        "aria-label": 'click' === trigger ? text.close : void 0,
+        className: [
+            'ov-tooltip',
+            className
+        ].filter(Boolean).join(' '),
+        "data-placement": position.placement,
+        style: {
+            top: position.top,
+            left: position.left,
+            ...style
+        },
+        onMouseEnter: 'hover' === trigger ? clearTimer : void 0,
+        onMouseLeave: 'hover' === trigger ? hide : void 0,
+        children: content
+    }), document.body) : null;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            triggerElement,
+            surface
+        ]
+    });
+}
+function FilePreviewBreadcrumbMenu({ segments, canOpen, disabled, onOpen }) {
+    return /*#__PURE__*/ jsx(Tooltip, {
+        trigger: "click",
+        placement: "bottom",
+        className: "ov-file-preview__breadcrumb-menu-surface",
+        content: /*#__PURE__*/ jsx("ul", {
+            className: "ov-file-preview__breadcrumb-menu",
+            role: "menu",
+            children: segments.map((segment)=>/*#__PURE__*/ jsx("li", {
+                    role: "none",
+                    children: /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        role: "menuitem",
+                        disabled: !canOpen || disabled,
+                        onClick: ()=>onOpen(segment.uri),
+                        children: [
+                            segment.label,
+                            "/"
+                        ]
+                    })
+                }, segment.uri))
+        }),
+        children: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: "ov-file-preview__breadcrumb-more",
+            "aria-label": "Show hidden path levels",
+            "aria-haspopup": "menu",
+            children: "…"
+        })
+    });
+}
+const MAX_ANCESTOR_WIDTH = 160;
+const OVERFLOW_BUTTON_WIDTH = 36;
+const SHIFT_DURATION = 160;
+function prefersReducedMotion() {
+    return "u" > typeof window && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function measureAvailable(root) {
+    const row = root.parentElement;
+    if (!row) return root.clientWidth;
+    const style = window.getComputedStyle(row);
+    const gap = Number.parseFloat(style.columnGap) || 0;
+    const siblings = Array.from(row.children).filter((child)=>child !== root && child instanceof HTMLElement);
+    const siblingWidth = siblings.reduce((sum, child)=>sum + child.getBoundingClientRect().width, 0);
+    const siblingGaps = gap * siblings.length;
+    return Math.max(0, row.clientWidth - siblingWidth - siblingGaps);
+}
+function FilePreviewBreadcrumb({ segments, title, canOpen, disabled, onOpen }) {
+    const rootRef = useRef(null);
+    const measureRef = useRef(null);
+    const currentRef = useRef(null);
+    const previousRef = useRef(void 0);
+    const [hiddenCount, setHiddenCount] = useState(0);
+    const [rootHidden, setRootHidden] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
+    const signature = JSON.stringify([
+        segments.map((s)=>s.uri),
+        title
+    ]);
+    useLayoutEffect(()=>{
+        const root = rootRef.current;
+        const measure = measureRef.current;
+        if (!root || !measure) return;
+        const run = ()=>{
+            const widths = Array.from(measure.children).map((child)=>child.getBoundingClientRect().width);
+            const available = measureAvailable(root);
+            const isOverflowing = widths.reduce((sum, width)=>sum + width, 0) > available;
+            const capped = isOverflowing ? widths.map((width, index)=>index < widths.length - 1 ? Math.min(width, MAX_ANCESTOR_WIDTH) : width) : widths;
+            const ancestors = capped.slice(0, -1);
+            const trailing = capped[capped.length - 1] ?? 0;
+            const total = capped.reduce((sum, width)=>sum + width, 0);
+            setOverflowing(isOverflowing);
+            let count = 0;
+            let used = total;
+            while(used > available && count < ancestors.length - 1){
+                used -= ancestors[count + 1] ?? 0;
+                if (0 === count) used += OVERFLOW_BUTTON_WIDTH;
+                count += 1;
+            }
+            let hideRoot = false;
+            if (used > available && ancestors.length > 0) {
+                const rootCollapsed = OVERFLOW_BUTTON_WIDTH + trailing;
+                hideRoot = rootCollapsed < used;
+            }
+            setHiddenCount(hideRoot ? ancestors.length : count);
+            setRootHidden(hideRoot);
+        };
+        run();
+        const observer = new ResizeObserver(run);
+        observer.observe(root);
+        observer.observe(measure);
+        if (root.parentElement) observer.observe(root.parentElement);
+        return ()=>observer.disconnect();
+    }, [
+        segments,
+        title
+    ]);
+    useLayoutEffect(()=>{
+        const current = currentRef.current;
+        const previous = previousRef.current;
+        if (!current) return;
+        const left = current.offsetLeft;
+        previousRef.current = {
+            signature,
+            left
+        };
+        if (!previous || previous.signature !== signature || previous.left === left || prefersReducedMotion()) return;
+        const animation = current.animate([
+            {
+                transform: `translateX(${previous.left - left}px)`,
+                opacity: 0.65
+            },
+            {
+                transform: 'translateX(0)',
+                opacity: 1
+            }
+        ], {
+            duration: SHIFT_DURATION,
+            easing: 'cubic-bezier(0.2, 0, 0, 1)'
+        });
+        return ()=>animation.cancel();
+    }, [
+        hiddenCount,
+        rootHidden,
+        signature
+    ]);
+    const hiddenSegments = segments.filter((_, index)=>rootHidden ? index < hiddenCount : index > 0 && index <= hiddenCount);
+    const menu = hiddenSegments.length ? /*#__PURE__*/ jsx(FilePreviewBreadcrumbMenu, {
+        segments: hiddenSegments,
+        canOpen: canOpen,
+        disabled: disabled,
+        onOpen: onOpen
+    }) : null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            'ov-file-preview__breadcrumb',
+            overflowing ? 'ov-file-preview__breadcrumb--overflowing' : ''
+        ].filter(Boolean).join(' '),
+        ref: rootRef,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-preview__breadcrumb-measure",
+                ref: measureRef,
+                "aria-hidden": "true",
+                children: [
+                    segments.map((segment)=>/*#__PURE__*/ jsxs("span", {
+                            className: "ov-file-preview__breadcrumb-part",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: segment.isFirst ? `${segment.uri}` : segment.label
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "ov-file-preview__breadcrumb-separator",
+                                    children: "/"
+                                })
+                            ]
+                        }, segment.uri)),
+                    /*#__PURE__*/ jsx("span", {
+                        children: title
+                    })
+                ]
+            }),
+            rootHidden && menu ? /*#__PURE__*/ jsxs("span", {
+                className: "ov-file-preview__breadcrumb-part",
+                children: [
+                    menu,
+                    /*#__PURE__*/ jsx("span", {
+                        className: "ov-file-preview__breadcrumb-separator",
+                        children: "/"
+                    })
+                ]
+            }) : null,
+            segments.map((segment, index)=>{
+                if (hiddenSegments.includes(segment)) return null;
+                return /*#__PURE__*/ jsxs(external_react_Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsxs("span", {
+                            className: "ov-file-preview__breadcrumb-part",
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "ov-file-preview__breadcrumb-link",
+                                    disabled: !canOpen || disabled,
+                                    title: segment.uri,
+                                    onClick: ()=>onOpen(segment.uri),
+                                    children: segment.isFirst ? `${segment.uri}` : segment.label
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "ov-file-preview__breadcrumb-separator",
+                                    children: "/"
+                                })
+                            ]
+                        }),
+                        0 === index && !rootHidden && menu ? /*#__PURE__*/ jsxs("span", {
+                            className: "ov-file-preview__breadcrumb-part",
+                            children: [
+                                menu,
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "ov-file-preview__breadcrumb-separator",
+                                    children: "/"
+                                })
+                            ]
+                        }) : null
+                    ]
+                }, segment.uri);
+            }),
+            /*#__PURE__*/ jsx("span", {
+                ref: currentRef,
+                className: "ov-file-preview__breadcrumb-current",
+                "aria-current": "page",
+                title: title,
+                children: title
+            })
+        ]
+    });
+}
+function FilePreviewCopyPath({ label, disabled, onClick }) {
+    return /*#__PURE__*/ jsx(Tooltip, {
+        content: label,
+        children: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: "ov-file-preview__action",
+            "aria-label": label,
+            disabled: disabled,
+            onClick: onClick,
+            children: /*#__PURE__*/ jsx("svg", {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 14 14",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: "M4.667 4.667V3.033c0-.653 0-.98.127-1.229a1.167 1.167 0 0 1 .51-.51c.25-.127.576-.127 1.23-.127h4.433c.653 0 .98 0 1.229.127.22.112.398.29.51.51.127.25.127.576.127 1.23v4.433c0 .653 0 .98-.127 1.229a1.167 1.167 0 0 1-.51.51c-.25.127-.576.127-1.23.127H9.333M3.033 12.833h4.434c.653 0 .98 0 1.229-.127.22-.112.398-.29.51-.51.127-.25.127-.576.127-1.229V6.533c0-.653 0-.98-.127-1.229a1.167 1.167 0 0 0-.51-.51c-.25-.127-.576-.127-1.23-.127H3.034c-.653 0-.98 0-1.23.127a1.167 1.167 0 0 0-.51.51c-.126.25-.126.576-.126 1.23v4.433c0 .653 0 .98.127 1.229.112.22.29.398.51.51.25.127.576.127 1.23.127Z"
+                })
+            })
+        })
+    });
+}
+const SEPARATOR = '/';
+function splitPathSegments(path) {
+    const trimmed = path?.trim();
+    if (!trimmed) return [];
+    const schemeIndex = trimmed.indexOf('://');
+    const scheme = schemeIndex >= 0 ? trimmed.slice(0, schemeIndex + 3) : '';
+    const body = schemeIndex >= 0 ? trimmed.slice(schemeIndex + 3) : trimmed;
+    const parts = body.split(SEPARATOR).filter(Boolean);
+    if (parts.length <= 1) return [];
+    const root = '' === scheme && body.startsWith(SEPARATOR) ? SEPARATOR : '';
+    const segments = [];
+    let uri = scheme;
+    parts.slice(0, -1).forEach((part, index)=>{
+        uri = 0 === index ? `${scheme}${root}${part}` : `${uri}${SEPARATOR}${part}`;
+        segments.push({
+            label: part,
+            uri,
+            isFirst: 0 === index
+        });
+    });
+    return segments;
+}
+function getPathFileName(path) {
+    const trimmed = path?.trim();
+    if (!trimmed) return;
+    const parts = trimmed.split(SEPARATOR).filter(Boolean);
+    return parts[parts.length - 1];
+}
+function FilePreviewHeader({ path, fileName, canOpenParent, titleExtra, slotActions, actions, text, onOpenParent }) {
+    const segments = splitPathSegments(path);
+    const title = getPathFileName(path) ?? fileName;
+    const actionNode = 'function' == typeof slotActions ? slotActions(actions) : slotActions;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "ov-file-preview__header",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-preview__path-row",
+                children: [
+                    /*#__PURE__*/ jsx(FilePreviewBreadcrumb, {
+                        segments: segments,
+                        title: title,
+                        canOpen: canOpenParent,
+                        disabled: actions.busy,
+                        onOpen: onOpenParent
+                    }),
+                    actions.canCopyPath ? /*#__PURE__*/ jsx(FilePreviewCopyPath, {
+                        label: text.copyPath,
+                        disabled: actions.busy,
+                        onClick: ()=>void actions.copyPath()
+                    }) : null,
+                    titleExtra
+                ]
+            }),
+            actionNode ? /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__header-actions",
+                children: actionNode
+            }) : null
+        ]
+    });
+}
+function levelToFileTab(tab, key) {
+    const level = tab.levels.find((candidate)=>candidate.key === key);
+    if (!level) return;
+    return {
+        kind: 'file',
+        key: `${tab.key}::${level.key}`,
+        source: level.source,
+        operations: tab.operations,
+        slots: tab.slots
+    };
+}
+function FilePreviewDirectoryBody({ tab, text, locale, actions, editing, viewMode, onViewModeChange, onHandleChange, onViewModesChange, onDownload, onCancelEditing }) {
+    const [internalKey, setInternalKey] = useState(()=>tab.defaultLevelKey ?? tab.levels[0].key);
+    const activeKey = tab.activeLevelKey ?? internalKey;
+    const fileTab = levelToFileTab(tab, activeKey) ?? levelToFileTab(tab, tab.levels[0].key);
+    const tabsRef = useRef(null);
+    const [indicator, setIndicator] = useState({
+        left: 0,
+        width: 0
+    });
+    useLayoutEffect(()=>{
+        const root = tabsRef.current;
+        if (!root) return;
+        const measure = ()=>{
+            const active = root.querySelector('[aria-selected="true"]');
+            if (!active) return;
+            setIndicator({
+                left: active.offsetLeft,
+                width: active.offsetWidth
+            });
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(root);
+        return ()=>observer.disconnect();
+    }, [
+        activeKey,
+        tab.levels
+    ]);
+    const changeLevel = (key)=>{
+        if (void 0 === tab.activeLevelKey) setInternalKey(key);
+        tab.onActiveLevelChange?.(key);
+    };
+    const onLevelKeyDown = (event)=>{
+        const keys = [
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End'
+        ];
+        if (!keys.includes(event.key)) return;
+        const buttons = Array.from(event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'));
+        if (0 === buttons.length) return;
+        const current = buttons.indexOf(event.target);
+        const next = 'Home' === event.key ? 0 : 'End' === event.key ? buttons.length - 1 : (current + ('ArrowRight' === event.key ? 1 : -1) + buttons.length) % buttons.length;
+        const target = buttons[next];
+        if (!target) return;
+        event.preventDefault();
+        target.focus();
+        const key = tab.levels[next]?.key;
+        if (void 0 !== key) changeLevel(key);
+    };
+    if (!fileTab) return null;
+    if (tab.loading) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(FilePreviewHeader, {
+                path: fileTab.source.path,
+                fileName: fileTab.source.fileName,
+                canOpenParent: Boolean(tab.operations?.openParent),
+                titleExtra: tab.slots?.titleExtra,
+                slotActions: tab.slots?.actions,
+                actions: actions,
+                text: text,
+                onOpenParent: (uri)=>void tab.operations?.openParent?.(uri)
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__body",
+                children: /*#__PURE__*/ jsx(LoadingState, {
+                    text: text
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(FilePreviewHeader, {
+                path: fileTab.source.path,
+                fileName: fileTab.source.fileName,
+                canOpenParent: Boolean(tab.operations?.openParent),
+                titleExtra: tab.slots?.titleExtra,
+                slotActions: tab.slots?.actions,
+                actions: actions,
+                text: text,
+                onOpenParent: (uri)=>void tab.operations?.openParent?.(uri)
+            }),
+            tab.levels.length > 1 ? /*#__PURE__*/ jsxs("div", {
+                className: "ov-file-preview__levels",
+                role: "tablist",
+                ref: tabsRef,
+                tabIndex: -1,
+                onKeyDown: onLevelKeyDown,
+                children: [
+                    tab.levels.map((level)=>/*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            role: "tab",
+                            "aria-selected": level.key === activeKey,
+                            tabIndex: level.key === activeKey ? 0 : -1,
+                            className: "ov-file-preview__level",
+                            "data-active": level.key === activeKey || void 0,
+                            onClick: ()=>changeLevel(level.key),
+                            children: level.label
+                        }, level.key)),
+                    /*#__PURE__*/ jsx("span", {
+                        "aria-hidden": "true",
+                        className: "ov-file-preview__level-indicator",
+                        style: {
+                            transform: `translateX(${indicator.left}px)`,
+                            width: indicator.width
+                        }
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__body",
+                children: /*#__PURE__*/ jsx(FilePreviewBody, {
+                    fileTab: fileTab,
+                    text: text,
+                    locale: locale,
+                    viewMode: viewMode,
+                    editing: editing,
+                    onViewModeChange: onViewModeChange,
+                    onHandleChange: onHandleChange,
+                    onViewModesChange: onViewModesChange,
+                    onDownload: onDownload,
+                    onCancelEditing: onCancelEditing
+                })
+            }),
+            tab.slots?.footer ? /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__footer",
+                children: tab.slots.footer
+            }) : null
+        ]
+    });
+}
+function FilePreviewPanels({ contentTab, directoryTab, fileTab, panelProps, panelClass, text, locale, actions, actionContext, editing, viewMode, setViewMode, onHandleChange, onViewModesChange, linkClickHandler, activeTab }) {
+    if (contentTab) return /*#__PURE__*/ jsx("div", {
+        ...panelProps,
+        className: `${panelClass} ${panelClass}--content`,
+        children: contentTab.content
+    });
+    if (directoryTab) return /*#__PURE__*/ jsx("div", {
+        ...panelProps,
+        className: panelClass,
+        children: /*#__PURE__*/ jsx(FilePreviewDirectoryBody, {
+            tab: directoryTab,
+            text: text,
+            locale: locale,
+            actions: actionContext,
+            editing: editing,
+            viewMode: viewMode,
+            onViewModeChange: setViewMode,
+            onHandleChange: onHandleChange,
+            onViewModesChange: onViewModesChange,
+            onDownload: ()=>{},
+            onCancelEditing: actionContext.cancelEditing
+        })
+    });
+    if (!fileTab) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        ...panelProps,
+        className: panelClass,
+        children: [
+            /*#__PURE__*/ jsx(FilePreviewHeader, {
+                path: fileTab.source.path,
+                fileName: fileTab.source.fileName,
+                canOpenParent: Boolean(fileTab.operations?.openParent),
+                titleExtra: fileTab.slots?.titleExtra,
+                slotActions: fileTab.slots?.actions,
+                actions: actionContext,
+                text: text,
+                onOpenParent: (uri)=>void actions.openParent(activeTab, uri)
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__body",
+                children: /*#__PURE__*/ jsx(FilePreviewBody, {
+                    fileTab: fileTab,
+                    text: text,
+                    locale: locale,
+                    viewMode: viewMode,
+                    editing: editing,
+                    onViewModeChange: setViewMode,
+                    onHandleChange: onHandleChange,
+                    onViewModesChange: onViewModesChange,
+                    onDownload: ()=>void actions.download(fileTab),
+                    onLinkClick: linkClickHandler,
+                    onCancelEditing: actionContext.cancelEditing
+                })
+            }),
+            fileTab.source.truncated ? /*#__PURE__*/ jsx(TruncatedNotice, {
+                text: text
+            }) : null,
+            fileTab.slots?.footer ? /*#__PURE__*/ jsx("div", {
+                className: "ov-file-preview__footer",
+                children: fileTab.slots.footer
+            }) : null
+        ]
+    });
+}
+const file_preview_labels_DEFAULT_LABELS = {
+    copyPath: 'Copy path',
+    editor: 'Edit content',
+    leaveEditing: 'Cancel',
+    retry: 'Retry',
+    loadFailed: 'Failed to load the file',
+    saveFailed: 'Failed to save',
+    unsupported: 'Preview is not supported for this format',
+    loading: 'Loading…',
+    download: 'Download',
+    fileEmpty: 'This file is empty',
+    noContent: 'No content to show',
+    truncated: 'Only part of the content is shown'
+};
+const OUTLINE_RADIUS = 7;
+const STROKE_INSET = 0.5;
+function buildOutline(width, top, bottom, left, right) {
+    const radius = OUTLINE_RADIUS;
+    if (right - left < 2 * radius + 1) return `M0 ${bottom} H${width}`;
+    const lead = left > radius ? [
+        `M0 ${bottom}`,
+        `H${left - radius}`
+    ] : [
+        `M${left} ${bottom}`
+    ];
+    return [
+        ...lead,
+        `Q${left} ${bottom} ${left} ${bottom - radius}`,
+        `V${top + radius}`,
+        `Q${left} ${top} ${left + radius} ${top}`,
+        `H${right - radius}`,
+        `Q${right} ${top} ${right} ${top + radius}`,
+        `V${bottom - radius}`,
+        `Q${right} ${bottom} ${right + radius} ${bottom}`,
+        `H${width}`
+    ].join(' ');
+}
+function FilePreviewTabRow({ tabs, activeKey, disabled, tabId, panelId, onSelect }) {
+    const trackRef = useRef(null);
+    const [outline, setOutline] = useState('');
+    useLayoutEffect(()=>{
+        const track = trackRef.current;
+        if (!track) return;
+        const measure = ()=>{
+            const trackRect = track.getBoundingClientRect();
+            const bottom = trackRect.height - STROKE_INSET;
+            const active = track.querySelector('[aria-selected="true"]');
+            if (!active) return void setOutline(`M0 ${bottom} H${trackRect.width}`);
+            const rect = active.getBoundingClientRect();
+            setOutline(buildOutline(trackRect.width, rect.top - trackRect.top + STROKE_INSET, rect.bottom - trackRect.top - STROKE_INSET, rect.left - trackRect.left, rect.right - trackRect.left));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(track);
+        return ()=>observer.disconnect();
+    }, [
+        activeKey,
+        tabs
+    ]);
+    const onKeyDown = (event)=>{
+        const keys = [
+            'ArrowLeft',
+            'ArrowRight',
+            'Home',
+            'End'
+        ];
+        if (!keys.includes(event.key)) return;
+        const buttons = Array.from(event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'));
+        if (0 === buttons.length) return;
+        const current = buttons.indexOf(event.target);
+        const next = 'Home' === event.key ? 0 : 'End' === event.key ? buttons.length - 1 : (current + ('ArrowRight' === event.key ? 1 : -1) + buttons.length) % buttons.length;
+        const target = buttons[next];
+        if (!target) return;
+        event.preventDefault();
+        target.focus();
+        onSelect(target.dataset.key ?? '');
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: "ov-file-preview__tab-row",
+        children: /*#__PURE__*/ jsxs("div", {
+            role: "tablist",
+            className: "ov-file-preview__tab-track",
+            ref: trackRef,
+            tabIndex: -1,
+            onKeyDown: onKeyDown,
+            children: [
+                tabs.map((tab)=>{
+                    const selected = tab.key === activeKey;
+                    return /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        role: "tab",
+                        "data-key": tab.key,
+                        id: tabId(tab.key),
+                        "aria-selected": selected,
+                        "aria-controls": panelId(tab.key),
+                        tabIndex: selected ? 0 : -1,
+                        disabled: tab.disabled || disabled,
+                        title: 'string' == typeof tab.title ? tab.title : void 0,
+                        className: [
+                            'ov-file-preview__tab',
+                            selected ? 'ov-file-preview__tab--active' : ''
+                        ].filter(Boolean).join(' '),
+                        onClick: ()=>onSelect(tab.key),
+                        children: [
+                            tab.icon ? /*#__PURE__*/ jsx("span", {
+                                className: "ov-file-preview__tab-icon",
+                                "aria-hidden": "true",
+                                children: tab.icon
+                            }) : null,
+                            /*#__PURE__*/ jsx("span", {
+                                className: "ov-file-preview__tab-title",
+                                children: tab.title ?? ('file' === tab.kind ? tab.source.fileName : tab.key)
+                            })
+                        ]
+                    }, tab.key);
+                }),
+                /*#__PURE__*/ jsx("svg", {
+                    className: "ov-file-preview__tab-outline",
+                    "aria-hidden": "true",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: outline
+                    })
+                })
+            ]
+        })
+    });
+}
+async function copyText(value, notify) {
+    try {
+        await navigator.clipboard.writeText(value);
+    } catch  {
+        return false;
+    }
+    notify?.(value);
+    return true;
+}
+function useFilePreviewActions() {
+    const pending = useRef(new Set());
+    async function run(key, { execute, notify }, value) {
+        if (!execute || pending.current.has(key)) return;
+        pending.current.add(key);
+        try {
+            await execute(value);
+        } catch  {
+            return;
+        } finally{
+            pending.current.delete(key);
+        }
+        notify?.(value);
+    }
+    return {
+        openParent: (tab, uri)=>'content' === tab.kind ? Promise.resolve() : run(`openParent:${tab.key}`, {
+                execute: tab.operations?.openParent,
+                notify: tab.onOpenParent
+            }, uri),
+        download: (tab)=>run(`download:${tab.key}`, {
+                execute: tab.operations?.download,
+                notify: tab.onDownload
+            }, void 0),
+        openUri: (tab, uri)=>run(`openUri:${tab.key}`, {
+                execute: tab.operations?.openUri,
+                notify: tab.onOpenUri
+            }, uri),
+        copyPath: (tab, path)=>copyText(path, tab.onCopyPath),
+        copyContent: (tab, text)=>copyText(text, 'onCopyContent' in tab ? tab.onCopyContent : void 0)
+    };
+}
+function useFilePreviewActionsContext({ activeTab, fileTab, currentPath, currentSource, viewMode, canSwitchView, setViewMode, editing, operations }) {
+    const startEditing = useCallback(()=>{
+        if (!fileTab) return;
+        setViewMode('source');
+        editing.start(fileTab);
+    }, [
+        editing,
+        fileTab,
+        setViewMode
+    ]);
+    const saveEditing = useCallback(async ()=>{
+        if (!fileTab) return false;
+        const saved = await editing.save(fileTab);
+        if (saved) setViewMode('preview');
+        return saved;
+    }, [
+        editing,
+        fileTab,
+        setViewMode
+    ]);
+    const cancelEditing = useCallback(()=>{
+        editing.discard(activeTab);
+        setViewMode('preview');
+    }, [
+        activeTab,
+        editing,
+        setViewMode
+    ]);
+    const copyable = currentSource ? readCopyableText(currentSource) : void 0;
+    const copyContent = useCallback(async ()=>{
+        if (!copyable) return false;
+        return operations.copyContent(activeTab, copyable);
+    }, [
+        activeTab,
+        copyable,
+        operations
+    ]);
+    const copyPath = useCallback(async ()=>{
+        const path = currentPath;
+        if (!path) return false;
+        return operations.copyPath(activeTab, path);
+    }, [
+        activeTab,
+        currentPath,
+        operations
+    ]);
+    const download = useCallback(()=>{
+        if (fileTab) operations.download(fileTab);
+    }, [
+        fileTab,
+        operations
+    ]);
+    return {
+        viewMode,
+        setViewMode,
+        canSwitchView,
+        editing: editing.editing,
+        busy: editing.saving || editing.loadingEdit,
+        canEdit: Boolean(fileTab?.editing) && !editing.editing,
+        startEditing,
+        saveEditing,
+        cancelEditing,
+        canCopyContent: Boolean(copyable),
+        copyContent,
+        canCopyPath: Boolean(currentPath),
+        copyPath,
+        canDownload: Boolean(fileTab?.operations?.download),
+        download
+    };
+}
+function useFilePreviewIds(activeKey) {
+    const instanceId = useId();
+    const tabId = (key)=>`${instanceId}-tab-${key}`;
+    const panelId = (key)=>`${instanceId}-panel-${key}`;
+    return {
+        tabId,
+        panelId,
+        panelProps: {
+            id: panelId(activeKey),
+            role: 'tabpanel',
+            'aria-labelledby': tabId(activeKey)
+        }
+    };
+}
+function initialLevelKey(tab, remembered, tabKey) {
+    const preferred = tab.activeLevelKey ?? remembered[tabKey] ?? tab.defaultLevelKey;
+    const first = tab.levels[0]?.key ?? '';
+    if (void 0 === preferred) return first;
+    return tab.levels.some((level)=>level.key === preferred) ? preferred : first;
+}
+function useDirectoryLevel(tab) {
+    const [levelKeys, setLevelKeys] = useState({});
+    if (!tab) return {};
+    const activeLevel = tab.levels.find((level)=>level.key === initialLevelKey(tab, levelKeys, tab.key)) ?? tab.levels[0];
+    return {
+        activeLevel,
+        directoryTab: {
+            ...tab,
+            activeLevelKey: activeLevel.key,
+            onActiveLevelChange: (key)=>{
+                if (void 0 === tab.activeLevelKey) setLevelKeys((previous)=>({
+                        ...previous,
+                        [tab.key]: key
+                    }));
+                tab.onActiveLevelChange?.(key);
+            }
+        },
+        source: activeLevel.source
+    };
+}
+function useFilePreviewEditing(activeTabKey) {
+    const [editing, setEditing] = useState(false);
+    const [loadingEdit, setLoadingEdit] = useState(false);
+    const [editFailed, setEditFailed] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [saveFailed, setSaveFailed] = useState(false);
+    const [draft, setDraft] = useState('');
+    const requestId = useRef(0);
+    const loading = useRef(false);
+    const pendingSave = useRef(false);
+    const lastKey = useRef(activeTabKey);
+    if (lastKey.current !== activeTabKey) {
+        lastKey.current = activeTabKey;
+        requestId.current += 1;
+        loading.current = false;
+        if (editing) setEditing(false);
+        if (loadingEdit) setLoadingEdit(false);
+        if (editFailed) setEditFailed(false);
+        if (saveFailed) setSaveFailed(false);
+        if (draft) setDraft('');
+    }
+    function discard(tab) {
+        requestId.current += 1;
+        loading.current = false;
+        const wasEditing = editing;
+        const discarded = draft;
+        setEditing(false);
+        setLoadingEdit(false);
+        setEditFailed(false);
+        setSaveFailed(false);
+        setDraft('');
+        if (wasEditing && 'file' === tab.kind) tab.editing?.onCancel?.(discarded);
+    }
+    async function start(tab) {
+        if (loading.current || pendingSave.current) return;
+        const id = ++requestId.current;
+        loading.current = true;
+        setLoadingEdit(true);
+        setEditFailed(false);
+        setSaveFailed(false);
+        let content;
+        try {
+            content = tab.editing?.loadContent ? await tab.editing.loadContent(tab.source) : tab.source.content ?? await tab.source.file?.text();
+        } catch  {
+            if (id === requestId.current) setEditFailed(true);
+        }
+        if (id !== requestId.current) return;
+        loading.current = false;
+        setLoadingEdit(false);
+        if (void 0 !== content) {
+            setDraft(content);
+            setEditing(true);
+        }
+    }
+    async function save(tab) {
+        if (!editing || !tab.editing || pendingSave.current) return false;
+        pendingSave.current = true;
+        setSaving(true);
+        setSaveFailed(false);
+        const value = draft;
+        try {
+            await tab.editing.save(value);
+        } catch  {
+            setSaveFailed(true);
+            return false;
+        } finally{
+            pendingSave.current = false;
+            setSaving(false);
+        }
+        setEditing(false);
+        setDraft('');
+        tab.editing.onSave?.(value);
+        return true;
+    }
+    return {
+        editing,
+        loadingEdit,
+        editFailed,
+        saving,
+        saveFailed,
+        draft,
+        discard,
+        start,
+        save,
+        updateDraft: (value)=>{
+            setDraft(value);
+            setSaveFailed(false);
+        }
+    };
+}
+function isFileTab(tab) {
+    return 'file' === tab.kind;
+}
+const file_preview_FilePreview = /*#__PURE__*/ forwardRef(function({ tabs, activeKey, defaultActiveKey, locale, labels, onActiveKeyChange, className, ...rest }, ref) {
+    const text = {
+        ...file_preview_labels_DEFAULT_LABELS,
+        ...labels
+    };
+    const [internalKey, setInternalKey] = useState(()=>defaultActiveKey ?? tabs[0].key);
+    const [viewMode, setViewMode] = useState('preview');
+    const [viewModes, setViewModes] = useState([]);
+    const viewerHandle = useRef(null);
+    const panelClass = 'ov-file-preview__panel';
+    const currentKey = activeKey ?? internalKey;
+    const activeTab = tabs.find((tab)=>tab.key === currentKey) ?? tabs[0];
+    const { tabId, panelId, panelProps } = useFilePreviewIds(activeTab.key);
+    const editing = useFilePreviewEditing(activeTab.key);
+    const actions = useFilePreviewActions();
+    const tabText = {
+        ...text,
+        ...activeTab.labels
+    };
+    const fileTab = isFileTab(activeTab) ? activeTab : void 0;
+    const directoryTab = 'directory' === activeTab.kind ? activeTab : void 0;
+    const contentTab = fileTab || directoryTab ? void 0 : activeTab;
+    const switchTab = useCallback((key)=>{
+        if (editing.saving) return false;
+        if (key === currentKey && key === activeTab.key) return false;
+        const target = tabs.find((tab)=>tab.key === key);
+        if (!target || target.disabled) return false;
+        const syncingOnly = target.key === activeTab.key;
+        if (!syncingOnly) {
+            editing.discard(activeTab);
+            setViewMode('preview');
+            setViewModes([]);
+            viewerHandle.current = null;
+        }
+        if (void 0 === activeKey) setInternalKey(key);
+        onActiveKeyChange?.(key);
+        return true;
+    }, [
+        activeKey,
+        activeTab,
+        currentKey,
+        editing,
+        onActiveKeyChange,
+        tabs
+    ]);
+    const onHandleChange = useCallback((handle)=>{
+        viewerHandle.current = handle;
+    }, []);
+    const onViewModesChange = useCallback((modes)=>{
+        const next = modes.map((mode)=>mode.value);
+        setViewModes((previous)=>previous.join() === next.join() ? previous : next);
+    }, []);
+    useImperativeHandle(ref, ()=>({
+            setActiveTab: switchTab,
+            getActiveTab: ()=>activeTab.key,
+            getViewerHandle: ()=>fileTab ? viewerHandle.current : null
+        }), [
+        activeTab.key,
+        fileTab,
+        switchTab
+    ]);
+    const canSwitchView = Boolean(fileTab) && viewModes.includes('preview') && viewModes.includes('source');
+    const onLinkClick = useCallback((_event, link)=>{
+        if (fileTab) actions.openUri(fileTab, link.url);
+    }, [
+        actions,
+        fileTab
+    ]);
+    const linkClickHandler = fileTab?.operations?.openUri ? onLinkClick : void 0;
+    const level = useDirectoryLevel(directoryTab);
+    const currentPath = level.source?.path ?? fileTab?.source.path;
+    const currentSource = level.source ?? fileTab?.source;
+    const actionContext = useFilePreviewActionsContext({
+        activeTab,
+        fileTab,
+        currentPath,
+        currentSource,
+        viewMode,
+        canSwitchView,
+        setViewMode,
+        editing,
+        operations: actions
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...rest,
+        className: [
+            'ov-file-preview',
+            className
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ jsx(FilePreviewTabRow, {
+                tabs: tabs,
+                activeKey: activeTab.key,
+                disabled: editing.saving,
+                tabId: tabId,
+                panelId: panelId,
+                onSelect: (key)=>void switchTab(key)
+            }),
+            /*#__PURE__*/ jsx(FilePreviewPanels, {
+                contentTab: contentTab,
+                directoryTab: level.directoryTab,
+                fileTab: fileTab,
+                panelProps: panelProps,
+                panelClass: panelClass,
+                text: tabText,
+                locale: locale,
+                actions: actions,
+                actionContext: actionContext,
+                editing: editing,
+                viewMode: viewMode,
+                setViewMode: setViewMode,
+                onHandleChange: onHandleChange,
+                onViewModesChange: onViewModesChange,
+                linkClickHandler: linkClickHandler,
+                activeTab: activeTab
+            })
+        ]
+    });
+});
+export { LoadFailedState, LoadingState, Tooltip, UnsupportedState, file_preview_FilePreview as FilePreview, toFileSource };