@docmentis/udoc-viewer 0.1.0

package/dist/ui/viewer/components/LeftPanel.js

@@ -0,0 +1,165 @@
+import { subscribeSelector, shallowEqual } from "../../framework/selectors";
+import { isLeftPanelTab } from "../state";
+import { ICON_THUMBNAIL, ICON_OUTLINE, ICON_BOOKMARK, ICON_LAYERS, ICON_ATTACHMENT } from "../icons";
+import { createThumbnailPanel } from "./ThumbnailPanel";
+import { createOutlinePanel } from "./OutlinePanel";
+const TABS = [
+    { id: "thumbnail", label: "Thumbnails", icon: ICON_THUMBNAIL },
+    { id: "outline", label: "Outline", icon: ICON_OUTLINE },
+    { id: "bookmarks", label: "Bookmarks", icon: ICON_BOOKMARK },
+    { id: "layers", label: "Layers", icon: ICON_LAYERS },
+    { id: "attachments", label: "Attachments", icon: ICON_ATTACHMENT },
+];
+export function createLeftPanel() {
+    const el = document.createElement("div");
+    el.className = "udoc-left-panel";
+    // Tab bar
+    const tabBar = document.createElement("div");
+    tabBar.className = "udoc-left-panel__tabs";
+    const tabButtons = new Map();
+    for (const tab of TABS) {
+        const btn = document.createElement("button");
+        btn.className = "udoc-left-panel__tab";
+        btn.setAttribute("aria-label", tab.label);
+        btn.setAttribute("data-tab", tab.id);
+        btn.innerHTML = tab.icon;
+        tabButtons.set(tab.id, btn);
+        tabBar.appendChild(btn);
+    }
+    // Content area
+    const content = document.createElement("div");
+    content.className = "udoc-left-panel__content";
+    // Resize handle
+    const resizeHandle = document.createElement("div");
+    resizeHandle.className = "udoc-left-panel__resize-handle";
+    el.append(tabBar, content, resizeHandle);
+    let unsubRender = null;
+    let unsubContent = null;
+    const unsubEvents = [];
+    // Panel content components
+    let thumbnailPanel = null;
+    let outlinePanel = null;
+    let storeRef = null;
+    let renderManagerRef = null;
+    function applyState(slice) {
+        el.classList.toggle("udoc-left-panel--closed", !slice.open);
+        // Apply width from state (only when open)
+        if (slice.open && slice.width !== null) {
+            el.style.width = `${slice.width}px`;
+        }
+        else {
+            el.style.width = "";
+        }
+        for (const [tabId, btn] of tabButtons) {
+            btn.classList.toggle("udoc-left-panel__tab--active", tabId === slice.activeTab);
+        }
+    }
+    function applyContent(activeTab) {
+        // Destroy previous content
+        if (thumbnailPanel) {
+            thumbnailPanel.destroy();
+            thumbnailPanel = null;
+        }
+        if (outlinePanel) {
+            outlinePanel.destroy();
+            outlinePanel = null;
+        }
+        // Mount new content based on active tab
+        if (activeTab === "thumbnail" && storeRef && renderManagerRef) {
+            thumbnailPanel = createThumbnailPanel();
+            thumbnailPanel.mount(content, storeRef, renderManagerRef);
+        }
+        else if (activeTab === "outline" && storeRef) {
+            outlinePanel = createOutlinePanel();
+            outlinePanel.mount(content, storeRef);
+        }
+        // Future: handle other tabs (bookmarks, layers, attachments)
+    }
+    function setupResize() {
+        let startX = 0;
+        let startWidth = 0;
+        const onPointerMove = (e) => {
+            const delta = e.clientX - startX;
+            const newWidth = Math.max(200, Math.min(500, startWidth + delta));
+            el.style.width = `${newWidth}px`;
+        };
+        const onPointerUp = () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            el.classList.remove("udoc-left-panel--resizing");
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            // Persist width to state
+            if (storeRef) {
+                const finalWidth = el.offsetWidth;
+                storeRef.dispatch({ type: "SET_LEFT_PANEL_WIDTH", width: finalWidth });
+            }
+        };
+        const onPointerDown = (e) => {
+            e.preventDefault();
+            startX = e.clientX;
+            startWidth = el.offsetWidth;
+            el.classList.add("udoc-left-panel--resizing");
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+            document.addEventListener("pointermove", onPointerMove);
+            document.addEventListener("pointerup", onPointerUp);
+        };
+        resizeHandle.addEventListener("pointerdown", onPointerDown);
+        unsubEvents.push(() => resizeHandle.removeEventListener("pointerdown", onPointerDown));
+    }
+    function mount(container, store, renderManager) {
+        container.appendChild(el);
+        storeRef = store;
+        renderManagerRef = renderManager;
+        // Tab click handlers
+        for (const [tabId, btn] of tabButtons) {
+            const onClick = () => {
+                store.dispatch({ type: "TOGGLE_PANEL", panel: tabId });
+            };
+            btn.addEventListener("click", onClick);
+            unsubEvents.push(() => btn.removeEventListener("click", onClick));
+        }
+        // Setup resize handle
+        setupResize();
+        // Subscribe to state changes for panel open/close
+        const initialSlice = selectLeftPanel(store.getState());
+        applyState(initialSlice);
+        unsubRender = subscribeSelector(store, selectLeftPanel, applyState, {
+            equality: shallowEqual
+        });
+        // Subscribe to active tab changes for content
+        applyContent(initialSlice.activeTab);
+        unsubContent = subscribeSelector(store, (state) => selectLeftPanel(state).activeTab, applyContent);
+    }
+    function destroy() {
+        if (unsubRender)
+            unsubRender();
+        if (unsubContent)
+            unsubContent();
+        for (const off of unsubEvents)
+            off();
+        if (thumbnailPanel) {
+            thumbnailPanel.destroy();
+            thumbnailPanel = null;
+        }
+        if (outlinePanel) {
+            outlinePanel.destroy();
+            outlinePanel = null;
+        }
+        storeRef = null;
+        renderManagerRef = null;
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+function selectLeftPanel(state) {
+    const panel = state.activePanel;
+    const isLeftTab = panel !== null && isLeftPanelTab(panel);
+    return {
+        open: isLeftTab,
+        activeTab: isLeftTab ? panel : null,
+        width: state.leftPanelWidth
+    };
+}
+//# sourceMappingURL=LeftPanel.js.map

package/dist/ui/viewer/components/LeftPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPanel.js","sourceRoot":"","sources":["../../../../src/ui/viewer/components/LeftPanel.ts"],"names":[],"mappings":"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"}

package/dist/ui/viewer/components/OutlinePanel.d.ts

@@ -0,0 +1,10 @@
+import type { Store } from "../../framework/store";
+import type { ViewerState } from "../state";
+import type { Action } from "../actions";
+export declare function createOutlinePanel(): {
+    el: HTMLDivElement;
+    mount: (container: HTMLElement, store: Store<ViewerState, Action>) => void;
+    destroy: () => void;
+};
+export type OutlinePanelComponent = ReturnType<typeof createOutlinePanel>;
+//# sourceMappingURL=OutlinePanel.d.ts.map

package/dist/ui/viewer/components/OutlinePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinePanel.d.ts","sourceRoot":"","sources":["../../../../src/ui/viewer/components/OutlinePanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAiBzC,wBAAgB,kBAAkB;;uBAuKf,WAAW,SACf,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,KAClC,IAAI;mBAea,IAAI;EAa3B;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/ui/viewer/components/OutlinePanel.js

@@ -0,0 +1,169 @@
+import { subscribeSelector, shallowEqual } from "../../framework/selectors";
+function selectOutlineSlice(state) {
+    return {
+        outline: state.outline,
+        outlineLoading: state.outlineLoading,
+        currentPage: state.page
+    };
+}
+export function createOutlinePanel() {
+    const el = document.createElement("div");
+    el.className = "udoc-outline-panel";
+    let storeRef = null;
+    let currentSlice = null;
+    /** Track collapsed items by path (collapsed if in set) */
+    let collapsedItems = new Set();
+    let unsubRender = null;
+    const unsubEvents = [];
+    function createOutlineItemElement(item, path, depth) {
+        const container = document.createElement("div");
+        container.className = "udoc-outline-item";
+        container.dataset.path = path;
+        const header = document.createElement("div");
+        header.className = "udoc-outline-item__header";
+        header.style.paddingLeft = `${8 + depth * 16}px`;
+        // Expand/collapse toggle (only if has children)
+        if (item.children.length > 0) {
+            const toggle = document.createElement("button");
+            toggle.className = "udoc-outline-item__toggle";
+            toggle.type = "button";
+            toggle.innerHTML = `<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`;
+            // Determine initial expanded state
+            const isCollapsed = item.initiallyCollapsed || collapsedItems.has(path);
+            if (isCollapsed) {
+                collapsedItems.add(path);
+            }
+            toggle.classList.toggle("udoc-outline-item__toggle--expanded", !isCollapsed);
+            const onToggle = (e) => {
+                e.stopPropagation();
+                if (collapsedItems.has(path)) {
+                    collapsedItems.delete(path);
+                }
+                else {
+                    collapsedItems.add(path);
+                }
+                updateExpandState(container, path);
+            };
+            toggle.addEventListener("click", onToggle);
+            unsubEvents.push(() => toggle.removeEventListener("click", onToggle));
+            header.appendChild(toggle);
+        }
+        else {
+            // Spacer for alignment
+            const spacer = document.createElement("span");
+            spacer.className = "udoc-outline-item__spacer";
+            header.appendChild(spacer);
+        }
+        // Title
+        const title = document.createElement("span");
+        title.className = "udoc-outline-item__title";
+        title.textContent = item.title;
+        header.appendChild(title);
+        container.appendChild(header);
+        // Click handler for navigation
+        if (item.destination) {
+            header.classList.add("udoc-outline-item__header--clickable");
+            const dest = item.destination;
+            const onClick = () => {
+                if (storeRef) {
+                    storeRef.dispatch({
+                        type: "NAVIGATE_TO_DESTINATION",
+                        destination: dest
+                    });
+                }
+            };
+            header.addEventListener("click", onClick);
+            unsubEvents.push(() => header.removeEventListener("click", onClick));
+        }
+        // Children container
+        if (item.children.length > 0) {
+            const childrenContainer = document.createElement("div");
+            childrenContainer.className = "udoc-outline-item__children";
+            const isCollapsed = collapsedItems.has(path);
+            childrenContainer.style.display = isCollapsed ? "none" : "block";
+            // Recursively build children
+            item.children.forEach((child, index) => {
+                const childPath = `${path}/${index}`;
+                const childEl = createOutlineItemElement(child, childPath, depth + 1);
+                childrenContainer.appendChild(childEl);
+            });
+            container.appendChild(childrenContainer);
+        }
+        return container;
+    }
+    function updateExpandState(container, path) {
+        const toggle = container.querySelector(":scope > .udoc-outline-item__header > .udoc-outline-item__toggle");
+        const children = container.querySelector(":scope > .udoc-outline-item__children");
+        if (!toggle || !children)
+            return;
+        const isCollapsed = collapsedItems.has(path);
+        toggle.classList.toggle("udoc-outline-item__toggle--expanded", !isCollapsed);
+        children.style.display = isCollapsed ? "none" : "block";
+    }
+    function buildOutlineTree(outline) {
+        // Clear existing content but preserve event cleanup
+        el.innerHTML = "";
+        if (outline.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "udoc-outline-panel__empty";
+            empty.textContent = "No outline available";
+            el.appendChild(empty);
+            return;
+        }
+        // Build outline items
+        outline.forEach((item, index) => {
+            const path = String(index);
+            const itemEl = createOutlineItemElement(item, path, 0);
+            el.appendChild(itemEl);
+        });
+    }
+    function showLoading() {
+        el.innerHTML = "";
+        const loading = document.createElement("div");
+        loading.className = "udoc-outline-panel__loading";
+        loading.textContent = "Loading outline...";
+        el.appendChild(loading);
+    }
+    function applyState(slice) {
+        const outlineChanged = !currentSlice ||
+            slice.outline !== currentSlice.outline ||
+            slice.outlineLoading !== currentSlice.outlineLoading;
+        if (outlineChanged) {
+            // Clear old event listeners when rebuilding
+            for (const off of unsubEvents)
+                off();
+            unsubEvents.length = 0;
+            if (slice.outlineLoading) {
+                showLoading();
+            }
+            else if (slice.outline === null) {
+                // Not loaded yet and not loading - effect will trigger shortly
+                el.innerHTML = "";
+            }
+            else {
+                buildOutlineTree(slice.outline);
+            }
+        }
+        currentSlice = slice;
+    }
+    function mount(container, store) {
+        container.appendChild(el);
+        storeRef = store;
+        // Apply initial state
+        applyState(selectOutlineSlice(store.getState()));
+        unsubRender = subscribeSelector(store, selectOutlineSlice, applyState, { equality: shallowEqual });
+    }
+    function destroy() {
+        if (unsubRender)
+            unsubRender();
+        for (const off of unsubEvents)
+            off();
+        unsubEvents.length = 0;
+        collapsedItems.clear();
+        storeRef = null;
+        currentSlice = null;
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+//# sourceMappingURL=OutlinePanel.js.map

package/dist/ui/viewer/components/OutlinePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlinePanel.js","sourceRoot":"","sources":["../../../../src/ui/viewer/components/OutlinePanel.ts"],"names":[],"mappings":"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"}

package/dist/ui/viewer/components/RightPanel.d.ts

@@ -0,0 +1,9 @@
+import type { Store } from "../../framework/store";
+import type { ViewerState } from "../state";
+import type { Action } from "../actions";
+export declare function createRightPanel(): {
+    el: HTMLDivElement;
+    mount: (container: HTMLElement, store: Store<ViewerState, Action>) => void;
+    destroy: () => void;
+};
+//# sourceMappingURL=RightPanel.d.ts.map

package/dist/ui/viewer/components/RightPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.d.ts","sourceRoot":"","sources":["../../../../src/ui/viewer/components/RightPanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,UAAU,CAAC;AAE3D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AASzC,wBAAgB,gBAAgB;;uBA8EF,WAAW,SAAS,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,KAAG,IAAI;mBAiB3D,IAAI;EAS3B"}

package/dist/ui/viewer/components/RightPanel.js

@@ -0,0 +1,102 @@
+import { subscribeSelector, shallowEqual } from "../../framework/selectors";
+import { isLeftPanelTab } from "../state";
+import { createAnnotationPanel } from "./AnnotationPanel";
+export function createRightPanel() {
+    const el = document.createElement("div");
+    el.className = "udoc-right-panel";
+    // Resize handle (on left edge for right panel)
+    const resizeHandle = document.createElement("div");
+    resizeHandle.className = "udoc-right-panel__resize-handle";
+    // Content area (search or comments)
+    const content = document.createElement("div");
+    content.className = "udoc-right-panel__content";
+    el.append(resizeHandle, content);
+    // Child components
+    const annotationPanel = createAnnotationPanel();
+    let unsubRender = null;
+    const unsubEvents = [];
+    let storeRef = null;
+    function applyState(slice) {
+        el.classList.toggle("udoc-right-panel--closed", !slice.open);
+        // Apply width from state (only when open)
+        if (slice.open && slice.width !== null) {
+            el.style.width = `${slice.width}px`;
+        }
+        else {
+            el.style.width = "";
+        }
+        if (slice.activeTab) {
+            content.setAttribute("data-tab", slice.activeTab);
+        }
+        else {
+            content.removeAttribute("data-tab");
+        }
+    }
+    function setupResize() {
+        let startX = 0;
+        let startWidth = 0;
+        const onPointerMove = (e) => {
+            // For right panel, dragging left increases width
+            const delta = startX - e.clientX;
+            const newWidth = Math.max(200, Math.min(500, startWidth + delta));
+            el.style.width = `${newWidth}px`;
+        };
+        const onPointerUp = () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            el.classList.remove("udoc-right-panel--resizing");
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            // Persist width to state
+            if (storeRef) {
+                const finalWidth = el.offsetWidth;
+                storeRef.dispatch({ type: "SET_RIGHT_PANEL_WIDTH", width: finalWidth });
+            }
+        };
+        const onPointerDown = (e) => {
+            e.preventDefault();
+            startX = e.clientX;
+            startWidth = el.offsetWidth;
+            el.classList.add("udoc-right-panel--resizing");
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+            document.addEventListener("pointermove", onPointerMove);
+            document.addEventListener("pointerup", onPointerUp);
+        };
+        resizeHandle.addEventListener("pointerdown", onPointerDown);
+        unsubEvents.push(() => resizeHandle.removeEventListener("pointerdown", onPointerDown));
+    }
+    function mount(container, store) {
+        container.appendChild(el);
+        storeRef = store;
+        // Setup resize handle
+        setupResize();
+        // Mount annotation panel
+        annotationPanel.mount(content, store);
+        // Subscribe to state changes
+        applyState(selectRightPanel(store.getState()));
+        unsubRender = subscribeSelector(store, selectRightPanel, applyState, {
+            equality: shallowEqual
+        });
+    }
+    function destroy() {
+        if (unsubRender)
+            unsubRender();
+        for (const off of unsubEvents)
+            off();
+        annotationPanel.destroy();
+        storeRef = null;
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+function selectRightPanel(state) {
+    const panel = state.activePanel;
+    const isRightTab = panel !== null && !isLeftPanelTab(panel);
+    return {
+        open: isRightTab,
+        activeTab: isRightTab ? panel : null,
+        width: state.rightPanelWidth
+    };
+}
+//# sourceMappingURL=RightPanel.js.map

package/dist/ui/viewer/components/RightPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.js","sourceRoot":"","sources":["../../../../src/ui/viewer/components/RightPanel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE5E,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,MAAM,UAAU,gBAAgB;IAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,EAAE,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAElC,+CAA+C;IAC/C,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnD,YAAY,CAAC,SAAS,GAAG,iCAAiC,CAAC;IAE3D,oCAAoC;IACpC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG,2BAA2B,CAAC;IAEhD,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAEjC,mBAAmB;IACnB,MAAM,eAAe,GAAG,qBAAqB,EAAE,CAAC;IAEhD,IAAI,WAAW,GAAwB,IAAI,CAAC;IAC5C,MAAM,WAAW,GAAsB,EAAE,CAAC;IAC1C,IAAI,QAAQ,GAAsC,IAAI,CAAC;IAEvD,SAAS,UAAU,CAAC,KAAsB;QACtC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,0BAA0B,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAE7D,0CAA0C;QAC1C,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACrC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACxC,CAAC;IACL,CAAC;IAED,SAAS,WAAW;QAChB,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,MAAM,aAAa,GAAG,CAAC,CAAe,EAAE,EAAE;YACtC,iDAAiD;YACjD,MAAM,KAAK,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;YACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC;YAClE,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;QACrC,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC;YAClD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;YAChC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;YAEpC,yBAAyB;YACzB,IAAI,QAAQ,EAAE,CAAC;gBACX,MAAM,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;gBAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;YAC5E,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,CAAe,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;YACnB,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;YAC5B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YAC/C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC;YAC1C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YACxC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YACxD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACxD,CAAC,CAAC;QAEF,YAAY,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC5D,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;IAC3F,CAAC;IAED,SAAS,KAAK,CAAC,SAAsB,EAAE,KAAiC;QACpE,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC1B,QAAQ,GAAG,KAAK,CAAC;QAEjB,sBAAsB;QACtB,WAAW,EAAE,CAAC;QAEd,yBAAyB;QACzB,eAAe,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAEtC,6BAA6B;QAC7B,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC/C,WAAW,GAAG,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE;YACjE,QAAQ,EAAE,YAAY;SACzB,CAAC,CAAC;IACP,CAAC;IAED,SAAS,OAAO;QACZ,IAAI,WAAW;YAAE,WAAW,EAAE,CAAC;QAC/B,KAAK,MAAM,GAAG,IAAI,WAAW;YAAE,GAAG,EAAE,CAAC;QACrC,eAAe,CAAC,OAAO,EAAE,CAAC;QAC1B,QAAQ,GAAG,IAAI,CAAC;QAChB,EAAE,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAClC,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAkB;IACxC,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC;IAChC,MAAM,UAAU,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5D,OAAO;QACH,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QACpC,KAAK,EAAE,KAAK,CAAC,eAAe;KAC/B,CAAC;AACN,CAAC"}

package/dist/ui/viewer/components/Spread.d.ts

@@ -0,0 +1,41 @@
+import type { Spread as SpreadData } from "../layout/spreadLayout";
+import type { RenderManager } from "../rendering/RenderManager";
+import { type PageRotation, type PageInfo } from "../state";
+import { type Annotation } from "../annotation";
+export interface HighlightedAnnotation {
+    pageIndex: number;
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export interface SpreadRenderOptions {
+    docId: string;
+    scale: number;
+    dpi: number;
+}
+export interface SpreadLayoutOptions {
+    pageInfos: readonly PageInfo[];
+    scale: number;
+    dpi: number;
+    rotation: PageRotation;
+    pageSpacing: number;
+}
+/**
+ * Spread component - renders one or two pages side by side.
+ * Empty slots render as blank placeholders that preserve layout.
+ */
+export declare function createSpread(data: SpreadData): {
+    el: HTMLDivElement;
+    mount: (container: HTMLElement) => void;
+    destroy: () => void;
+    render: (renderManager: RenderManager, options: SpreadRenderOptions) => Promise<void>;
+    updateLayout: (options: SpreadLayoutOptions) => void;
+    updateAnnotations: (annotations: Map<number, Annotation[]>, options: SpreadLayoutOptions, highlightedAnnotation?: HighlightedAnnotation | null) => void;
+    getElement: () => HTMLDivElement;
+    getData: () => SpreadData;
+};
+export type SpreadComponent = ReturnType<typeof createSpread>;
+//# sourceMappingURL=Spread.d.ts.map

package/dist/ui/viewer/components/Spread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spread.d.ts","sourceRoot":"","sources":["../../../../src/ui/viewer/components/Spread.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAY,MAAM,wBAAwB,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE/E,OAAO,EAA4B,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACnE;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,YAAY,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACvB;AAoDD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU;;uBAmNf,WAAW,KAAG,IAAI;mBAKxB,IAAI;4BAvEL,aAAa,WACnB,mBAAmB,KAC7B,OAAO,CAAC,IAAI,CAAC;4BA1Ee,mBAAmB,KAAG,IAAI;qCAkKxC,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,WAC7B,mBAAmB,0BACJ,qBAAqB,GAAG,IAAI,KACrD,IAAI;sBAZgB,cAAc;mBAIjB,UAAU;EAqDjC;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC"}