triiiceratops 0.11.1 → 0.12.0

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"
@@ -435,6 +434,49 @@
                                     />
                                 </label>
                             </li>
+                            <li>
+                                <label class="label cursor-pointer py-1">
+                                    <span class="label-text"
+                                        >{m.settings_toggle_show_viewing_mode()}</span
+                                    >
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox checkbox-xs"
+                                        checked={config.toolbar
+                                            ?.showViewingMode ?? true}
+                                        onchange={(e) => {
+                                            if (!config.toolbar)
+                                                config.toolbar = {};
+                                            config.toolbar.showViewingMode =
+                                                e.currentTarget.checked;
+                                        }}
+                                    />
+                                </label>
+                            </li>
+                            <li>
+                                <label class="label cursor-pointer py-1">
+                                    <span class="label-text"
+                                        >{m.viewing_mode_label()}</span
+                                    >
+                                    <select
+                                        class="select select-bordered select-xs"
+                                        value={config.viewingMode ??
+                                            'individuals'}
+                                        onchange={(e) => {
+                                            config.viewingMode = (
+                                                e.currentTarget as HTMLSelectElement
+                                            ).value as 'individuals' | 'paged';
+                                        }}
+                                    >
+                                        <option value="individuals"
+                                            >{m.viewing_mode_individuals()}</option
+                                        >
+                                        <option value="paged"
+                                            >{m.viewing_mode_paged()}</option
+                                        >
+                                    </select>
+                                </label>
+                            </li>
                         </ul>
                     </details>
                 </li>
@@ -535,6 +577,32 @@
                                     </select>
                                 </label>
                             </li>
+                            <li>
+                                <label class="label cursor-pointer py-1 gap-2">
+                                    <span class="label-text"
+                                        >Thumbnail Height</span
+                                    >
+                                    <input
+                                        type="range"
+                                        min="50"
+                                        max="300"
+                                        value={config.gallery?.fixedHeight ??
+                                            120}
+                                        class="range range-xs range-primary w-24"
+                                        oninput={(e) => {
+                                            if (!config.gallery)
+                                                config.gallery = {};
+                                            config.gallery.fixedHeight =
+                                                parseInt(e.currentTarget.value);
+                                        }}
+                                    />
+                                    <span
+                                        class="text-xs opacity-50 w-8 text-right"
+                                        >{config.gallery?.fixedHeight ??
+                                            120}px</span
+                                    >
+                                </label>
+                            </li>
                         </ul>
                     </details>
                 </li>
@@ -731,7 +799,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 +838,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';
@@ -16,6 +17,8 @@
 
     // Track OSD state changes for reactivity
     let osdVersion = $state(0);
+    // Track last opened tile source to prevent unnecessary resets
+    let lastTileSourceStr = '';
 
     // Get all annotations for current canvas (manifest + search)
     let allAnnotations = $derived.by(() => {
@@ -32,7 +35,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 +51,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 +163,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 +198,7 @@
         })();
 
         return () => {
+            mounted = false;
             viewer?.destroy();
             viewerState.osdViewer = null;
         };
@@ -225,7 +233,35 @@
     $effect(() => {
         if (!viewer || !tileSources) return;
 
-        viewer.open(tileSources);
+        // Check if source actually changed to avoid resetting zoom
+        const currentStr = JSON.stringify(tileSources);
+        if (currentStr === lastTileSourceStr) return;
+        lastTileSourceStr = currentStr;
+
+        if (
+            viewerState.viewingMode === 'paged' &&
+            tileSources instanceof Array &&
+            tileSources.length === 2
+        ) {
+            const secondPageLocation = 1.025;
+            const twoPageSpread = [
+                {
+                    tileSource: tileSources[0],
+                    x: 0,
+                    y: 0,
+                    width: 1.0,
+                },
+                {
+                    tileSource: tileSources[1],
+                    x: secondPageLocation, // small gap between pages
+                    y: 0,
+                    width: 1.0,
+                },
+            ];
+            viewer.open(twoPageSpread);
+        } else {
+            viewer.open(tileSources);
+        }
     });
 </script>
 

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