@dtducas/wh-forge-viewer 1.0.5 → 1.0.6

package/dist/index.js

@@ -186,542 +186,1625 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-function registerToolbarExtension(Autodesk) {
-  function ToolbarExtension(viewer, options) {
-    Autodesk.Viewing.Extension.call(this, viewer, options);
-    this.viewer = viewer;
-    this.subToolbar = null;
-    this.paginationGroup = null;
-    this.viewables = [];
-    this.currentIndex = 0;
-    this.docBrowserShouldBeOpen = false; // Track if doc browser should remain open
-  }
-  ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
-  ToolbarExtension.prototype.constructor = ToolbarExtension;
-  ToolbarExtension.prototype.load = function () {
-    return true;
-  };
-  ToolbarExtension.prototype.unload = function () {
-    this.cleanupToolbar();
-    return true;
-  };
-  ToolbarExtension.prototype.cleanupToolbar = function () {
-    if (this.viewer.toolbar) {
-      if (this.subToolbar) {
-        this.viewer.toolbar.removeControl(this.subToolbar);
-        this.subToolbar = null;
-      }
-      if (this.paginationGroup) {
-        this.viewer.toolbar.removeControl(this.paginationGroup);
-        this.paginationGroup = null;
-      }
+/**
+ * Document Browser Configuration Constants
+ *
+ * @file document-browser.constants.ts
+ * @description Constants for Document Browser panel configuration and styling
+ */
+const DOCUMENT_BROWSER_STYLES = {
+    top: '0',
+    left: 'unset',
+    right: '0px',
+};
+
+/**
+ * Event Names Constants
+ *
+ * @file events.constants.ts
+ * @description Constants for Autodesk Forge events and custom application events
+ */
+const EVENT_NAMES = {
+    // Autodesk Forge Events
+    GEOMETRY_LOADED: 'Autodesk.Viewing.GEOMETRY_LOADED_EVENT',
+    MODEL_ADDED: 'Autodesk.Viewing.MODEL_ADDED_EVENT',
+    TOOLBAR_CREATED: 'Autodesk.Viewing.TOOLBAR_CREATED_EVENT',
+    // Custom Application Events
+    PAGE_CHANGED: 'page:changed',
+    VIEWABLES_SET: 'viewables:set',
+    DOC_BROWSER_OPENED: 'docBrowser:opened',
+    DOC_BROWSER_CLOSED: 'docBrowser:closed',
+    TOOLBAR_BUTTON_CLICKED: 'toolbar:button:clicked',
+    PAN_ACTIVATED: 'pan:activated',
+    DOWNLOAD_REQUESTED: 'download:requested',
+};
+
+/**
+ * Toolbar Configuration Constants
+ *
+ * @file toolbar.constants.ts
+ * @description Constants for custom toolbar buttons, groups, and refresh intervals
+ */
+const DEFAULT_HIDDEN_TOOLBAR_GROUPS = [
+    'settingsTools',
+    'modelTools',
+    'navTools',
+];
+const CUSTOM_TOOLBAR_BUTTONS = {
+    PAN: {
+        id: 'custom-pan-btn',
+        icon: 'adsk-icon-pan',
+        tooltip: 'Pan',
+    },
+    DOC_BROWSER: {
+        id: 'custom-doc-browser-btn',
+        icon: 'adsk-icon-documentModels',
+        tooltip: 'Document Browser',
+    },
+    DOWNLOAD: {
+        id: 'custom-download-btn',
+        icon: 'adsk-icon-custom-download',
+        tooltip: 'Download File',
+    },
+};
+const PAGINATION_BUTTONS = {
+    PREV: {
+        id: 'prev-page-btn',
+        icon: 'adsk-icon-custom-prev',
+        tooltip: 'Previous Page',
+    },
+    NEXT: {
+        id: 'next-page-btn',
+        icon: 'adsk-icon-custom-next',
+        tooltip: 'Next Page',
+    },
+    LABEL: {
+        id: 'total-page-label',
+        tooltip: 'Page info',
+    },
+};
+const TOOLBAR_REFRESH_INTERVALS = {
+    HEALING_POLL: 8,
+    BUTTON_STATE_CHECK: 10,
+    DOM_SETTLE: 50,
+    GEOMETRY_SETTLE: 80,
+    EXTENSION_INIT: 150,
+};
+const TOOLBAR_CONTROL_GROUP_IDS = {
+    TOOLS: 'custom-tool-group',
+    PAGINATION: 'custom-pagination-group',
+};
+
+/**
+ * Autodesk Forge Viewer Configuration Constants
+ *
+ * @file viewer.constants.ts
+ * @description Constants for Forge Viewer initialization, CDN URLs, and file type mappings
+ */
+const FORGE_VIEWER_VERSION = '7.*';
+const FORGE_VIEWER_CDN = 'https://developer.api.autodesk.com/modelderivative/v2/viewers';
+const FORGE_STYLE_URL = `${FORGE_VIEWER_CDN}/${FORGE_VIEWER_VERSION}/style.min.css`;
+const FORGE_SCRIPT_URL = `${FORGE_VIEWER_CDN}/${FORGE_VIEWER_VERSION}/viewer3D.min.js`;
+const SUPPORTED_FILE_EXTENSIONS = ['pdf', 'dwf', 'dwfx'];
+const FILE_EXTENSION_TO_VIEWER_EXTENSION = {
+    pdf: 'Autodesk.PDF',
+    dwf: 'Autodesk.DWF',
+    dwfx: 'Autodesk.DWF',
+};
+const GEOMETRY_SEARCH_CRITERIA = {
+    VIEW_3D: { type: 'geometry', role: '3d', progress: 'complete' },
+    VIEW_2D: { type: 'geometry', role: '2d', progress: 'complete' },
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * DOM Utility Functions
+ *
+ * @file dom.utils.ts
+ * @description Utilities for safe DOM manipulation and querying
+ */
+/**
+ * Find element by text content
+ */
+function findElementByText(selector, text) {
+    var _a;
+    const elements = Array.from(document.querySelectorAll(selector));
+    return (_a = elements.find((el) => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.includes(text); })) !== null && _a !== void 0 ? _a : null;
+}
+/**
+ * Find thumbnail tab element using multiple selectors
+ */
+function findThumbnailTab() {
+    return (document.querySelector('.docking-panel-thumbnail-view') ||
+        document.querySelector('[data-i18n="Thumbnails"]') ||
+        findElementByText('.adsk-control-group .adsk-button', 'Thumbnails'));
+}
+/**
+ * Safely click an element
+ */
+function clickElement(element) {
+    if (element && 'click' in element) {
+        element.click();
     }
-  };
-  ToolbarExtension.prototype.setViewables = function (viewables) {
-    var _this = this;
-    this.viewables = viewables;
-    this.currentIndex = 0;
-    // If multiple pages, document browser will be auto-opened
-    if (viewables.length > 1) {
-      this.docBrowserShouldBeOpen = true;
-    }
-    this.updatePaginationState();
-    this.viewer.addEventListener(Autodesk.Viewing.MODEL_ADDED_EVENT, function (e) {
-      _this.updateCurrentIndexFromModel();
-    });
-  };
-  ToolbarExtension.prototype.updateCurrentIndexFromModel = function () {
-    if (!this.viewer.model || this.viewables.length === 0) return;
-    var currentNode = this.viewer.model.getDocumentNode();
-    if (currentNode) {
-      var currentGuid = currentNode.data.guid || currentNode.guid;
-      var index = this.viewables.findIndex(function (v) {
-        var vGuid = v.data && v.data.guid ? v.data.guid : v.guid;
-        return vGuid === currentGuid;
-      });
-      if (index !== -1) {
-        this.currentIndex = index;
-      }
-      this.updatePaginationState();
+}
+/**
+ * Apply multiple styles to an element
+ */
+function applyStyles(element, styles) {
+    if (element) {
+        Object.assign(element.style, styles);
     }
-  };
-  ToolbarExtension.prototype.updatePaginationState = function () {
-    if (!this.paginationGroup) return;
+}
 
-    // Hide pagination group if there's only 1 page or no pages
-    if (this.viewables.length <= 1) {
-      this.paginationGroup.setVisible(false);
-      // Also hide the container via CSS to ensure it's completely hidden
-      if (this.paginationGroup.container) {
-        this.paginationGroup.container.style.display = 'none';
-      }
-      return;
+/**
+ * File Utility Functions
+ *
+ * @file file.utils.ts
+ * @description Utilities for file handling and path operations
+ */
+/**
+ * Extract filename from URL or path
+ */
+function extractFilenameFromPath(path) {
+    try {
+        const urlPath = new URL(path).pathname;
+        const filename = urlPath.split('/').pop();
+        return decodeURIComponent(filename || 'document.pdf');
     }
-
-    // Show pagination group for multi-page documents
-    this.paginationGroup.setVisible(true);
-    // Ensure container is visible
-    if (this.paginationGroup.container) {
-      this.paginationGroup.container.style.display = '';
-    }
-    var totalBtn = this.paginationGroup.getControl('total-page-label');
-    if (totalBtn) {
-      var current = this.viewables.length > 0 ? this.currentIndex + 1 : 0;
-      var total = this.viewables.length;
-      totalBtn.setToolTip("Page ".concat(current, " of ").concat(total));
-      var domElem = totalBtn.container;
-      if (domElem) {
-        domElem.innerHTML = "<div style=\"display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 10px; color: white; font-size: 14px; white-space: nowrap;\">".concat(current, " / ").concat(total, "</div>");
-      }
+    catch (_a) {
+        const parts = path.split('/');
+        return parts[parts.length - 1] || 'document.pdf';
     }
-  };
-  ToolbarExtension.prototype.loadCurrentViewable = function () {
-    var _this2 = this;
-    if (this.viewables.length > 0 && this.viewables[this.currentIndex]) {
-      var viewer = this.viewer;
-      var toolbar = viewer.toolbar;
-      var self = this;
+}
 
-      // Store Document Browser panel state before loading new page
-      var docBrowserExt = viewer.getExtension('Autodesk.DocumentBrowser');
-      var isCurrentlyOpen = docBrowserExt && docBrowserExt.ui && docBrowserExt.ui.panel && docBrowserExt.ui.panel.isVisible();
+class DownloadService {
+    /**
+     * Download a file from URL
+     *
+     * @param fileUrl - URL of file to download
+     *
+     * @example
+     * const downloadService = new DownloadService();
+     * await downloadService.downloadFile('https://example.com/document.pdf');
+     */
+    downloadFile(fileUrl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const response = yield fetch(fileUrl);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const blob = yield response.blob();
+                const filename = extractFilenameFromPath(fileUrl);
+                // Create download link
+                const blobUrl = URL.createObjectURL(blob);
+                const anchor = document.createElement('a');
+                anchor.href = blobUrl;
+                anchor.download = filename;
+                anchor.style.display = 'none';
+                // Trigger download
+                document.body.appendChild(anchor);
+                anchor.click();
+                document.body.removeChild(anchor);
+                // Cleanup
+                URL.revokeObjectURL(blobUrl);
+            }
+            catch (error) {
+                throw error;
+            }
+        });
+    }
+}
 
-      // Update flag - if currently open or flag is already set, keep it open
-      if (isCurrentlyOpen) {
-        this.docBrowserShouldBeOpen = true;
-      }
+class EventBus {
+    constructor() {
+        this.listeners = new Map();
+        // Private constructor for singleton pattern
+    }
+    /**
+     * Get singleton instance of EventBus
+     *
+     * @example
+     * const eventBus = EventBus.getInstance();
+     * eventBus.on('myEvent', (data) => console.log(data));
+     */
+    static getInstance() {
+        if (!EventBus.instance) {
+            EventBus.instance = new EventBus();
+        }
+        return EventBus.instance;
+    }
+    /**
+     * Subscribe to an event
+     *
+     * @param eventName - Event name to listen for
+     * @param listener - Callback function to execute when event is emitted
+     *
+     * @example
+     * eventBus.on('page:changed', (data) => {
+     *   console.log('Page changed to:', data.index);
+     * });
+     */
+    on(eventName, listener) {
+        if (!this.listeners.has(eventName)) {
+            this.listeners.set(eventName, new Set());
+        }
+        this.listeners.get(eventName).add(listener);
+    }
+    /**
+     * Unsubscribe from an event
+     *
+     * @param eventName - Event name to stop listening for
+     * @param listener - Callback function to remove
+     *
+     * @example
+     * const handler = (data) => console.log(data);
+     * eventBus.on('myEvent', handler);
+     * eventBus.off('myEvent', handler);
+     */
+    off(eventName, listener) {
+        const listeners = this.listeners.get(eventName);
+        if (listeners) {
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                this.listeners.delete(eventName);
+            }
+        }
+    }
+    /**
+     * Emit an event to all subscribers
+     *
+     * @param eventName - Event name to emit
+     * @param data - Data to pass to subscribers
+     *
+     * @example
+     * eventBus.emit('page:changed', { index: 5, viewable: {...} });
+     */
+    emit(eventName, data) {
+        const listeners = this.listeners.get(eventName);
+        if (listeners) {
+            listeners.forEach((listener) => {
+                try {
+                    listener(data);
+                }
+                catch (error) {
+                    // Silent error handling
+                }
+            });
+        }
+    }
+    /**
+     * Clear all listeners for an event (or all events if no eventName provided)
+     *
+     * @param eventName - Optional event name to clear. If not provided, clears all events
+     */
+    clear(eventName) {
+        if (eventName) {
+            this.listeners.delete(eventName);
+        }
+        else {
+            this.listeners.clear();
+        }
+    }
+    /**
+     * Get number of listeners for an event
+     *
+     * @param eventName - Event name to count listeners for
+     * @returns Number of listeners registered for the event
+     */
+    listenerCount(eventName) {
+        var _a, _b;
+        return (_b = (_a = this.listeners.get(eventName)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0;
+    }
+}
 
-      // Add one-time listener for geometry loaded to restore states
-      var _onGeometryLoaded = function onGeometryLoaded() {
-        viewer.removeEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, _onGeometryLoaded);
-        // Restore after geometry is fully loaded
-        setTimeout(function () {
-          self.restoreButtonStates(self.docBrowserShouldBeOpen);
-        }, 200);
-      };
-      viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, _onGeometryLoaded);
-      viewer.loadDocumentNode(viewer.model.getDocumentNode().getDocument(), this.viewables[this.currentIndex]).then(function () {
-        var defaultGroups = ['settingsTools', 'modelTools', 'navTools'];
-        defaultGroups.forEach(function (id) {
-          var group = toolbar.getControl(id);
-          if (group) group.setVisible(false);
+class FileLoader {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.eventBus = EventBus.getInstance();
+    }
+    /**
+     * Load a file into the viewer
+     *
+     * @param filePath - Path or URL to the file
+     * @param fileExt - File extension (pdf, dwf, dwfx)
+     * @param callbacks - Optional success/error callbacks
+     *
+     * @example
+     * const fileLoader = new FileLoader(viewer);
+     * await fileLoader.loadFile('document.pdf', 'pdf', {
+     *   onSuccess: (e) => console.log('Loaded successfully'),
+     *   onError: (err) => console.error('Load failed', err)
+     * });
+     */
+    loadFile(filePath, fileExt, callbacks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const viewerExtension = FILE_EXTENSION_TO_VIEWER_EXTENSION[fileExt];
+            // Load appropriate viewer extension
+            yield this.viewer.loadExtension(viewerExtension);
+            // Determine loading method based on file type
+            if (fileExt === 'pdf') {
+                yield this.loadPDFFile(filePath, callbacks);
+            }
+            else {
+                yield this.loadDWFFile(filePath, callbacks);
+            }
         });
-        var toolGroupExists = toolbar.getControl('custom-tool-group');
-        var paginationGroupExists = toolbar.getControl('custom-pagination-group');
-        if (!toolGroupExists && _this2.subToolbar) {
-          toolbar.addControl(_this2.subToolbar);
-        }
-        if (!paginationGroupExists && _this2.paginationGroup) {
-          toolbar.addControl(_this2.paginationGroup);
-        }
-        if (_this2.subToolbar) _this2.subToolbar.setVisible(true);
-        if (_this2.paginationGroup) _this2.paginationGroup.setVisible(true);
-        toolbar.setVisible(true);
-        _this2.updatePaginationState();
-
-        // Also restore immediately (may work for cached pages)
-        _this2.restoreButtonStates(_this2.docBrowserShouldBeOpen);
-      })["catch"](function (err) {
-        return console.error('Error loading viewable:', err);
-      });
     }
-  };
-  ToolbarExtension.prototype.restoreButtonStates = function (shouldOpenDocBrowser) {
-    var viewer = this.viewer;
-    var toolbar = viewer.toolbar;
-    if (!toolbar) return;
-    var self = this;
+    /**
+     * Load PDF file directly
+     */
+    loadPDFFile(filePath, callbacks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const handleLoadSuccess = this.createLoadSuccessHandler(callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSuccess);
+            this.viewer.loadModel(filePath, {}, handleLoadSuccess);
+        });
+    }
+    /**
+     * Load DWF/DWFX file via blob
+     * Extracted from ViewerForgePDF.jsx lines 125-136
+     */
+    loadDWFFile(filePath, callbacks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', filePath, true);
+                xhr.responseType = 'blob';
+                xhr.onload = () => {
+                    var _a;
+                    if (xhr.status === 200) {
+                        const blob = xhr.response;
+                        const blobUrl = window.URL.createObjectURL(blob);
+                        const handleLoadSuccess = this.createLoadSuccessHandler(callbacks === null || callbacks === void 0 ? void 0 : callbacks.onSuccess);
+                        this.viewer.loadModel(blobUrl + '#.dwf', {}, handleLoadSuccess);
+                        resolve();
+                    }
+                    else {
+                        const error = new Error(`Failed to load DWF file: HTTP ${xhr.status}`);
+                        (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onError) === null || _a === void 0 ? void 0 : _a.call(callbacks, error);
+                        reject(error);
+                    }
+                };
+                xhr.onerror = () => {
+                    var _a;
+                    const error = new Error('Network error loading DWF file');
+                    (_a = callbacks === null || callbacks === void 0 ? void 0 : callbacks.onError) === null || _a === void 0 ? void 0 : _a.call(callbacks, error);
+                    reject(error);
+                };
+                xhr.send();
+            });
+        });
+    }
+    /**
+     * Create load success handler that extracts viewables
+     * Extracted from ViewerForgePDF.jsx lines 44-56
+     */
+    createLoadSuccessHandler(userCallback) {
+        return (event) => {
+            try {
+                // Enable reverse zoom
+                this.viewer.setReverseZoomDirection(true);
+                // Extract viewables
+                const viewables = this.extractViewables(event);
+                // Emit event with viewables
+                this.eventBus.emit(EVENT_NAMES.VIEWABLES_SET, { viewables });
+                // Show toolbar
+                if (this.viewer.toolbar) {
+                    this.viewer.toolbar.setVisible(true);
+                }
+                // Call user callback if provided
+                userCallback === null || userCallback === void 0 ? void 0 : userCallback(event);
+            }
+            catch (error) {
+                // Silent error handling
+            }
+        };
+    }
+    /**
+     * Extract viewables from document
+     * Extracted from ViewerForgePDF.jsx lines 47-56
+     */
+    extractViewables(event) {
+        const root = event.getDocumentNode().getRootNode();
+        const view3d = root.search(GEOMETRY_SEARCH_CRITERIA.VIEW_3D, true);
+        const view2d = root.search(GEOMETRY_SEARCH_CRITERIA.VIEW_2D, true);
+        return view3d.concat(view2d);
+    }
+}
 
-    // Restore Document Browser state
-    var openDocBrowser = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var docBrowserExt, _t;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.p = _context.n) {
-            case 0:
-              if (shouldOpenDocBrowser) {
-                _context.n = 1;
-                break;
-              }
-              return _context.a(2);
-            case 1:
-              docBrowserExt = viewer.getExtension('Autodesk.DocumentBrowser'); // If extension is null, it was unloaded - we need to reload it
-              if (docBrowserExt) {
-                _context.n = 5;
-                break;
-              }
-              _context.p = 2;
-              _context.n = 3;
-              return viewer.loadExtension('Autodesk.DocumentBrowser');
-            case 3:
-              docBrowserExt = _context.v;
-              // After loading, we need to wait for the extension to fully initialize
-              // and then open the panel
-              setTimeout(function () {
-                if (docBrowserExt && docBrowserExt.ui) {
-                  docBrowserExt.ui.togglePanel();
-                  setTimeout(function () {
-                    self.applyDocBrowserStyling();
-                    self.checkButtonState();
-                  }, 150);
+class DocumentBrowserManager {
+    constructor(viewer, config, eventBus) {
+        this.shouldRemainOpen = false;
+        this.viewer = viewer;
+        this.config = config || {
+            autoOpen: true,
+            persistState: true,
+            defaultTab: 'thumbnails',
+        };
+        // Use provided EventBus instance or fallback to singleton
+        this.eventBus = eventBus || EventBus.getInstance();
+    }
+    autoOpenIfMultiPage(isMultiPage) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!isMultiPage || !this.config.autoOpen) {
+                return;
+            }
+            setTimeout(() => {
+                const originalDocBtn = document.getElementById('toolbar-documentModels');
+                if (originalDocBtn && !originalDocBtn.classList.contains('active')) {
+                    originalDocBtn.click();
+                    this.shouldRemainOpen = true;
+                    setTimeout(() => {
+                        this.applyCustomStyling();
+                        this.switchToThumbnailTab();
+                    }, TOOLBAR_REFRESH_INTERVALS.EXTENSION_INIT);
+                    this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED);
                 }
-              }, 200);
-              return _context.a(2);
-            case 4:
-              _context.p = 4;
-              _t = _context.v;
-              console.error('[ToolbarExt] Failed to reload DocumentBrowser:', _t);
-              return _context.a(2);
-            case 5:
-              if (docBrowserExt.ui) {
-                _context.n = 6;
-                break;
-              }
-              return _context.a(2);
-            case 6:
-              if (!docBrowserExt.ui.panel) {
-                _context.n = 8;
-                break;
-              }
-              if (!docBrowserExt.ui.panel.isVisible()) {
-                _context.n = 7;
-                break;
-              }
-              self.applyDocBrowserStyling();
-              self.checkButtonState();
-              return _context.a(2);
-            case 7:
-              // Use setVisible(true) directly on the panel
-              docBrowserExt.ui.panel.setVisible(true);
-              setTimeout(function () {
-                self.applyDocBrowserStyling();
-                self.checkButtonState();
-              }, 100);
-              return _context.a(2);
-            case 8:
-              // If panel doesn't exist yet, use togglePanel to create it
-              if (typeof docBrowserExt.ui.togglePanel === 'function') {
-                docBrowserExt.ui.togglePanel();
-                setTimeout(function () {
-                  self.applyDocBrowserStyling();
-                  self.checkButtonState();
-                }, 150);
-              }
-            case 9:
-              return _context.a(2);
-          }
-        }, _callee, null, [[2, 4]]);
-      }));
-      return function openDocBrowser() {
-        return _ref.apply(this, arguments);
-      };
-    }();
+                else if (originalDocBtn &&
+                    originalDocBtn.classList.contains('active')) {
+                    this.shouldRemainOpen = true;
+                }
+            }, TOOLBAR_REFRESH_INTERVALS.GEOMETRY_SETTLE);
+        });
+    }
+    openPanel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            let ext = this.viewer.getExtension('Autodesk.DocumentBrowser');
+            if (!ext) {
+                try {
+                    yield this.viewer.loadExtension('Autodesk.DocumentBrowser');
+                    ext = this.viewer.getExtension('Autodesk.DocumentBrowser');
+                }
+                catch (e) {
+                    return;
+                }
+            }
+            // Check if already open
+            if ((_b = (_a = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.isVisible()) {
+                this.shouldRemainOpen = true;
+                this.applyCustomStyling();
+                this.switchToThumbnailTab();
+                return;
+            }
+            // Try to use original button first for proper initialization
+            const originalDocBtn = document.getElementById('toolbar-documentModels');
+            if (originalDocBtn) {
+                originalDocBtn.click();
+                this.shouldRemainOpen = true;
+                setTimeout(() => {
+                    this.applyCustomStyling();
+                    this.switchToThumbnailTab();
+                    this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED);
+                }, TOOLBAR_REFRESH_INTERVALS.EXTENSION_INIT);
+            }
+            else {
+                if ((_c = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _c === void 0 ? void 0 : _c.panel) {
+                    ext.ui.panel.setVisible(true);
+                    this.shouldRemainOpen = true;
+                    setTimeout(() => {
+                        this.applyCustomStyling();
+                        this.switchToThumbnailTab();
+                        this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED);
+                    }, TOOLBAR_REFRESH_INTERVALS.EXTENSION_INIT);
+                }
+            }
+        });
+    }
+    closePanel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const ext = this.viewer.getExtension('Autodesk.DocumentBrowser');
+            if (!((_b = (_a = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.isVisible())) {
+                this.shouldRemainOpen = false;
+                return;
+            }
+            const originalDocBtn = document.getElementById('toolbar-documentModels');
+            if (originalDocBtn && originalDocBtn.classList.contains('active')) {
+                originalDocBtn.click();
+                this.shouldRemainOpen = false;
+                this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_CLOSED);
+            }
+            else {
+                if ((_c = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _c === void 0 ? void 0 : _c.panel) {
+                    ext.ui.panel.setVisible(false);
+                    this.shouldRemainOpen = false;
+                    this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_CLOSED);
+                }
+            }
+        });
+    }
+    togglePanel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const isCurrentlyOpen = this.isOpen();
+            if (isCurrentlyOpen) {
+                yield this.closePanel();
+            }
+            else {
+                yield this.openPanel();
+            }
+        });
+    }
+    isOpen() {
+        var _a, _b, _c;
+        const ext = this.viewer.getExtension('Autodesk.DocumentBrowser');
+        return (_c = (_b = (_a = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.isVisible()) !== null && _c !== void 0 ? _c : false;
+    }
+    applyCustomStyling() {
+        setTimeout(() => {
+            var _a, _b;
+            const ext = this.viewer.getExtension('Autodesk.DocumentBrowser');
+            if ((_b = (_a = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.container) {
+                applyStyles(ext.ui.panel.container, DOCUMENT_BROWSER_STYLES);
+            }
+        }, TOOLBAR_REFRESH_INTERVALS.DOM_SETTLE);
+    }
+    switchToThumbnailTab() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.config.defaultTab !== 'thumbnails')
+                return;
+            setTimeout(() => {
+                const thumbnailTab = findThumbnailTab();
+                if (thumbnailTab && !thumbnailTab.classList.contains('active')) {
+                    clickElement(thumbnailTab);
+                }
+            }, TOOLBAR_REFRESH_INTERVALS.DOM_SETTLE);
+        });
+    }
+    restoreState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            if (!this.config.persistState || !this.shouldRemainOpen) {
+                return;
+            }
+            const ext = this.viewer.getExtension('Autodesk.DocumentBrowser');
+            const isCurrentlyOpen = (_c = (_b = (_a = ext === null || ext === void 0 ? void 0 : ext.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.isVisible()) !== null && _c !== void 0 ? _c : false;
+            if (isCurrentlyOpen) {
+                this.applyCustomStyling();
+                this.switchToThumbnailTab();
+                // Emit event MULTIPLE times to ensure button state syncs
+                this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED);
+                setTimeout(() => this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED), 50);
+                setTimeout(() => this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED), 100);
+                setTimeout(() => this.eventBus.emit(EVENT_NAMES.DOC_BROWSER_OPENED), 150);
+            }
+            else {
+                yield this.openPanel();
+            }
+        });
+    }
+    setShouldRemainOpen(value) {
+        this.shouldRemainOpen = value;
+    }
+    getShouldRemainOpen() {
+        return this.shouldRemainOpen;
+    }
+}
 
-    // Restore Pan tool active state
-    var restorePanTool = function restorePanTool() {
-      self.activatePanTool();
-    };
+/**
+ * PaginationManager
+ *
+ * @file PaginationManager.ts
+ * @description Manages page navigation for multi-page documents
+ * Extracted from ToolbarExtension.js lines 34-148
+ */
+class PaginationManager {
+    constructor(viewer, Autodesk, config, eventBus) {
+        this.currentIndex = 0;
+        this.viewables = [];
+        this.paginationGroup = null;
+        this.docBrowserShouldBeOpen = false;
+        this.viewer = viewer;
+        this.Autodesk = Autodesk;
+        this.config = config || {};
+        // Use provided EventBus instance or fallback to singleton
+        this.eventBus = eventBus || EventBus.getInstance();
+        this.modelAddedHandler = this.updateCurrentIndexFromModel.bind(this);
+        // Add MODEL_ADDED_EVENT listener immediately in constructor
+        // This ensures it's always listening for page changes
+        this.viewer.addEventListener(this.Autodesk.Viewing.MODEL_ADDED_EVENT, this.modelAddedHandler);
+    }
+    /**
+     * Set callback for page changes (alternative to EventBus)
+     */
+    setPageChangeCallback(callback) {
+        this.onPageChangeCallback = callback;
+    }
+    setViewables(viewables) {
+        this.viewables = viewables;
+        this.currentIndex = 0;
+        if (viewables.length > 1) {
+            this.docBrowserShouldBeOpen = true;
+        }
+        this.updatePaginationState();
+        // Remove existing listener to avoid duplicates
+        if (this.modelAddedHandler) {
+            this.viewer.removeEventListener(this.Autodesk.Viewing.MODEL_ADDED_EVENT, this.modelAddedHandler);
+        }
+        // Add MODEL_ADDED_EVENT listener
+        this.viewer.addEventListener(this.Autodesk.Viewing.MODEL_ADDED_EVENT, this.modelAddedHandler);
+    }
+    nextPage() {
+        if (this.viewables.length > 0) {
+            this.currentIndex = (this.currentIndex + 1) % this.viewables.length;
+            this.loadCurrentViewable();
+        }
+    }
+    previousPage() {
+        if (this.viewables.length > 0) {
+            this.currentIndex =
+                (this.currentIndex - 1 + this.viewables.length) % this.viewables.length;
+            this.loadCurrentViewable();
+        }
+    }
+    goToPage(index) {
+        if (index >= 0 && index < this.viewables.length) {
+            this.currentIndex = index;
+            this.loadCurrentViewable();
+        }
+    }
+    getCurrentPage() {
+        return this.currentIndex;
+    }
+    getTotalPages() {
+        return this.viewables.length;
+    }
+    isMultiPage() {
+        return this.viewables.length > 1;
+    }
+    getViewables() {
+        return this.viewables;
+    }
+    updateCurrentIndexFromModel() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.viewer.model || this.viewables.length === 0) {
+            return;
+        }
+        const currentNode = this.viewer.model.getDocumentNode();
+        if (currentNode) {
+            const currentGuid = ((_a = currentNode.data) === null || _a === void 0 ? void 0 : _a.guid) || currentNode.guid;
+            const index = this.viewables.findIndex((v) => {
+                var _a;
+                const vGuid = ((_a = v.data) === null || _a === void 0 ? void 0 : _a.guid) || v.guid;
+                return vGuid === currentGuid;
+            });
+            if (index !== -1 && index !== this.currentIndex) {
+                // Page changed via Document Browser panel
+                this.currentIndex = index;
+                // Check if Document Browser is currently open
+                const docBrowserExt = this.viewer.getExtension('Autodesk.DocumentBrowser');
+                const isCurrentlyOpen = (_d = (_c = (_b = docBrowserExt === null || docBrowserExt === void 0 ? void 0 : docBrowserExt.ui) === null || _b === void 0 ? void 0 : _b.panel) === null || _c === void 0 ? void 0 : _c.isVisible()) !== null && _d !== void 0 ? _d : false;
+                if (isCurrentlyOpen) {
+                    this.docBrowserShouldBeOpen = true;
+                }
+                // Emit page changed event to trigger button state sync and toolbar refresh
+                const pageData = {
+                    index: this.currentIndex,
+                    viewable: this.viewables[this.currentIndex],
+                    shouldRestoreDocBrowser: this.docBrowserShouldBeOpen,
+                    fromDocBrowser: true,
+                };
+                // Use callback first (direct communication)
+                if (this.onPageChangeCallback) {
+                    this.onPageChangeCallback(pageData);
+                }
+                // Also emit via EventBus as fallback
+                this.eventBus.emit(EVENT_NAMES.PAGE_CHANGED, pageData);
+                // Update pagination state multiple times to ensure it sticks
+                const updateTimes = [10, 50, 100, 150, 200, 250, 300, 350, 400, 500];
+                updateTimes.forEach((delay) => {
+                    setTimeout(() => {
+                        this.updatePaginationState();
+                    }, delay);
+                });
+            }
+            else if (index !== -1) {
+                // Same page - but user might have clicked thumbnail while panel is open
+                const docBrowserExt = this.viewer.getExtension('Autodesk.DocumentBrowser');
+                const isCurrentlyOpen = (_g = (_f = (_e = docBrowserExt === null || docBrowserExt === void 0 ? void 0 : docBrowserExt.ui) === null || _e === void 0 ? void 0 : _e.panel) === null || _f === void 0 ? void 0 : _f.isVisible()) !== null && _g !== void 0 ? _g : false;
+                if (isCurrentlyOpen && !this.docBrowserShouldBeOpen) {
+                    this.docBrowserShouldBeOpen = true;
+                    // Emit a "refresh" event to ensure button state is synced
+                    const pageData = {
+                        index: this.currentIndex,
+                        viewable: this.viewables[this.currentIndex],
+                        shouldRestoreDocBrowser: true,
+                        fromDocBrowser: true,
+                        refresh: true,
+                    };
+                    if (this.onPageChangeCallback) {
+                        this.onPageChangeCallback(pageData);
+                    }
+                    this.eventBus.emit(EVENT_NAMES.PAGE_CHANGED, pageData);
+                }
+                // Always update pagination state
+                this.updatePaginationState();
+            }
+        }
+    }
+    updatePaginationState() {
+        // IMPORTANT: First sync currentIndex with actual loaded model
+        this.syncCurrentIndexFromModel();
+        if (!this.paginationGroup) {
+            return;
+        }
+        if (this.viewables.length <= 1) {
+            this.paginationGroup.setVisible(false);
+            if (this.paginationGroup.container) {
+                this.paginationGroup.container.style.display = 'none';
+            }
+            return;
+        }
+        this.paginationGroup.setVisible(true);
+        if (this.paginationGroup.container) {
+            this.paginationGroup.container.style.display = '';
+        }
+        const totalBtn = this.paginationGroup.getControl(PAGINATION_BUTTONS.LABEL.id);
+        if (totalBtn) {
+            const current = this.viewables.length > 0 ? this.currentIndex + 1 : 0;
+            const total = this.viewables.length;
+            totalBtn.setToolTip(`Page ${current} of ${total}`);
+            const domElem = totalBtn.container;
+            if (domElem) {
+                const newContent = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 10px; color: white; font-size: 14px; white-space: nowrap;">${current} / ${total}</div>`;
+                domElem.innerHTML = newContent;
+                // Use requestAnimationFrame to ensure DOM update
+                requestAnimationFrame(() => {
+                    domElem.innerHTML = newContent;
+                });
+                // Also try direct text update as fallback
+                setTimeout(() => {
+                    if (domElem.innerHTML !== newContent) {
+                        domElem.innerHTML = newContent;
+                    }
+                }, 20);
+            }
+        }
+        else {
+            // Try to get the control again in case it was just created
+            setTimeout(() => {
+                const totalBtnRetry = this.paginationGroup.getControl(PAGINATION_BUTTONS.LABEL.id);
+                if (totalBtnRetry) {
+                    const current = this.viewables.length > 0 ? this.currentIndex + 1 : 0;
+                    const total = this.viewables.length;
+                    totalBtnRetry.setToolTip(`Page ${current} of ${total}`);
+                    const domElem = totalBtnRetry.container;
+                    if (domElem) {
+                        domElem.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 10px; color: white; font-size: 14px; white-space: nowrap;">${current} / ${total}</div>`;
+                    }
+                }
+            }, 50);
+        }
+    }
+    /**
+     * Sync currentIndex with the actual loaded model (without emitting events)
+     * This is used to ensure pagination display shows correct page number
+     */
+    syncCurrentIndexFromModel() {
+        var _a;
+        if (!this.viewer.model || this.viewables.length === 0) {
+            return;
+        }
+        const currentNode = this.viewer.model.getDocumentNode();
+        if (currentNode) {
+            const currentGuid = ((_a = currentNode.data) === null || _a === void 0 ? void 0 : _a.guid) || currentNode.guid;
+            const index = this.viewables.findIndex((v) => {
+                var _a;
+                const vGuid = ((_a = v.data) === null || _a === void 0 ? void 0 : _a.guid) || v.guid;
+                return vGuid === currentGuid;
+            });
+            if (index !== -1 && index !== this.currentIndex) {
+                this.currentIndex = index;
+            }
+        }
+    }
+    /**
+     * Update thumbnail selection in Document Browser panel
+     * This ensures the correct thumbnail is highlighted after navigation
+     */
+    updateThumbnailSelection(targetViewable) {
+        var _a;
+        try {
+            const targetGuid = ((_a = targetViewable.data) === null || _a === void 0 ? void 0 : _a.guid) || targetViewable.guid;
+            // Find all thumbnails
+            const thumbnails = document.querySelectorAll('.viewer-ext-docbrowser-thumbnail');
+            let selectedThumbnail = null;
+            thumbnails.forEach((thumbnail) => {
+                const bubbleGuid = thumbnail.getAttribute('bubble-guid');
+                if (bubbleGuid === targetGuid) {
+                    thumbnail.classList.add('viewer-ext-docbrowser-thumbnail-selected');
+                    selectedThumbnail = thumbnail;
+                }
+                else {
+                    thumbnail.classList.remove('viewer-ext-docbrowser-thumbnail-selected');
+                }
+            });
+            // CRITICAL: Scroll to selected thumbnail
+            if (selectedThumbnail) {
+                this.scrollToThumbnail(selectedThumbnail);
+            }
+        }
+        catch (error) {
+            // Silent error handling
+        }
+    }
+    /**
+     * Scroll the Document Browser panel to show the selected thumbnail
+     */
+    scrollToThumbnail(thumbnail) {
+        try {
+            // Find the scroll container
+            const scrollContainer = document.querySelector('.docking-panel-scroll');
+            if (!scrollContainer) {
+                return;
+            }
+            // Get thumbnail position relative to container
+            const thumbnailRect = thumbnail.getBoundingClientRect();
+            const containerRect = scrollContainer.getBoundingClientRect();
+            // Calculate scroll position to center the thumbnail in the viewport
+            const thumbnailTop = thumbnailRect.top - containerRect.top + scrollContainer.scrollTop;
+            const containerHeight = scrollContainer.clientHeight;
+            const thumbnailHeight = thumbnailRect.height;
+            const targetScrollTop = thumbnailTop - containerHeight / 2 + thumbnailHeight / 2;
+            // Smooth scroll to target position
+            scrollContainer.scrollTo({
+                top: targetScrollTop,
+                behavior: 'smooth',
+            });
+        }
+        catch (error) {
+            // Silent error handling
+        }
+    }
+    /**
+     * Try to use DocumentBrowser API to change page without refreshing panel
+     * Returns true if successful, false otherwise
+     */
+    tryUseDocBrowserAPI(targetIndex) {
+        var _a, _b, _c;
+        const docBrowserExt = this.viewer.getExtension('Autodesk.DocumentBrowser');
+        const isOpen = (_c = (_b = (_a = docBrowserExt === null || docBrowserExt === void 0 ? void 0 : docBrowserExt.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.isVisible()) !== null && _c !== void 0 ? _c : false;
+        if (!isOpen || targetIndex < 0 || targetIndex >= this.viewables.length) {
+            return false;
+        }
+        try {
+            const targetViewable = this.viewables[targetIndex];
+            if (!targetViewable) {
+                return false;
+            }
+            // Try _changeModelFn (internal method used by DocumentBrowser)
+            if (docBrowserExt.ui &&
+                typeof docBrowserExt.ui._changeModelFn === 'function') {
+                docBrowserExt.ui._changeModelFn(targetViewable);
+                // Update thumbnail selection after model change
+                setTimeout(() => {
+                    this.updateThumbnailSelection(targetViewable);
+                }, 100);
+                return true;
+            }
+            // Fallback: Try _changeModel
+            if (docBrowserExt.ui &&
+                typeof docBrowserExt.ui._changeModel === 'function') {
+                docBrowserExt.ui._changeModel(targetViewable);
+                return true;
+            }
+            // Fallback: Try setCurrentViewable
+            if (docBrowserExt &&
+                typeof docBrowserExt.setCurrentViewable === 'function') {
+                docBrowserExt.setCurrentViewable(targetViewable);
+                return true;
+            }
+            return false;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    loadCurrentViewable() {
+        var _a, _b, _c, _d, _e;
+        if (this.viewables.length === 0 || !this.viewables[this.currentIndex]) {
+            return;
+        }
+        const viewer = this.viewer;
+        // Check current Document Browser state before loading new page
+        const docBrowserExt = viewer.getExtension('Autodesk.DocumentBrowser');
+        const isCurrentlyOpen = (_c = (_b = (_a = docBrowserExt === null || docBrowserExt === void 0 ? void 0 : docBrowserExt.ui) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.isVisible()) !== null && _c !== void 0 ? _c : false;
+        if (isCurrentlyOpen) {
+            this.docBrowserShouldBeOpen = true;
+        }
+        // OPTIMIZATION: If Document Browser is open, try to use its API to navigate
+        // This prevents the panel from being refreshed (same behavior as manual thumbnail click)
+        if (isCurrentlyOpen) {
+            const apiSuccess = this.tryUseDocBrowserAPI(this.currentIndex);
+            if (apiSuccess) {
+                // Update pagination state after a short delay
+                setTimeout(() => {
+                    this.updatePaginationState();
+                }, 100);
+                return;
+            }
+        }
+        // FALLBACK: Use traditional loadDocumentNode if Document Browser is closed
+        const onGeometryLoaded = () => {
+            viewer.removeEventListener(this.Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onGeometryLoaded);
+            setTimeout(() => {
+                const pageData = {
+                    index: this.currentIndex,
+                    viewable: this.viewables[this.currentIndex],
+                    shouldRestoreDocBrowser: this.docBrowserShouldBeOpen,
+                    fromPagination: true,
+                };
+                if (this.onPageChangeCallback) {
+                    this.onPageChangeCallback(pageData);
+                }
+                this.eventBus.emit(EVENT_NAMES.PAGE_CHANGED, pageData);
+                this.updatePaginationState();
+            }, TOOLBAR_REFRESH_INTERVALS.GEOMETRY_SETTLE);
+        };
+        viewer.addEventListener(this.Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onGeometryLoaded);
+        viewer
+            .loadDocumentNode(viewer.model.getDocumentNode().getDocument(), this.viewables[this.currentIndex])
+            .then(() => {
+            const pageData = {
+                index: this.currentIndex,
+                viewable: this.viewables[this.currentIndex],
+                shouldRestoreDocBrowser: this.docBrowserShouldBeOpen,
+                immediate: true,
+                fromPagination: true,
+            };
+            if (this.onPageChangeCallback) {
+                this.onPageChangeCallback(pageData);
+            }
+            this.eventBus.emit(EVENT_NAMES.PAGE_CHANGED, pageData);
+            this.updatePaginationState();
+        })
+            .catch((err) => {
+            // Silent error handling
+        });
+        (_e = (_d = this.config).onPageChange) === null || _e === void 0 ? void 0 : _e.call(_d, this.currentIndex);
+    }
+    createPaginationGroup(toolbar) {
+        this.paginationGroup = new this.Autodesk.Viewing.UI.ControlGroup(TOOLBAR_CONTROL_GROUP_IDS.PAGINATION);
+        toolbar.addControl(this.paginationGroup);
+        const prevBtn = new this.Autodesk.Viewing.UI.Button(PAGINATION_BUTTONS.PREV.id);
+        prevBtn.setIcon(PAGINATION_BUTTONS.PREV.icon);
+        prevBtn.addClass('custom-prev-btn');
+        prevBtn.setToolTip(PAGINATION_BUTTONS.PREV.tooltip);
+        prevBtn.onClick = () => this.previousPage();
+        this.paginationGroup.addControl(prevBtn);
+        const labelBtn = new this.Autodesk.Viewing.UI.Button(PAGINATION_BUTTONS.LABEL.id);
+        labelBtn.setToolTip(PAGINATION_BUTTONS.LABEL.tooltip);
+        this.paginationGroup.addControl(labelBtn);
+        const nextBtn = new this.Autodesk.Viewing.UI.Button(PAGINATION_BUTTONS.NEXT.id);
+        nextBtn.setIcon(PAGINATION_BUTTONS.NEXT.icon);
+        nextBtn.addClass('custom-next-btn');
+        nextBtn.setToolTip(PAGINATION_BUTTONS.NEXT.tooltip);
+        nextBtn.onClick = () => this.nextPage();
+        this.paginationGroup.addControl(nextBtn);
+        // Immediately update pagination state after creating group
+        setTimeout(() => {
+            this.updatePaginationState();
+        }, 10);
+    }
+    getPaginationGroup() {
+        return this.paginationGroup;
+    }
+    setPaginationGroup(group) {
+        this.paginationGroup = group;
+    }
+    cleanup() {
+        if (this.modelAddedHandler) {
+            this.viewer.removeEventListener(this.Autodesk.Viewing.MODEL_ADDED_EVENT, this.modelAddedHandler);
+        }
+        if (this.viewer.toolbar && this.paginationGroup) {
+            this.viewer.toolbar.removeControl(this.paginationGroup);
+            this.paginationGroup = null;
+        }
+    }
+}
 
-    // Call restore at multiple intervals to ensure it works
-    // Use longer delays since geometry needs to fully load
-    setTimeout(openDocBrowser, 300);
-    setTimeout(openDocBrowser, 600);
-    setTimeout(openDocBrowser, 1000);
-    setTimeout(restorePanTool, 100);
-    setTimeout(restorePanTool, 300);
-  };
-  ToolbarExtension.prototype.applyDocBrowserStyling = function () {
-    var viewer = this.viewer;
-    var ext = viewer.getExtension('Autodesk.DocumentBrowser');
-    if (ext && ext.ui && ext.ui.panel && ext.ui.panel.container) {
-      ext.ui.panel.container.style.top = '0';
-      ext.ui.panel.container.style.left = 'unset';
-      ext.ui.panel.container.style.right = '0px';
-      ext.ui.panel.container.style.width = '200px';
-      ext.ui.panel.container.style.height = '80%';
+/**
+ * ToolbarManager
+ *
+ * @file ToolbarManager.ts
+ * @description Manages custom toolbar creation and button state
+ * Extracted from ToolbarExtension.js lines 256-479
+ */
+class ToolbarManager {
+    constructor(viewer, Autodesk, config) {
+        this.subToolbar = null;
+        this.viewer = viewer;
+        this.Autodesk = Autodesk;
+        this.config = config;
+        this.eventBus = EventBus.getInstance();
+    }
+    createToolbar() {
+        const toolbar = this.viewer.toolbar;
+        if (!toolbar)
+            return;
+        this.subToolbar = new this.Autodesk.Viewing.UI.ControlGroup(TOOLBAR_CONTROL_GROUP_IDS.TOOLS);
+        const panBtn = this.createPanButton();
+        const docBtn = this.createDocBrowserButton();
+        const dlBtn = this.createDownloadButton();
+        this.subToolbar.addControl(panBtn);
+        this.subToolbar.addControl(docBtn);
+        this.subToolbar.addControl(dlBtn);
+        toolbar.addControl(this.subToolbar);
+    }
+    createPanButton() {
+        const btn = new this.Autodesk.Viewing.UI.Button(CUSTOM_TOOLBAR_BUTTONS.PAN.id);
+        btn.setIcon(CUSTOM_TOOLBAR_BUTTONS.PAN.icon);
+        btn.addClass('custom-pan-btn');
+        btn.setToolTip(CUSTOM_TOOLBAR_BUTTONS.PAN.tooltip);
+        btn.onClick = () => {
+            var _a, _b;
+            (_b = (_a = this.config).onPanClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.activatePanButton();
+        };
+        return btn;
+    }
+    createDocBrowserButton() {
+        const btn = new this.Autodesk.Viewing.UI.Button(CUSTOM_TOOLBAR_BUTTONS.DOC_BROWSER.id);
+        btn.setIcon(CUSTOM_TOOLBAR_BUTTONS.DOC_BROWSER.icon);
+        btn.addClass('custom-doc-browser-btn');
+        btn.setToolTip(CUSTOM_TOOLBAR_BUTTONS.DOC_BROWSER.tooltip);
+        btn.onClick = () => {
+            var _a, _b;
+            (_b = (_a = this.config).onDocBrowserClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.eventBus.emit(EVENT_NAMES.TOOLBAR_BUTTON_CLICKED, {
+                buttonId: CUSTOM_TOOLBAR_BUTTONS.DOC_BROWSER.id,
+            });
+        };
+        return btn;
+    }
+    createDownloadButton() {
+        const btn = new this.Autodesk.Viewing.UI.Button(CUSTOM_TOOLBAR_BUTTONS.DOWNLOAD.id);
+        btn.setIcon(CUSTOM_TOOLBAR_BUTTONS.DOWNLOAD.icon);
+        btn.addClass('custom-download-btn');
+        btn.setToolTip(CUSTOM_TOOLBAR_BUTTONS.DOWNLOAD.tooltip);
+        btn.onClick = () => {
+            var _a, _b;
+            (_b = (_a = this.config).onDownloadClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.eventBus.emit(EVENT_NAMES.DOWNLOAD_REQUESTED, {
+                filePath: this.config.filePath,
+            });
+        };
+        return btn;
+    }
+    updateButtonState(buttonId, isActive) {
+        if (!this.subToolbar)
+            return;
+        const btn = this.subToolbar.getControl(buttonId);
+        if (btn) {
+            const newState = isActive
+                ? this.Autodesk.Viewing.UI.Button.State.ACTIVE
+                : this.Autodesk.Viewing.UI.Button.State.INACTIVE;
+            btn.setState(newState);
+        }
     }
+    activatePanButton() {
+        try {
+            this.viewer.setActiveNavigationTool('pan');
+            // Note: Removed EVENT_NAMES.PAN_ACTIVATED emit as no listeners were registered
+            // If you need this event, add a listener first
+        }
+        catch (e) {
+            const originalPanBtn = document.getElementById('toolbar-panTool');
+            if (originalPanBtn) {
+                originalPanBtn.click();
+            }
+        }
+        this.updateButtonState(CUSTOM_TOOLBAR_BUTTONS.PAN.id, true);
+        const customPanBtn = document.querySelector('.custom-pan-btn');
+        if (customPanBtn) {
+            customPanBtn.classList.add('active');
+            customPanBtn.classList.remove('inactive');
+        }
+    }
+    hideDefaultGroups() {
+        const toolbar = this.viewer.toolbar;
+        if (!toolbar)
+            return;
+        DEFAULT_HIDDEN_TOOLBAR_GROUPS.forEach((id) => {
+            const group = toolbar.getControl(id);
+            if (group) {
+                group.setVisible(false);
+            }
+        });
+    }
+    getToolbar() {
+        return this.subToolbar;
+    }
+    cleanup() {
+        if (this.viewer.toolbar && this.subToolbar) {
+            this.viewer.toolbar.removeControl(this.subToolbar);
+            this.subToolbar = null;
+        }
+    }
+}
 
-    // Switch to Thumbnail tab
-    this.switchToThumbnailTab();
-  };
-  ToolbarExtension.prototype.switchToThumbnailTab = function () {
-    // Try multiple selectors to find the thumbnail tab button
-    var thumbnailTab = document.querySelector('.docking-panel-thumbnail-view') || document.querySelector('[data-i18n="Thumbnails"]') || Array.from(document.querySelectorAll('.adsk-control-group .adsk-button')).find(function (btn) {
-      return btn.textContent.includes('Thumbnails') || btn.title.includes('Thumbnails');
+// CRITICAL: Global state to persist across extension unload/reload cycles
+// This is necessary because Forge Viewer unloads extensions when navigating via thumbnails
+var GLOBAL_STATE = {
+  viewables: null,
+  docBrowserShouldBeOpen: false,
+  currentIndex: 0
+};
+function registerToolbarExtension(Autodesk) {
+  function ToolbarExtension(viewer, options) {
+    var _this = this;
+    Autodesk.Viewing.Extension.call(this, viewer, options);
+    this.viewer = viewer;
+    this.Autodesk = Autodesk;
+    this.options = options;
+    // Initialize EventBus
+    this.eventBus = EventBus.getInstance();
+    // Initialize Managers (Dependency Injection)
+    // CRITICAL: Pass EventBus instance to ensure all managers use the same instance
+    this.paginationManager = new PaginationManager(viewer, Autodesk, {}, this.eventBus);
+    // Register page change callback (direct communication instead of EventBus)
+    this.paginationManager.setPageChangeCallback(function (data) {
+      _this.onPageChanged(data);
+    });
+    this.toolbarManager = new ToolbarManager(viewer, Autodesk, {
+      Autodesk: Autodesk,
+      filePath: options.filePath,
+      onPanClick: function onPanClick() {
+        return _this.handlePanClick();
+      },
+      onDocBrowserClick: function onDocBrowserClick() {
+        return _this.handleDocBrowserClick();
+      },
+      onDownloadClick: function onDownloadClick() {
+        return _this.handleDownloadClick();
+      }
     });
-    if (thumbnailTab && !thumbnailTab.classList.contains('active')) {
-      thumbnailTab.click();
+    this.docBrowserManager = new DocumentBrowserManager(viewer, {
+      autoOpen: true,
+      persistState: true,
+      defaultTab: 'thumbnails'
+    }, this.eventBus);
+    // Initialize Services
+    this.downloadService = new DownloadService();
+    // Toolbar healing interval
+    this._toolbarInterval = null;
+    this._buttonStateInterval = null;
+    // Store viewables temporarily if toolbar not ready yet
+    this._pendingViewables = null;
+    this._toolbarReady = false;
+    // Track if page change is in progress
+    this._isPageChanging = false;
+    // Bind event handlers
+    this.onToolbarCreatedHandler = this.onToolbarCreated.bind(this);
+    this.onGeometryLoadedHandler = this.onGeometryLoaded.bind(this);
+    this.onPageChangedHandler = this.onPageChanged.bind(this);
+    this.onViewablesSetHandler = this.onViewablesSet.bind(this);
+  }
+  ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
+  ToolbarExtension.prototype.constructor = ToolbarExtension;
+  ToolbarExtension.prototype.load = function () {
+    var _this2 = this;
+    this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedHandler);
+    this.viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, this.onGeometryLoadedHandler);
+    // Subscribe to EventBus events
+    this.eventBus.on(EVENT_NAMES.PAGE_CHANGED, this.onPageChangedHandler);
+    this.eventBus.on(EVENT_NAMES.VIEWABLES_SET, this.onViewablesSetHandler);
+    // Subscribe to Document Browser open/close events
+    this.eventBus.on(EVENT_NAMES.DOC_BROWSER_OPENED, function () {
+      GLOBAL_STATE.docBrowserShouldBeOpen = true;
+      setTimeout(function () {
+        return _this2.syncDocBrowserButtonState();
+      }, TOOLBAR_REFRESH_INTERVALS.DOM_SETTLE);
+    });
+    this.eventBus.on(EVENT_NAMES.DOC_BROWSER_CLOSED, function () {
+      GLOBAL_STATE.docBrowserShouldBeOpen = false;
+      setTimeout(function () {
+        return _this2.syncDocBrowserButtonState();
+      }, TOOLBAR_REFRESH_INTERVALS.DOM_SETTLE);
+    });
+    // CRITICAL: Restore state from GLOBAL_STATE if available
+    // This handles the case where extension was unloaded and reloaded (e.g., thumbnail navigation)
+    if (GLOBAL_STATE.viewables && GLOBAL_STATE.viewables.length > 0) {
+      // Restore viewables to pagination manager
+      this._pendingViewables = GLOBAL_STATE.viewables;
+      // Restore Document Browser state
+      if (GLOBAL_STATE.docBrowserShouldBeOpen) {
+        this.docBrowserManager.setShouldRemainOpen(true);
+        // CRITICAL: Sync button state immediately and repeatedly after load
+        // This ensures button is active when extension reloads after using _changeModelFn
+        var syncTimes = [50, 100, 150, 200, 300, 400, 500];
+        syncTimes.forEach(function (delay) {
+          setTimeout(function () {
+            _this2.syncDocBrowserButtonState();
+          }, delay);
+        });
+      }
     }
+    return true;
   };
-  ToolbarExtension.prototype.activatePanTool = function () {
-    var viewer = this.viewer;
-    var toolbar = viewer.toolbar;
-    if (!toolbar) return;
-
-    // Activate pan tool using viewer API
-    try {
-      viewer.setActiveNavigationTool('pan');
-    } catch (e) {
-      // Fallback: click the original pan button
-      var originalPanBtn = document.getElementById('toolbar-panTool');
-      if (originalPanBtn) {
-        originalPanBtn.click();
-      }
+  ToolbarExtension.prototype.unload = function () {
+    // CRITICAL: Save state to GLOBAL_STATE before unloading
+    // This allows state to persist across unload/reload cycles (e.g., thumbnail navigation)
+    var totalPages = this.paginationManager.getTotalPages();
+    if (totalPages > 0) {
+      GLOBAL_STATE.viewables = this.paginationManager.getViewables();
+      GLOBAL_STATE.currentIndex = this.paginationManager.getCurrentPage();
+      GLOBAL_STATE.docBrowserShouldBeOpen = this.docBrowserManager.getShouldRemainOpen();
     }
-
-    // Update custom pan button visual state
-    var toolGroup = toolbar.getControl('custom-tool-group');
-    if (toolGroup) {
-      var panBtn = toolGroup.getControl('custom-pan-btn');
-      if (panBtn) {
-        panBtn.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
-        if (panBtn.container) {
-          panBtn.container.classList.add('active');
-          panBtn.container.classList.remove('inactive');
-        }
-      }
+    // Cleanup event listeners
+    this.viewer.removeEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedHandler);
+    this.viewer.removeEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, this.onGeometryLoadedHandler);
+    // Unsubscribe from EventBus
+    this.eventBus.off(EVENT_NAMES.PAGE_CHANGED, this.onPageChangedHandler);
+    this.eventBus.off(EVENT_NAMES.VIEWABLES_SET, this.onViewablesSetHandler);
+    // Cleanup intervals
+    if (this._toolbarInterval) {
+      clearInterval(this._toolbarInterval);
+      this._toolbarInterval = null;
     }
+    return true;
   };
-  ToolbarExtension.prototype.onToolbarCreated = function (toolbar) {
+  /**
+   * Called when toolbar is created
+   * Delegates to managers for setup
+   */
+  ToolbarExtension.prototype.onToolbarCreated = function () {
     var _this3 = this;
+    // Initial toolbar setup
     this.refreshToolbar();
+    // Add listener for geometry loaded to refresh toolbar
     this.viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
       setTimeout(function () {
         _this3.refreshToolbar();
-        _this3.updateCurrentIndexFromModel();
-      }, 100);
+      }, TOOLBAR_REFRESH_INTERVALS.GEOMETRY_SETTLE);
     });
+    // Add listener for toolbar created event
     this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, function () {
       setTimeout(function () {
         _this3.refreshToolbar();
-      }, 10);
+      }, TOOLBAR_REFRESH_INTERVALS.BUTTON_STATE_CHECK);
     });
-    if (this._toolbarInterval) clearInterval(this._toolbarInterval);
-    this._toolbarInterval = setInterval(function () {
-      if (_this3.viewer && _this3.viewer.toolbar) {
-        var toolGroup = _this3.viewer.toolbar.getControl('custom-tool-group');
-        var pagGroup = _this3.viewer.toolbar.getControl('custom-pagination-group');
-        if (!toolGroup || !pagGroup) {
-          _this3.refreshToolbar();
-        }
-        _this3.checkButtonState();
-      }
-    }, 200);
-  };
-  ToolbarExtension.prototype.checkButtonState = function () {
-    var viewer = this.viewer;
-    if (!viewer.toolbar) return;
-    var toolGroup = viewer.toolbar.getControl('custom-tool-group');
-    if (!toolGroup) return;
-
-    // Check Document Browser button state
-    var docBtn = toolGroup.getControl('custom-doc-browser-btn');
-    if (docBtn) {
-      var ext = viewer.getExtension('Autodesk.DocumentBrowser');
-      var isVisible = ext && ext.ui && ext.ui.panel && ext.ui.panel.isVisible();
-      var newState = isVisible ? Autodesk.Viewing.UI.Button.State.ACTIVE : Autodesk.Viewing.UI.Button.State.INACTIVE;
-      if (docBtn.getState() !== newState) {
-        docBtn.setState(newState);
-      }
-
-      // Force CSS class update to ensure visual state is correct
-      if (docBtn.container) {
-        if (isVisible) {
-          docBtn.container.classList.add('active');
-          docBtn.container.classList.remove('inactive');
-        } else {
-          docBtn.container.classList.remove('active');
-          docBtn.container.classList.add('inactive');
-        }
-      }
-    }
-
-    // Check Pan button state - ensure it stays active
-    var panBtn = toolGroup.getControl('custom-pan-btn');
-    if (panBtn) {
-      // Check if pan tool is the active tool
-      var activeTool = viewer.getActiveNavigationTool();
-      var isPanActive = activeTool === 'pan';
-      if (isPanActive) {
-        panBtn.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
-        if (panBtn.container) {
-          panBtn.container.classList.add('active');
-          panBtn.container.classList.remove('inactive');
-        }
-      }
-    }
-  };
-  var originalUnload = ToolbarExtension.prototype.unload;
-  ToolbarExtension.prototype.unload = function () {
-    if (this._toolbarInterval) {
-      clearInterval(this._toolbarInterval);
-      this._toolbarInterval = null;
-    }
-    return originalUnload.call(this);
+    // Start toolbar healing mechanism (also handles button state sync)
+    this.startToolbarHealing();
   };
+  /**
+   * Refresh toolbar - recreate if needed
+   * This is the core method that handles toolbar persistence
+   */
   ToolbarExtension.prototype.refreshToolbar = function () {
-    var viewer = this.viewer;
-    var toolbar = viewer.toolbar;
+    var _this4 = this;
+    var toolbar = this.viewer.toolbar;
     if (!toolbar) return;
-    var defaultGroups = ['settingsTools', 'modelTools', 'navTools'];
-    defaultGroups.forEach(function (id) {
-      var group = toolbar.getControl(id);
-      if (group) {
-        group.setVisible(false);
-        if (group.container) {
-          group.container.style.display = 'none';
-        }
-      }
-    });
+    // Hide default groups
+    this.toolbarManager.hideDefaultGroups();
+    // Check and recreate tool group if needed
     var toolGroup = toolbar.getControl('custom-tool-group');
-    var pagGroup = toolbar.getControl('custom-pagination-group');
     if (!toolGroup) {
-      if (this.subToolbar) {
-        this.subToolbar = null;
-      }
-      this.createToolGroup(toolbar);
+      this.toolbarManager.createToolbar();
     } else {
       toolGroup.setVisible(true);
-      this.subToolbar = toolGroup;
     }
+    // Check and recreate pagination group if needed
+    var pagGroup = toolbar.getControl('custom-pagination-group');
     if (!pagGroup) {
-      if (this.paginationGroup) {
-        this.paginationGroup = null;
-      }
-      this.createPaginationGroup(toolbar);
+      this.paginationManager.createPaginationGroup(toolbar);
     } else {
-      // Don't force visibility here - let updatePaginationState handle it
-      this.paginationGroup = pagGroup;
+      // Ensure pagination manager has correct reference to existing group
+      this.paginationManager.setPaginationGroup(pagGroup);
+      pagGroup.setVisible(true);
+    }
+    // Mark toolbar as ready
+    this._toolbarReady = true;
+    // Process pending viewables if any
+    if (this._pendingViewables) {
+      this.paginationManager.setViewables(this._pendingViewables);
+      if (this._pendingViewables.length > 1) {
+        this.docBrowserManager.autoOpenIfMultiPage(true);
+      }
+      this._pendingViewables = null;
     }
+    // Show toolbar
     toolbar.setVisible(true);
-    this.updatePaginationState();
+    // ALWAYS update pagination state after toolbar refresh
+    // Use multiple timeouts to ensure it sticks
+    var updateTimes = [10, 30, 50, 100];
+    updateTimes.forEach(function (delay) {
+      setTimeout(function () {
+        _this4.paginationManager.updatePaginationState();
+      }, delay);
+    });
+    // CRITICAL: Sync Document Browser button state after toolbar refresh
+    // This ensures button is active if panel is open (especially after reload)
+    var syncTimes = [50, 100, 150, 200];
+    syncTimes.forEach(function (delay) {
+      setTimeout(function () {
+        var isOpen = _this4.docBrowserManager.isOpen();
+        if (isOpen) {
+          _this4.syncDocBrowserButtonState();
+        }
+      }, delay);
+    });
+    // Activate pan tool
+    this.toolbarManager.activatePanButton();
   };
-  ToolbarExtension.prototype.createToolGroup = function (toolbar) {
-    var _this4 = this;
-    var viewer = this.viewer;
-    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('custom-tool-group');
-    toolbar.addControl(this.subToolbar);
-    var panBtn = new Autodesk.Viewing.UI.Button('custom-pan-btn');
-    panBtn.setIcon('adsk-icon-pan');
-    panBtn.setToolTip('Pan');
-    panBtn.onClick = function () {
-      var originalPanBtn = document.getElementById('toolbar-panTool');
-      if (originalPanBtn) {
-        originalPanBtn.click();
-      }
-
-      // Set this button to active state
-      if (panBtn.container) {
-        panBtn.container.classList.add('active');
-        panBtn.container.classList.remove('inactive');
+  /**
+   * Called when geometry is loaded
+   * Restores button states
+   */
+  ToolbarExtension.prototype.onGeometryLoaded = function () {
+    var _this5 = this;
+    setTimeout(function () {
+      _this5.toolbarManager.activatePanButton();
+      _this5.paginationManager.updatePaginationState();
+    }, TOOLBAR_REFRESH_INTERVALS.GEOMETRY_SETTLE);
+  };
+  /**
+   * Called when page changes
+   * Restores Document Browser and toolbar states
+   */
+  ToolbarExtension.prototype.onPageChanged = function (data) {
+    var _this6 = this;
+    if (!data || data.test) {
+      return;
+    }
+    // Mark that page change is in progress to prevent premature pagination updates
+    this._isPageChanging = true;
+    // CRITICAL FIX: If page changed from Document Browser (thumbnails), sync button state IMMEDIATELY
+    // This ensures the button is active when user navigates via thumbnails
+    if (data.fromDocBrowser) {
+      // Sync button state right away (before any other operations)
+      this.syncDocBrowserButtonState();
+      // Force recreate pagination group to ensure display updates
+      var toolbar = this.viewer.toolbar;
+      if (toolbar) {
+        var pagGroup = toolbar.getControl('custom-pagination-group');
+        if (pagGroup) {
+          toolbar.removeControl(pagGroup);
+          this.paginationManager.setPaginationGroup(null);
+        }
       }
-      panBtn.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
-    };
-    this.subToolbar.addControl(panBtn);
-    var docBrowserBtn = new Autodesk.Viewing.UI.Button('custom-doc-browser-btn');
-    docBrowserBtn.setIcon('adsk-icon-documentModels');
-    docBrowserBtn.setToolTip('Document Browser');
-    var self = this;
-    docBrowserBtn.onClick = function () {
-      var ext = viewer.getExtension('Autodesk.DocumentBrowser');
-      if (ext && ext.ui) {
-        ext.ui.togglePanel();
-        // Update flag based on new state
+    }
+    // Refresh toolbar to ensure both tool and pagination groups are restored
+    this.refreshToolbar();
+    // Restore Document Browser panel if needed
+    if (data.shouldRestoreDocBrowser) {
+      this.docBrowserManager.restoreState();
+      // Force sync button state multiple times after restore
+      var syncDelays = data.fromDocBrowser ? [10, 30, 50, 80, 100, 150, 200, 250, 300] : [50, 100, 150, 200, 250, 300];
+      syncDelays.forEach(function (delay) {
         setTimeout(function () {
-          self.docBrowserShouldBeOpen = ext.ui.panel && ext.ui.panel.isVisible();
-        }, 50);
+          _this6.syncDocBrowserButtonState();
+        }, delay);
+      });
+    }
+    // Sync Document Browser button state and update pagination display at multiple intervals
+    var syncIntervals = data.fromDocBrowser ? [10, 30, 50, 80, 100, 150, 200, 250, 300] : [50, 100, 150, 200, 250, 300];
+    syncIntervals.forEach(function (delay, index) {
+      setTimeout(function () {
+        _this6.syncDocBrowserButtonState();
+        _this6.paginationManager.updatePaginationState();
+        if (index === 0) {
+          _this6._isPageChanging = false;
+        }
+      }, delay);
+    });
+    // Additional pagination updates at various intervals to handle race conditions
+    var updateIntervals = data.fromDocBrowser ? [60, 100, 120, 150, 180, 200, 250, 300, 350, 400, 500] : [100, 150, 200, 300];
+    updateIntervals.forEach(function (delay) {
+      setTimeout(function () {
+        _this6.paginationManager.updatePaginationState();
+      }, delay);
+    });
+  };
+  /**
+   * Called when viewables are set (from FileLoader)
+   * Sets viewables to pagination manager and auto-opens Document Browser
+   */
+  ToolbarExtension.prototype.onViewablesSet = function (data) {
+    if (data && data.viewables) {
+      // CRITICAL: Save viewables to GLOBAL_STATE for persistence across unload/reload
+      GLOBAL_STATE.viewables = data.viewables;
+      // Check if toolbar is ready
+      if (this._toolbarReady) {
+        // Toolbar ready - set viewables immediately
+        this.paginationManager.setViewables(data.viewables);
+        // Auto-open Document Browser if multi-page
+        if (data.viewables.length > 1) {
+          GLOBAL_STATE.docBrowserShouldBeOpen = true;
+          this.docBrowserManager.autoOpenIfMultiPage(true);
+        }
+      } else {
+        // Toolbar not ready yet - store viewables for later
+        this._pendingViewables = data.viewables;
       }
-    };
-    this.subToolbar.addControl(docBrowserBtn);
-    var downloadBtn = new Autodesk.Viewing.UI.Button('custom-download-btn');
-    downloadBtn.setIcon('adsk-icon-custom-download');
-    downloadBtn.setToolTip('Download File');
-    downloadBtn.onClick = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var fileUrl, response, blob, urlPath, filename, blobUrl, anchor, _t2;
-      return _regenerator().w(function (_context2) {
-        while (1) switch (_context2.p = _context2.n) {
-          case 0:
-            if (!(_this4.options && _this4.options.filePath)) {
-              _context2.n = 7;
-              break;
-            }
-            _context2.p = 1;
-            fileUrl = _this4.options.filePath;
-            _context2.n = 2;
-            return fetch(fileUrl);
-          case 2:
-            response = _context2.v;
-            if (response.ok) {
-              _context2.n = 3;
-              break;
-            }
-            throw new Error("HTTP error! status: ".concat(response.status));
-          case 3:
-            _context2.n = 4;
-            return response.blob();
-          case 4:
-            blob = _context2.v;
-            urlPath = new URL(fileUrl).pathname;
-            filename = decodeURIComponent(urlPath.split('/').pop()) || 'document.pdf';
-            blobUrl = URL.createObjectURL(blob);
-            anchor = document.createElement('a');
-            anchor.href = blobUrl;
-            anchor.download = filename;
-            anchor.style.display = 'none';
-            document.body.appendChild(anchor);
-            anchor.click();
-            document.body.removeChild(anchor);
-            URL.revokeObjectURL(blobUrl);
-            _context2.n = 6;
-            break;
-          case 5:
-            _context2.p = 5;
-            _t2 = _context2.v;
-            console.error('Download error:', _t2);
-            alert('Unable to download file: ' + _t2.message);
-          case 6:
-            _context2.n = 8;
-            break;
-          case 7:
-            console.warn('FilePath not available in extension options');
-            alert('File path not available for download');
-          case 8:
-            return _context2.a(2);
-        }
-      }, _callee2, null, [[1, 5]]);
-    }));
-    this.subToolbar.addControl(downloadBtn);
+    }
   };
-  ToolbarExtension.prototype.createPaginationGroup = function (toolbar) {
-    var _this5 = this;
-    this.paginationGroup = new Autodesk.Viewing.UI.ControlGroup('custom-pagination-group');
-    toolbar.addControl(this.paginationGroup);
-    var prevBtn = new Autodesk.Viewing.UI.Button('prev-page-btn');
-    prevBtn.setIcon('adsk-icon-custom-prev');
-    prevBtn.addClass('custom-prev-btn');
-    prevBtn.setToolTip('Previous Page');
-    prevBtn.onClick = function () {
-      if (_this5.viewables.length > 0) {
-        _this5.currentIndex = (_this5.currentIndex - 1 + _this5.viewables.length) % _this5.viewables.length;
-        _this5.loadCurrentViewable();
+  /**
+   * Start toolbar healing mechanism
+   * Polls every 8ms to check if toolbar needs recreation
+   */
+  ToolbarExtension.prototype.startToolbarHealing = function () {
+    var _this7 = this;
+    if (this._toolbarInterval) {
+      clearInterval(this._toolbarInterval);
+    }
+    // Store last known Document Browser state to detect changes
+    this._lastDocBrowserState = null;
+    this._healingCounter = 0;
+    this._toolbarInterval = setInterval(function () {
+      if (_this7.viewer && _this7.viewer.toolbar) {
+        _this7._healingCounter++;
+        var toolbar = _this7.viewer.toolbar;
+        var toolGroup = toolbar.getControl('custom-tool-group');
+        var pagGroup = toolbar.getControl('custom-pagination-group');
+        // Refresh toolbar if either group is missing
+        if (!toolGroup || !pagGroup) {
+          _this7.refreshToolbar();
+        }
+        // Check if Document Browser panel state changed
+        var currentDocBrowserState = _this7.docBrowserManager.isOpen();
+        if (_this7._lastDocBrowserState !== null && _this7._lastDocBrowserState !== currentDocBrowserState) {
+          // Update shouldRemainOpen flag based on current state
+          if (currentDocBrowserState) {
+            _this7.docBrowserManager.setShouldRemainOpen(true);
+          }
+          // Sync button state immediately when state changes
+          _this7.syncDocBrowserButtonState();
+        }
+        _this7._lastDocBrowserState = currentDocBrowserState;
+        // CRITICAL: Sync button state periodically (every ~50ms = every 6 healing cycles)
+        // This catches thumbnail navigation where panel stays open but button might lose active state
+        if (_this7._healingCounter % 6 === 0) {
+          _this7.syncDocBrowserButtonState();
+        }
+        // ADDITIONAL: If panel is currently open, ensure button is always active
+        // This is the ultimate fallback to handle thumbnail navigation
+        if (currentDocBrowserState && _this7._healingCounter % 3 === 0) {
+          // Check button state and force sync if needed (every ~24ms = every 3 healing cycles)
+          var _toolGroup = toolbar.getControl('custom-tool-group');
+          if (_toolGroup) {
+            var docBtn = _toolGroup.getControl('custom-doc-browser-btn');
+            if (docBtn) {
+              var currentBtnState = docBtn.getState();
+              var ACTIVE_STATE = _this7.Autodesk.Viewing.UI.Button.State.ACTIVE;
+              // If panel is open but button is not active, force sync
+              if (currentBtnState !== ACTIVE_STATE) {
+                _this7.syncDocBrowserButtonState();
+              }
+            }
+          }
+        }
       }
-    };
-    this.paginationGroup.addControl(prevBtn);
-    var labelBtn = new Autodesk.Viewing.UI.Button('total-page-label');
-    labelBtn.setToolTip('Page info');
-    this.paginationGroup.addControl(labelBtn);
-    var nextBtn = new Autodesk.Viewing.UI.Button('next-page-btn');
-    nextBtn.setIcon('adsk-icon-custom-next');
-    nextBtn.addClass('custom-next-btn');
-    nextBtn.setToolTip('Next Page');
-    nextBtn.onClick = function () {
-      if (_this5.viewables.length > 0) {
-        _this5.currentIndex = (_this5.currentIndex + 1) % _this5.viewables.length;
-        _this5.loadCurrentViewable();
+    }, TOOLBAR_REFRESH_INTERVALS.HEALING_POLL);
+  };
+  /**
+   * Start button state synchronization
+   * Polls to keep custom button states in sync with actual states
+   */
+  ToolbarExtension.prototype.startButtonStateSync = function () {
+    var _this8 = this;
+    if (this._buttonStateInterval) {
+      clearInterval(this._buttonStateInterval);
+    }
+    this._buttonStateInterval = setInterval(function () {
+      _this8.syncDocBrowserButtonState();
+    }, TOOLBAR_REFRESH_INTERVALS.BUTTON_STATE_CHECK);
+  };
+  /**
+   * Set Document Browser button active state
+   */
+  ToolbarExtension.prototype.setDocBrowserButtonActive = function (isActive) {
+    var toolbar = this.viewer.toolbar;
+    if (!toolbar) return;
+    var toolGroup = toolbar.getControl('custom-tool-group');
+    if (!toolGroup) return;
+    var docBtn = toolGroup.getControl(CUSTOM_TOOLBAR_BUTTONS.DOC_BROWSER.id);
+    if (!docBtn) return;
+    var newState = isActive ? Autodesk.Viewing.UI.Button.State.ACTIVE : Autodesk.Viewing.UI.Button.State.INACTIVE;
+    docBtn.setState(newState);
+  };
+  /**
+   * Sync Document Browser button state with panel visibility
+   */
+  ToolbarExtension.prototype.syncDocBrowserButtonState = function () {
+    var toolbar = this.viewer.toolbar;
+    if (!toolbar) return;
+    var toolGroup = toolbar.getControl('custom-tool-group');
+    if (!toolGroup) return;
+    var docBtn = toolGroup.getControl(CUSTOM_TOOLBAR_BUTTONS.DOC_BROWSER.id);
+    if (!docBtn) return;
+    var isOpen = this.docBrowserManager.isOpen();
+    var ACTIVE_STATE = Autodesk.Viewing.UI.Button.State.ACTIVE;
+    var INACTIVE_STATE = Autodesk.Viewing.UI.Button.State.INACTIVE;
+    var expectedState = isOpen ? ACTIVE_STATE : INACTIVE_STATE;
+    // Set button state via API
+    docBtn.setState(expectedState);
+    // Also update DOM class directly to ensure visual state
+    var btnElement = docBtn.container;
+    if (btnElement) {
+      if (isOpen) {
+        btnElement.classList.add('active');
+        btnElement.classList.remove('inactive');
+      } else {
+        btnElement.classList.remove('active');
+        btnElement.classList.add('inactive');
       }
-    };
-    this.paginationGroup.addControl(nextBtn);
+    }
+  };
+  /**
+   * Handle Pan button click
+   */
+  ToolbarExtension.prototype.handlePanClick = function () {
+    this.toolbarManager.activatePanButton();
   };
+  /**
+   * Handle Document Browser button click
+   */
+  ToolbarExtension.prototype.handleDocBrowserClick = function () {
+    var _this9 = this;
+    this.docBrowserManager.togglePanel();
+    // Sync button state with new panel state at multiple intervals
+    [50, 100, 150, 200].forEach(function (delay) {
+      setTimeout(function () {
+        _this9.syncDocBrowserButtonState();
+      }, delay);
+    });
+  };
+  /**
+   * Handle Download button click
+   */
+  ToolbarExtension.prototype.handleDownloadClick = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          _context.p = 0;
+          _context.n = 1;
+          return this.downloadService.downloadFile(this.options.filePath);
+        case 1:
+          _context.n = 3;
+          break;
+        case 2:
+          _context.p = 2;
+          _t = _context.v;
+          console.error('Download failed:', _t);
+        case 3:
+          return _context.a(2);
+      }
+    }, _callee, this, [[0, 2]]);
+  }));
+  // Register extension
   Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);
 }
 
@@ -814,156 +1897,110 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = "#navTools,\n#modelTools,\n#settingsTools,\n#measureTools {\n  display: none !important;\n  visibility: hidden !important;\n}\n#guiviewer3d-toolbar {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  gap: 20px;\n  position: fixed !important;\n  bottom: 10px !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  width: auto !important;\n  border-radius: 4px !important;\n  padding: 8px 12px !important;\n}\n#custom-tool-group {\n  display: flex !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n#custom-pagination-group {\n  display: flex;\n  position: relative !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  left: auto !important;\n}\n\n/* Document Browser Panel Styling */\n.docking-panel.document-browser-panel,\n.adsk-viewing-viewer .docking-panel.document-browser-panel {\n  min-height: 400px !important;\n  height: 80% !important;\n  max-height: 80vh !important;\n}\n\n/* Ensure thumbnail container has proper height */\n.docking-panel.document-browser-panel .docking-panel-container-solid-color-a,\n.document-browser-panel .treeview,\n.document-browser-panel .thumbnails-container {\n  height: calc(100% - 50px) !important;\n  min-height: 350px !important;\n  overflow-y: auto !important;\n}\n\n/* Thumbnail cards styling */\n.document-browser-panel .thumbnail-item,\n.document-browser-panel .thumbnail {\n  display: flex !important;\n  visibility: visible !important;\n}\n\n/* Ensure thumbnail images are visible */\n.document-browser-panel .thumbnail img,\n.document-browser-panel .thumbnail-item img {\n  display: block !important;\n  visibility: visible !important;\n  max-width: 100% !important;\n  height: auto !important;\n}\n";
+var css_248z$1 = "#navTools,\n#modelTools,\n#settingsTools,\n#measureTools {\n  display: none !important;\n  visibility: hidden !important;\n}\n#guiviewer3d-toolbar {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  gap: 20px;\n  position: fixed !important;\n  bottom: 10px !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  width: auto !important;\n  border-radius: 4px !important;\n  padding: 8px 12px !important;\n}\n#custom-tool-group {\n  display: flex !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n#custom-pagination-group {\n  display: flex;\n  position: relative !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  left: auto !important;\n}\n";
 styleInject(css_248z$1);
 
-var css_248z = "/* Custom icon styles for toolbar using SVG */\n\n/* Download icon - custom SVG */\n.adsk-icon-custom-download::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\\\n<path fill=\"%23FFFFFF\" d=\"M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1m-1 4v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 11.293V7.5a.5.5 0 0 1 1 0\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n\n/* Previous page icon - Font Awesome chevron left */\n.adsk-icon-custom-prev::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\\\n<path fill=\"%23FFFFFF\" d=\"M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n\n/* Next page icon - Font Awesome chevron right */\n.adsk-icon-custom-next::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\\\n<path fill=\"%23FFFFFF\" d=\"M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n\n/* Fallback for adsk-icon-caret-left and adsk-icon-caret-right if not defined */\n.adsk-icon-caret-left::before {\n  content: '[';\n  font-family: 'adsk-viewing';\n}\n\n.adsk-icon-caret-right::before {\n  content: ']';\n  font-family: 'adsk-viewing';\n}\n\n/* Comment icon - custom SVG (Smiley) */\n.adsk-icon-custom-comment::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"></line><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"></line></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n\n/* Save icon - custom SVG */\n.adsk-icon-custom-save::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path><polyline points=\"17 21 17 13 7 13 7 21\"></polyline><polyline points=\"7 3 7 8 15 8\"></polyline></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n";
+var css_248z = "/* Custom icon styles for toolbar using SVG */\n/* Download icon - custom SVG (white, thicker stroke) */\n.adsk-icon-custom-download::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\\\n    <path d=\"M4.75 17.25a.75.75 0 0 1 .75.75v2.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V18a.75.75 0 0 1 1.5 0v2.25A1.75 1.75 0 0 1 18.25 22H5.75A1.75 1.75 0 0 1 4 20.25V18a.75.75 0 0 1 .75-.75Z\"/>\\\n    <path d=\"M5.22 9.97a.749.749 0 0 1 1.06 0l4.97 4.969V2.75a.75.75 0 0 1 1.5 0v12.189l4.97-4.969a.749.749 0 1 1 1.06 1.06l-6.25 6.25a.749.749 0 0 1-1.06 0l-6.25-6.25a.749.749 0 0 1 0-1.06Z\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Previous page icon - custom SVG (white, filled) */\n.adsk-icon-custom-prev::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\\\n<g transform=\"translate(512 512) scale(1.2) translate(-512 -512)\">\\\n<path fill=\"%23FFFFFF\" d=\"M685.248 104.704a64 64 0 010 90.496L368.448 512l316.8 316.8a64 64 0 01-90.496 90.496L232.704 557.248a64 64 0 010-90.496l362.048-362.048a64 64 0 0190.496 0z\"/>\\\n</g>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Next page icon - custom SVG (white, filled) */\n.adsk-icon-custom-next::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\\\n<g transform=\"translate(512 512) scale(1.2) translate(-512 -512)\">\\\n<path fill=\"%23FFFFFF\" d=\"M338.752 104.704a64 64 0 000 90.496l316.8 316.8-316.8 316.8a64 64 0 0090.496 90.496l362.048-362.048a64 64 0 000-90.496L429.248 104.704a64 64 0 00-90.496 0z\"/>\\\n</g>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Fallback for adsk-icon-caret-left and adsk-icon-caret-right if not defined */\n.adsk-icon-caret-left::before {\n  content: '[';\n  font-family: 'adsk-viewing';\n}\n.adsk-icon-caret-right::before {\n  content: ']';\n  font-family: 'adsk-viewing';\n}\n/* Comment icon - custom SVG (Smiley) */\n.adsk-icon-custom-comment::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"></line><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"></line></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n/* Save icon - custom SVG */\n.adsk-icon-custom-save::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path><polyline points=\"17 21 17 13 7 13 7 21\"></polyline><polyline points=\"7 3 7 8 15 8\"></polyline></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n";
 styleInject(css_248z);
 
 var ViewerForgePDF = function ViewerForgePDF(_ref) {
   var filePath = _ref.filePath,
     fileExt = _ref.fileExt,
     setViewer = _ref.setViewer;
-  useCss('https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css');
-  var status = useScript('https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js');
+  // Load Forge Viewer CSS and JS from CDN
+  useCss(FORGE_STYLE_URL);
+  var status = useScript(FORGE_SCRIPT_URL);
   react.useEffect(function () {
-    if (status === 'ready' && window.Autodesk) {
-      var Autodesk = window.Autodesk;
-      if (!fileExt) {
-        antd.message.warning('You need to provide file extension');
-        return;
-      }
-      var validExts = ['pdf', 'dwf', 'dwfx'];
-      if (!validExts.includes(fileExt.toLowerCase())) {
-        antd.message.warning('Only support pdf, dwf, dwfx format');
-        return;
-      }
-      Autodesk.Viewing.Initializer({
-        env: 'Local'
-      }, /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var viewerDiv, viewer, isDWF, handleLoadSuccess, xhr;
-        return _regenerator().w(function (_context) {
-          while (1) switch (_context.n) {
+    if (status !== 'ready' || !window.Autodesk || !filePath || !fileExt) return;
+    var initializeViewer = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var Autodesk;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
             case 0:
-              registerToolbarExtension(Autodesk);
-              viewerDiv = document.getElementById('forgeViewerPDF');
-              viewerDiv.innerHTML = '';
-              viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);
-              viewer.start();
-              viewer.loadExtension('Autodesk.DocumentBrowser');
-              viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
-              viewer.loadExtension('Autodesk.Viewing.MarkupsGui');
-              viewer.loadExtension('ToolbarExtension', {
-                filePath: filePath
-              });
-              viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (e) {
-                e.target.loadExtension('Autodesk.Viewing.MarkupsCore');
-                e.target.loadExtension('Autodesk.Viewing.MarkupsGui');
-              });
-              isDWF = fileExt.toLowerCase() === 'pdf' ? 'Autodesk.PDF' : 'Autodesk.DWF';
-              _context.n = 1;
-              return viewer.loadExtension(isDWF);
+              _context2.p = 0;
+              Autodesk = window.Autodesk; // Validate file extension
+              if (SUPPORTED_FILE_EXTENSIONS.includes(fileExt.toLowerCase())) {
+                _context2.n = 1;
+                break;
+              }
+              antd.message.warning('Only support pdf, dwf, dwfx format');
+              return _context2.a(2);
             case 1:
-              handleLoadSuccess = function handleLoadSuccess(e) {
-                try {
-                  viewer.setReverseZoomDirection(true);
-                  var root = e.getDocumentNode().getRootNode();
-                  var view3d = root.search({
-                    type: 'geometry',
-                    role: '3d',
-                    progress: 'complete'
-                  }, true);
-                  var view2d = root.search({
-                    type: 'geometry',
-                    role: '2d',
-                    progress: 'complete'
-                  }, true);
-                  var viewables = view3d.concat(view2d);
-                  var toolbarExt = viewer.getExtension('ToolbarExtension');
-                  if (toolbarExt && typeof toolbarExt.setViewables === 'function') {
-                    toolbarExt.setViewables(viewables);
-                  }
-                  if (viewer.toolbar) {
-                    viewer.toolbar.setVisible(true);
-                  }
-                  if (viewables.length > 1) {
-                    // Auto-open Document Browser by clicking the original button
-                    setTimeout(function () {
-                      var originalDocBtn = document.getElementById('toolbar-documentModels');
-                      if (originalDocBtn && !originalDocBtn.classList.contains('active')) {
-                        originalDocBtn.click();
-                      }
-
-                      // Apply custom styling to the panel
-                      var documentBrowser = viewer.getExtension('Autodesk.DocumentBrowser');
-                      if (documentBrowser && documentBrowser.ui && documentBrowser.ui.panel) {
-                        documentBrowser.ui.panel.container.style.top = '0';
-                        documentBrowser.ui.panel.container.style.left = 'unset';
-                        documentBrowser.ui.panel.container.style.right = '0px';
-                        documentBrowser.ui.panel.container.style.width = '200px';
-                        documentBrowser.ui.panel.container.style.height = '80%';
-                        documentBrowser.ui.panel.container.style.minHeight = '400px';
+              // Initialize Forge Viewer
+              Autodesk.Viewing.Initializer({
+                env: 'Local'
+              }, /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+                var viewerDiv, viewer, fileLoader;
+                return _regenerator().w(function (_context) {
+                  while (1) switch (_context.n) {
+                    case 0:
+                      // Register custom toolbar extension
+                      registerToolbarExtension(Autodesk);
+                      // Create viewer instance
+                      viewerDiv = document.getElementById('forgeViewerPDF');
+                      if (viewerDiv) {
+                        _context.n = 1;
+                        break;
                       }
-
-                      // Switch to Thumbnail tab after a short delay
-                      setTimeout(function () {
-                        // Try multiple selectors to find the thumbnail tab button
-                        var thumbnailTab = document.querySelector('.docking-panel-thumbnail-view') || document.querySelector('[data-i18n="Thumbnails"]') || Array.from(document.querySelectorAll('.adsk-control-group .adsk-button')).find(function (btn) {
-                          return btn.textContent.includes('Thumbnails') || btn.title.includes('Thumbnails');
-                        });
-                        if (thumbnailTab && !thumbnailTab.classList.contains('active')) {
-                          thumbnailTab.click();
+                      return _context.a(2);
+                    case 1:
+                      viewerDiv.innerHTML = '';
+                      viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);
+                      viewer.start();
+                      // Load required extensions
+                      _context.n = 2;
+                      return viewer.loadExtension('Autodesk.DocumentBrowser');
+                    case 2:
+                      _context.n = 3;
+                      return viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
+                    case 3:
+                      _context.n = 4;
+                      return viewer.loadExtension('Autodesk.Viewing.MarkupsGui');
+                    case 4:
+                      _context.n = 5;
+                      return viewer.loadExtension('ToolbarExtension', {
+                        filePath: filePath
+                      });
+                    case 5:
+                      // Initialize FileLoader service
+                      fileLoader = new FileLoader(viewer); // Note: ToolbarExtension now subscribes to VIEWABLES_SET directly
+                      // No need to forward events here - prevents infinite recursion
+                      // Load the document using FileLoader service
+                      _context.n = 6;
+                      return fileLoader.loadFile(filePath, fileExt.toLowerCase(), {
+                        onSuccess: function onSuccess() {
+                          // Pass viewer instance to parent component
+                          if (setViewer) {
+                            setViewer(viewer);
+                          }
+                        },
+                        onError: function onError(error) {
+                          antd.message.error('Failed to load document');
                         }
-                      }, 200);
-                    }, 500);
-                  }
-
-                  // Ensure Custom Pan tool is active by default
-                  setTimeout(function () {
-                    var customPanBtn = document.getElementById('custom-pan-btn');
-                    if (customPanBtn) {
-                      customPanBtn.click();
-                      // Double check visual state
-                      if (!customPanBtn.classList.contains('active')) {
-                        customPanBtn.classList.add('active');
-                        customPanBtn.classList.remove('inactive');
-                      }
-                    } else {
-                      var _viewer$toolbar;
-                      // Fallback if custom button not found immediately, try accessing via viewer toolbar
-                      var toolGroup = (_viewer$toolbar = viewer.toolbar) === null || _viewer$toolbar === void 0 ? void 0 : _viewer$toolbar.getControl('custom-tool-group');
-                      var panBtnConf = toolGroup === null || toolGroup === void 0 ? void 0 : toolGroup.getControl('custom-pan-btn');
-                      if (panBtnConf) {
-                        panBtnConf.setState(1); // ACTIVE
-                      }
-                    }
-                  }, 600);
-                  if (setViewer) setViewer(viewer);
-                } catch (err) {
-                  console.error('Error in handleLoadSuccess:', err);
-                }
-              };
-              if (isDWF === 'Autodesk.DWF') {
-                xhr = new XMLHttpRequest();
-                xhr.open('GET', filePath, true);
-                xhr.responseType = 'blob';
-                xhr.onload = function () {
-                  if (this.status === 200) {
-                    var myBlob = this.response;
-                    var url1 = window.URL.createObjectURL(myBlob);
-                    viewer.loadModel(url1 + '#.dwf', {}, handleLoadSuccess);
+                      });
+                    case 6:
+                      return _context.a(2);
                   }
-                };
-                xhr.send();
-              } else {
-                viewer.loadModel(filePath, {}, handleLoadSuccess);
-              }
+                }, _callee);
+              })));
+              _context2.n = 3;
+              break;
             case 2:
-              return _context.a(2);
+              _context2.p = 2;
+              _context2.v;
+              antd.message.error('Failed to initialize viewer');
+            case 3:
+              return _context2.a(2);
           }
-        }, _callee);
-      })));
-    }
+        }, _callee2, null, [[0, 2]]);
+      }));
+      return function initializeViewer() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initializeViewer();
+    // No cleanup needed - ToolbarExtension handles its own subscriptions
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status, filePath, fileExt]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {