triiiceratops 0.11.0 → 0.11.2

package/dist/components/AnnotationOverlay.svelte

@@ -42,18 +42,15 @@
             const shouldBeVisible =
                 viewerState.config.annotations?.visible ?? true;
 
+            viewerState.visibleAnnotationIds.clear();
             if (shouldBeVisible) {
-                const newSet = new Set<string>();
                 annotations.forEach((a: any) => {
                     const id = getAnnotationId(a);
-                    if (id) newSet.add(id);
+                    if (id) viewerState.visibleAnnotationIds.add(id);
                 });
-                viewerState.visibleAnnotationIds = newSet;
-            } else {
-                viewerState.visibleAnnotationIds = new Set();
             }
         } else {
-            viewerState.visibleAnnotationIds = new Set();
+            viewerState.visibleAnnotationIds.clear();
         }
     });
 
@@ -72,24 +69,19 @@
         } else {
             viewerState.visibleAnnotationIds.add(id);
         }
-        // Reassign to trigger reactivity
-        viewerState.visibleAnnotationIds = new Set(
-            viewerState.visibleAnnotationIds,
-        );
     }
 
     function toggleAllAnnotations() {
         if (isAllVisible) {
             // Hide all
-            viewerState.visibleAnnotationIds = new Set();
+            viewerState.visibleAnnotationIds.clear();
         } else {
             // Show all
-            const newSet = new Set<string>();
+            viewerState.visibleAnnotationIds.clear();
             annotations.forEach((a: any) => {
                 const id = getAnnotationId(a);
-                if (id) newSet.add(id);
+                if (id) viewerState.visibleAnnotationIds.add(id);
             });
-            viewerState.visibleAnnotationIds = newSet;
         }
     }
 
@@ -98,7 +90,7 @@
     let toolbarContainer: HTMLElement | undefined = $state();
 
     // Calculate coordinates for connecting line
-    let connectingLine = $derived.by(() => {
+    let _connectingLine = $derived.by(() => {
         if (!hoveredAnnotationId) return null;
         return null;
     });
@@ -254,7 +246,7 @@
             <div
                 class="absolute right-0 mt-2 w-96 bg-base-200/95 backdrop-blur shadow-xl rounded-box p-0 max-h-[60vh] overflow-y-auto border border-base-300 flex flex-col divide-y divide-base-300"
             >
-                {#each renderedAnnotations as anno, i}
+                {#each renderedAnnotations as anno, i (anno.id)}
                     {@const isVisible = viewerState.visibleAnnotationIds.has(
                         anno.id,
                     )}
@@ -315,7 +307,7 @@
                                     ? ''
                                     : 'opacity-50'} space-y-2"
                             >
-                                {#each anno.bodies as body}
+                                {#each anno.bodies as body, i (i)}
                                     <div
                                         class="flex flex-wrap gap-2 pointer-events-auto"
                                     >
@@ -354,6 +346,7 @@
                                             <!-- Commenting / Default -->
                                             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                                             {#if body.isHtml}
+                                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                                                 {@html body.value}
                                             {:else}
                                                 {body.value || '(No content)'}

package/dist/components/DemoHeader.svelte

@@ -79,7 +79,7 @@
                     }
                 }
             }
-        } catch (e) {
+        } catch {
             /* ignore */
         }
         return `Canvas ${index + 1}`;
@@ -213,7 +213,7 @@
             onchange={(e) => setLocale(e.currentTarget.value as any)}
             aria-label={m.language_select_label()}
         >
-            {#each locales as lang}
+            {#each locales as lang (lang)}
                 <option value={lang}>{languageNames[lang] || lang}</option>
             {/each}
         </select>
@@ -230,7 +230,6 @@
             >
                 <Gear size={20} />
             </div>
-            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
             <ul
                 tabindex="-1"
                 class="dropdown-content z-20 menu bg-base-100 rounded-box w-80 p-2 shadow border border-base-300 max-h-[80vh] overflow-y-auto block invisible pointer-events-none group-focus-within:visible group-focus-within:pointer-events-auto"
@@ -731,7 +730,7 @@
                     value={isCustom ? 'custom' : manifestUrl}
                     onchange={handleSelectChange}
                 >
-                    {#each SUGGESTED_MANIFESTS as manifest}
+                    {#each SUGGESTED_MANIFESTS as manifest (manifest.url)}
                         <option value={manifest.url}>{manifest.label}</option>
                     {/each}
                     <option value="custom">{m.try_your_own()}</option>
@@ -770,7 +769,7 @@
                 {#if canvases.length === 0}
                     <option value="" disabled>{m.no_canvases_loaded()}</option>
                 {:else}
-                    {#each canvases as canvas, i}
+                    {#each canvases as canvas, i (canvas.id)}
                         <option value={canvas.id}>
                             {getCanvasLabel(canvas, i)}
                         </option>

package/dist/components/MetadataDialog.svelte

@@ -98,6 +98,7 @@
         <div class="py-4 overflow-y-auto max-h-[70vh]">
             {#if description}
                 <div class="mb-6 prose">
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     <p>{@html description}</p>
                 </div>
             {/if}
@@ -107,6 +108,7 @@
                     <dt class="font-bold text-lg opacity-70 mt-6">
                         {m.attribution()}
                     </dt>
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     <dd class="text-sm ps-2">{@html attribution}</dd>
                 {/if}
 
@@ -124,10 +126,11 @@
                     </dd>
                 {/if}
 
-                {#each metadata as item}
+                {#each metadata as item, i (i)}
                     <dt class="font-bold text-lg opacity-70 mt-6">
                         {item.label}
                     </dt>
+                    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     <dd class="text-sm ps-2">{@html item.value}</dd>
                 {/each}
             </dl>

package/dist/components/OSDViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+    import { SvelteSet } from 'svelte/reactivity';
     import { parseAnnotations } from '../utils/annotationAdapter';
     import { manifestsState } from '../state/manifests.svelte';
     import type { ViewerState } from '../state/viewer.svelte';
@@ -32,7 +33,7 @@
 
     // Get search hit IDs for styling
     let searchHitIds = $derived.by(() => {
-        const ids = new Set<string>();
+        const ids = new SvelteSet<string>();
         viewerState.currentCanvasSearchAnnotations.forEach((anno: any) => {
             const id = anno.id || anno['@id'];
             if (id) ids.add(id);
@@ -48,7 +49,7 @@
     // Rendered annotations with pixel coordinates
     let renderedAnnotations = $derived.by(() => {
         // Depend on osdVersion to trigger updates
-        osdVersion;
+        void osdVersion;
 
         if (!viewer || !OSD || !parsedAnnotations.length) {
             return [];
@@ -160,9 +161,13 @@
     onMount(() => {
         if (!container) return;
 
+        let mounted = true;
+
         (async () => {
             // Dynamically import OpenSeadragon to avoid SSR issues
             const osdModule = await import('openseadragon');
+            if (!mounted) return;
+
             OSD = osdModule.default || osdModule;
 
             // Initialize OpenSeadragon viewer
@@ -191,6 +196,7 @@
         })();
 
         return () => {
+            mounted = false;
             viewer?.destroy();
             viewerState.osdViewer = null;
         };

package/dist/components/SearchPanel.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { getContext, untrack } from 'svelte';
     import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
-    import Spinner from 'phosphor-svelte/lib/Spinner';
     import X from 'phosphor-svelte/lib/X';
     import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
     import { m } from '../state/i18n.svelte';
@@ -10,7 +9,6 @@
 
     // We'll initialize from viewerState to preserve context.
     let searchQuery = $state('');
-    let resultsContainer: HTMLElement;
 
     let showCloseButton = $derived(
         viewerState.config.search?.showCloseButton ?? true,
@@ -124,7 +122,7 @@
                     })}
                 </div>
 
-                {#each viewerState.searchResults as group}
+                {#each viewerState.searchResults as group (group.canvasIndex)}
                     <button
                         class="w-full text-left bg-base-100 shadow-sm border border-base-200 rounded-box cursor-pointer hover:shadow-md transition-all block p-0 select-none {viewerState.currentCanvasIndex ===
                         group.canvasIndex
@@ -144,21 +142,26 @@
                             >
                         </div>
                         <div class="p-0">
-                            {#each group.hits.slice(0, 1) as result}
+                            {#each group.hits.slice(0, 1) as result, i (i)}
                                 <div
                                     class="p-3 text-sm border-b border-base-200 last:border-none hover:bg-base-200/30 transition-colors"
                                 >
                                     {#if result.type === 'hit'}
                                         <div class="leading-relaxed">
+                                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                                             <span>{@html result.before}</span>
                                             <span
                                                 class="bg-yellow-200 text-yellow-900 font-bold px-0.5 rounded"
-                                                >{@html result.match}</span
                                             >
+                                                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                                                {@html result.match}
+                                            </span>
+                                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                                             <span>{@html result.after}</span>
                                         </div>
                                     {:else}
                                         <div class="leading-relaxed">
+                                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                                             {@html result.match}
                                         </div>
                                     {/if}

package/dist/components/ThemeToggle.svelte

@@ -80,7 +80,7 @@
     >
         <ul class="menu w-56">
             <li class="menu-title text-xs">{m.theme_menu_title()}</li>
-            {#each themes as t}
+            {#each themes as t (t)}
                 <li>
                     <button class="gap-3 px-2" onclick={() => onThemeChange(t)}>
                         <div

package/dist/components/ThumbnailGallery.svelte

@@ -83,8 +83,8 @@
                                 : thumb.id || thumb['@id'];
                     }
                 }
-            } catch (e) {
-                console.warn('Error getting thumbnail', e);
+            } catch {
+                console.warn('Error getting thumbnail');
             }
 
             // Fallback to first image if no thumbnail service
@@ -169,7 +169,7 @@
                                         (pObj['@id'] as string | undefined) ||
                                         JSON.stringify(pObj);
                                 }
-                            } catch (e) {
+                            } catch {
                                 // ignore
                             }
 
@@ -516,7 +516,7 @@
                     ? ''
                     : 'grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));'}
             >
-                {#each thumbnails as thumb}
+                {#each thumbnails as thumb (thumb.id)}
                     <button
                         class="group flex flex-col gap-1 p-1 rounded hover:bg-base-200 transition-colors text-left relative shrink-0 {isHorizontal
                             ? 'w-[90px]'

package/dist/components/Toolbar.svelte

@@ -37,7 +37,7 @@
 
     // Derived list of sorted plugin buttons
     let sortedPluginButtons = $derived.by(() => {
-        language.current;
+        void language.current;
         return [...viewerState.pluginMenuButtons].sort(
             (a, b) => (a.order ?? 100) - (b.order ?? 100),
         );
@@ -241,9 +241,9 @@
             {#each sortedPluginButtons as button (button.id)}
                 {@const Icon = button.icon}
                 {@const tooltipText =
-                    // @ts-ignore
+                    // @ts-expect-error - m[button.tooltip] might be a function
                     typeof m[button.tooltip] === 'function'
-                        ? // @ts-ignore
+                        ? // @ts-expect-error - m[button.tooltip] is a function
                           m[button.tooltip]()
                         : button.tooltip}
                 <li>
@@ -272,7 +272,8 @@
     {#if showToggle}
         <button
             class={[
-                'pointer-events-auto btn btn-circle btn-sm btn-neutral shadow-md z-40 transition-opacity duration-300 absolute mt-2',
+                'pointer-events-auto btn btn-circle btn-sm shadow-md z-40 transition-opacity duration-300 absolute mt-2',
+                'bg-base-200/90 backdrop-blur border border-base-300 hover:bg-base-300 text-base-content',
                 isOpen && 'opacity-0 pointer-events-none',
                 !isOpen && 'opacity-100',
             ]}

package/dist/components/TriiiceratopsViewerElement.svelte

@@ -1,3 +1,4 @@
+<!-- svelte-ignore options_missing_custom_element -->
 <svelte:options
     customElement={{
         tag: 'triiiceratops-viewer',
@@ -115,7 +116,7 @@
         if (typeof config === 'string') {
             try {
                 return JSON.parse(config);
-            } catch (e) {
+            } catch {
                 console.warn(`Invalid config JSON: "${config}". Ignoring.`);
                 return undefined;
             }
@@ -124,6 +125,7 @@
     });
 </script>
 
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 {@html `<style>${styles}</style>`}
 
 <div bind:this={hostElement} class="w-full h-full">

package/dist/custom-element.js

@@ -4,6 +4,7 @@
 // Plugins built as IIFE need to share the same Svelte runtime instance
 // so that getContext/setContext work correctly across bundle boundaries
 // @ts-expect-error - svelte/internal/client is not typed but exists at runtime
+// eslint-disable-next-line svelte/no-svelte-internal
 import * as svelteInternal from 'svelte/internal/client';
 import * as svelte from 'svelte';
 window.__TriiiceratopsSvelteRuntime = {

package/dist/{image_filters_reset-CyWg622b.js → image_filters_reset-CAUhlDWt.js}

@@ -1,4 +1,4 @@
-import { a as t } from "./X-i_EmjXwW.js";
+import { a as t } from "./X-Boj9jj2h.js";
 const s = (
   /** @type {(inputs: {}) => LocalizedString} */
   () => (

package/dist/plugins/annotation-editor/AnnotationEditorController.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getContext, onMount, onDestroy } from 'svelte';
+    import { getContext, onMount, onDestroy, untrack } from 'svelte';
     import {
         VIEWER_STATE_KEY,
         type ViewerState,
@@ -14,7 +14,7 @@
 
     // Props from the plugin system
     let {
-        isOpen = false,
+        isOpen: _isOpen = false,
         close,
         config,
     }: {
@@ -27,7 +27,9 @@
 
     // UI state
     let isEditing = $state(false);
-    let activeTool = $state<DrawingTool>(config.defaultTool ?? 'rectangle');
+    let activeTool = $state<DrawingTool>(
+        untrack(() => config.defaultTool ?? 'rectangle'),
+    );
     let selectedAnnotation = $state<any>(null);
     let showDeleteConfirm = $state(false);
     let pendingDeleteId = $state<string | null>(null);

package/dist/plugins/annotation-editor/AnnotationEditorPanel.svelte

@@ -158,7 +158,7 @@
                     {m.annotation_editor_tool_label()}
                 </p>
                 <div class="join">
-                    {#each availableTools as tool}
+                    {#each availableTools as tool (tool)}
                         {@const Icon = toolIcons[tool] ?? Rectangle}
                         {@const toolName =
                             {
@@ -221,14 +221,14 @@
                 </div>
 
                 <div class="space-y-3 max-h-[40vh] overflow-y-auto pr-1">
-                    {#each editableBodies as body, i}
+                    {#each editableBodies as body, i (i)}
                         <div class="card bg-base-200 p-2 space-y-2">
                             <div class="flex items-center gap-2">
                                 <select
                                     class="select select-xs select-bordered flex-1"
                                     bind:value={body.purpose}
                                 >
-                                    {#each W3C_PURPOSES as purpose}
+                                    {#each W3C_PURPOSES as purpose (purpose)}
                                         <option
                                             value={purpose}
                                             class="capitalize">{purpose}</option

package/dist/plugins/annotation-editor/AnnotationManager.svelte.d.ts

@@ -8,6 +8,9 @@ export declare class AnnotationManager {
     private adapter;
     private annotorious;
     private osdViewer;
+    private OSD;
+    private createOSDAnnotator;
+    private W3CImageFormat;
     private currentManifestId;
     private currentCanvasId;
     private isDrawingEnabled;

package/dist/plugins/annotation-editor/AnnotationManager.svelte.js

@@ -1,5 +1,3 @@
-import { createOSDAnnotator, W3CImageFormat, } from '@annotorious/openseadragon';
-import OpenSeadragon from 'openseadragon';
 import { LocalStorageAdapter } from './adapters/LocalStorageAdapter';
 /**
  * Manages the Annotorious instance and annotation CRUD operations.
@@ -10,8 +8,11 @@ export class AnnotationManager {
     adapter;
     annotorious = null;
     // Store reference to OSD viewer for mouse nav toggling
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     osdViewer = null;
+    // Dynamic dependencies
+    OSD = null;
+    createOSDAnnotator = null;
+    W3CImageFormat = null;
     // Current canvas tracking
     currentManifestId = null;
     currentCanvasId = null;
@@ -27,7 +28,6 @@ export class AnnotationManager {
         this.adapter = config.adapter ?? new LocalStorageAdapter();
         this.activeTool = config.defaultTool ?? 'rectangle';
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     init(viewer, canvasId) {
         if (!viewer) {
             console.error('[AnnotationManager] Cannot init: Viewer is null');
@@ -63,16 +63,25 @@ export class AnnotationManager {
             }
         });
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    initAnnotorious(viewer, canvasId) {
+    async initAnnotorious(viewer, canvasId) {
         if (this.annotorious)
             return;
         try {
+            // Load dynamic dependencies
+            if (!this.createOSDAnnotator || !this.W3CImageFormat) {
+                const mod = await import('@annotorious/openseadragon');
+                this.createOSDAnnotator = mod.createOSDAnnotator;
+                this.W3CImageFormat = mod.W3CImageFormat;
+            }
+            if (!this.OSD) {
+                const mod = await import('openseadragon');
+                this.OSD = mod.default || mod;
+            }
             const sourceId = canvasId ?? 'unknown';
             // Initial drawing enabled state only if tool is NOT point (Annotorious handles others)
             const initialDrawingEnabled = this.isDrawingEnabled && this.activeTool !== 'point';
             const config = {
-                adapter: W3CImageFormat(sourceId),
+                adapter: this.W3CImageFormat(sourceId),
                 drawingEnabled: initialDrawingEnabled,
                 autoSave: false,
                 drawingMode: 'click',
@@ -90,7 +99,7 @@ export class AnnotationManager {
                     return ''; // No class for normal annotations
                 },
             };
-            const anno = createOSDAnnotator(viewer, config);
+            const anno = this.createOSDAnnotator(viewer, config);
             this.annotorious = anno;
             if (this.config.user) {
                 anno.setUser(this.config.user);
@@ -104,14 +113,13 @@ export class AnnotationManager {
             this.setupEvents();
             // Apply pending state
             this.updateDrawingMode(this.isDrawingEnabled);
-            this.annotorious.setVisible(true); // Always start visible
+            anno.setVisible(true); // Always start visible
         }
         catch (error) {
             console.error('[AnnotationManager] Failed to create annotator:', error);
         }
     }
     // ... (injectStyles remains same) ...
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handlePointClick(event) {
         if (!this.osdViewer || !this.annotorious)
             return;
@@ -128,8 +136,7 @@ export class AnnotationManager {
         // Calculate width/height based on "Screen Pixels" to ensure visibility
         // User requested a 2x2 pixel rectangle.
         const targetScreenPixels = 2;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const OSD = OpenSeadragon;
+        const OSD = this.OSD;
         const p1 = this.osdViewer.viewport.pointFromPixel(new OSD.Point(0, 0));
         const p2 = this.osdViewer.viewport.pointFromPixel(new OSD.Point(targetScreenPixels, 0));
         const imgP1 = tiledImage.viewportToImageCoordinates(p1);
@@ -175,7 +182,6 @@ export class AnnotationManager {
         this.annotorious.addAnnotation(annotation);
         // Wait for render cycle before selecting coverage
         setTimeout(() => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.annotorious.setSelected(id);
         }, 50);
     }
@@ -223,7 +229,6 @@ export class AnnotationManager {
     get availableTools() {
         return this.config.tools ?? ['rectangle', 'polygon', 'point'];
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     injectStyles(viewer) {
         if (!viewer.element)
             return;

package/dist/plugins/annotation-editor/loader.svelte.js

@@ -1,4 +1,4 @@
-import { manifestsState } from '../../state/manifests.svelte';
+// import { manifestsState } from '../../state/manifests.svelte';
 /**
  * Creates a reactive loader that syncs annotations from the adapter to the viewer state.
  * This runs independently of the Annotation Editor UI component.
@@ -21,7 +21,7 @@ export function createLoader(adapter) {
             // Load annotations for this canvas
             adapter
                 .load(manifestId, canvasId)
-                .then((annotations) => {
+                .then((_annotations) => {
                 // Success handling
             })
                 .catch((err) => {