@docmentis/udoc-viewer 0.5.3 → 0.5.4

package/dist/src/ui/viewer/components/ThumbnailPanel.js

@@ -0,0 +1,240 @@
+import { subscribeSelector, shallowEqual } from "../../framework/selectors";
+import { getPointsToPixels } from "../state";
+import { getDevicePixelRatio } from "../layout";
+const THUMBNAIL_WIDTH = 150; // Fixed width in CSS pixels
+function selectThumbnailSlice(state) {
+    return {
+        docId: state.doc?.id ?? null,
+        pageCount: state.pageCount,
+        pageInfos: state.pageInfos,
+        currentPage: state.page,
+        dpi: state.dpi
+    };
+}
+export function createThumbnailPanel() {
+    const el = document.createElement("div");
+    el.className = "udoc-thumbnail-panel";
+    let mounted = false;
+    let storeRef = null;
+    let workerClient = null;
+    let thumbnailItems = [];
+    let intersectionObserver = null;
+    let currentSlice = null;
+    let unsubRender = null;
+    const unsubEvents = [];
+    function createThumbnailItem(pageNumber, pageInfo) {
+        const container = document.createElement("div");
+        container.className = "udoc-thumbnail-item";
+        container.dataset.page = String(pageNumber);
+        const canvas = document.createElement("canvas");
+        canvas.className = "udoc-thumbnail-item__canvas";
+        // Set aspect ratio for responsive scaling
+        const aspectRatio = pageInfo.width / pageInfo.height;
+        canvas.style.aspectRatio = String(aspectRatio);
+        canvas.style.width = `${THUMBNAIL_WIDTH}px`;
+        container.appendChild(canvas);
+        const label = document.createElement("div");
+        label.className = "udoc-thumbnail-item__label";
+        label.textContent = String(pageNumber);
+        container.appendChild(label);
+        // Click handler for navigation
+        const onClick = () => {
+            if (storeRef) {
+                storeRef.dispatch({ type: "NAVIGATE_TO_PAGE", page: pageNumber });
+            }
+        };
+        container.addEventListener("click", onClick);
+        unsubEvents.push(() => container.removeEventListener("click", onClick));
+        return {
+            container,
+            canvas,
+            pageNumber,
+            renderKey: "",
+            pendingKey: null,
+            renderToken: 0
+        };
+    }
+    function buildThumbnailList(slice) {
+        // Clear existing
+        for (const item of thumbnailItems) {
+            item.container.remove();
+        }
+        thumbnailItems = [];
+        if (!slice.docId || slice.pageCount === 0)
+            return;
+        // Default page size if not available
+        const defaultPageInfo = { width: 612, height: 792, rotation: 0 };
+        // Create thumbnail items for each page
+        for (let i = 1; i <= slice.pageCount; i++) {
+            const pageInfo = slice.pageInfos[i - 1] || defaultPageInfo;
+            const item = createThumbnailItem(i, pageInfo);
+            thumbnailItems.push(item);
+            el.appendChild(item.container);
+        }
+        // Setup intersection observer for lazy loading
+        setupIntersectionObserver();
+        // Highlight current page
+        updateCurrentPageHighlight(slice.currentPage);
+    }
+    function setupIntersectionObserver() {
+        if (intersectionObserver) {
+            intersectionObserver.disconnect();
+        }
+        intersectionObserver = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    const pageNumber = parseInt(entry.target.dataset.page || "0", 10);
+                    if (pageNumber > 0) {
+                        requestThumbnailRender(pageNumber);
+                    }
+                }
+            }
+        }, {
+            root: el,
+            rootMargin: "100px 0px",
+            threshold: 0
+        });
+        for (const item of thumbnailItems) {
+            intersectionObserver.observe(item.container);
+        }
+        // Setup scroll handler for boost priority
+        setupScrollHandler();
+    }
+    function setupScrollHandler() {
+        const onScroll = () => {
+            if (!workerClient || !currentSlice?.docId)
+                return;
+            const focusPage = findFocusThumbnail();
+            if (focusPage !== null) {
+                workerClient.boostThumbnailRenderPriority(currentSlice.docId, focusPage);
+            }
+        };
+        el.addEventListener("scroll", onScroll, { passive: true });
+        unsubEvents.push(() => el.removeEventListener("scroll", onScroll));
+    }
+    function findFocusThumbnail() {
+        if (thumbnailItems.length === 0)
+            return null;
+        const panelRect = el.getBoundingClientRect();
+        const panelCenter = panelRect.top + panelRect.height / 2;
+        let closestPage = null;
+        let closestDistance = Infinity;
+        for (const item of thumbnailItems) {
+            const itemRect = item.container.getBoundingClientRect();
+            const itemCenter = itemRect.top + itemRect.height / 2;
+            const distance = Math.abs(itemCenter - panelCenter);
+            if (distance < closestDistance) {
+                closestDistance = distance;
+                closestPage = item.pageNumber;
+            }
+        }
+        return closestPage;
+    }
+    async function requestThumbnailRender(pageNumber) {
+        const item = thumbnailItems[pageNumber - 1];
+        if (!item || !workerClient || !currentSlice || !currentSlice.docId)
+            return;
+        const pageInfo = currentSlice.pageInfos[pageNumber - 1];
+        if (!pageInfo)
+            return;
+        const dpr = getDevicePixelRatio();
+        const pointsToPixels = getPointsToPixels(currentSlice.dpi);
+        const scale = THUMBNAIL_WIDTH / (pageInfo.width * pointsToPixels);
+        const renderScale = scale * pointsToPixels * dpr;
+        const key = `${currentSlice.docId}:${pageNumber}:${renderScale.toFixed(4)}`;
+        if (item.renderKey === key || item.pendingKey === key)
+            return;
+        const token = ++item.renderToken;
+        item.pendingKey = key;
+        try {
+            const result = await workerClient.requestRender({
+                docId: currentSlice.docId,
+                page: pageNumber,
+                type: "thumbnail",
+                scale: renderScale
+            });
+            if (!mounted || item.renderToken !== token) {
+                if (item.pendingKey === key)
+                    item.pendingKey = null;
+                return;
+            }
+            const canvas = item.canvas;
+            if (canvas.width !== result.width)
+                canvas.width = result.width;
+            if (canvas.height !== result.height)
+                canvas.height = result.height;
+            const ctx = canvas.getContext("2d");
+            if (ctx) {
+                ctx.drawImage(result.bitmap, 0, 0);
+            }
+            item.renderKey = key;
+        }
+        catch (error) {
+            if (error.message !== "Request cancelled") {
+                console.error(`Thumbnail render failed for page ${pageNumber}:`, error);
+            }
+        }
+        finally {
+            if (item.pendingKey === key)
+                item.pendingKey = null;
+        }
+    }
+    function updateCurrentPageHighlight(currentPage) {
+        for (const item of thumbnailItems) {
+            const isActive = item.pageNumber === currentPage;
+            item.container.classList.toggle("udoc-thumbnail-item--active", isActive);
+        }
+    }
+    function scrollActiveIntoView(currentPage) {
+        const item = thumbnailItems[currentPage - 1];
+        if (!item)
+            return;
+        // Use instant scroll to avoid triggering renders for all intermediate thumbnails
+        item.container.scrollIntoView({
+            behavior: "instant",
+            block: "nearest"
+        });
+    }
+    function applyState(slice) {
+        const docChanged = !currentSlice ||
+            slice.docId !== currentSlice.docId ||
+            slice.pageCount !== currentSlice.pageCount ||
+            slice.pageInfos !== currentSlice.pageInfos;
+        if (docChanged) {
+            buildThumbnailList(slice);
+        }
+        else if (slice.currentPage !== currentSlice?.currentPage) {
+            updateCurrentPageHighlight(slice.currentPage);
+            scrollActiveIntoView(slice.currentPage);
+        }
+        currentSlice = slice;
+    }
+    function mount(container, store, rm) {
+        container.appendChild(el);
+        mounted = true;
+        storeRef = store;
+        workerClient = rm;
+        // Apply initial state (currentSlice is null, so docChanged will be true)
+        applyState(selectThumbnailSlice(store.getState()));
+        unsubRender = subscribeSelector(store, selectThumbnailSlice, applyState, { equality: shallowEqual });
+    }
+    function destroy() {
+        mounted = false;
+        if (unsubRender)
+            unsubRender();
+        for (const off of unsubEvents)
+            off();
+        unsubEvents.length = 0;
+        if (intersectionObserver) {
+            intersectionObserver.disconnect();
+            intersectionObserver = null;
+        }
+        thumbnailItems = [];
+        storeRef = null;
+        workerClient = null;
+        currentSlice = null;
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+//# sourceMappingURL=ThumbnailPanel.js.map

package/dist/src/ui/viewer/components/ThumbnailPanel.js.map

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

package/dist/src/ui/viewer/components/Toolbar.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 createToolbar(): {
+    el: HTMLDivElement;
+    mount: (container: HTMLElement, store: Store<ViewerState, Action>) => void;
+    destroy: () => void;
+};
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/src/ui/viewer/components/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/ui/viewer/components/Toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAWzC,wBAAgB,aAAa;;uBA2BC,WAAW,SAAS,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,KAAG,IAAI;mBA4D3D,IAAI;EAO3B"}

package/dist/src/ui/viewer/components/Toolbar.js

@@ -0,0 +1,93 @@
+import { ICON_MENU, ICON_SEARCH, ICON_COMMENTS, ICON_FULLSCREEN, ICON_FULLSCREEN_EXIT } from "../icons";
+function createButton(className, label, iconSvg) {
+    const btn = document.createElement("button");
+    btn.className = `udoc-toolbar__btn ${className}`;
+    btn.setAttribute("aria-label", label);
+    btn.innerHTML = iconSvg;
+    return btn;
+}
+export function createToolbar() {
+    const el = document.createElement("div");
+    el.className = "udoc-toolbar";
+    // Left section
+    const leftSection = document.createElement("div");
+    leftSection.className = "udoc-toolbar__left";
+    const menuBtn = createButton("udoc-toolbar__btn--menu", "Menu", ICON_MENU);
+    leftSection.appendChild(menuBtn);
+    // Spacer
+    const spacer = document.createElement("div");
+    spacer.className = "udoc-toolbar__spacer";
+    // Right section
+    const rightSection = document.createElement("div");
+    rightSection.className = "udoc-toolbar__right";
+    const searchBtn = createButton("udoc-toolbar__btn--search", "Search", ICON_SEARCH);
+    const commentsBtn = createButton("udoc-toolbar__btn--comments", "Comments", ICON_COMMENTS);
+    const fullscreenBtn = createButton("udoc-toolbar__btn--fullscreen", "Fullscreen", ICON_FULLSCREEN);
+    rightSection.append(searchBtn, commentsBtn, fullscreenBtn);
+    el.append(leftSection, spacer, rightSection);
+    const unsubEvents = [];
+    let unsubRender = null;
+    function mount(container, store) {
+        container.appendChild(el);
+        // Wire menu button to toggle thumbnails panel
+        const onMenuClick = () => {
+            store.dispatch({ type: "TOGGLE_PANEL", panel: "thumbnail" });
+        };
+        menuBtn.addEventListener("click", onMenuClick);
+        unsubEvents.push(() => menuBtn.removeEventListener("click", onMenuClick));
+        // Wire search button to toggle search panel
+        const onSearchClick = () => {
+            store.dispatch({ type: "TOGGLE_PANEL", panel: "search" });
+        };
+        searchBtn.addEventListener("click", onSearchClick);
+        unsubEvents.push(() => searchBtn.removeEventListener("click", onSearchClick));
+        // Wire comments button to toggle comments panel
+        const onCommentsClick = () => {
+            store.dispatch({ type: "TOGGLE_PANEL", panel: "comments" });
+        };
+        commentsBtn.addEventListener("click", onCommentsClick);
+        unsubEvents.push(() => commentsBtn.removeEventListener("click", onCommentsClick));
+        // Wire fullscreen button
+        const onFullscreenClick = () => {
+            const root = el.closest(".udoc-viewer-root");
+            if (!root)
+                return;
+            if (!document.fullscreenElement) {
+                root.requestFullscreen().catch(() => {
+                    // Fullscreen request failed (e.g., not allowed by browser)
+                });
+            }
+            else {
+                document.exitFullscreen().catch(() => {
+                    // Exit fullscreen failed
+                });
+            }
+        };
+        fullscreenBtn.addEventListener("click", onFullscreenClick);
+        unsubEvents.push(() => fullscreenBtn.removeEventListener("click", onFullscreenClick));
+        // Listen for fullscreen change events to sync state
+        const onFullscreenChange = () => {
+            const root = el.closest(".udoc-viewer-root");
+            const isFullscreen = document.fullscreenElement === root;
+            store.dispatch({ type: "SET_FULLSCREEN", isFullscreen });
+        };
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        unsubEvents.push(() => document.removeEventListener("fullscreenchange", onFullscreenChange));
+        // Subscribe to state to update fullscreen button icon
+        unsubRender = store.subscribeRender((prev, next) => {
+            if (prev.isFullscreen !== next.isFullscreen) {
+                fullscreenBtn.innerHTML = next.isFullscreen ? ICON_FULLSCREEN_EXIT : ICON_FULLSCREEN;
+                fullscreenBtn.setAttribute("aria-label", next.isFullscreen ? "Exit fullscreen" : "Fullscreen");
+            }
+        });
+    }
+    function destroy() {
+        if (unsubRender)
+            unsubRender();
+        for (const off of unsubEvents)
+            off();
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+//# sourceMappingURL=Toolbar.js.map

package/dist/src/ui/viewer/components/Toolbar.js.map

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

package/dist/src/ui/viewer/components/ViewModeMenu.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 createViewModeMenu(): {
+    el: HTMLDivElement;
+    mount: (store: Store<ViewerState, Action>) => void;
+    destroy: () => void;
+};
+//# sourceMappingURL=ViewModeMenu.d.ts.map

package/dist/src/ui/viewer/components/ViewModeMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewModeMenu.d.ts","sourceRoot":"","sources":["../../../../../src/ui/viewer/components/ViewModeMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAqD,MAAM,UAAU,CAAC;AAC/F,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAmEzC,wBAAgB,kBAAkB;;mBAmIR,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,KAAG,IAAI;mBAwCnC,IAAI;EAO3B"}

package/dist/src/ui/viewer/components/ViewModeMenu.js

@@ -0,0 +1,169 @@
+import { subscribeSelector } from "../../framework/selectors";
+import { on } from "../../framework/events";
+import { ICON_VIEW_MODE, ICON_SCROLL_SPREAD, ICON_SCROLL_CONTINUOUS, ICON_LAYOUT_SINGLE, ICON_LAYOUT_DOUBLE, ICON_LAYOUT_DOUBLE_ODD_RIGHT, ICON_LAYOUT_DOUBLE_ODD_LEFT, ICON_ROTATE_0, ICON_ROTATE_90, ICON_ROTATE_180, ICON_ROTATE_270, ICON_SPACING_ALL, ICON_SPACING_NONE, ICON_SPACING_SPREAD, ICON_SPACING_PAGE } from "../icons";
+function sliceEqual(a, b) {
+    return (a.scrollMode === b.scrollMode &&
+        a.layoutMode === b.layoutMode &&
+        a.pageRotation === b.pageRotation &&
+        a.spacingMode === b.spacingMode);
+}
+const SCROLL_OPTIONS = [
+    { value: "spread", icon: ICON_SCROLL_SPREAD, label: "Spread" },
+    { value: "continuous", icon: ICON_SCROLL_CONTINUOUS, label: "Continuous" }
+];
+const LAYOUT_OPTIONS = [
+    { value: "single-page", icon: ICON_LAYOUT_SINGLE, label: "Single" },
+    { value: "double-page", icon: ICON_LAYOUT_DOUBLE, label: "Double" },
+    { value: "double-page-odd-right", icon: ICON_LAYOUT_DOUBLE_ODD_RIGHT, label: "Cover Right" },
+    { value: "double-page-odd-left", icon: ICON_LAYOUT_DOUBLE_ODD_LEFT, label: "Cover Left" }
+];
+const ROTATION_OPTIONS = [
+    { value: 0, icon: ICON_ROTATE_0, label: "0°" },
+    { value: 90, icon: ICON_ROTATE_90, label: "90°" },
+    { value: 180, icon: ICON_ROTATE_180, label: "180°" },
+    { value: 270, icon: ICON_ROTATE_270, label: "270°" }
+];
+const SPACING_OPTIONS = [
+    { value: "all", icon: ICON_SPACING_ALL, label: "All" },
+    { value: "none", icon: ICON_SPACING_NONE, label: "None" },
+    { value: "spread-only", icon: ICON_SPACING_SPREAD, label: "Spread" },
+    { value: "page-only", icon: ICON_SPACING_PAGE, label: "Page" }
+];
+export function createViewModeMenu() {
+    const el = document.createElement("div");
+    el.className = "udoc-view-mode-menu";
+    // Toggle button
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "udoc-floating-toolbar__btn";
+    toggleBtn.innerHTML = ICON_VIEW_MODE;
+    toggleBtn.title = "View settings";
+    el.appendChild(toggleBtn);
+    // Dropdown panel
+    const dropdown = document.createElement("div");
+    dropdown.className = "udoc-view-mode-menu__dropdown";
+    dropdown.style.display = "none";
+    el.appendChild(dropdown);
+    let unsub = null;
+    const unsubEvents = [];
+    let storeRef = null;
+    let isOpen = false;
+    function createSection(title, options, currentValue, onSelect, sectionOptions = {}) {
+        const section = document.createElement("div");
+        section.className = "udoc-view-mode-menu__section";
+        const titleEl = document.createElement("div");
+        titleEl.className = "udoc-view-mode-menu__title";
+        titleEl.textContent = title;
+        section.appendChild(titleEl);
+        const optionsContainer = document.createElement("div");
+        optionsContainer.className = "udoc-view-mode-menu__options";
+        for (const opt of options) {
+            const btn = document.createElement("button");
+            btn.className = "udoc-view-mode-menu__option";
+            // Only mark active if value matches and not in "no selection" state
+            const isActive = opt.value === currentValue && !sectionOptions.allowNoSelection;
+            if (isActive) {
+                btn.classList.add("udoc-view-mode-menu__option--active");
+            }
+            if (sectionOptions.disabled) {
+                btn.disabled = true;
+                btn.classList.add("udoc-view-mode-menu__option--disabled");
+            }
+            btn.title = opt.label;
+            const iconSpan = document.createElement("span");
+            iconSpan.className = "udoc-view-mode-menu__option-icon";
+            iconSpan.innerHTML = opt.icon;
+            btn.appendChild(iconSpan);
+            if (!sectionOptions.disabled) {
+                unsubEvents.push(on(btn, "click", (e) => {
+                    e.stopPropagation();
+                    onSelect(opt.value);
+                }));
+            }
+            optionsContainer.appendChild(btn);
+        }
+        section.appendChild(optionsContainer);
+        return section;
+    }
+    function buildDropdown(slice) {
+        // Clear existing content
+        dropdown.innerHTML = "";
+        // Scroll mode section
+        dropdown.appendChild(createSection("Scroll", SCROLL_OPTIONS, slice.scrollMode, (mode) => {
+            storeRef?.dispatch({ type: "SET_SCROLL_MODE", mode });
+        }));
+        // Layout mode section
+        dropdown.appendChild(createSection("Layout", LAYOUT_OPTIONS, slice.layoutMode, (mode) => {
+            storeRef?.dispatch({ type: "SET_LAYOUT_MODE", mode });
+        }));
+        // Page rotation section
+        dropdown.appendChild(createSection("Rotation", ROTATION_OPTIONS, slice.pageRotation, (rotation) => {
+            storeRef?.dispatch({ type: "SET_PAGE_ROTATION", rotation });
+        }));
+        // Spacing section
+        dropdown.appendChild(createSection("Spacing", SPACING_OPTIONS, slice.spacingMode, (mode) => {
+            storeRef?.dispatch({ type: "SET_SPACING_MODE", mode });
+        }));
+    }
+    function toggleDropdown() {
+        isOpen = !isOpen;
+        dropdown.style.display = isOpen ? "block" : "none";
+        toggleBtn.classList.toggle("udoc-floating-toolbar__btn--active", isOpen);
+    }
+    function closeDropdown() {
+        if (isOpen) {
+            isOpen = false;
+            dropdown.style.display = "none";
+            toggleBtn.classList.remove("udoc-floating-toolbar__btn--active");
+        }
+    }
+    function mount(store) {
+        storeRef = store;
+        // Toggle button click
+        unsubEvents.push(on(toggleBtn, "click", (e) => {
+            e.stopPropagation();
+            toggleDropdown();
+        }));
+        // Close on outside click
+        const handleOutsideClick = (e) => {
+            if (!el.contains(e.target)) {
+                closeDropdown();
+            }
+        };
+        document.addEventListener("click", handleOutsideClick);
+        unsubEvents.push(() => document.removeEventListener("click", handleOutsideClick));
+        // Close on escape
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                closeDropdown();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        unsubEvents.push(() => document.removeEventListener("keydown", handleEscape));
+        const applyState = (slice) => {
+            buildDropdown(slice);
+        };
+        // Initial build
+        applyState(selectSlice(store.getState()));
+        // Subscribe to changes
+        unsub = subscribeSelector(store, selectSlice, applyState, {
+            equality: sliceEqual
+        });
+    }
+    function destroy() {
+        if (unsub)
+            unsub();
+        for (const off of unsubEvents)
+            off();
+        el.remove();
+    }
+    return { el, mount, destroy };
+}
+function selectSlice(state) {
+    return {
+        scrollMode: state.scrollMode,
+        layoutMode: state.layoutMode,
+        pageRotation: state.pageRotation,
+        spacingMode: state.spacingMode
+    };
+}
+//# sourceMappingURL=ViewModeMenu.js.map

package/dist/src/ui/viewer/components/ViewModeMenu.js.map

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

package/dist/src/ui/viewer/components/Viewport.d.ts

@@ -0,0 +1,10 @@
+import type { Store } from "../../framework/store";
+import { type ViewerState } from "../state";
+import type { Action } from "../actions";
+import type { WorkerClient } from "../../../worker/index.js";
+export declare function createViewport(): {
+    el: HTMLDivElement;
+    mount: (parent: HTMLElement, store: Store<ViewerState, Action>, wc: WorkerClient) => void;
+    destroy: () => void;
+};
+//# sourceMappingURL=Viewport.d.ts.map

package/dist/src/ui/viewer/components/Viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.d.ts","sourceRoot":"","sources":["../../../../../src/ui/viewer/components/Viewport.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,EAEH,KAAK,WAAW,EAOnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAIzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmZ7D,wBAAgB,cAAc;;oBAoKH,WAAW,SAAS,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,YAAY,KAAG,IAAI;mBAwsB1E,IAAI;EAsB3B"}