triiiceratops 0.9.13 → 0.10.1

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

@@ -1,5 +1,5 @@
 import type { ViewerConfig } from '../types/config';
-import type { TriiiceratopsPlugin, PluginMenuButton, PluginPanel } from '../types/plugin';
+import type { PluginMenuButton, PluginPanel, PluginDef } from '../types/plugin';
 /**
  * Snapshot of viewer state for external consumers.
  * Used by web component events to expose state without Svelte reactivity.
@@ -71,8 +71,9 @@ export declare class ViewerState {
      * reactive cycle completes, preventing infinite update loops.
      */
     private dispatchStateChange;
-    constructor(initialManifestId?: string | null, initialCanvasId?: string | null, initialPlugins?: TriiiceratopsPlugin[]);
+    constructor(initialManifestId?: string | null, initialCanvasId?: string | null, initialPlugins?: PluginDef[]);
     get manifest(): any;
+    get manifestEntry(): import("./manifests.svelte.js").ManifestEntry | null | undefined;
     get canvases(): any;
     get currentCanvasIndex(): any;
     get hasNext(): boolean;
@@ -87,6 +88,7 @@ export declare class ViewerState {
     toggleFullScreen(): void;
     toggleMetadataDialog(): void;
     searchQuery: string;
+    pendingSearchQuery: string | null;
     searchResults: any[];
     isSearching: boolean;
     showSearchPanel: boolean;
@@ -95,8 +97,6 @@ export declare class ViewerState {
     get currentCanvasSearchAnnotations(): any[];
     search(query: string): Promise<void>;
     private _performSearch;
-    /** Registered plugins */
-    plugins: TriiiceratopsPlugin[];
     /** Plugin-registered menu buttons */
     pluginMenuButtons: PluginMenuButton[];
     /** Plugin-registered panels */
@@ -105,24 +105,27 @@ export declare class ViewerState {
     osdViewer: any | null;
     /** Event handlers for inter-plugin communication */
     private pluginEventHandlers;
-    /**
-     * Create plugin context - the stable API surface for plugins.
-     */
-    private createPluginContext;
     /**
      * Register a plugin with this viewer instance.
+     * Accepts a simple PluginDef object.
      */
-    registerPlugin(plugin: TriiiceratopsPlugin): void;
+    registerPlugin(def: PluginDef): void;
     /**
-     * Unregister a plugin by ID.
+     * Unregister a plugin's UI components by ID prefix.
+     * Note: This cleans up the menu button and panel, but doesn't remove listeners attached by the plugin itself
+     * since we don't have a handle on the plugin instance or its cleanup function anymore.
+     * Plugins should manage their own cleanup via component lifecycle (onDestroy) if possible.
      */
     unregisterPlugin(pluginId: string): void;
     /**
-     * Called by OSDViewer when OpenSeadragon is ready.
+     * Notify that OSD viewer is ready.
+     * With the component-based system, we don't notify plugins individually.
+     * Instead, plugins should use the OSDViewer instance from context or listen for 'osd-ready' event (if we emitted one).
+     * But since we have direct access to osdViewer in this state, components can just react to it.
      */
-    notifyOSDReady(viewer: any): void;
+    notifyOSDReady(viewer: OpenSeadragon.Viewer): void;
     /**
-     * Destroy all plugins (called on viewer unmount).
+     * Cleanup everything.
      */
     destroyAllPlugins(): void;
 }

package/dist/state/viewer.svelte.js

@@ -54,7 +54,13 @@ export class ViewerState {
         let canvasIndex = -1;
         if (this.manifestId && this.canvasId) {
             const canvases = manifestsState.getCanvases(this.manifestId);
-            canvasIndex = canvases.findIndex((c) => c.id === this.canvasId);
+            canvasIndex = canvases.findIndex((c) => {
+                const id = c.id ||
+                    c['@id'] ||
+                    (c.getCanvasId ? c.getCanvasId() : null) ||
+                    (c.getId ? c.getId() : null);
+                return id === this.canvasId;
+            });
         }
         return {
             manifestId: this.manifestId,
@@ -105,19 +111,16 @@ export class ViewerState {
             return null;
         return manifestsState.getManifest(this.manifestId);
     }
+    get manifestEntry() {
+        if (!this.manifestId)
+            return null;
+        return manifestsState.getManifestEntry(this.manifestId);
+    }
     get canvases() {
         if (!this.manifestId)
             return [];
         const 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(() => {
-                if (!this.canvasId && canvases.length > 0) {
-                    this.canvasId = canvases[0].id;
-                }
-            }, 0);
-        }
         return canvases;
     }
     get currentCanvasIndex() {
@@ -126,8 +129,14 @@ export class ViewerState {
                 return 0;
             return -1;
         }
-        // Manifesto canvases have an id property
-        return this.canvases.findIndex((c) => c.id === this.canvasId);
+        // Manifesto canvases have an id property, but let's be robust and check multiple possibilities
+        return this.canvases.findIndex((c) => {
+            const id = c.id ||
+                c['@id'] ||
+                (c.getCanvasId ? c.getCanvasId() : null) ||
+                (c.getId ? c.getId() : null);
+            return id === this.canvasId;
+        });
     }
     get hasNext() {
         return this.currentCanvasIndex < this.canvases.length - 1;
@@ -220,6 +229,7 @@ export class ViewerState {
         this.showMetadataDialog = !this.showMetadataDialog;
     }
     searchQuery = $state('');
+    pendingSearchQuery = $state(null);
     searchResults = $state([]);
     isSearching = $state(false);
     showSearchPanel = $state(false);
@@ -250,8 +260,12 @@ export class ViewerState {
         this.searchResults = [];
         try {
             const manifest = this.manifest;
-            if (!manifest)
-                throw new Error('No manifest loaded');
+            if (!manifest) {
+                // Defer search until manifest is loaded
+                console.log('[ViewerState] Manifest not loaded, deferring search:', query);
+                this.pendingSearchQuery = query;
+                return;
+            }
             let service = manifest.getService('http://iiif.io/api/search/1/search') ||
                 manifest.getService('http://iiif.io/api/search/0/search');
             if (!service) {
@@ -447,104 +461,81 @@ export class ViewerState {
         }
     }
     // ==================== PLUGIN STATE ====================
-    /** Registered plugins */
-    plugins = $state([]);
     /** Plugin-registered menu buttons */
     pluginMenuButtons = $state([]);
     /** Plugin-registered panels */
     pluginPanels = $state([]);
     /** OpenSeadragon viewer instance (set by OSDViewer) */
-    osdViewer = $state(null);
+    osdViewer = $state.raw(null);
     /** Event handlers for inter-plugin communication */
     pluginEventHandlers = new Map();
     // ==================== PLUGIN METHODS ====================
     /**
-     * Create plugin context - the stable API surface for plugins.
+     * Register a plugin with this viewer instance.
+     * Accepts a simple PluginDef object.
      */
-    createPluginContext() {
-        const self = this;
-        return {
-            viewerState: self,
-            getOSDViewer: () => self.osdViewer,
-            registerMenuButton(button) {
-                if (!self.pluginMenuButtons.find((b) => b.id === button.id)) {
-                    self.pluginMenuButtons = [
-                        ...self.pluginMenuButtons,
-                        button,
-                    ];
-                }
-            },
-            unregisterMenuButton(buttonId) {
-                self.pluginMenuButtons = self.pluginMenuButtons.filter((b) => b.id !== buttonId);
-            },
-            registerPanel(panel) {
-                if (!self.pluginPanels.find((p) => p.id === panel.id)) {
-                    self.pluginPanels = [...self.pluginPanels, panel];
-                }
-            },
-            unregisterPanel(panelId) {
-                self.pluginPanels = self.pluginPanels.filter((p) => p.id !== panelId);
+    registerPlugin(def) {
+        const id = def.id || `plugin-${Math.random().toString(36).substr(2, 9)}`;
+        // Create reactive state for this plugin's panel
+        // Svelte 5's $state works fine in closures if consumed in reactive context
+        let isOpen = $state(false);
+        // Register Menu Button
+        const button = {
+            id: `${id}:toggle`,
+            icon: def.icon,
+            tooltip: def.name,
+            onClick: () => {
+                isOpen = !isOpen;
             },
-            emit(eventName, data) {
-                const handlers = self.pluginEventHandlers.get(eventName);
-                handlers?.forEach((handler) => handler(data));
-            },
-            on(eventName, handler) {
-                if (!self.pluginEventHandlers.has(eventName)) {
-                    self.pluginEventHandlers.set(eventName, new Set());
-                }
-                self.pluginEventHandlers.get(eventName).add(handler);
-                return () => {
-                    self.pluginEventHandlers.get(eventName)?.delete(handler);
-                };
+            isActive: () => isOpen,
+            order: 200, // Default order for simple plugins
+        };
+        // Register Panel
+        const panel = {
+            id: `${id}:panel`,
+            component: def.panel,
+            position: def.position || 'left',
+            isVisible: () => isOpen,
+            props: {
+                ...def.props,
+                // Pass isOpen state and closer to component
+                isOpen: isOpen,
+                close: () => {
+                    isOpen = false;
+                },
             },
         };
-    }
-    /**
-     * Register a plugin with this viewer instance.
-     */
-    registerPlugin(plugin) {
-        if (this.plugins.find((p) => p.id === plugin.id)) {
-            console.warn(`[Triiiceratops] Plugin "${plugin.id}" already registered`);
-            return;
-        }
-        this.plugins = [...this.plugins, plugin];
-        plugin.onRegister(this.createPluginContext());
-        // If OSD already ready, notify immediately
-        if (this.osdViewer && plugin.onViewerReady) {
-            plugin.onViewerReady(this.osdViewer);
+        // Add directly to lists
+        this.pluginMenuButtons = [...this.pluginMenuButtons, button];
+        this.pluginPanels = [...this.pluginPanels, panel];
+        // Execute lifecycle hook if present
+        if (def.onInit) {
+            def.onInit(this);
         }
     }
     /**
-     * Unregister a plugin by ID.
+     * Unregister a plugin's UI components by ID prefix.
+     * Note: This cleans up the menu button and panel, but doesn't remove listeners attached by the plugin itself
+     * since we don't have a handle on the plugin instance or its cleanup function anymore.
+     * Plugins should manage their own cleanup via component lifecycle (onDestroy) if possible.
      */
     unregisterPlugin(pluginId) {
-        const plugin = this.plugins.find((p) => p.id === pluginId);
-        if (plugin) {
-            plugin.onDestroy?.();
-            this.plugins = this.plugins.filter((p) => p.id !== pluginId);
-            // Remove plugin's UI registrations
-            this.pluginMenuButtons = this.pluginMenuButtons.filter((b) => !b.id.startsWith(`${pluginId}:`));
-            this.pluginPanels = this.pluginPanels.filter((p) => !p.id.startsWith(`${pluginId}:`));
-        }
+        this.pluginMenuButtons = this.pluginMenuButtons.filter((b) => !b.id.startsWith(`${pluginId}:`));
+        this.pluginPanels = this.pluginPanels.filter((p) => !p.id.startsWith(`${pluginId}:`));
     }
     /**
-     * Called by OSDViewer when OpenSeadragon is ready.
+     * Notify that OSD viewer is ready.
+     * With the component-based system, we don't notify plugins individually.
+     * Instead, plugins should use the OSDViewer instance from context or listen for 'osd-ready' event (if we emitted one).
+     * But since we have direct access to osdViewer in this state, components can just react to it.
      */
     notifyOSDReady(viewer) {
         this.osdViewer = viewer;
-        for (const plugin of this.plugins) {
-            plugin.onViewerReady?.(viewer);
-        }
     }
     /**
-     * Destroy all plugins (called on viewer unmount).
+     * Cleanup everything.
      */
     destroyAllPlugins() {
-        for (const plugin of this.plugins) {
-            plugin.onDestroy?.();
-        }
-        this.plugins = [];
         this.pluginMenuButtons = [];
         this.pluginPanels = [];
         this.pluginEventHandlers.clear();