triiiceratops 0.10.0 → 0.10.2

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

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

package/dist/components/SearchPanel.svelte

@@ -33,8 +33,8 @@
         }
     }
 
-    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);
         }
@@ -121,32 +121,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' ||
@@ -493,20 +514,21 @@
                     : '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'
                             : ''}"
                         onclick={() => selectCanvas(thumb.id)}
+                        data-id={thumb.id}
                         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-DZrbHhqM.js}

@@ -1,4 +1,4 @@
-import { a as t } from "./X-DZEgXrJ8.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-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-Dgb3I7Ob.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-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-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-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/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) {
@@ -290,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'
@@ -306,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,
                         });
                     }
                 }
@@ -408,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,
+                        };
+                    });
                 });
             });
         }