@kortix/ui 0.14.3 → 0.14.4

package/dist/files/renderers/docx/docx-viewer.js

@@ -0,0 +1,621 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { DocxEditorViewer, setWasmSource, useDocxComments, useDocxEditor, useDocxPageLayout, useDocxTrackChanges, useDocxViewerThumbnails, } from '@extend-ai/react-docx';
+import { MinusCircleIcon as CircleMinus, PlusCircleIcon as CirclePlus, DotsThreeIcon as Ellipsis, GitDiffIcon as FileDiff, ChatIcon as MessageSquare, UploadIcon as Upload, } from '@phosphor-icons/react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import * as React from 'react';
+import { Button } from '../../../primitives/button.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
+import { Input } from '../../../primitives/input.js';
+import { Separator } from '../../../primitives/separator.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../primitives/tooltip.js';
+import { DocumentViewerThumbnailSidebar, useElementWidth, useInlineThumbnailSidebar, } from '../shared/document-viewer-sidebar.js';
+import { FileThumbnail } from '../shared/file-thumbnail.js';
+import { ScrollArea } from '../shared/scroll-area-compat.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../shared/select-compat.js';
+import { Spinner } from '../shared/spinner.js';
+import { ViewerDownloadButton } from '../shared/viewer-download-button.js';
+import { ViewerFileName } from '../shared/viewer-file-name.js';
+import { cn } from '../../../lib/utils.js';
+import { downloadBlob } from '../../../internal/lib/utils/download.js';
+import { createDocxCommentCardRenderer, createDocxTrackedChangeCardRenderer, } from './docx-annotation-card.js';
+import { SidebarGlyph as PanelLeft } from '../../../icons/sidebar-toggle.js';
+// react-docx loads its wasm inside a `blob:`-URL Web Worker, where a
+// root-relative path (`/_next/static/media/docx_wasm_bg.*.wasm`) fails to parse
+// on `fetch`. Point it at an absolute, origin-qualified copy served from
+// `public/` (populated by `scripts/copy-viewer-wasm.mjs`) before the first
+// document import initializes the engine.
+if (typeof window !== 'undefined') {
+    try {
+        setWasmSource(new URL('/react-docx/docx_wasm_bg.wasm', window.location.origin).href);
+    }
+    catch {
+        // WASM was already initialized in this realm (e.g. after HMR); the source
+        // is fixed and cannot be reconfigured. Safe to ignore.
+    }
+}
+const DOCX_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+const DOCX_LOADING_INDICATOR_DELAY_MS = 300;
+const DOCX_THUMBNAIL_WIDTH = 92;
+const DOCX_THUMBNAIL_LIST_PADDING = 16;
+const DOCX_THUMBNAIL_ROW_ESTIMATE = 172;
+const DEFAULT_ZOOM = 50;
+const ZOOM_OPTIONS = [10, 25, 50, 75, 100, 125, 150, 175, 200, 400];
+const DOCX_PADDING_WARNING_TEXT = 'a style property during rerender';
+const DOCX_THUMBNAIL_FOCUS_RING_CLASS = 'group-focus-visible/docx-thumbnail-sidebar:ring-2 group-focus-visible/docx-thumbnail-sidebar:ring-ring group-focus-visible/docx-thumbnail-sidebar:ring-offset-1 group-focus-visible/docx-thumbnail-sidebar:ring-offset-background';
+const DOCX_THUMBNAIL_PREFETCH_ROWS = 4;
+function createDocxActivePageStore() {
+    let activePage = 1;
+    const listeners = new Set();
+    return {
+        getSnapshot: () => activePage,
+        setActivePage: (nextPage) => {
+            const value = typeof nextPage === 'function' ? nextPage(activePage) : nextPage;
+            const normalizedValue = Math.max(1, Math.round(value || 1));
+            if (normalizedValue === activePage)
+                return;
+            activePage = normalizedValue;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+    };
+}
+function useDocxActivePage(activePageStore) {
+    return React.useSyncExternalStore(activePageStore.subscribe, activePageStore.getSnapshot, activePageStore.getSnapshot);
+}
+function areNumberArraysEqual(left, right) {
+    return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+async function loadDocxFile(url, displayFileName) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch DOCX (${response.status})`);
+    }
+    const blob = await response.blob();
+    return new File([blob], displayFileName, {
+        type: blob.type || DOCX_MIME_TYPE,
+    });
+}
+function formatDocumentName(fileName, url) {
+    if (fileName?.trim())
+        return fileName;
+    const pathname = url.split('?')[0] ?? '';
+    const rawName = pathname.split('/').pop() ?? 'document.docx';
+    try {
+        return decodeURIComponent(rawName);
+    }
+    catch {
+        return rawName;
+    }
+}
+function ensureDocxExtension(fileName) {
+    return fileName.toLowerCase().endsWith('.docx') ? fileName : `${fileName}.docx`;
+}
+async function downloadDocxFile({ file, fileName, url, }) {
+    if (file) {
+        downloadBlob(file, ensureDocxExtension(fileName));
+        return;
+    }
+    if (!url)
+        return;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to download DOCX (${response.status})`);
+    }
+    downloadBlob(await response.blob(), ensureDocxExtension(fileName));
+}
+function getNextZoomScale(currentZoomScale, direction) {
+    const currentIndex = ZOOM_OPTIONS.indexOf(currentZoomScale);
+    let fallbackIndex = -1;
+    if (direction > 0) {
+        fallbackIndex = ZOOM_OPTIONS.findIndex((value) => value > currentZoomScale);
+    }
+    else {
+        for (let index = ZOOM_OPTIONS.length - 1; index >= 0; index -= 1) {
+            if (ZOOM_OPTIONS[index] < currentZoomScale) {
+                fallbackIndex = index;
+                break;
+            }
+        }
+    }
+    const resolvedIndex = currentIndex >= 0 ? currentIndex : fallbackIndex;
+    if (resolvedIndex < 0)
+        return currentZoomScale;
+    const nextIndex = Math.min(Math.max(resolvedIndex + direction, 0), ZOOM_OPTIONS.length - 1);
+    return ZOOM_OPTIONS[nextIndex] ?? currentZoomScale;
+}
+function normalizeDocxZoomScale(value) {
+    return typeof value === 'number' && ZOOM_OPTIONS.includes(value)
+        ? value
+        : DEFAULT_ZOOM;
+}
+function useDelayedLoadingIndicator(isLoading, delayMs) {
+    const [showSpinner, setShowSpinner] = React.useState(false);
+    React.useEffect(() => {
+        if (!isLoading)
+            return;
+        const timeoutId = window.setTimeout(() => {
+            setShowSpinner(true);
+        }, delayMs);
+        return () => {
+            window.clearTimeout(timeoutId);
+            setShowSpinner(false);
+        };
+    }, [delayMs, isLoading]);
+    return isLoading && showSpinner;
+}
+function isDocxPaddingWarning(args) {
+    return (typeof args[0] === 'string' &&
+        args[0].includes(DOCX_PADDING_WARNING_TEXT) &&
+        args.some((arg) => String(arg).includes('padding')));
+}
+function useSuppressDocxPaddingWarning(enabled) {
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const originalConsoleError = console.error;
+        console.error = (...args) => {
+            if (isDocxPaddingWarning(args))
+                return;
+            originalConsoleError(...args);
+        };
+        return () => {
+            console.error = originalConsoleError;
+        };
+    }, [enabled]);
+}
+function isInteractiveViewerTarget(target) {
+    return (target instanceof Element &&
+        Boolean(target.closest('a[href], button, input, select, textarea, [contenteditable="true"], [role="button"], [role="link"]')));
+}
+function ToolbarTooltip({ label, children }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex", children: children }) }), _jsx(TooltipContent, { side: "bottom", children: label })] }));
+}
+function ViewerLoadingSurface({ showSpinner = true }) {
+    return (_jsx("div", { className: "grid h-full min-h-52 place-items-center bg-transparent", children: showSpinner ? _jsx(Spinner, { className: "size-4" }) : null }));
+}
+/**
+ * View options (comments, tracked changes) and Upload. Download is not here:
+ * it is a visible button (`ViewerDownloadButton`) in the toolbar itself.
+ */
+function DocxFileActionsMenu({ controlsDisabled, onShowCommentsChange, onShowTrackedChangesChange, onUploadClick, showComments, showTrackedChanges, showUploadButton, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "transition-transform active:scale-[0.96]", "aria-label": tI18nComplete.raw('text9cccb4f00efb'), children: _jsx(Ellipsis, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-52", children: [_jsx(DropdownMenuCheckboxItem, { checked: showComments, disabled: controlsDisabled, onCheckedChange: (checked) => onShowCommentsChange(checked === true), children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(MessageSquare, { className: "size-4" }), tI18nComplete.raw('text355f79f29d7d')] }) }), _jsx(DropdownMenuCheckboxItem, { checked: showTrackedChanges, disabled: controlsDisabled, onCheckedChange: (checked) => onShowTrackedChangesChange(checked === true), children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileDiff, { className: "size-4" }), tI18nComplete.raw('text4dd230bca68f')] }) }), showUploadButton ? _jsx(DropdownMenuSeparator, {}) : null, showUploadButton ? (_jsxs(DropdownMenuItem, { onClick: onUploadClick, children: [_jsx(Upload, { className: "size-4" }), tI18nComplete.raw('text865e89de78d9')] })) : null] })] }));
+}
+function DocxPageNumberControl({ activePageStore, controlsDisabled, onPageChange, pageCount, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const activePage = useDocxActivePage(activePageStore);
+    const inputRef = React.useRef(null);
+    const displayPage = pageCount ? activePage : 1;
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [draftPage, setDraftPage] = React.useState(() => String(displayPage));
+    React.useEffect(() => {
+        if (!isEditing) {
+            setDraftPage(String(displayPage));
+        }
+    }, [displayPage, isEditing]);
+    React.useEffect(() => {
+        if (!isEditing)
+            return;
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, [isEditing]);
+    const applyPageDraft = React.useCallback((value) => {
+        const trimmedValue = value.trim();
+        if (!trimmedValue)
+            return;
+        const parsedPage = Number(trimmedValue);
+        if (!Number.isInteger(parsedPage))
+            return;
+        onPageChange(Math.min(Math.max(parsedPage, 1), Math.max(pageCount, 1)));
+    }, [onPageChange, pageCount]);
+    return (_jsxs("div", { className: "text-primary flex items-center text-sm whitespace-nowrap tabular-nums", children: [_jsx("span", { children: tI18nComplete.raw('text0a30a815d67d') }), isEditing ? (_jsx(Input, { ref: inputRef, "aria-label": tI18nComplete.raw('text05fa2e3b0a10'), inputMode: "numeric", pattern: "[0-9]*", size: "sm", value: draftPage, className: "mx-1 w-14 min-w-14 rounded-md [&_[data-slot=input]]:text-center", onBlur: () => setIsEditing(false), onChange: (event) => {
+                    const nextValue = event.target.value;
+                    setDraftPage(nextValue);
+                    applyPageDraft(nextValue);
+                }, onKeyDown: (event) => {
+                    if (event.key === 'Enter' || event.key === 'Escape') {
+                        event.currentTarget.blur();
+                    }
+                } })) : (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "font-normal", "aria-label": tI18nComplete('text8b5b847c92d6', { value0: displayPage }), disabled: controlsDisabled || !pageCount, onClick: () => {
+                    setDraftPage(String(displayPage));
+                    setIsEditing(true);
+                }, children: displayPage })), _jsxs("span", { children: [tI18nComplete.raw('text28391d3bc64e'), " ", pageCount || '-'] })] }));
+}
+function DocxToolbar({ activePageStore, controlsDisabled, fileName, isDark, isPreparingDownload, onDownload, onIsDarkChange, onPageChange, onShowCommentsChange, onShowTrackedChangesChange, onToggleSidebar, onUploadClick, pageCount, setZoomScale, showComments, showDownloadButton = true, showNightRenderToggle, showTrackedChanges, showUploadButton = true, toolbarActions, zoomScale, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const canZoomIn = zoomScale < ZOOM_OPTIONS[ZOOM_OPTIONS.length - 1];
+    const canZoomOut = zoomScale > ZOOM_OPTIONS[0];
+    return (_jsx("div", { className: "bg-background flex min-h-12 flex-wrap items-center justify-between gap-2 border-b px-3 py-2", children: _jsxs(TooltipProvider, { children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(ToolbarTooltip, { label: tI18nComplete.raw('text3bba69274a7d'), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "transition-transform active:scale-[0.96]", "aria-label": tI18nComplete.raw('text3bba69274a7d'), disabled: controlsDisabled, onClick: onToggleSidebar, children: _jsx(PanelLeft, { className: "size-4" }) }) }), _jsx(ViewerFileName, { fileName: fileName, fallback: "Word" }), _jsx(DocxPageNumberControl, { activePageStore: activePageStore, controlsDisabled: controlsDisabled, onPageChange: onPageChange, pageCount: pageCount })] }), _jsxs("div", { className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-1", children: [_jsxs("div", { className: "flex flex-none items-center gap-1", children: [_jsx(ToolbarTooltip, { label: tI18nComplete.raw('textbc7b631a689b'), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "transition-transform active:scale-[0.96]", disabled: controlsDisabled || !canZoomOut, "aria-label": tI18nComplete.raw('textbc7b631a689b'), onClick: () => setZoomScale((currentZoomScale) => getNextZoomScale(currentZoomScale, -1)), children: _jsx(CircleMinus, { className: "size-4" }) }) }), _jsxs(Select, { value: zoomScale.toString(), onValueChange: (value) => setZoomScale(Number(value)), disabled: controlsDisabled, modal: false, children: [_jsx(SelectTrigger, { size: "sm", variant: "secondary", className: "border-none tabular-nums", "aria-label": tI18nComplete.raw('text3926ced4e6c4'), children: _jsxs(SelectValue, { children: [Math.round(zoomScale), "%"] }) }), _jsx(SelectContent, { align: "end", alignItemWithTrigger: false, children: ZOOM_OPTIONS.map((value) => (_jsxs(SelectItem, { value: value.toString(), children: [value, "%"] }, value))) })] }), _jsx(ToolbarTooltip, { label: tI18nComplete.raw('text0e47f09a748f'), children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", className: "transition-transform active:scale-[0.96]", disabled: controlsDisabled || !canZoomIn, "aria-label": tI18nComplete.raw('text0e47f09a748f'), onClick: () => setZoomScale((currentZoomScale) => getNextZoomScale(currentZoomScale, 1)), children: _jsx(CirclePlus, { className: "size-4" }) }) })] }), toolbarActions ? (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-1 h-4 self-center" }), toolbarActions] })) : null, _jsx(Separator, { orientation: "vertical", className: "mx-1 h-4 self-center" }), _jsx(DocxFileActionsMenu, { controlsDisabled: controlsDisabled, onShowCommentsChange: onShowCommentsChange, onShowTrackedChangesChange: onShowTrackedChangesChange, onUploadClick: onUploadClick, showComments: showComments, showTrackedChanges: showTrackedChanges, showUploadButton: showUploadButton }), showDownloadButton ? (_jsx(ViewerDownloadButton, { disabled: controlsDisabled, pending: isPreparingDownload, onDownload: onDownload })) : null] })] }) }));
+}
+function DocxSidebarThumbnail({ canvasRef, displayFileName, hasError, isActive, isLoading, pageNumber, pixelHeightPx, pixelWidthPx, previewAspectRatio, }) {
+    return (_jsx(FileThumbnail, { file: {
+            name: `${displayFileName} page ${pageNumber}`,
+            type: DOCX_MIME_TYPE,
+        }, previewAspectRatio: previewAspectRatio, previewClassName: "rounded-md bg-white", previewContent: _jsx("canvas", { ref: canvasRef, width: pixelWidthPx, height: pixelHeightPx, className: "!size-full bg-white object-cover object-top" }), isLoading: isLoading, hasError: hasError, className: cn('duration-normal w-[92px] rounded-md border-0 shadow-xs ring-0 transition-shadow', isActive && 'shadow-sm') }));
+}
+function DocxThumbnailSidebarList({ activePage, displayFileName, isLoadingDocument, onSelectPage, onThumbnailRenderWindowChange, pageCount, sidebarOpen, thumbnails, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const viewportRef = React.useRef(null);
+    const thumbnailListboxId = React.useId();
+    const visibleThumbnails = React.useMemo(() => thumbnails.slice(0, pageCount || 0), [pageCount, thumbnails]);
+    const activeDescendantId = activePage > 0 && visibleThumbnails.length
+        ? `${thumbnailListboxId}-page-${activePage}`
+        : undefined;
+    const virtualizer = useVirtualizer({
+        count: visibleThumbnails.length,
+        estimateSize: () => DOCX_THUMBNAIL_ROW_ESTIMATE,
+        getItemKey: (index) => visibleThumbnails[index]?.pageIndex ?? index,
+        getScrollElement: () => viewportRef.current,
+        overscan: 3,
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const renderWindowSignature = virtualItems.map((virtualRow) => virtualRow.index).join(',');
+    React.useEffect(() => {
+        if (!sidebarOpen || isLoadingDocument || !visibleThumbnails.length) {
+            onThumbnailRenderWindowChange({
+                prefetchPageIndexes: [],
+                visiblePageIndexes: [],
+            });
+            return;
+        }
+        const visiblePageIndexes = virtualItems
+            .map((virtualRow) => visibleThumbnails[virtualRow.index]?.pageIndex)
+            .filter((pageIndex) => pageIndex !== undefined);
+        const firstVirtualIndex = virtualItems[0]?.index ?? 0;
+        const lastVirtualIndex = virtualItems[virtualItems.length - 1]?.index ?? firstVirtualIndex;
+        const firstPrefetchIndex = Math.max(0, firstVirtualIndex - DOCX_THUMBNAIL_PREFETCH_ROWS);
+        const lastPrefetchIndex = Math.min(visibleThumbnails.length - 1, lastVirtualIndex + DOCX_THUMBNAIL_PREFETCH_ROWS);
+        const visiblePageIndexSet = new Set(visiblePageIndexes);
+        const prefetchPageIndexes = [];
+        for (let index = firstPrefetchIndex; index <= lastPrefetchIndex; index += 1) {
+            const pageIndex = visibleThumbnails[index]?.pageIndex;
+            if (pageIndex !== undefined && !visiblePageIndexSet.has(pageIndex)) {
+                prefetchPageIndexes.push(pageIndex);
+            }
+        }
+        onThumbnailRenderWindowChange({
+            prefetchPageIndexes,
+            visiblePageIndexes,
+        });
+    }, [
+        isLoadingDocument,
+        onThumbnailRenderWindowChange,
+        renderWindowSignature,
+        sidebarOpen,
+        visibleThumbnails,
+        virtualItems,
+    ]);
+    React.useEffect(() => {
+        if (!sidebarOpen || activePage < 1 || !visibleThumbnails.length)
+            return;
+        virtualizer.scrollToIndex(Math.min(activePage - 1, visibleThumbnails.length - 1), {
+            align: 'auto',
+        });
+    }, [activePage, sidebarOpen, virtualizer, visibleThumbnails.length]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (pageCount < 1)
+            return;
+        const currentPage = activePage > 0 ? activePage : 1;
+        let nextPage = null;
+        if (event.key === 'ArrowDown') {
+            nextPage = Math.min(pageCount, currentPage + 1);
+        }
+        else if (event.key === 'ArrowUp') {
+            nextPage = Math.max(1, currentPage - 1);
+        }
+        else if (event.key === 'Home') {
+            nextPage = 1;
+        }
+        else if (event.key === 'End') {
+            nextPage = pageCount;
+        }
+        if (nextPage === null)
+            return;
+        event.preventDefault();
+        onSelectPage(nextPage);
+    }, [activePage, onSelectPage, pageCount]);
+    return (_jsx(ScrollArea, { className: "h-full", scrollFade: true, viewportClassName: "group/docx-thumbnail-sidebar focus-visible:ring-0 focus-visible:ring-offset-0", viewportProps: {
+            'aria-activedescendant': activeDescendantId,
+            'aria-busy': isLoadingDocument || undefined,
+            'aria-label': tI18nComplete.raw('textc0abac43e0de'),
+            onKeyDown: handleKeyDown,
+            onMouseDown: (event) => {
+                event.currentTarget.focus({ preventScroll: true });
+            },
+            role: 'listbox',
+            tabIndex: 0,
+        }, viewportRef: viewportRef, children: isLoadingDocument ? (_jsxs("div", { className: "p-4", children: [_jsx("div", { className: "bg-background mx-auto h-28 w-20 overflow-hidden rounded-md shadow-xs", children: _jsx("div", { className: "bg-muted h-full animate-pulse" }) }), _jsx("div", { className: "bg-muted mx-auto mt-3 h-3 w-10 rounded-full" })] })) : visibleThumbnails.length ? (_jsx("div", { className: "relative", style: {
+                height: virtualizer.getTotalSize() + DOCX_THUMBNAIL_LIST_PADDING * 2,
+            }, children: virtualItems.map((virtualRow) => {
+                const thumbnail = visibleThumbnails[virtualRow.index];
+                if (!thumbnail)
+                    return null;
+                return (_jsx("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, className: cn('absolute top-0 right-3 left-3 pb-3 [contain:layout]', thumbnail.pageNumber === activePage && 'z-10'), style: {
+                        transform: `translateY(${virtualRow.start + DOCX_THUMBNAIL_LIST_PADDING}px)`,
+                    }, children: _jsxs("div", { id: `${thumbnailListboxId}-page-${thumbnail.pageNumber}`, role: "option", "aria-current": thumbnail.pageNumber === activePage ? 'page' : undefined, "aria-label": `Page ${thumbnail.pageNumber}`, "aria-posinset": thumbnail.pageNumber, "aria-selected": thumbnail.pageNumber === activePage, "aria-setsize": pageCount, "data-docx-viewer-thumbnail-option": thumbnail.pageNumber, className: cn('hover:bg-sidebar-accent flex h-auto w-full flex-col items-center gap-2 rounded-md p-2 text-xs transition-shadow outline-none select-none', thumbnail.pageNumber === activePage && 'bg-sidebar-accent text-foreground', thumbnail.pageNumber !== activePage && 'text-muted-foreground', thumbnail.pageNumber === activePage && DOCX_THUMBNAIL_FOCUS_RING_CLASS), onClick: () => onSelectPage(thumbnail.pageNumber), children: [_jsx(DocxSidebarThumbnail, { canvasRef: thumbnail.canvasRef, displayFileName: displayFileName, hasError: thumbnail.status === 'error', isActive: thumbnail.pageNumber === activePage, isLoading: thumbnail.status !== 'ready' && thumbnail.status !== 'error', pageNumber: thumbnail.pageNumber, pixelHeightPx: thumbnail.pixelHeightPx, pixelWidthPx: thumbnail.pixelWidthPx, previewAspectRatio: thumbnail.aspectRatio }), thumbnail.pageNumber] }) }, virtualRow.key));
+            }) })) : null }));
+}
+function DocxThumbnailSidebarContent({ activePageStore, displayFileName, editor, isLoadingDocument, onSelectPage, pageCount, reportedPageCount, sidebarOpen, }) {
+    const [thumbnailRenderWindow, setThumbnailRenderWindow] = React.useState({
+        prefetchPageIndexes: [],
+        visiblePageIndexes: [],
+    });
+    const thumbnailEditor = React.useMemo(() => ({
+        ...editor,
+        totalPages: Math.max(editor.totalPages, reportedPageCount),
+    }), [editor, reportedPageCount]);
+    const thumbnailOptions = React.useMemo(() => ({
+        // Detached thumbnail rendering handles offscreen pages; keep the raster
+        // queue dormant while the sidebar is closed.
+        disabled: !sidebarOpen,
+        pixelRatio: 2,
+        renderWindow: thumbnailRenderWindow,
+        resolution: {
+            maxHeight: DOCX_THUMBNAIL_WIDTH * 1.35,
+            maxWidth: DOCX_THUMBNAIL_WIDTH,
+        },
+    }), [sidebarOpen, thumbnailRenderWindow]);
+    const { thumbnails } = useDocxViewerThumbnails(thumbnailEditor, thumbnailOptions);
+    const activePage = useDocxActivePage(activePageStore);
+    const handleThumbnailRenderWindowChange = React.useCallback((nextRenderWindow) => {
+        setThumbnailRenderWindow((currentRenderWindow) => {
+            if (areNumberArraysEqual(currentRenderWindow.visiblePageIndexes, nextRenderWindow.visiblePageIndexes) &&
+                areNumberArraysEqual(currentRenderWindow.prefetchPageIndexes, nextRenderWindow.prefetchPageIndexes)) {
+                return currentRenderWindow;
+            }
+            return nextRenderWindow;
+        });
+    }, []);
+    if (!sidebarOpen)
+        return null;
+    return (_jsx(DocxThumbnailSidebarList, { activePage: activePage, displayFileName: displayFileName, isLoadingDocument: isLoadingDocument, onSelectPage: onSelectPage, onThumbnailRenderWindowChange: handleThumbnailRenderWindowChange, pageCount: pageCount, sidebarOpen: sidebarOpen, thumbnails: thumbnails }));
+}
+export function DocxViewerPreview({ className, defaultZoom = DEFAULT_ZOOM, fileName, isDark, onIsDarkChange, showDownload = true, showToolbar = true, showUpload = true, src, toolbarActions, }) {
+    return (_jsx(DocxViewerContent, { className: className, defaultZoom: defaultZoom, effectiveIsDark: isDark, fileName: fileName, setNightRenderEnabled: onIsDarkChange, shouldRenderNightMode: true, showDownload: showDownload, showToolbar: showToolbar, showUpload: showUpload, toolbarActions: toolbarActions, url: src }));
+}
+function DocxViewerContent({ className, defaultZoom, effectiveIsDark, fileName, setNightRenderEnabled, shouldRenderNightMode, showDownload, showToolbar = true, showUpload, toolbarActions, url, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const fileInputRef = React.useRef(null);
+    const viewportRef = React.useRef(null);
+    const [viewportElement, setViewportElement] = React.useState(null);
+    const [viewerShellRef, viewerShellWidth] = useElementWidth();
+    const [uploadedDocxFile, setUploadedDocxFile] = React.useState(null);
+    const [sidebarOpen, setSidebarOpen] = React.useState(false);
+    const activePageStore = React.useMemo(createDocxActivePageStore, []);
+    const resolvedDefaultZoomScale = normalizeDocxZoomScale(defaultZoom);
+    const activeUploadedDocxFile = uploadedDocxFile?.sourceUrl === url ? uploadedDocxFile : null;
+    const documentKey = activeUploadedDocxFile?.identity ?? url ?? '';
+    const setActivePage = activePageStore.setActivePage;
+    const sidebarInline = useInlineThumbnailSidebar(viewerShellWidth);
+    const viewerBackgroundColor = 'color-mix(in oklab, var(--muted) 40%, transparent)';
+    const displayFileName = React.useMemo(() => activeUploadedDocxFile?.file.name ??
+        (url ? formatDocumentName(fileName, url) : (fileName ?? 'document.docx')), [activeUploadedDocxFile?.file.name, fileName, url]);
+    const [initialDocumentTheme] = React.useState(() => effectiveIsDark ? 'dark' : 'light');
+    const editorOptions = React.useMemo(() => ({
+        initialDocumentTheme,
+        initialFileName: displayFileName,
+    }), [displayFileName, initialDocumentTheme]);
+    const editor = useDocxEditor(editorOptions);
+    const { layout: pageLayout } = useDocxPageLayout(editor);
+    const { importDocxFile, setDocumentTheme, status } = editor;
+    const { showComments, setShowComments } = useDocxComments(editor);
+    const { showTrackedChanges, setShowTrackedChanges } = useDocxTrackChanges(editor);
+    const [reportedPageCount, setReportedPageCount] = React.useState(0);
+    const [zoomScaleState, setZoomScaleState] = React.useState({
+        documentKey: '',
+        value: resolvedDefaultZoomScale,
+    });
+    const zoomScale = zoomScaleState.documentKey === documentKey ? zoomScaleState.value : resolvedDefaultZoomScale;
+    const setZoomScale = React.useCallback((nextZoomScale) => {
+        setZoomScaleState((currentState) => {
+            const currentZoomScale = currentState.documentKey === documentKey ? currentState.value : resolvedDefaultZoomScale;
+            const value = typeof nextZoomScale === 'function' ? nextZoomScale(currentZoomScale) : nextZoomScale;
+            return { documentKey, value };
+        });
+    }, [documentKey, resolvedDefaultZoomScale]);
+    const [loadError, setLoadError] = React.useState();
+    const [isLoadingDocument, setIsLoadingDocument] = React.useState(true);
+    const [isPreparingDownload, setIsPreparingDownload] = React.useState(false);
+    const shouldShowDocumentSpinner = useDelayedLoadingIndicator(isLoadingDocument, DOCX_LOADING_INDICATOR_DELAY_MS);
+    const loadingState = _jsx(ViewerLoadingSurface, { showSpinner: shouldShowDocumentSpinner });
+    const documentTheme = effectiveIsDark ? 'dark' : 'light';
+    const renderTrackedChangeCard = React.useMemo(() => createDocxTrackedChangeCardRenderer(documentTheme), [documentTheme]);
+    const renderCommentCard = React.useMemo(() => createDocxCommentCardRenderer(documentTheme), [documentTheme]);
+    const hasDocument = Boolean(url || activeUploadedDocxFile);
+    const pageCount = hasDocument && !isLoadingDocument && !loadError
+        ? Math.max(1, reportedPageCount || editor.totalPages)
+        : 0;
+    const thumbnailSidebarVisible = Boolean(sidebarOpen && (pageCount || isLoadingDocument));
+    const controlsDisabled = !hasDocument || isLoadingDocument || Boolean(loadError);
+    const handlePageCountChange = React.useCallback((nextPageCount) => {
+        setReportedPageCount(Math.max(1, Math.round(nextPageCount || 1)));
+    }, []);
+    const setViewportRef = React.useCallback((element) => {
+        viewportRef.current = element;
+        setViewportElement(element);
+    }, []);
+    const pageVirtualization = React.useMemo(() => ({
+        enabled: true,
+        overscan: 1,
+        scrollElement: viewportElement,
+        zoomScale: zoomScale / 100,
+    }), [viewportElement, zoomScale]);
+    const handleDownload = React.useCallback(async () => {
+        if (isPreparingDownload)
+            return;
+        if (!activeUploadedDocxFile && !url)
+            return;
+        setIsPreparingDownload(true);
+        try {
+            await downloadDocxFile({
+                file: activeUploadedDocxFile?.file,
+                fileName: displayFileName,
+                url,
+            });
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setIsPreparingDownload(false);
+        }
+    }, [activeUploadedDocxFile, displayFileName, isPreparingDownload, url]);
+    useSuppressDocxPaddingWarning(!isLoadingDocument && !loadError);
+    React.useEffect(() => {
+        setActivePage(1);
+        viewportRef.current?.scrollTo({ top: 0, left: 0 });
+    }, [documentKey, setActivePage]);
+    React.useEffect(() => {
+        setDocumentTheme(effectiveIsDark ? 'dark' : 'light');
+    }, [effectiveIsDark, setDocumentTheme]);
+    React.useEffect(() => {
+        if (status.startsWith('Failed to load file') || status === 'Only .docx files are supported') {
+            const frame = window.requestAnimationFrame(() => {
+                setLoadError(status);
+                setIsLoadingDocument(false);
+            });
+            return () => window.cancelAnimationFrame(frame);
+        }
+    }, [status]);
+    // Imports mutate the shared editor instance; concurrent calls (effect
+    // re-runs, StrictMode double-invoke) race inside the parser and surface as
+    // bogus "Invalid DOCX ZIP" errors, so every import is chained through here.
+    const importQueueRef = React.useRef(null);
+    React.useEffect(() => {
+        let isCurrent = true;
+        async function load() {
+            // Superseded while queued — let the newest import run instead.
+            if (!isCurrent)
+                return;
+            if (!activeUploadedDocxFile && !url) {
+                setIsLoadingDocument(false);
+                setLoadError(undefined);
+                setReportedPageCount(0);
+                return;
+            }
+            setIsLoadingDocument(true);
+            setLoadError(undefined);
+            setReportedPageCount(0);
+            // Tracks the "no file to import" bail-out, which intentionally keeps the
+            // loading flag as-is — every other exit path resets it in `finally`.
+            let bailedWithoutResult = false;
+            try {
+                const docxFile = activeUploadedDocxFile?.file ?? (url ? await loadDocxFile(url, displayFileName) : null);
+                if (!docxFile) {
+                    bailedWithoutResult = true;
+                    return;
+                }
+                await importDocxFile(docxFile);
+                if (isCurrent) {
+                    setActivePage(1);
+                    viewportRef.current?.scrollTo({ top: 0, left: 0 });
+                }
+            }
+            catch (error) {
+                if (isCurrent) {
+                    setLoadError(error instanceof Error ? error.message : 'Unknown DOCX load error');
+                }
+            }
+            finally {
+                if (isCurrent && !bailedWithoutResult) {
+                    setIsLoadingDocument(false);
+                }
+            }
+        }
+        importQueueRef.current = (importQueueRef.current ?? Promise.resolve()).then(load);
+        return () => {
+            isCurrent = false;
+        };
+    }, [activeUploadedDocxFile, displayFileName, importDocxFile, setActivePage, url]);
+    const updateActivePageFromViewport = React.useCallback(() => {
+        const viewport = viewportRef.current;
+        if (!viewport || !pageCount)
+            return;
+        const viewportRect = viewport.getBoundingClientRect();
+        const viewportCenter = viewportRect.top + viewportRect.height / 2;
+        let closestPage = 1;
+        let closestDistance = Number.POSITIVE_INFINITY;
+        viewport
+            .querySelectorAll('[data-docx-page-wrapper="true"][data-index]')
+            .forEach((page) => {
+            const pageIndex = Number(page.dataset.index);
+            if (!Number.isFinite(pageIndex))
+                return;
+            const pageRect = page.getBoundingClientRect();
+            const pageCenter = pageRect.top + pageRect.height / 2;
+            const distance = Math.abs(pageCenter - viewportCenter);
+            if (distance < closestDistance) {
+                closestDistance = distance;
+                closestPage = pageIndex + 1;
+            }
+        });
+        activePageStore.setActivePage((currentPage) => currentPage === closestPage ? currentPage : closestPage);
+    }, [activePageStore, pageCount]);
+    React.useEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport || !pageCount)
+            return;
+        let frameId = 0;
+        const handleScroll = () => {
+            window.cancelAnimationFrame(frameId);
+            frameId = window.requestAnimationFrame(updateActivePageFromViewport);
+        };
+        frameId = window.requestAnimationFrame(updateActivePageFromViewport);
+        viewport.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.cancelAnimationFrame(frameId);
+            viewport.removeEventListener('scroll', handleScroll);
+        };
+    }, [pageCount, updateActivePageFromViewport]);
+    const scrollToPage = React.useCallback((pageNumber) => {
+        const viewport = viewportRef.current;
+        const targetPageIndex = pageNumber - 1;
+        const page = viewport?.querySelector(`[data-docx-page-wrapper="true"][data-index="${targetPageIndex}"]`);
+        setActivePage(pageNumber);
+        if (!viewport)
+            return;
+        if (!page) {
+            const pageStridePx = (pageLayout.pageHeightPx + pageLayout.viewportDefaults.pageGapPx) * (zoomScale / 100);
+            viewport.scrollTo({
+                top: Math.max(0, targetPageIndex * pageStridePx - 24),
+                behavior: 'auto',
+            });
+            return;
+        }
+        viewport.scrollTo({
+            top: page.getBoundingClientRect().top -
+                viewport.getBoundingClientRect().top +
+                viewport.scrollTop -
+                24,
+            behavior: 'auto',
+        });
+    }, [pageLayout.pageHeightPx, pageLayout.viewportDefaults.pageGapPx, setActivePage, zoomScale]);
+    async function handleUpload(event) {
+        const file = event.target.files?.[0];
+        event.target.value = '';
+        if (!file)
+            return;
+        setZoomScale(resolvedDefaultZoomScale);
+        setActivePage(1);
+        setReportedPageCount(0);
+        setUploadedDocxFile({
+            file,
+            identity: `${file.name}-${file.size}-${file.lastModified}`,
+            sourceUrl: url,
+        });
+    }
+    return (_jsxs("div", { className: cn('bg-background flex h-[640px] min-h-0 flex-col overflow-hidden', className), children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", className: "hidden", onChange: handleUpload }), showToolbar ? (_jsx(DocxToolbar, { activePageStore: activePageStore, controlsDisabled: controlsDisabled, fileName: displayFileName, isDark: effectiveIsDark, isPreparingDownload: isPreparingDownload, onDownload: handleDownload, onIsDarkChange: setNightRenderEnabled, onPageChange: scrollToPage, onShowCommentsChange: setShowComments, onShowTrackedChangesChange: setShowTrackedChanges, onToggleSidebar: () => setSidebarOpen((open) => !open), onUploadClick: () => fileInputRef.current?.click(), pageCount: pageCount, setZoomScale: setZoomScale, showComments: showComments, showDownloadButton: showDownload, showNightRenderToggle: shouldRenderNightMode, showTrackedChanges: showTrackedChanges, showUploadButton: showUpload, toolbarActions: toolbarActions, zoomScale: zoomScale })) : null, _jsxs("div", { ref: viewerShellRef, className: "bg-muted/30 relative flex min-h-0 flex-1 overflow-hidden", children: [_jsx(DocumentViewerThumbnailSidebar, { inline: sidebarInline, open: thumbnailSidebarVisible, children: _jsx(DocxThumbnailSidebarContent, { activePageStore: activePageStore, displayFileName: displayFileName, editor: editor, isLoadingDocument: isLoadingDocument, onSelectPage: scrollToPage, pageCount: pageCount, reportedPageCount: reportedPageCount, sidebarOpen: thumbnailSidebarVisible }) }), _jsx(ScrollArea, { className: "min-h-0 flex-1", style: { backgroundColor: viewerBackgroundColor }, viewportClassName: "px-4 py-6", viewportProps: {
+                            'aria-label': tI18nComplete.raw('text1d6d3a460fb1'),
+                            onMouseDown: (event) => {
+                                if (isInteractiveViewerTarget(event.target))
+                                    return;
+                                event.currentTarget.focus({ preventScroll: true });
+                            },
+                            tabIndex: 0,
+                        }, viewportRef: setViewportRef, children: !url && !activeUploadedDocxFile ? (_jsx("div", { className: "grid h-full min-h-96 place-items-center p-6 text-center", children: _jsxs("div", { className: "bg-background max-w-md rounded-lg border p-4 text-sm shadow-xs", children: [_jsx("div", { className: "font-medium", children: tI18nComplete.raw('text53c247b8cf06') }), _jsxs("div", { className: "text-muted-foreground mt-1", children: [tI18nComplete.raw('text46800e585f61'), " ", _jsx("code", { children: "src" }), ' ', tI18nComplete.raw('text37056f2381e2')] }), _jsxs("div", { className: "text-muted-foreground mt-1", children: [tI18nComplete.raw('text1432897a6136'), " ", _jsx("code", { children: ".doc" }), ' ', tI18nComplete.raw('text73a2f5159338')] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "mt-4", onClick: () => fileInputRef.current?.click(), children: [_jsx(Upload, { className: "size-4" }), tI18nComplete.raw('textdc0451eb46ce')] })] }) })) : loadError ? (_jsx("div", { className: "grid h-full min-h-96 place-items-center p-6 text-center", children: _jsxs("div", { className: "bg-background text-destructive max-w-md rounded-lg border p-4 text-sm shadow-xs", children: [_jsx("div", { className: "font-medium", children: tI18nComplete.raw('text2a5502b48b14') }), _jsx("div", { className: "text-muted-foreground mt-1", children: loadError })] }) })) : isLoadingDocument ? (loadingState) : (_jsx("div", { className: "flex min-h-full w-max min-w-full justify-center", children: _jsx("div", { className: cn('origin-top', effectiveIsDark && 'docx-night-reader-shell'), style: { zoom: zoomScale / 100 }, children: _jsx(DocxEditorViewer, { editor: editor, mode: "read-only", showTrackedChanges: showTrackedChanges, renderTrackedChangeCard: renderTrackedChangeCard, showComments: showComments, renderCommentCard: renderCommentCard, loadingState: loadingState, pageBackgroundColor: effectiveIsDark ? 'var(--background)' : undefined, pageGapBackgroundColor: viewerBackgroundColor, pageVirtualization: pageVirtualization, deferInitialPaginationPaint: false, onPageCountChange: handlePageCountChange }) }) })) })] })] }));
+}

package/dist/files/renderers/image-renderer.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/** What sits behind the artwork. Only meaningful for formats that can be
+ *  transparent — an SVG logo is unreadable on the one background that happens
+ *  to match its own ink, so the viewer has to be able to say "show me this on
+ *  white" and "show me this on black". */
+export type ImageBackdrop = 'transparent' | 'white' | 'black';
+interface ImageRendererProps {
+    url: string;
+    className?: string;
+    /** Optional file name — shown in the info panel type field */
+    fileName?: string;
+    /**
+     * When the floating control shelf is visible.
+     *
+     * `'hover'` (default) keeps the chrome out of the way until the pointer
+     * arrives — right where the image is one item among many. `'always'` pins it
+     * open for surfaces where looking at the artwork IS the task, and moves it to
+     * the bottom edge: a permanently-open shelf at the top would sit directly
+     * under the host's own toolbar and read as a second toolbar. It is also the
+     * only honest option on touch, where hover never fires. `'none'` draws no
+     * shelf: a thumbnail is opened to be looked at, never zoomed in place.
+     */
+    controls?: 'hover' | 'always' | 'none';
+    /** Add the backdrop swatches to the shelf (see `ImageBackdrop`). Off by
+     *  default — an opaque JPEG has exactly one meaningful background. */
+    backdrop?: boolean;
+}
+export declare function ImageRenderer({ url, className, fileName, controls, backdrop: showBackdrop, }: ImageRendererProps): React.JSX.Element;
+export {};