triiiceratops 0.10.0 → 0.10.1

package/dist/{annotation_tool_point-CZKsj4Nk.js → annotation_tool_point-CCJi2I8J.js}

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

package/dist/components/ThumbnailGallery.svelte

@@ -483,7 +483,7 @@
 
         <!-- Content (Grid or Horizontal Scroll) -->
         <div
-            class="flex-1 p-1 bg-base-100 {isHorizontal
+            class="flex-1 px-1 bg-base-100 {isHorizontal
                 ? 'overflow-x-auto overflow-y-hidden h-full'
                 : 'overflow-y-auto overflow-x-hidden'}"
         >
@@ -493,12 +493,12 @@
                     : 'grid gap-2'}
                 style={isHorizontal
                     ? ''
-                    : 'grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));'}
+                    : 'grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));'}
             >
                 {#each thumbnails as thumb}
                     <button
                         class="group flex flex-col gap-1 p-1 rounded hover:bg-base-200 transition-colors text-left relative shrink-0 {isHorizontal
-                            ? 'w-[140px]'
+                            ? 'w-[90px]'
                             : ''} {viewerState.canvasId === thumb.id
                             ? 'ring-2 ring-primary bg-primary/5'
                             : ''}"
@@ -506,7 +506,7 @@
                         aria-label="Select canvas {thumb.label}"
                     >
                         <div
-                            class="aspect-4/3 bg-base-300 rounded overflow-hidden relative w-full flex items-center justify-center"
+                            class="aspect-3/4 bg-base-300 rounded overflow-hidden relative w-full flex items-center justify-center"
                         >
                             {#if thumb.src}
                                 <img

package/dist/components/TriiiceratopsViewer.svelte

@@ -176,10 +176,45 @@
             ),
     );
 
-    let manifestData = $derived(internalViewerState.manifest);
+    let manifestData = $derived(internalViewerState.manifestEntry);
     let canvases = $derived(internalViewerState.canvases);
     let currentCanvasIndex = $derived(internalViewerState.currentCanvasIndex);
 
+    // Effect to trigger deferred search once manifest is loaded
+    $effect(() => {
+        if (
+            internalViewerState.pendingSearchQuery &&
+            manifestData &&
+            !manifestData.isFetching &&
+            !manifestData.error &&
+            manifestData.manifesto
+        ) {
+            const query = internalViewerState.pendingSearchQuery;
+            internalViewerState.pendingSearchQuery = null;
+            console.log(
+                '[Viewer] Manifest loaded, triggering deferred search:',
+                query,
+            );
+            internalViewerState.search(query);
+        }
+    });
+
+    // Auto-select first canvas if none selected
+    $effect(() => {
+        if (
+            canvases &&
+            canvases.length > 0 &&
+            !internalViewerState.canvasId &&
+            !manifestData?.isFetching
+        ) {
+            console.log(
+                '[Viewer] Auto-selecting first canvas:',
+                canvases[0].id,
+            );
+            internalViewerState.setCanvas(canvases[0].id);
+        }
+    });
+
     let tileSources = $derived.by(() => {
         if (
             !canvases ||
@@ -340,7 +375,7 @@
         >
             <!-- Gallery (when docked left) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'left'}
-                <div class="h-full w-[200px] pointer-events-auto relative">
+                <div class="h-full w-[140px] pointer-events-auto relative">
                     <ThumbnailGallery {canvases} />
                 </div>
             {/if}
@@ -366,7 +401,7 @@
         <!-- Top Area (Gallery) -->
         {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'top'}
             <div
-                class="flex-none h-[140px] w-full pointer-events-auto relative z-20"
+                class="flex-none h-[160px] w-full pointer-events-auto relative z-20"
             >
                 <ThumbnailGallery {canvases} />
             </div>
@@ -399,7 +434,7 @@
                         viewerState={internalViewerState}
                     />
                 {/key}
-            {:else}
+            {:else if manifestData && !manifestData.isFetching && !tileSources}
                 <div
                     class="w-full h-full flex items-center justify-center text-base-content/50"
                 >
@@ -444,7 +479,7 @@
         <!-- Bottom Area (Gallery) -->
         {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'bottom'}
             <div
-                class="flex-none h-[140px] w-full pointer-events-auto relative z-20"
+                class="flex-none h-[160px] w-full pointer-events-auto relative z-20"
             >
                 <ThumbnailGallery {canvases} />
             </div>
@@ -480,7 +515,7 @@
 
             <!-- Gallery (when docked right) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'right'}
-                <div class="h-full w-[200px] pointer-events-auto relative">
+                <div class="h-full w-[140px] pointer-events-auto relative">
                     <ThumbnailGallery {canvases} />
                 </div>
             {/if}
@@ -499,3 +534,33 @@
         </div>
     {/if}
 </div>
+
+<style>
+    /* Scoped scrollbar styles for the viewer */
+    :global(#triiiceratops-viewer *) {
+        scrollbar-width: thin;
+        scrollbar-color: var(--fallback-bc, oklch(var(--bc) / 0.2)) transparent;
+    }
+
+    :global(#triiiceratops-viewer ::-webkit-scrollbar) {
+        width: 4px;
+        height: 4px;
+    }
+
+    :global(#triiiceratops-viewer ::-webkit-scrollbar-track) {
+        background: transparent;
+    }
+
+    :global(#triiiceratops-viewer ::-webkit-scrollbar-thumb) {
+        background-color: var(--fallback-bc, oklch(var(--bc) / 0.2));
+        border-radius: 9999px;
+    }
+
+    :global(#triiiceratops-viewer ::-webkit-scrollbar-thumb:hover) {
+        background-color: var(--fallback-bc, oklch(var(--bc) / 0.4));
+    }
+
+    :global(#triiiceratops-viewer ::-webkit-scrollbar-corner) {
+        background: transparent;
+    }
+</style>

package/dist/{image_filters_reset-BEIf-_QA.js → image_filters_reset-CWe7vTJU.js}

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

package/dist/plugins/annotation-editor.js

@@ -4,10 +4,10 @@ var nt = (s, e, t) => Mf(s, typeof e != "symbol" ? e + "" : e, t);
 import "svelte/internal/disclose-version";
 import * as d from "svelte/internal/client";
 import { getContext as Rf, onMount as If, onDestroy as Cf } from "svelte";
-import { m as xl, g as as, l as Pf, s as Df, X as bl, c as Lf, V as Of } from "../X-DZEgXrJ8.js";
+import { m as xl, g as as, l as Pf, s as Df, X as bl, c as Lf, V as Of } from "../X-BUzsFa3u.js";
 import Hs from "openseadragon";
-import { A as Bf } from "../ArrowCounterClockwise-aFffCOKw.js";
-import { q as Nf, h as Ff, c as kf, j as Uf, k as $f, t as Gf, u as Hf, v as Vf, r as Xf, s as zf, m as jf, i as Yf, g as Wf, a as Zf, n as qf, f as Kf, e as Jf, b as Qf, d as ep, o as tp, l as sp, p as ip } from "../annotation_tool_point-CZKsj4Nk.js";
+import { A as Bf } from "../ArrowCounterClockwise-C6n_F9YZ.js";
+import { q as Nf, h as Ff, c as kf, j as Uf, k as $f, t as Gf, u as Hf, v as Vf, r as Xf, s as zf, m as jf, i as Yf, g as Wf, a as Zf, n as qf, f as Kf, e as Jf, b as Qf, d as ep, o as tp, l as sp, p as ip } from "../annotation_tool_point-CCJi2I8J.js";
 import "manifesto.js";
 var np = Object.defineProperty, rp = (s, e, t) => e in s ? np(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, El = (s, e, t) => rp(s, typeof e != "symbol" ? e + "" : e, t), wl = Object.prototype.hasOwnProperty;
 function Vs(s, e) {

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-DZEgXrJ8.js";
-import { A as d0 } from "../ArrowCounterClockwise-aFffCOKw.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-BEIf-_QA.js";
+import { l as l0, s as i0, X as n0, c as o0, V as c0, g as v0 } from "../X-BUzsFa3u.js";
+import { A as d0 } from "../ArrowCounterClockwise-C6n_F9YZ.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-CWe7vTJU.js";
 const G = {
   brightness: 100,
   contrast: 100,

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

@@ -1,4 +1,4 @@
-interface ManifestEntry {
+export interface ManifestEntry {
     json?: any;
     manifesto?: any;
     error?: any;
@@ -14,10 +14,10 @@ export declare class ManifestsState {
     getUserAnnotations(manifestId: string, canvasId: string): any[];
     fetchManifest(manifestId: string): Promise<void>;
     getManifest(manifestId: string): any;
+    getManifestEntry(manifestId: string): ManifestEntry | undefined;
     fetchAnnotationList(url: string): Promise<void>;
     getCanvases(manifestId: string): any;
     getAnnotations(manifestId: string, canvasId: string): any[];
     manualGetAnnotations(manifestId: string, canvasId: string): any[];
 }
 export declare const manifestsState: ManifestsState;
-export {};

package/dist/state/manifests.svelte.js

@@ -57,6 +57,9 @@ export class ManifestsState {
         const entry = this.manifests[manifestId];
         return entry?.manifesto;
     }
+    getManifestEntry(manifestId) {
+        return this.manifests[manifestId];
+    }
     async fetchAnnotationList(url) {
         if (this.manifests[url])
             return; // Already fetched or fetching

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

@@ -73,6 +73,7 @@ export declare class ViewerState {
     private dispatchStateChange;
     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;

package/dist/state/viewer.svelte.js

@@ -111,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() {
@@ -232,6 +229,7 @@ export class ViewerState {
         this.showMetadataDialog = !this.showMetadataDialog;
     }
     searchQuery = $state('');
+    pendingSearchQuery = $state(null);
     searchResults = $state([]);
     isSearching = $state(false);
     showSearchPanel = $state(false);
@@ -262,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) {