triiiceratops 0.10.1 → 0.10.3

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

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

package/dist/components/DemoHeader.svelte

@@ -539,6 +539,33 @@
                                     />
                                 </label>
                             </li>
+                            <li>
+                                <label class="label cursor-pointer py-1 gap-2">
+                                    <span class="label-text"
+                                        >{m.settings_select_dock_position()}</span
+                                    >
+                                    <select
+                                        class="select select-bordered select-xs w-24"
+                                        value={config.search?.position ??
+                                            'right'}
+                                        onchange={(e) => {
+                                            if (!config.search)
+                                                config.search = {};
+                                            config.search.position = (
+                                                e.currentTarget as HTMLSelectElement
+                                            ).value;
+                                        }}
+                                        onclick={(e) => e.stopPropagation()}
+                                    >
+                                        <option value="right"
+                                            >{m.settings_position_right()}</option
+                                        >
+                                        <option value="left"
+                                            >{m.settings_position_left()}</option
+                                        >
+                                    </select>
+                                </label>
+                            </li>
                             <li>
                                 <label class="label cursor-pointer py-1 gap-2">
                                     <span class="label-text"

package/dist/components/SearchPanel.svelte

@@ -33,13 +33,14 @@
         }
     }
 
-    function navigate(result: any) {
-        const canvas = viewerState.canvases[result.canvasIndex];
+    function navigate(canvasIndex: number) {
+        const canvas = viewerState.canvases[canvasIndex];
         if (canvas) {
             viewerState.setCanvas(canvas.id);
         }
     }
     let width = $derived(viewerState.config.search?.width ?? '320px');
+    let position = $derived(viewerState.config.search?.position ?? 'right');
 </script>
 
 <!-- Drawer / Panel -->
@@ -48,7 +49,9 @@
         class="h-full bg-base-200 shadow-2xl z-100 flex flex-col transition-[width] duration-200 {viewerState
             .config.transparentBackground
             ? ''
-            : 'border-l border-base-300'}"
+            : position === 'left'
+              ? 'border-r border-base-300'
+              : 'border-l border-base-300'}"
         style="width: {width}"
         role="dialog"
         aria-label={m.search_panel_title()}
@@ -121,32 +124,44 @@
                     })}
                 </div>
 
-                {#each viewerState.searchResults as result, i}
+                {#each viewerState.searchResults as group}
                     <button
-                        class="w-full text-left card bg-base-100 shadow hover:shadow-md transition-all p-4 text-sm group border border-transparent hover:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
-                        onclick={() => navigate(result)}
+                        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"
+                        onclick={() => navigate(group.canvasIndex)}
                     >
-                        <div class="flex justify-between items-baseline mb-1">
-                            <span
-                                class="font-bold text-xs opacity-70 bg-base-200 px-1.5 py-0.5 rounded"
-                                >{result.canvasLabel}</span
+                        <div
+                            class="text-sm font-bold opacity-80 bg-base-200/50 flex items-center justify-between py-2 px-3 border-b border-base-200"
+                        >
+                            <span>{group.canvasLabel}</span>
+                            <span class="badge badge-sm badge-ghost"
+                                >{group.hits.length}
+                                {group.hits.length === 1
+                                    ? 'match'
+                                    : 'matches'}</span
                             >
                         </div>
-
-                        {#if result.type === 'hit'}
-                            <div class="leading-relaxed">
-                                <span>{@html result.before}</span>
-                                <span
-                                    class="bg-yellow-200 text-yellow-900 font-bold px-0.5 rounded"
-                                    >{@html result.match}</span
+                        <div class="p-0">
+                            {#each group.hits.slice(0, 1) as result}
+                                <div
+                                    class="p-3 text-sm border-b border-base-200 last:border-none hover:bg-base-200/30 transition-colors"
                                 >
-                                <span>{@html result.after}</span>
-                            </div>
-                        {:else}
-                            <div class="leading-relaxed">
-                                {result.match}
-                            </div>
-                        {/if}
+                                    {#if result.type === 'hit'}
+                                        <div class="leading-relaxed">
+                                            <span>{@html result.before}</span>
+                                            <span
+                                                class="bg-yellow-200 text-yellow-900 font-bold px-0.5 rounded"
+                                                >{@html result.match}</span
+                                            >
+                                            <span>{@html result.after}</span>
+                                        </div>
+                                    {:else}
+                                        <div class="leading-relaxed">
+                                            {@html result.match}
+                                        </div>
+                                    {/if}
+                                </div>
+                            {/each}
+                        </div>
                     </button>
                 {/each}
             {/if}

package/dist/components/ThumbnailGallery.svelte

@@ -356,6 +356,27 @@
         }
     });
 
+    // Auto-scroll active thumbnail into view
+    $effect(() => {
+        if (!galleryElement || !viewerState.canvasId) return;
+        // Use a slight timeout to ensure DOM is ready/layout is stable if needed,
+        // though usually effect runs after render.
+        const id = viewerState.canvasId;
+
+        // requestAnimationFrame to ensure we are in a good painting frame?
+        // Or just direct. Svelte 5 effects are post-dom-update.
+        const activeEl = galleryElement.querySelector(
+            `[data-id="${CSS.escape(id)}"]`,
+        );
+        if (activeEl) {
+            activeEl.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center',
+            });
+        }
+    });
+
     // Switch to horizontal layout if height is small or docked to top/bottom
     let isHorizontal = $derived(
         dockSide === 'top' ||
@@ -483,7 +504,7 @@
 
         <!-- Content (Grid or Horizontal Scroll) -->
         <div
-            class="flex-1 px-1 bg-base-100 {isHorizontal
+            class="flex-1 p-1 bg-base-100 {isHorizontal
                 ? 'overflow-x-auto overflow-y-hidden h-full'
                 : 'overflow-y-auto overflow-x-hidden'}"
         >
@@ -503,6 +524,7 @@
                             ? 'ring-2 ring-primary bg-primary/5'
                             : ''}"
                         onclick={() => selectCanvas(thumb.id)}
+                        data-id={thumb.id}
                         aria-label="Select canvas {thumb.label}"
                     >
                         <div

package/dist/components/TriiiceratopsViewer.svelte

@@ -162,13 +162,16 @@
     let isLeftSidebarVisible = $derived(
         (internalViewerState.showThumbnailGallery &&
             internalViewerState.dockSide === 'left') ||
+            (internalViewerState.showSearchPanel &&
+                internalViewerState.config.search?.position === 'left') ||
             internalViewerState.pluginPanels.some(
                 (p) => p.position === 'left' && p.isVisible(),
             ),
     );
 
     let isRightSidebarVisible = $derived(
-        internalViewerState.showSearchPanel ||
+        (internalViewerState.showSearchPanel &&
+            internalViewerState.config.search?.position !== 'left') ||
             (internalViewerState.showThumbnailGallery &&
                 internalViewerState.dockSide === 'right') ||
             internalViewerState.pluginPanels.some(
@@ -373,6 +376,13 @@
                 ? ''
                 : 'bg-base-200 border-r border-base-300'}"
         >
+            <!-- Search Panel (when configured left) -->
+            {#if internalViewerState.showSearchPanel && internalViewerState.config.search?.position === 'left'}
+                <div class="h-full relative pointer-events-auto">
+                    <SearchPanel />
+                </div>
+            {/if}
+
             <!-- Gallery (when docked left) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'left'}
                 <div class="h-full w-[140px] pointer-events-auto relative">
@@ -507,7 +517,7 @@
                 : 'bg-base-200 border-l border-base-300'}"
         >
             <!-- Search Panel -->
-            {#if internalViewerState.showSearchPanel}
+            {#if internalViewerState.showSearchPanel && internalViewerState.config.search?.position !== 'left'}
                 <div class="h-full relative pointer-events-auto">
                     <SearchPanel />
                 </div>

package/dist/{image_filters_reset-CWe7vTJU.js → image_filters_reset-DZrbHhqM.js}

@@ -1,4 +1,4 @@
-import { a as t } from "./X-BUzsFa3u.js";
+import { a as t } from "./X-Dgb3I7Ob.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-BUzsFa3u.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-Dgb3I7Ob.js";
 import Hs from "openseadragon";
-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 { A as Bf } from "../ArrowCounterClockwise-CvTUOlYp.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-CKkqbVDq.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-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";
+import { l as l0, s as i0, X as n0, c as o0, V as c0, g as v0 } from "../X-Dgb3I7Ob.js";
+import { A as d0 } from "../ArrowCounterClockwise-CvTUOlYp.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-DZrbHhqM.js";
 const G = {
   brightness: 100,
   contrast: 100,

package/dist/state/viewer.svelte.js

@@ -292,7 +292,8 @@ export class ViewerState {
                 throw new Error('Search request failed');
             const data = await response.json();
             const resources = data.resources || [];
-            const processedResults = [];
+            // Group results by canvas index
+            const resultsByCanvas = new Map();
             // Helper to parse xywh
             const parseSelector = (onVal) => {
                 const val = typeof onVal === 'string'
@@ -308,73 +309,84 @@ export class ViewerState {
                     return coords; // [x, y, w, h]
                 return null;
             };
+            // Helper to unescape mark tags
+            const decodeMark = (str) => {
+                if (!str)
+                    return '';
+                return str
+                    .replace(/&lt;mark&gt;/g, '<mark>')
+                    .replace(/&lt;\/mark&gt;/g, '</mark>');
+            };
             if (data.hits) {
                 for (const hit of data.hits) {
                     // hits have property 'annotations' which is array of ids
-                    // Collapse all annotations for this hit into a single result per canvas
                     const annotations = hit.annotations || [];
-                    const hitBoundsByCanvas = new Map();
+                    // We need to determine which canvas this hit belongs to.
+                    // A hit might technically span annotations on multiple canvases (unlikely for IIIF Content Search),
+                    // but usually it's associated with specific annotations on one canvas.
+                    // We will take the first valid canvas we find for the annotations.
+                    let canvasIndex = -1;
+                    let bounds = null;
+                    let allBounds = [];
                     for (const annoId of annotations) {
                         const annotation = resources.find((r) => r['@id'] === annoId || r.id === annoId);
                         if (annotation && annotation.on) {
-                            // annotation.on can be "canvas-id" or "canvas-id#xywh=..."
                             const onVal = typeof annotation.on === 'string'
                                 ? annotation.on
                                 : annotation.on['@id'] || annotation.on.id;
                             const cleanOn = onVal.split('#')[0];
-                            const bounds = parseSelector(onVal);
-                            const canvasIndex = this.canvases.findIndex((c) => c.id === cleanOn);
-                            if (canvasIndex >= 0) {
-                                if (!hitBoundsByCanvas.has(canvasIndex)) {
-                                    const canvas = this.canvases[canvasIndex];
-                                    // Try to get a label
-                                    let label = 'Canvas ' + (canvasIndex + 1);
-                                    try {
-                                        if (canvas.getLabel) {
-                                            const l = canvas.getLabel();
-                                            if (Array.isArray(l) &&
-                                                l.length > 0)
-                                                label = l[0].value;
-                                            else if (typeof l === 'string')
-                                                label = l;
-                                        }
-                                        else if (canvas.label) {
-                                            // Fallback if raw object
-                                            if (typeof canvas.label === 'string')
-                                                label = canvas.label;
-                                            else if (Array.isArray(canvas.label))
-                                                label = canvas.label[0]?.value;
-                                        }
-                                    }
-                                    catch (e) {
-                                        /* ignore */
-                                    }
-                                    hitBoundsByCanvas.set(canvasIndex, {
-                                        label: String(label),
-                                        bounds: [],
-                                    });
+                            const b = parseSelector(onVal);
+                            const cIndex = this.canvases.findIndex((c) => c.id === cleanOn);
+                            if (cIndex >= 0) {
+                                // If we haven't set a canvas yet, set it
+                                if (canvasIndex === -1) {
+                                    canvasIndex = cIndex;
                                 }
-                                if (bounds) {
-                                    hitBoundsByCanvas
-                                        .get(canvasIndex)
-                                        .bounds.push(bounds);
+                                // If we found bounds, add them
+                                if (b) {
+                                    allBounds.push(b);
+                                    if (!bounds)
+                                        bounds = b;
                                 }
                             }
                         }
                     }
-                    // Create one result per canvas for this hit
-                    for (const [canvasIndex, data] of hitBoundsByCanvas) {
-                        processedResults.push({
+                    if (canvasIndex >= 0) {
+                        if (!resultsByCanvas.has(canvasIndex)) {
+                            const canvas = this.canvases[canvasIndex];
+                            let label = 'Canvas ' + (canvasIndex + 1);
+                            try {
+                                if (canvas.getLabel) {
+                                    const l = canvas.getLabel();
+                                    if (Array.isArray(l) && l.length > 0)
+                                        label = l[0].value;
+                                    else if (typeof l === 'string')
+                                        label = l;
+                                }
+                                else if (canvas.label) {
+                                    // Fallback if raw object
+                                    if (typeof canvas.label === 'string')
+                                        label = canvas.label;
+                                    else if (Array.isArray(canvas.label))
+                                        label = canvas.label[0]?.value;
+                                }
+                            }
+                            catch (e) {
+                                /* ignore */
+                            }
+                            resultsByCanvas.set(canvasIndex, {
+                                canvasIndex,
+                                canvasLabel: String(label),
+                                hits: [],
+                            });
+                        }
+                        resultsByCanvas.get(canvasIndex).hits.push({
                             type: 'hit',
-                            before: hit.before,
-                            match: hit.match,
-                            after: hit.after,
-                            canvasIndex,
-                            canvasLabel: data.label,
-                            // Store all bounds for this hit on this canvas
-                            allBounds: data.bounds,
-                            // Keep first bounds for backwards compatibility
-                            bounds: data.bounds.length > 0 ? data.bounds[0] : null,
+                            before: decodeMark(hit.before),
+                            match: decodeMark(hit.match),
+                            after: decodeMark(hit.after),
+                            bounds,
+                            allBounds,
                         });
                     }
                 }
@@ -410,46 +422,54 @@ export class ViewerState {
                         catch (e) {
                             /* ignore */
                         }
-                        processedResults.push({
+                        if (!resultsByCanvas.has(canvasIndex)) {
+                            resultsByCanvas.set(canvasIndex, {
+                                canvasIndex,
+                                canvasLabel: String(label),
+                                hits: [],
+                            });
+                        }
+                        resultsByCanvas.get(canvasIndex).hits.push({
                             type: 'resource',
-                            match: res.resource && res.resource.chars
+                            match: decodeMark(res.resource && res.resource.chars
                                 ? res.resource.chars
-                                : res.chars || '',
-                            canvasIndex,
-                            canvasLabel: String(label),
+                                : res.chars || ''),
                             bounds,
+                            allBounds: bounds ? [bounds] : [],
                         });
                     }
                 }
             }
-            this.searchResults = processedResults;
+            // Convert Map to Array and Sort
+            this.searchResults = Array.from(resultsByCanvas.values()).sort((a, b) => a.canvasIndex - b.canvasIndex);
             // Generate ephemeral search annotations
-            // Create one annotation per bound location (flatten allBounds)
+            // We need to flatten our grouped structure to generate the annotations list
             let annotationIndex = 0;
-            this.searchAnnotations = processedResults.flatMap((r) => {
-                const canvas = this.canvases[r.canvasIndex];
-                // Use allBounds if available, otherwise fall back to single bounds
-                const boundsArray = r.allBounds && r.allBounds.length > 0
-                    ? r.allBounds
-                    : r.bounds
-                        ? [r.bounds]
-                        : [];
-                return boundsArray.map((bounds) => {
-                    const on = `${canvas.id}#xywh=${bounds.join(',')}`;
-                    return {
-                        '@id': `urn:search-hit:${annotationIndex++}`,
-                        '@type': 'oa:Annotation',
-                        motivation: 'sc:painting',
-                        on: on,
-                        canvasId: canvas.id,
-                        resource: {
-                            '@type': 'cnt:ContentAsText',
-                            chars: r.match,
-                        },
-                        // Flag to identify styling in Overlay?
-                        // Or just standard rendering.
-                        isSearchHit: true,
-                    };
+            this.searchAnnotations = this.searchResults.flatMap((group) => {
+                const canvas = this.canvases[group.canvasIndex];
+                return group.hits.flatMap((hit) => {
+                    const boundsArray = hit.allBounds && hit.allBounds.length > 0
+                        ? hit.allBounds
+                        : hit.bounds
+                            ? [hit.bounds]
+                            : [];
+                    return boundsArray.map((bounds) => {
+                        const on = `${canvas.id}#xywh=${bounds.join(',')}`;
+                        return {
+                            '@id': `urn:search-hit:${annotationIndex++}`,
+                            '@type': 'oa:Annotation',
+                            motivation: 'sc:painting',
+                            on: on,
+                            canvasId: canvas.id,
+                            resource: {
+                                '@type': 'cnt:ContentAsText',
+                                chars: hit.match,
+                            },
+                            // Flag to identify styling in Overlay?
+                            // Or just standard rendering.
+                            isSearchHit: true,
+                        };
+                    });
                 });
             });
         }