triiiceratops 0.8.1 → 0.9.0

package/dist/state/viewer.svelte.js

@@ -0,0 +1,693 @@
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { manifestsState } from './manifests.svelte.js';
+var ViewerState = /** @class */ (function () {
+    function ViewerState(initialManifestId, initialCanvasId, initialPlugins) {
+        if (initialManifestId === void 0) { initialManifestId = null; }
+        if (initialCanvasId === void 0) { initialCanvasId = null; }
+        if (initialPlugins === void 0) { initialPlugins = []; }
+        this.manifestId = $state(null);
+        this.canvasId = $state(null);
+        this.showAnnotations = $state(false);
+        this.showThumbnailGallery = $state(false);
+        this.isGalleryDockedBottom = $state(false);
+        this.isGalleryDockedRight = $state(false);
+        this.isFullScreen = $state(false);
+        this.showMetadataDialog = $state(false);
+        this.dockSide = $state('bottom');
+        this.visibleAnnotationIds = $state(new Set());
+        // UI Configuration
+        this.config = $state({});
+        // Gallery State (Lifted for persistence during re-docking)
+        this.galleryPosition = $state({ x: 20, y: 100 });
+        this.gallerySize = $state({ width: 300, height: 400 });
+        this.isGalleryDragging = $state(false);
+        this.galleryDragOffset = $state({ x: 0, y: 0 });
+        this.dragOverSide = $state(null);
+        this.galleryCenterPanelRect = $state(null);
+        // ==================== EVENT DISPATCH (Web Component Only) ====================
+        /**
+         * Event target for dispatching CustomEvents.
+         * Only set by TriiiceratopsViewerElement (web component build).
+         * Remains null for Svelte component usage → no events dispatched.
+         */
+        this.eventTarget = null;
+        this.searchQuery = $state('');
+        this.searchResults = $state([]);
+        this.isSearching = $state(false);
+        this.showSearchPanel = $state(false);
+        this.searchAnnotations = $state([]);
+        // ==================== PLUGIN STATE ====================
+        /** Registered plugins */
+        this.plugins = $state([]);
+        /** Plugin-registered menu buttons */
+        this.pluginMenuButtons = $state([]);
+        /** Plugin-registered panels */
+        this.pluginPanels = $state([]);
+        /** OpenSeadragon viewer instance (set by OSDViewer) */
+        this.osdViewer = $state(null);
+        /** Event handlers for inter-plugin communication */
+        this.pluginEventHandlers = new Map();
+        this.manifestId = initialManifestId || null;
+        this.canvasId = initialCanvasId || null;
+        // Fetch manifest immediately
+        if (this.manifestId) {
+            manifestsState.fetchManifest(this.manifestId);
+        }
+        // Register initial plugins
+        for (var _i = 0, initialPlugins_1 = initialPlugins; _i < initialPlugins_1.length; _i++) {
+            var initialPlugin = initialPlugins_1[_i];
+            this.registerPlugin(initialPlugin);
+        }
+    }
+    Object.defineProperty(ViewerState.prototype, "showRightMenu", {
+        // Derived configuration specific getters
+        get: function () {
+            var _a;
+            return (_a = this.config.showRightMenu) !== null && _a !== void 0 ? _a : true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewerState.prototype, "showLeftMenu", {
+        get: function () {
+            var _a;
+            return (_a = this.config.showLeftMenu) !== null && _a !== void 0 ? _a : true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewerState.prototype, "showCanvasNav", {
+        get: function () {
+            var _a;
+            return (_a = this.config.showCanvasNav) !== null && _a !== void 0 ? _a : true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Set the event target for dispatching state change events.
+     * Called by TriiiceratopsViewerElement to enable event-driven API.
+     */
+    ViewerState.prototype.setEventTarget = function (target) {
+        this.eventTarget = target;
+    };
+    /**
+     * Get current state as a plain object snapshot.
+     * Safe to use outside Svelte's reactive system.
+     * NOTE: We calculate currentCanvasIndex inline to avoid triggering the canvases getter
+     * which can cause infinite loops when it auto-sets canvasId.
+     */
+    ViewerState.prototype.getSnapshot = function () {
+        var _this = this;
+        // Calculate canvas index without triggering reactive side effects
+        var canvasIndex = -1;
+        if (this.manifestId && this.canvasId) {
+            var canvases = manifestsState.getCanvases(this.manifestId);
+            canvasIndex = canvases.findIndex(function (c) { return c.id === _this.canvasId; });
+        }
+        return {
+            manifestId: this.manifestId,
+            canvasId: this.canvasId,
+            currentCanvasIndex: canvasIndex,
+            showAnnotations: this.showAnnotations,
+            showThumbnailGallery: this.showThumbnailGallery,
+            showSearchPanel: this.showSearchPanel,
+            searchQuery: this.searchQuery,
+            isFullScreen: this.isFullScreen,
+            dockSide: this.dockSide,
+        };
+    };
+    /**
+     * Dispatch a state change event to the web component.
+     * No-op if eventTarget is null (Svelte component usage).
+     *
+     * Uses queueMicrotask to dispatch asynchronously AFTER the current
+     * reactive cycle completes, preventing infinite update loops.
+     */
+    ViewerState.prototype.dispatchStateChange = function (eventName) {
+        var _this = this;
+        if (eventName === void 0) { eventName = 'statechange'; }
+        console.log("[ViewerState] Dispatching ".concat(eventName), JSON.stringify(this.getSnapshot()));
+        if (!this.eventTarget)
+            return;
+        // Dispatch asynchronously to break reactive loops
+        queueMicrotask(function () {
+            var _a;
+            (_a = _this.eventTarget) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(eventName, {
+                detail: _this.getSnapshot(),
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    };
+    Object.defineProperty(ViewerState.prototype, "manifest", {
+        get: function () {
+            if (!this.manifestId)
+                return null;
+            return manifestsState.getManifest(this.manifestId);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewerState.prototype, "canvases", {
+        get: function () {
+            var _this = this;
+            if (!this.manifestId)
+                return [];
+            var canvases = manifestsState.getCanvases(this.manifestId);
+            // Auto-initialize canvasId to first canvas if not set
+            if (canvases.length > 0 && !this.canvasId) {
+                // Use setTimeout to avoid updating state during a derived computation
+                setTimeout(function () {
+                    if (!_this.canvasId && canvases.length > 0) {
+                        _this.canvasId = canvases[0].id;
+                    }
+                }, 0);
+            }
+            return canvases;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewerState.prototype, "currentCanvasIndex", {
+        get: function () {
+            var _this = this;
+            if (!this.canvasId) {
+                if (this.canvases.length > 0)
+                    return 0;
+                return -1;
+            }
+            // Manifesto canvases have an id property
+            return this.canvases.findIndex(function (c) { return c.id === _this.canvasId; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewerState.prototype, "hasNext", {
+        get: function () {
+            return this.currentCanvasIndex < this.canvases.length - 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewerState.prototype, "hasPrevious", {
+        get: function () {
+            return this.currentCanvasIndex > 0;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewerState.prototype.nextCanvas = function () {
+        if (this.hasNext) {
+            var nextIndex = this.currentCanvasIndex + 1;
+            var canvas = this.canvases[nextIndex];
+            this.setCanvas(canvas.id);
+        }
+    };
+    ViewerState.prototype.previousCanvas = function () {
+        if (this.hasPrevious) {
+            var prevIndex = this.currentCanvasIndex - 1;
+            var canvas = this.canvases[prevIndex];
+            this.setCanvas(canvas.id);
+        }
+    };
+    ViewerState.prototype.setManifest = function (manifestId) {
+        this.manifestId = manifestId;
+        this.canvasId = null;
+        manifestsState.fetchManifest(manifestId);
+        this.dispatchStateChange('manifestchange');
+    };
+    ViewerState.prototype.setCanvas = function (canvasId) {
+        this.canvasId = canvasId;
+        this.dispatchStateChange('canvaschange');
+    };
+    ViewerState.prototype.updateConfig = function (newConfig) {
+        var _a;
+        var oldConfig = this.config;
+        this.config = newConfig;
+        // Sync state from config
+        if (newConfig.gallery) {
+            if (newConfig.gallery.open !== undefined) {
+                this.showThumbnailGallery = newConfig.gallery.open;
+            }
+            if (newConfig.gallery.dockPosition !== undefined) {
+                this.dockSide = newConfig.gallery.dockPosition;
+            }
+        }
+        if (newConfig.search) {
+            if (newConfig.search.open !== undefined) {
+                this.showSearchPanel = newConfig.search.open;
+            }
+            // Only search if the CONFIG has changed its query requirement.
+            // This prevents stale config updates (e.g. from other property changes)
+            // from overwriting a newer internal search state.
+            var newQuery = newConfig.search.query;
+            var oldQuery = (_a = oldConfig.search) === null || _a === void 0 ? void 0 : _a.query;
+            if (newQuery !== undefined &&
+                newQuery !== oldQuery &&
+                newQuery !== this.searchQuery) {
+                this._performSearch(newQuery);
+            }
+        }
+        if (newConfig.annotations) {
+            if (newConfig.annotations.open !== undefined) {
+                this.showAnnotations = newConfig.annotations.open;
+            }
+        }
+        // NOTE: We intentionally do NOT dispatch events here.
+        // Config updates are external configuration, not user-initiated state changes.
+        // Dispatching here would cause infinite loops when the consumer re-renders.
+    };
+    ViewerState.prototype.toggleAnnotations = function () {
+        this.showAnnotations = !this.showAnnotations;
+        this.dispatchStateChange();
+    };
+    ViewerState.prototype.toggleThumbnailGallery = function () {
+        this.showThumbnailGallery = !this.showThumbnailGallery;
+        this.dispatchStateChange();
+    };
+    ViewerState.prototype.toggleFullScreen = function () {
+        if (!document.fullscreenElement) {
+            var el = document.getElementById('triiiceratops-viewer');
+            if (el) {
+                el.requestFullscreen().catch(function (e) {
+                    console.warn('Fullscreen request failed', e);
+                });
+            }
+        }
+        else {
+            document.exitFullscreen();
+        }
+    };
+    ViewerState.prototype.toggleMetadataDialog = function () {
+        this.showMetadataDialog = !this.showMetadataDialog;
+    };
+    ViewerState.prototype.toggleSearchPanel = function () {
+        this.showSearchPanel = !this.showSearchPanel;
+        if (!this.showSearchPanel) {
+            // Clear ephemeral annotations when closing search
+            this.searchAnnotations = [];
+        }
+        this.dispatchStateChange();
+    };
+    Object.defineProperty(ViewerState.prototype, "currentCanvasSearchAnnotations", {
+        get: function () {
+            var _this = this;
+            if (!this.canvasId)
+                return [];
+            return this.searchAnnotations.filter(function (a) { return a.canvasId === _this.canvasId; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewerState.prototype.search = function (query) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.dispatchStateChange();
+                        return [4 /*yield*/, this._performSearch(query)];
+                    case 1:
+                        _a.sent();
+                        this.dispatchStateChange();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ViewerState.prototype._performSearch = function (query) {
+        return __awaiter(this, void 0, void 0, function () {
+            var manifest, service, services, serviceId, searchUrl, response, data, resources, processedResults, parseSelector, _i, _a, hit, annotations, hitBoundsByCanvas, _loop_1, this_1, _b, annotations_1, annoId, _c, hitBoundsByCanvas_1, _d, canvasIndex, data_1, _loop_2, this_2, _e, resources_1, res, annotationIndex_1, e_1;
+            var _this = this;
+            var _f, _g;
+            return __generator(this, function (_h) {
+                switch (_h.label) {
+                    case 0:
+                        if (!query.trim())
+                            return [2 /*return*/];
+                        this.isSearching = true;
+                        this.searchQuery = query;
+                        this.searchResults = [];
+                        _h.label = 1;
+                    case 1:
+                        _h.trys.push([1, 4, 5, 6]);
+                        manifest = this.manifest;
+                        if (!manifest)
+                            throw new Error('No manifest loaded');
+                        service = manifest.getService('http://iiif.io/api/search/1/search') ||
+                            manifest.getService('http://iiif.io/api/search/0/search');
+                        if (!service) {
+                            // Fallback: check json directly if manifesto fails me
+                            if (manifest.__jsonld && manifest.__jsonld.service) {
+                                services = Array.isArray(manifest.__jsonld.service)
+                                    ? manifest.__jsonld.service
+                                    : [manifest.__jsonld.service];
+                                service = services.find(function (s) {
+                                    return s.profile ===
+                                        'http://iiif.io/api/search/1/search' ||
+                                        s.profile === 'http://iiif.io/api/search/0/search';
+                                });
+                            }
+                        }
+                        if (!service) {
+                            console.warn('No IIIF search service found in manifest');
+                            this.isSearching = false;
+                            return [2 /*return*/];
+                        }
+                        serviceId = service.id || service['@id'];
+                        searchUrl = "".concat(serviceId, "?q=").concat(encodeURIComponent(query));
+                        return [4 /*yield*/, fetch(searchUrl)];
+                    case 2:
+                        response = _h.sent();
+                        if (!response.ok)
+                            throw new Error('Search request failed');
+                        return [4 /*yield*/, response.json()];
+                    case 3:
+                        data = _h.sent();
+                        resources = data.resources || [];
+                        processedResults = [];
+                        parseSelector = function (onVal) {
+                            var val = typeof onVal === 'string'
+                                ? onVal
+                                : onVal['@id'] || onVal.id;
+                            if (!val)
+                                return null;
+                            var parts = val.split('#xywh=');
+                            if (parts.length < 2)
+                                return null;
+                            var coords = parts[1].split(',').map(Number);
+                            if (coords.length === 4)
+                                return coords; // [x, y, w, h]
+                            return null;
+                        };
+                        if (data.hits) {
+                            for (_i = 0, _a = data.hits; _i < _a.length; _i++) {
+                                hit = _a[_i];
+                                annotations = hit.annotations || [];
+                                hitBoundsByCanvas = new Map();
+                                _loop_1 = function (annoId) {
+                                    var annotation = resources.find(function (r) { return r['@id'] === annoId || r.id === annoId; });
+                                    if (annotation && annotation.on) {
+                                        // annotation.on can be "canvas-id" or "canvas-id#xywh=..."
+                                        var onVal = typeof annotation.on === 'string'
+                                            ? annotation.on
+                                            : annotation.on['@id'] || annotation.on.id;
+                                        var cleanOn_1 = onVal.split('#')[0];
+                                        var bounds = parseSelector(onVal);
+                                        var canvasIndex = this_1.canvases.findIndex(function (c) { return c.id === cleanOn_1; });
+                                        if (canvasIndex >= 0) {
+                                            if (!hitBoundsByCanvas.has(canvasIndex)) {
+                                                var canvas = this_1.canvases[canvasIndex];
+                                                // Try to get a label
+                                                var label = 'Canvas ' + (canvasIndex + 1);
+                                                try {
+                                                    if (canvas.getLabel) {
+                                                        var l = canvas.getLabel();
+                                                        if (Array.isArray(l) &&
+                                                            l.length > 0)
+                                                            label = l[0].value;
+                                                        else if (typeof l === 'string')
+                                                            label = l;
+                                                    }
+                                                    else if (canvas.label) {
+                                                        // Fallback if raw object
+                                                        if (typeof canvas.label === 'string')
+                                                            label = canvas.label;
+                                                        else if (Array.isArray(canvas.label))
+                                                            label = (_f = canvas.label[0]) === null || _f === void 0 ? void 0 : _f.value;
+                                                    }
+                                                }
+                                                catch (e) {
+                                                    /* ignore */
+                                                }
+                                                hitBoundsByCanvas.set(canvasIndex, {
+                                                    label: String(label),
+                                                    bounds: [],
+                                                });
+                                            }
+                                            if (bounds) {
+                                                hitBoundsByCanvas
+                                                    .get(canvasIndex)
+                                                    .bounds.push(bounds);
+                                            }
+                                        }
+                                    }
+                                };
+                                this_1 = this;
+                                for (_b = 0, annotations_1 = annotations; _b < annotations_1.length; _b++) {
+                                    annoId = annotations_1[_b];
+                                    _loop_1(annoId);
+                                }
+                                // Create one result per canvas for this hit
+                                for (_c = 0, hitBoundsByCanvas_1 = hitBoundsByCanvas; _c < hitBoundsByCanvas_1.length; _c++) {
+                                    _d = hitBoundsByCanvas_1[_c], canvasIndex = _d[0], data_1 = _d[1];
+                                    processedResults.push({
+                                        type: 'hit',
+                                        before: hit.before,
+                                        match: hit.match,
+                                        after: hit.after,
+                                        canvasIndex: canvasIndex,
+                                        canvasLabel: data_1.label,
+                                        // Store all bounds for this hit on this canvas
+                                        allBounds: data_1.bounds,
+                                        // Keep first bounds for backwards compatibility
+                                        bounds: data_1.bounds.length > 0 ? data_1.bounds[0] : null,
+                                    });
+                                }
+                            }
+                        }
+                        else if (resources.length > 0) {
+                            _loop_2 = function (res) {
+                                var onVal = typeof res.on === 'string'
+                                    ? res.on
+                                    : res.on['@id'] || res.on.id;
+                                var cleanOn = onVal.split('#')[0];
+                                var bounds = parseSelector(onVal);
+                                var canvasIndex = this_2.canvases.findIndex(function (c) { return c.id === cleanOn; });
+                                if (canvasIndex >= 0) {
+                                    var canvas = this_2.canvases[canvasIndex];
+                                    var label = 'Canvas ' + (canvasIndex + 1);
+                                    try {
+                                        if (canvas.getLabel) {
+                                            var l = canvas.getLabel();
+                                            if (Array.isArray(l) && l.length > 0)
+                                                label = l[0].value;
+                                            else if (typeof l === 'string')
+                                                label = l;
+                                        }
+                                        else if (canvas.label) {
+                                            // Fallback if raw object
+                                            if (typeof canvas.label === 'string')
+                                                label = canvas.label;
+                                            else if (Array.isArray(canvas.label))
+                                                label = (_g = canvas.label[0]) === null || _g === void 0 ? void 0 : _g.value;
+                                        }
+                                    }
+                                    catch (e) {
+                                        /* ignore */
+                                    }
+                                    processedResults.push({
+                                        type: 'resource',
+                                        match: res.resource && res.resource.chars
+                                            ? res.resource.chars
+                                            : res.chars || '',
+                                        canvasIndex: canvasIndex,
+                                        canvasLabel: String(label),
+                                        bounds: bounds,
+                                    });
+                                }
+                            };
+                            this_2 = this;
+                            // No hits (Basic level?), just annotations
+                            for (_e = 0, resources_1 = resources; _e < resources_1.length; _e++) {
+                                res = resources_1[_e];
+                                _loop_2(res);
+                            }
+                        }
+                        this.searchResults = processedResults;
+                        annotationIndex_1 = 0;
+                        this.searchAnnotations = processedResults.flatMap(function (r) {
+                            var canvas = _this.canvases[r.canvasIndex];
+                            // Use allBounds if available, otherwise fall back to single bounds
+                            var boundsArray = r.allBounds && r.allBounds.length > 0
+                                ? r.allBounds
+                                : r.bounds
+                                    ? [r.bounds]
+                                    : [];
+                            return boundsArray.map(function (bounds) {
+                                var on = "".concat(canvas.id, "#xywh=").concat(bounds.join(','));
+                                return {
+                                    '@id': "urn:search-hit:".concat(annotationIndex_1++),
+                                    '@type': 'oa:Annotation',
+                                    motivation: 'sc:painting',
+                                    on: on,
+                                    canvasId: canvas.id,
+                                    resource: {
+                                        '@type': 'cnt:ContentAsText',
+                                        chars: r.match,
+                                    },
+                                    // Flag to identify styling in Overlay?
+                                    // Or just standard rendering.
+                                    isSearchHit: true,
+                                };
+                            });
+                        });
+                        return [3 /*break*/, 6];
+                    case 4:
+                        e_1 = _h.sent();
+                        console.error('Search error:', e_1);
+                        return [3 /*break*/, 6];
+                    case 5:
+                        this.isSearching = false;
+                        return [7 /*endfinally*/];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // ==================== PLUGIN METHODS ====================
+    /**
+     * Create plugin context - the stable API surface for plugins.
+     */
+    ViewerState.prototype.createPluginContext = function () {
+        var self = this;
+        return {
+            viewerState: self,
+            getOSDViewer: function () { return self.osdViewer; },
+            registerMenuButton: function (button) {
+                if (!self.pluginMenuButtons.find(function (b) { return b.id === button.id; })) {
+                    self.pluginMenuButtons = __spreadArray(__spreadArray([], self.pluginMenuButtons, true), [
+                        button,
+                    ], false);
+                }
+            },
+            unregisterMenuButton: function (buttonId) {
+                self.pluginMenuButtons = self.pluginMenuButtons.filter(function (b) { return b.id !== buttonId; });
+            },
+            registerPanel: function (panel) {
+                if (!self.pluginPanels.find(function (p) { return p.id === panel.id; })) {
+                    self.pluginPanels = __spreadArray(__spreadArray([], self.pluginPanels, true), [panel], false);
+                }
+            },
+            unregisterPanel: function (panelId) {
+                self.pluginPanels = self.pluginPanels.filter(function (p) { return p.id !== panelId; });
+            },
+            emit: function (eventName, data) {
+                var handlers = self.pluginEventHandlers.get(eventName);
+                handlers === null || handlers === void 0 ? void 0 : handlers.forEach(function (handler) { return handler(data); });
+            },
+            on: function (eventName, handler) {
+                if (!self.pluginEventHandlers.has(eventName)) {
+                    self.pluginEventHandlers.set(eventName, new Set());
+                }
+                self.pluginEventHandlers.get(eventName).add(handler);
+                return function () {
+                    var _a;
+                    (_a = self.pluginEventHandlers.get(eventName)) === null || _a === void 0 ? void 0 : _a.delete(handler);
+                };
+            },
+        };
+    };
+    /**
+     * Register a plugin with this viewer instance.
+     */
+    ViewerState.prototype.registerPlugin = function (plugin) {
+        if (this.plugins.find(function (p) { return p.id === plugin.id; })) {
+            console.warn("[Triiiceratops] Plugin \"".concat(plugin.id, "\" already registered"));
+            return;
+        }
+        this.plugins = __spreadArray(__spreadArray([], this.plugins, true), [plugin], false);
+        plugin.onRegister(this.createPluginContext());
+        // If OSD already ready, notify immediately
+        if (this.osdViewer && plugin.onViewerReady) {
+            plugin.onViewerReady(this.osdViewer);
+        }
+    };
+    /**
+     * Unregister a plugin by ID.
+     */
+    ViewerState.prototype.unregisterPlugin = function (pluginId) {
+        var _a;
+        var plugin = this.plugins.find(function (p) { return p.id === pluginId; });
+        if (plugin) {
+            (_a = plugin.onDestroy) === null || _a === void 0 ? void 0 : _a.call(plugin);
+            this.plugins = this.plugins.filter(function (p) { return p.id !== pluginId; });
+            // Remove plugin's UI registrations
+            this.pluginMenuButtons = this.pluginMenuButtons.filter(function (b) { return !b.id.startsWith("".concat(pluginId, ":")); });
+            this.pluginPanels = this.pluginPanels.filter(function (p) { return !p.id.startsWith("".concat(pluginId, ":")); });
+        }
+    };
+    /**
+     * Called by OSDViewer when OpenSeadragon is ready.
+     */
+    ViewerState.prototype.notifyOSDReady = function (viewer) {
+        var _a;
+        this.osdViewer = viewer;
+        for (var _i = 0, _b = this.plugins; _i < _b.length; _i++) {
+            var plugin = _b[_i];
+            (_a = plugin.onViewerReady) === null || _a === void 0 ? void 0 : _a.call(plugin, viewer);
+        }
+    };
+    /**
+     * Destroy all plugins (called on viewer unmount).
+     */
+    ViewerState.prototype.destroyAllPlugins = function () {
+        var _a;
+        for (var _i = 0, _b = this.plugins; _i < _b.length; _i++) {
+            var plugin = _b[_i];
+            (_a = plugin.onDestroy) === null || _a === void 0 ? void 0 : _a.call(plugin);
+        }
+        this.plugins = [];
+        this.pluginMenuButtons = [];
+        this.pluginPanels = [];
+        this.pluginEventHandlers.clear();
+    };
+    return ViewerState;
+}());
+export { ViewerState };
+// Context key for providing/injecting ViewerState in components
+export var VIEWER_STATE_KEY = 'triiiceratops:viewerState';