triiiceratops 0.11.1 → 0.12.0

package/dist/plugins/image-manipulation/ImageManipulationController.svelte

@@ -9,7 +9,7 @@
     import ImageManipulationPanel from './ImageManipulationPanel.svelte';
 
     // Props from the plugin system
-    let { isOpen = false, close } = $props();
+    let { isOpen: _isOpen = false, close } = $props();
 
     const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
     let filters = $state<ImageFilters>({ ...DEFAULT_FILTERS });

package/dist/plugins/image-manipulation.js

@@ -1,9 +1,9 @@
 import "svelte/internal/disclose-version";
 import * as e from "svelte/internal/client";
 import { getContext as s0 } from "svelte";
-import { l as l0, s as i0, X as n0, c as o0, V as c0, g as v0 } from "../X-i_EmjXwW.js";
-import { A as d0 } from "../ArrowCounterClockwise-CN8KGaI0.js";
-import { i as _0, a as g0, b as f0, g as u0, c as h0, e as m0, d as p0, f as b0 } from "../image_filters_reset-CyWg622b.js";
+import { l as l0, s as i0, X as n0, c as o0, V as c0, g as v0 } from "../X-Bn7S7vUL.js";
+import { A as d0 } from "../ArrowCounterClockwise-CM9mGGcp.js";
+import { i as _0, a as g0, b as f0, g as u0, c as h0, e as m0, d as p0, f as b0 } from "../image_filters_reset-CmWuQiOc.js";
 const G = {
   brightness: 100,
   contrast: 100,

package/dist/state/manifests.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteMap } from 'svelte/reactivity';
 export interface ManifestEntry {
     json?: any;
     manifesto?: any;
@@ -6,7 +7,7 @@ export interface ManifestEntry {
 }
 export declare class ManifestsState {
     manifests: Record<string, ManifestEntry>;
-    userAnnotations: Map<string, any[]>;
+    userAnnotations: SvelteMap<string, any[]>;
     constructor();
     private userAnnotationKey;
     setUserAnnotations(manifestId: string, canvasId: string, annotations: any[]): void;

package/dist/state/manifests.svelte.js

@@ -1,8 +1,9 @@
+import { SvelteMap } from 'svelte/reactivity';
 import * as manifesto from 'manifesto.js';
 export class ManifestsState {
     manifests = $state({});
     // User-created annotations (from plugins like annotation editor)
-    userAnnotations = $state(new Map());
+    userAnnotations = new SvelteMap();
     constructor() { }
     // === User Annotations API ===
     userAnnotationKey(manifestId, canvasId) {
@@ -10,17 +11,12 @@ export class ManifestsState {
     }
     setUserAnnotations(manifestId, canvasId, annotations) {
         const key = this.userAnnotationKey(manifestId, canvasId);
-        // Create a new Map to trigger reactivity
-        const newMap = new Map(this.userAnnotations);
-        newMap.set(key, annotations);
-        this.userAnnotations = newMap;
+        this.userAnnotations.set(key, annotations);
     }
     clearUserAnnotations(manifestId, canvasId) {
         const key = this.userAnnotationKey(manifestId, canvasId);
         if (this.userAnnotations.has(key)) {
-            const newMap = new Map(this.userAnnotations);
-            newMap.delete(key);
-            this.userAnnotations = newMap;
+            this.userAnnotations.delete(key);
         }
     }
     getUserAnnotations(manifestId, canvasId) {
@@ -109,7 +105,7 @@ export class ManifestsState {
         // Manifesto wraps the JSON. We can access the underlying JSON via canvas.__jsonld
         // Or better, use canvas.getContent() if it works, but for external lists manual fetch is robust.
         const canvasJson = canvas.__jsonld;
-        let annotations = [];
+        const annotations = [];
         // Helper to parse list using Manifesto
         const parseList = (listJson) => {
             // manifesto.create is not available in 4.3.0 or not exported nicely?

package/dist/state/manifests.test.js

@@ -1,33 +1,33 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { ManifestsState } from "./manifests.svelte";
-import * as manifesto from "manifesto.js";
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ManifestsState } from './manifests.svelte';
+import * as manifesto from 'manifesto.js';
 // Mock manifesto.js since it's an external dependency
-vi.mock("manifesto.js", async (importOriginal) => {
+vi.mock('manifesto.js', async (importOriginal) => {
     const actual = await importOriginal();
     return {
         ...actual,
-        parseManifest: vi.fn((json) => {
+        parseManifest: vi.fn((_json) => {
             // Minimal mock of a manifesto object
             return {
                 getSequences: () => [
                     {
-                        getCanvases: () => [{ id: "canvas1" }],
+                        getCanvases: () => [{ id: 'canvas1' }],
                         getCanvasById: (id) => {
-                            if (id === "canvas1") {
+                            if (id === 'canvas1') {
                                 return {
-                                    id: "canvas1",
+                                    id: 'canvas1',
                                     __jsonld: {
                                         otherContent: [
                                             {
-                                                "@id": "http://example.org/list1",
-                                                "@type": "sc:AnnotationList",
+                                                '@id': 'http://example.org/list1',
+                                                '@type': 'sc:AnnotationList',
                                             },
                                         ],
                                         annotations: [
                                             // v3 style
                                             {
-                                                id: "http://example.org/list2",
-                                                type: "AnnotationPage",
+                                                id: 'http://example.org/list2',
+                                                type: 'AnnotationPage',
                                             },
                                         ],
                                     },
@@ -41,80 +41,82 @@ vi.mock("manifesto.js", async (importOriginal) => {
         }),
     };
 });
-describe("ManifestsState", () => {
+describe('ManifestsState', () => {
     let state;
     const mockFetch = vi.fn();
     beforeEach(() => {
-        vi.stubGlobal("fetch", mockFetch);
+        vi.stubGlobal('fetch', mockFetch);
         state = new ManifestsState();
         mockFetch.mockReset();
     });
     afterEach(() => {
         vi.restoreAllMocks();
     });
-    describe("fetchManifest", () => {
-        it("should fetch and store a manifest", async () => {
+    describe('fetchManifest', () => {
+        it('should fetch and store a manifest', async () => {
             const mockManifest = {
-                "@id": "http://example.org/manifest",
-                label: "Test Manifest",
+                '@id': 'http://example.org/manifest',
+                label: 'Test Manifest',
             };
             mockFetch.mockResolvedValueOnce({
                 ok: true,
                 json: async () => mockManifest,
             });
-            await state.fetchManifest("http://example.org/manifest");
-            expect(mockFetch).toHaveBeenCalledWith("http://example.org/manifest");
-            expect(state.manifests["http://example.org/manifest"]).toBeDefined();
-            expect(state.manifests["http://example.org/manifest"].json).toEqual(mockManifest);
-            expect(state.manifests["http://example.org/manifest"].isFetching).toBe(false);
+            await state.fetchManifest('http://example.org/manifest');
+            expect(mockFetch).toHaveBeenCalledWith('http://example.org/manifest');
+            expect(state.manifests['http://example.org/manifest']).toBeDefined();
+            expect(state.manifests['http://example.org/manifest'].json).toEqual(mockManifest);
+            expect(state.manifests['http://example.org/manifest'].isFetching).toBe(false);
             expect(manifesto.parseManifest).toHaveBeenCalledWith(mockManifest);
         });
-        it("should handle fetch errors", async () => {
-            mockFetch.mockRejectedValueOnce(new Error("Network Error"));
-            await state.fetchManifest("http://example.org/error");
-            expect(state.manifests["http://example.org/error"].error).toBe("Network Error");
-            expect(state.manifests["http://example.org/error"].isFetching).toBe(false);
+        it('should handle fetch errors', async () => {
+            mockFetch.mockRejectedValueOnce(new Error('Network Error'));
+            await state.fetchManifest('http://example.org/error');
+            expect(state.manifests['http://example.org/error'].error).toBe('Network Error');
+            expect(state.manifests['http://example.org/error'].isFetching).toBe(false);
         });
-        it("should not fetch if already fetched", async () => {
+        it('should not fetch if already fetched', async () => {
             // Prime the state
-            state.manifests["http://example.org/cached"] = {
+            state.manifests['http://example.org/cached'] = {
                 isFetching: false,
                 json: {},
             };
-            await state.fetchManifest("http://example.org/cached");
+            await state.fetchManifest('http://example.org/cached');
             expect(mockFetch).not.toHaveBeenCalled();
         });
     });
-    describe("getCanvases", () => {
-        it("should return canvases from parsed manifest", async () => {
+    describe('getCanvases', () => {
+        it('should return canvases from parsed manifest', async () => {
             // Mock internal state directly to avoid fetch overhead
-            state.manifests["http://example.org/manifest"] = {
+            state.manifests['http://example.org/manifest'] = {
                 manifesto: {
                     getSequences: () => [
                         {
-                            getCanvases: () => ["mockCanvas1", "mockCanvas2"],
+                            getCanvases: () => ['mockCanvas1', 'mockCanvas2'],
                         },
                     ],
                 },
             };
-            const canvases = state.getCanvases("http://example.org/manifest");
-            expect(canvases).toEqual(["mockCanvas1", "mockCanvas2"]);
+            const canvases = state.getCanvases('http://example.org/manifest');
+            expect(canvases).toEqual(['mockCanvas1', 'mockCanvas2']);
         });
-        it("should return empty array if manifest not found", () => {
-            const canvases = state.getCanvases("http://example.org/missing");
+        it('should return empty array if manifest not found', () => {
+            const canvases = state.getCanvases('http://example.org/missing');
             expect(canvases).toEqual([]);
         });
     });
-    describe("manualGetAnnotations", () => {
-        it("should extract annotations and trigger fetch for external lists", async () => {
+    describe('manualGetAnnotations', () => {
+        it('should extract annotations and trigger fetch for external lists', async () => {
             // Setup mock state with a manifest that has a canvas
-            state.manifests["http://example.org/manifest"] = {
+            state.manifests['http://example.org/manifest'] = {
                 manifesto: {
                     getSequences: () => [
                         {
                             getCanvasById: () => ({
                                 __jsonld: {
-                                    otherContent: [{ "@id": "http://example.org/list1" }],
+                                    otherContent: [
+                                        { '@id': 'http://example.org/list1' },
+                                    ],
                                 },
                             }),
                         },
@@ -124,24 +126,24 @@ describe("ManifestsState", () => {
             // Mock the fetch for the annotation list
             mockFetch.mockResolvedValue({
                 ok: true,
-                json: async () => ({ resources: [{ "@id": "anno1" }] }),
+                json: async () => ({ resources: [{ '@id': 'anno1' }] }),
             });
             // First call triggers fetch
             // manualGetAnnotations calls fetchAnnotationList which is async, but manualGetAnnotations itself is synchronous and returns partial data
-            state.manualGetAnnotations("http://example.org/manifest", "canvas1");
+            state.manualGetAnnotations('http://example.org/manifest', 'canvas1');
             // We need to wait for the async fetchAnnotationList to complete.
             // Since it's not returned, we can wait a tick or use `vi.waitFor` if available,
             // but simpler here is just to await a small delay since we are mocking.
             await new Promise((resolve) => setTimeout(resolve, 0));
-            expect(mockFetch).toHaveBeenCalledWith("http://example.org/list1");
+            expect(mockFetch).toHaveBeenCalledWith('http://example.org/list1');
             // Simulate update after fetch (in real app this is reactive, here we manually update state)
-            state.manifests["http://example.org/list1"] = {
-                json: { resources: [{ "@id": "anno1" }] },
+            state.manifests['http://example.org/list1'] = {
+                json: { resources: [{ '@id': 'anno1' }] },
             };
             // Second call should return the annotations
-            const annos = state.manualGetAnnotations("http://example.org/manifest", "canvas1");
+            const annos = state.manualGetAnnotations('http://example.org/manifest', 'canvas1');
             expect(annos).toHaveLength(1);
-            expect(annos[0]["@id"]).toBe("anno1");
+            expect(annos[0]['@id']).toBe('anno1');
         });
     });
 });

package/dist/state/viewer.svelte.d.ts

@@ -1,3 +1,4 @@
+import { SvelteSet } from 'svelte/reactivity';
 import type { ViewerConfig } from '../types/config';
 import type { PluginMenuButton, PluginPanel, PluginDef } from '../types/plugin';
 /**
@@ -15,6 +16,15 @@ export interface ViewerStateSnapshot {
     searchQuery: string;
     isFullScreen: boolean;
     dockSide: string;
+    viewingMode: 'individuals' | 'paged';
+    galleryPosition: {
+        x: number;
+        y: number;
+    };
+    gallerySize: {
+        width: number;
+        height: number;
+    };
 }
 export declare class ViewerState {
     manifestId: string | null;
@@ -27,11 +37,15 @@ export declare class ViewerState {
     isFullScreen: boolean;
     showMetadataDialog: boolean;
     dockSide: string;
-    visibleAnnotationIds: Set<string>;
+    visibleAnnotationIds: SvelteSet<string>;
     config: ViewerConfig;
     get showToggle(): boolean;
     get showCanvasNav(): boolean;
     get showZoomControls(): boolean;
+    get galleryFixedHeight(): number;
+    get viewingMode(): "individuals" | "paged";
+    set viewingMode(value: 'individuals' | 'paged');
+    pagedOffset: number;
     galleryPosition: {
         x: number;
         y: number;
@@ -98,6 +112,8 @@ export declare class ViewerState {
     setViewerElement(element: HTMLElement): void;
     toggleFullScreen(): void;
     toggleMetadataDialog(): void;
+    setViewingMode(mode: 'individuals' | 'paged'): void;
+    togglePagedOffset(): void;
     searchQuery: string;
     pendingSearchQuery: string | null;
     searchResults: any[];
@@ -105,6 +121,9 @@ export declare class ViewerState {
     showSearchPanel: boolean;
     toggleSearchPanel(): void;
     searchAnnotations: any[];
+    /**
+     * This function now accounts for two-page mode when returning current canvas search annotations offset accordingly.
+     */
     get currentCanvasSearchAnnotations(): any[];
     search(query: string): Promise<void>;
     private _performSearch;

package/dist/state/viewer.svelte.js

@@ -1,3 +1,4 @@
+import { SvelteSet, SvelteMap } from 'svelte/reactivity';
 import { manifestsState } from './manifests.svelte.js';
 export class ViewerState {
     manifestId = $state(null);
@@ -10,7 +11,7 @@ export class ViewerState {
     isFullScreen = $state(false);
     showMetadataDialog = $state(false);
     dockSide = $state('bottom');
-    visibleAnnotationIds = $state(new Set());
+    visibleAnnotationIds = new SvelteSet();
     // UI Configuration
     config = $state({});
     // Derived configuration specific getters
@@ -23,6 +24,17 @@ export class ViewerState {
     get showZoomControls() {
         return this.config.showZoomControls ?? true;
     }
+    get galleryFixedHeight() {
+        return this.config.gallery?.fixedHeight ?? 120;
+    }
+    get viewingMode() {
+        return this.config.viewingMode ?? 'individuals';
+    }
+    set viewingMode(value) {
+        this.config.viewingMode = value;
+    }
+    // Pairing offset for paged mode: 0 = default (pairs start at 1+2), 1 = shifted (page 1 alone, pairs start at 2+3)
+    pagedOffset = $state(0);
     // Gallery State (Lifted for persistence during re-docking)
     galleryPosition = $state({ x: 20, y: 100 });
     gallerySize = $state({ width: 300, height: 400 });
@@ -74,6 +86,9 @@ export class ViewerState {
             searchQuery: this.searchQuery,
             isFullScreen: this.isFullScreen,
             dockSide: this.dockSide,
+            viewingMode: this.viewingMode,
+            galleryPosition: this.galleryPosition,
+            gallerySize: this.gallerySize,
         };
     }
     /**
@@ -141,23 +156,61 @@ export class ViewerState {
         });
     }
     get hasNext() {
-        return this.currentCanvasIndex < this.canvases.length - 1;
+        if (this.viewingMode === 'paged') {
+            // Account for paged offset: with offset 1, page 1 is single, pairs start at 2+3
+            const singlePages = this.pagedOffset;
+            if (this.currentCanvasIndex < singlePages) {
+                return this.currentCanvasIndex < this.canvases.length - 1;
+            }
+            return this.currentCanvasIndex < this.canvases.length - 2;
+        }
+        else {
+            return this.currentCanvasIndex < this.canvases.length - 1;
+        }
     }
     get hasPrevious() {
         return this.currentCanvasIndex > 0;
     }
     nextCanvas() {
         if (this.hasNext) {
-            const nextIndex = this.currentCanvasIndex + 1;
-            const canvas = this.canvases[nextIndex];
-            this.setCanvas(canvas.id);
+            if (this.viewingMode === 'paged') {
+                // Single pages at the start: pagedOffset (default 0, shifted = 1)
+                const singlePages = this.pagedOffset;
+                const nextIndex = this.currentCanvasIndex < singlePages
+                    ? this.currentCanvasIndex + 1
+                    : this.currentCanvasIndex + 2;
+                const canvas = this.canvases[nextIndex];
+                this.setCanvas(canvas.id);
+            }
+            else {
+                const nextIndex = this.currentCanvasIndex + 1;
+                const canvas = this.canvases[nextIndex];
+                this.setCanvas(canvas.id);
+            }
         }
     }
     previousCanvas() {
         if (this.hasPrevious) {
-            const prevIndex = this.currentCanvasIndex - 1;
-            const canvas = this.canvases[prevIndex];
-            this.setCanvas(canvas.id);
+            if (this.viewingMode === 'paged') {
+                // Single pages at the start: pagedOffset (default 0, shifted = 1)
+                const singlePages = this.pagedOffset;
+                let prevIndex;
+                if (this.currentCanvasIndex <= singlePages) {
+                    // Going back within single pages or to a single page
+                    prevIndex = this.currentCanvasIndex - 1;
+                }
+                else {
+                    // Going back in paired pages, but don't go past the last single page
+                    prevIndex = Math.max(this.currentCanvasIndex - 2, singlePages);
+                }
+                const canvas = this.canvases[prevIndex];
+                this.setCanvas(canvas.id);
+            }
+            else {
+                const prevIndex = this.currentCanvasIndex - 1;
+                const canvas = this.canvases[prevIndex];
+                this.setCanvas(canvas.id);
+            }
         }
     }
     zoomIn() {
@@ -189,6 +242,10 @@ export class ViewerState {
         if (newConfig.toolbarOpen !== undefined) {
             this.toolbarOpen = newConfig.toolbarOpen;
         }
+        if (newConfig.viewingMode) {
+            // direct assignment works because of the setter
+            this.viewingMode = newConfig.viewingMode;
+        }
         if (newConfig.gallery) {
             if (newConfig.gallery.open !== undefined) {
                 this.showThumbnailGallery = newConfig.gallery.open;
@@ -196,6 +253,18 @@ export class ViewerState {
             if (newConfig.gallery.dockPosition !== undefined) {
                 this.dockSide = newConfig.gallery.dockPosition;
             }
+            if (newConfig.gallery.width !== undefined) {
+                this.gallerySize.width = newConfig.gallery.width;
+            }
+            if (newConfig.gallery.height !== undefined) {
+                this.gallerySize.height = newConfig.gallery.height;
+            }
+            if (newConfig.gallery.x !== undefined) {
+                this.galleryPosition.x = newConfig.gallery.x;
+            }
+            if (newConfig.gallery.y !== undefined) {
+                this.galleryPosition.y = newConfig.gallery.y;
+            }
         }
         if (newConfig.search) {
             if (newConfig.search.open !== undefined) {
@@ -262,6 +331,39 @@ export class ViewerState {
     toggleMetadataDialog() {
         this.showMetadataDialog = !this.showMetadataDialog;
     }
+    setViewingMode(mode) {
+        this.viewingMode = mode;
+        if (mode === 'paged') {
+            const singlePages = this.pagedOffset;
+            // If we're past the single pages, check if we're on a right-hand page
+            if (this.currentCanvasIndex >= singlePages) {
+                // Calculate position relative to where pairs start
+                const pairPosition = (this.currentCanvasIndex - singlePages) % 2;
+                if (pairPosition === 1) {
+                    // We're on a right-hand page, move back one
+                    const newIndex = this.currentCanvasIndex - 1;
+                    const canvas = this.canvases[newIndex];
+                    this.setCanvas(canvas.id);
+                }
+            }
+        }
+        this.dispatchStateChange();
+    }
+    togglePagedOffset() {
+        this.pagedOffset = this.pagedOffset === 0 ? 1 : 0;
+        // Adjust current canvas position if needed
+        const singlePages = this.pagedOffset;
+        if (this.currentCanvasIndex >= singlePages) {
+            const pairPosition = (this.currentCanvasIndex - singlePages) % 2;
+            if (pairPosition === 1) {
+                // We're now on a right-hand page after the shift, move back
+                const newIndex = this.currentCanvasIndex - 1;
+                const canvas = this.canvases[newIndex];
+                this.setCanvas(canvas.id);
+            }
+        }
+        this.dispatchStateChange();
+    }
     searchQuery = $state('');
     pendingSearchQuery = $state(null);
     searchResults = $state([]);
@@ -276,10 +378,43 @@ export class ViewerState {
         this.dispatchStateChange();
     }
     searchAnnotations = $state([]);
+    /**
+     * This function now accounts for two-page mode when returning current canvas search annotations offset accordingly.
+     */
     get currentCanvasSearchAnnotations() {
         if (!this.canvasId)
             return [];
-        return this.searchAnnotations.filter((a) => a.canvasId === this.canvasId);
+        if (this.viewingMode === 'paged') {
+            let annotations = this.searchAnnotations.filter((a) => a.canvasId === this.canvasId);
+            const currentIndex = this.currentCanvasIndex;
+            const singlePages = this.pagedOffset;
+            // Only include next canvas annotations if we're in a two-page spread
+            if (currentIndex >= singlePages) {
+                const nextIndex = currentIndex + 1;
+                if (nextIndex < this.canvases.length) {
+                    const nextCanvas = this.canvases[nextIndex];
+                    const nextCanvasId = nextCanvas.id || nextCanvas['@id'];
+                    const xOffset = 1.025; // account for small gap between pages
+                    const annoOffset = this.canvases[currentIndex].getWidth() * xOffset;
+                    const nextAnnotations = this.searchAnnotations.filter((a) => a.canvasId === nextCanvasId);
+                    // update x coordinates for display on the right side in two-page mode
+                    const nextAnnotationsUpdated = nextAnnotations.map((a) => {
+                        const parts = a.on.split('#xywh=');
+                        const coords = parts[1].split(',').map(Number);
+                        const shiftedX = coords[0] + annoOffset;
+                        return {
+                            ...a,
+                            on: `${parts[0]}#xywh=${shiftedX},${coords[1]},${coords[2]},${coords[3]}`,
+                        };
+                    });
+                    annotations = annotations.concat(nextAnnotationsUpdated);
+                }
+            }
+            return annotations;
+        }
+        else {
+            return this.searchAnnotations.filter((a) => a.canvasId === this.canvasId);
+        }
     }
     async search(query) {
         this.dispatchStateChange();
@@ -328,7 +463,7 @@ export class ViewerState {
             const data = await response.json();
             const resources = data.resources || [];
             // Group results by canvas index
-            const resultsByCanvas = new Map();
+            const resultsByCanvas = new SvelteMap();
             // Helper to parse xywh
             const parseSelector = (onVal) => {
                 const val = typeof onVal === 'string'
@@ -362,7 +497,7 @@ export class ViewerState {
                     // We will take the first valid canvas we find for the annotations.
                     let canvasIndex = -1;
                     let bounds = null;
-                    let allBounds = [];
+                    const allBounds = [];
                     for (const annoId of annotations) {
                         const annotation = resources.find((r) => r['@id'] === annoId || r.id === annoId);
                         if (annotation && annotation.on) {
@@ -406,7 +541,7 @@ export class ViewerState {
                                         label = canvas.label[0]?.value;
                                 }
                             }
-                            catch (e) {
+                            catch (_e) {
                                 /* ignore */
                             }
                             resultsByCanvas.set(canvasIndex, {
@@ -454,7 +589,7 @@ export class ViewerState {
                                     label = canvas.label[0]?.value;
                             }
                         }
-                        catch (e) {
+                        catch (_e) {
                             /* ignore */
                         }
                         if (!resultsByCanvas.has(canvasIndex)) {
@@ -527,7 +662,7 @@ export class ViewerState {
     /** OpenSeadragon viewer instance (set by OSDViewer) */
     osdViewer = $state.raw(null);
     /** Event handlers for inter-plugin communication */
-    pluginEventHandlers = new Map();
+    pluginEventHandlers = new SvelteMap();
     // ==================== PLUGIN METHODS ====================
     /**
      * Register a plugin with this viewer instance.
@@ -557,8 +692,7 @@ export class ViewerState {
             isVisible: () => isOpen,
             props: {
                 ...def.props,
-                // Pass isOpen state and closer to component
-                isOpen: isOpen,
+                // Pass closer to component
                 close: () => {
                     isOpen = false;
                 },