triiiceratops 0.11.1 → 0.12.0

package/dist/components/ThumbnailGallery.svelte

@@ -61,6 +61,28 @@
     };
     let galleryElement: HTMLElement | null = $state(null);
 
+    // Initialize position and size from config if available (only once on mount)
+    $effect(() => {
+        if (
+            viewerState.config.gallery?.width &&
+            viewerState.config.gallery?.height
+        ) {
+            viewerState.gallerySize = {
+                width: viewerState.config.gallery.width,
+                height: viewerState.config.gallery.height,
+            };
+        }
+        if (
+            viewerState.config.gallery?.x !== undefined &&
+            viewerState.config.gallery?.y !== undefined
+        ) {
+            viewerState.galleryPosition = {
+                x: viewerState.config.gallery.x,
+                y: viewerState.config.gallery.y,
+            };
+        }
+    });
+
     // Generate thumbnail data
     let thumbnails = $derived.by(() => {
         if (!canvases || !Array.isArray(canvases))
@@ -83,8 +105,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 +191,7 @@
                                         (pObj['@id'] as string | undefined) ||
                                         JSON.stringify(pObj);
                                 }
-                            } catch (e) {
+                            } catch {
                                 // ignore
                             }
 
@@ -322,7 +344,26 @@
     }
 
     function selectCanvas(canvasId: string) {
-        viewerState.setCanvas(canvasId);
+        if (viewerState.viewingMode === 'paged') {
+            const canvasIndex = thumbnails.findIndex((t) => t.id === canvasId);
+            const singlePages = viewerState.pagedOffset;
+            // If within single pages section, select directly
+            if (canvasIndex < singlePages) {
+                viewerState.setCanvas(canvasId);
+            } else {
+                // Check if this is a left-hand page (start of a pair)
+                const pairPosition = (canvasIndex - singlePages) % 2;
+                if (pairPosition === 0) {
+                    viewerState.setCanvas(canvasId);
+                } else {
+                    // Right-hand page, select the left page of this pair
+                    const prevCanvas = thumbnails[canvasIndex - 1];
+                    viewerState.setCanvas(prevCanvas.id);
+                }
+            }
+        } else {
+            viewerState.setCanvas(canvasId);
+        }
     }
 
     // State for docking
@@ -384,6 +425,8 @@
             (dockSide === 'none' && viewerState.gallerySize.height < 320),
     );
 
+    let fixedHeight = $derived(viewerState.galleryFixedHeight);
+
     function startDrag(e: MouseEvent) {
         if (!draggable) return; // Dragging disabled in config
         if ((e.target as HTMLElement).closest('.resize-handle')) return; // Don't drag if resizing
@@ -444,6 +487,53 @@
             dockSide = 'none';
         }
     }
+
+    // Grouped thumbnail mode (for two-page mode)
+    const groupedThumbnailIndices = $derived.by(() => {
+        const indices: number[] = [];
+        if (viewerState.viewingMode === 'paged' && canvases) {
+            // Single pages at the start: pagedOffset (default 0, shifted = 1)
+            const singlePages = viewerState.pagedOffset;
+            // Add indices for single pages
+            for (let i = 0; i < singlePages && i < canvases.length; i++) {
+                indices.push(i);
+            }
+            // Add indices for paired pages (step by 2 starting from singlePages)
+            for (let i = singlePages; i < canvases.length; i += 2) {
+                indices.push(i);
+            }
+        }
+        return indices;
+    });
+
+    const groupedThumbnails = $derived.by(() => {
+        const groups: Array<{
+            id: string;
+            label: string;
+            srcs: string[];
+            index: number;
+        }> = [];
+        const thumbs = thumbnails;
+        const singlePages = viewerState.pagedOffset;
+        for (const i of groupedThumbnailIndices) {
+            const first = thumbs[i];
+            // Only pair if we're past the single pages section
+            const second = i < singlePages ? null : thumbs[i + 1];
+            const groupId = first.id;
+            const groupLabel = first.label;
+            const groupSrcs = [first.src];
+            if (second) {
+                groupSrcs.push(second.src);
+            }
+            groups.push({
+                id: groupId,
+                label: groupLabel,
+                srcs: groupSrcs,
+                index: i,
+            });
+        }
+        return groups;
+    });
 </script>
 
 {#if viewerState.showThumbnailGallery}
@@ -514,44 +604,145 @@
                     : 'grid gap-2'}
                 style={isHorizontal
                     ? ''
-                    : 'grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));'}
+                    : `grid-template-columns: repeat(auto-fill, minmax(${fixedHeight}px, 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-[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-3/4 bg-base-300 rounded overflow-hidden relative w-full flex items-center justify-center"
+                {#if viewerState.viewingMode === 'paged'}
+                    <!-- grouped thumbnail display -->
+                    {#each groupedThumbnails as thumbGroup}
+                        <button
+                            class="group flex flex-col gap-1 p-1 rounded hover:bg-base-200 transition-colors text-left relative shrink-0 {isHorizontal
+                                ? 'w-auto'
+                                : thumbGroup.srcs.length > 1
+                                  ? 'col-span-2'
+                                  : ''} {viewerState.canvasId === thumbGroup.id
+                                ? 'ring-2 ring-primary bg-primary/5'
+                                : ''}"
+                            style={isHorizontal
+                                ? `height: ${fixedHeight + 24}px`
+                                : ''}
+                            onclick={() => selectCanvas(thumbGroup.id)}
+                            data-id={thumbGroup.id}
+                            aria-label="Select canvas {thumbGroup.label}"
                         >
-                            {#if thumb.src}
-                                <img
-                                    src={thumb.src}
-                                    alt={thumb.label}
-                                    class="object-contain w-full h-full"
-                                    loading="lazy"
-                                    draggable="false"
-                                />
-                            {:else}
-                                <span class="opacity-20 text-4xl">?</span>
-                            {/if}
-                        </div>
-                        <div
-                            class="text-xs font-medium truncate w-full opacity-70 group-hover:opacity-100"
+                            <div
+                                class="{isHorizontal
+                                    ? 'h-full w-auto flex-row'
+                                    : thumbGroup.srcs.length > 1
+                                      ? 'aspect-3/2 w-full'
+                                      : 'aspect-3/4 w-full'} bg-base-300 rounded overflow-hidden relative flex items-center justify-center gap-px"
+                                style={isHorizontal
+                                    ? `height: ${fixedHeight}px`
+                                    : ''}
+                            >
+                                <div
+                                    class="flex items-center justify-center overflow-hidden {isHorizontal
+                                        ? 'h-full w-auto'
+                                        : 'h-full ' +
+                                          (thumbGroup.srcs.length > 1
+                                              ? 'w-1/2'
+                                              : 'w-full')}"
+                                >
+                                    {#if thumbGroup.srcs[0]}
+                                        <img
+                                            src={thumbGroup.srcs[0]}
+                                            alt={thumbGroup.label}
+                                            class="object-contain {isHorizontal
+                                                ? 'h-full w-auto'
+                                                : 'w-full h-full'} {thumbGroup
+                                                .srcs.length > 1
+                                                ? 'object-right'
+                                                : 'object-center'}"
+                                            loading="lazy"
+                                            draggable="false"
+                                        />
+                                    {:else}
+                                        <span class="opacity-20 text-4xl"
+                                            >?</span
+                                        >
+                                    {/if}
+                                </div>
+                                {#if thumbGroup.srcs.length > 1}
+                                    <div
+                                        class="flex items-center justify-center overflow-hidden {isHorizontal
+                                            ? 'h-full w-auto'
+                                            : 'h-full w-1/2'}"
+                                    >
+                                        {#if thumbGroup.srcs[1]}
+                                            <img
+                                                src={thumbGroup.srcs[1]}
+                                                alt={thumbGroup.label}
+                                                class="object-contain {isHorizontal
+                                                    ? 'h-full w-auto'
+                                                    : 'w-full h-full'} object-left"
+                                                loading="lazy"
+                                                draggable="false"
+                                            />
+                                        {:else}
+                                            <span class="opacity-20 text-4xl"
+                                                >?</span
+                                            >
+                                        {/if}
+                                    </div>
+                                {/if}
+                            </div>
+                            <div
+                                class="text-xs font-medium truncate w-full opacity-70 group-hover:opacity-100"
+                            >
+                                <span class="font-bold mr-1"
+                                    >{thumbGroup.index + 1}.</span
+                                >
+                                {thumbGroup.label}
+                            </div>
+                        </button>
+                    {/each}
+                {:else}
+                    {#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-auto'
+                                : ''} {viewerState.canvasId === thumb.id
+                                ? 'ring-2 ring-primary bg-primary/5'
+                                : ''}"
+                            style={isHorizontal
+                                ? `height: ${fixedHeight + 24}px`
+                                : ''}
+                            onclick={() => selectCanvas(thumb.id)}
+                            data-id={thumb.id}
+                            aria-label="Select canvas {thumb.label}"
                         >
-                            <span class="font-bold mr-1"
-                                >{thumb.index + 1}.</span
+                            <div
+                                class="{isHorizontal
+                                    ? 'h-full w-auto'
+                                    : 'aspect-3/4 w-full'} bg-base-300 rounded overflow-hidden relative flex items-center justify-center"
+                                style={isHorizontal
+                                    ? `height: ${fixedHeight}px`
+                                    : ''}
+                            >
+                                {#if thumb.src}
+                                    <img
+                                        src={thumb.src}
+                                        alt={thumb.label}
+                                        class="object-contain {isHorizontal
+                                            ? 'h-full w-auto'
+                                            : 'w-full h-full'}"
+                                        loading="lazy"
+                                        draggable="false"
+                                    />
+                                {:else}
+                                    <span class="opacity-20 text-4xl">?</span>
+                                {/if}
+                            </div>
+                            <div
+                                class="text-xs font-medium truncate w-full opacity-70 group-hover:opacity-100"
                             >
-                            {thumb.label}
-                        </div>
-                    </button>
-                {/each}
+                                <span class="font-bold mr-1"
+                                    >{thumb.index + 1}.</span
+                                >
+                                {thumb.label}
+                            </div>
+                        </button>
+                    {/each}
+                {/if}
             </div>
         </div>
 

package/dist/components/Toolbar.svelte

@@ -7,6 +7,8 @@
     import ChatCenteredText from 'phosphor-svelte/lib/ChatCenteredText';
     import Info from 'phosphor-svelte/lib/Info';
     import List from 'phosphor-svelte/lib/List';
+    import BookOpen from 'phosphor-svelte/lib/BookOpen';
+    import Scroll from 'phosphor-svelte/lib/Scroll';
     import X from 'phosphor-svelte/lib/X';
     import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
     import { m, language } from '../state/i18n.svelte';
@@ -34,10 +36,11 @@
     const showFullscreen = $derived(toolbarConfig.showFullscreen !== false);
     const showAnnotations = $derived(toolbarConfig.showAnnotations !== false);
     const showInfo = $derived(toolbarConfig.showInfo !== false);
+    const showViewingMode = $derived(toolbarConfig.showViewingMode !== false);
 
     // 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),
         );
@@ -46,6 +49,18 @@
     function toggleOpen() {
         viewerState.toggleToolbar();
     }
+
+    let isOverflowVisible = $state(false);
+    $effect(() => {
+        if (isOpen) {
+            const timer = setTimeout(() => {
+                isOverflowVisible = true;
+            }, 320); // Slightly longer than 300ms to ensure transition is done
+            return () => clearTimeout(timer);
+        } else {
+            isOverflowVisible = false;
+        }
+    });
 </script>
 
 <div
@@ -60,7 +75,7 @@
     <!-- Collapsible Toolbar -->
     <div
         class={[
-            'pointer-events-auto bg-base-100/95 backdrop-blur shadow-xl transition-all duration-300 ease-in-out flex overflow-hidden',
+            'pointer-events-auto bg-base-100/95 backdrop-blur shadow-xl transition-all duration-300 ease-in-out flex',
             // Layout based on position
             isTop &&
                 'flex-row-reverse h-12 w-auto max-w-full rounded-b-xl border-x border-b border-base-200 origin-top',
@@ -76,6 +91,9 @@
             !isOpen && !isTop && 'w-0 opacity-0',
             !isOpen && !isTop && isLeft && '-translate-x-full',
             !isOpen && !isTop && !isLeft && 'translate-x-full',
+
+            // Overflow handling
+            isOverflowVisible ? 'overflow-visible' : 'overflow-hidden',
         ]}
     >
         <!-- Close Button (Inside Menu) -->
@@ -104,13 +122,19 @@
             <div class={isTop ? 'w-2' : 'h-2'}></div>
         {/if}
 
+        <!-- Scrollable Actions -->
         <ul
             class={[
                 'menu menu-md gap-2 flex-nowrap items-center min-h-0',
+                isTop && 'px-2 py-1 menu-horizontal w-auto flex-row-reverse',
                 isTop &&
-                    'px-2 py-1 menu-horizontal w-auto overflow-x-auto overflow-y-hidden flex-row-reverse',
+                    !isOverflowVisible &&
+                    'overflow-x-auto overflow-y-hidden',
+                isTop && isOverflowVisible && 'overflow-visible',
                 !isTop &&
+                    !isOverflowVisible &&
                     'py-2 px-1 flex-1 overflow-y-auto overflow-x-hidden w-12',
+                !isTop && isOverflowVisible && 'py-2 px-1 flex-1 w-12',
             ]}
         >
             <!-- --- Standard Actions --- -->
@@ -157,6 +181,81 @@
                 </li>
             {/if}
 
+            {#if showViewingMode}
+                <li
+                    class="dropdown {isTop
+                        ? 'dropdown-bottom'
+                        : isLeft
+                          ? 'dropdown-right'
+                          : 'dropdown-left'}"
+                >
+                    <div
+                        tabindex="0"
+                        role="button"
+                        class="flex items-center justify-center"
+                        use:tooltip={{
+                            content: m.viewing_mode_label(),
+                            position: tooltipPos,
+                        }}
+                        aria-label={m.viewing_mode_label()}
+                    >
+                        {#if viewerState.viewingMode === 'paged'}
+                            <BookOpen size={24} weight="bold" />
+                        {:else}
+                            <Scroll size={24} weight="bold" />
+                        {/if}
+                    </div>
+                    <ul
+                        tabindex="-1"
+                        class="dropdown-content z-50 menu p-2 shadow bg-base-100 rounded-box w-48 border border-base-200 font-normal {isTop
+                            ? 'left-1/2 -translate-x-1/2'
+                            : ''}"
+                    >
+                        <li>
+                            <button
+                                class={viewerState.viewingMode === 'individuals'
+                                    ? 'active'
+                                    : ''}
+                                onclick={() =>
+                                    viewerState.setViewingMode('individuals')}
+                            >
+                                <Scroll size={16} />
+                                {m.viewing_mode_individuals()}
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                class={viewerState.viewingMode === 'paged'
+                                    ? 'active'
+                                    : ''}
+                                onclick={() =>
+                                    viewerState.setViewingMode('paged')}
+                            >
+                                <BookOpen size={16} />
+                                {m.viewing_mode_paged()}
+                            </button>
+                        </li>
+                        {#if viewerState.viewingMode === 'paged'}
+                            <div class="divider my-1"></div>
+                            <li>
+                                <label class="label cursor-pointer py-1 gap-2">
+                                    <span class="label-text text-sm"
+                                        >{m.viewing_mode_shift_pairing()}</span
+                                    >
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox checkbox-sm"
+                                        checked={viewerState.pagedOffset === 1}
+                                        onchange={() =>
+                                            viewerState.togglePagedOffset()}
+                                    />
+                                </label>
+                            </li>
+                        {/if}
+                    </ul>
+                </li>
+            {/if}
+
             {#if showFullscreen}
                 <li>
                     <button
@@ -227,7 +326,7 @@
             {/if}
 
             <!-- Separator if both groups exist -->
-            {#if (showSearch || showGallery || showFullscreen || showAnnotations || showInfo) && sortedPluginButtons.length > 0}
+            {#if (showSearch || showGallery || showFullscreen || showAnnotations || showInfo || showViewingMode) && sortedPluginButtons.length > 0}
                 <div
                     class={[
                         'divider',
@@ -241,9 +340,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>

package/dist/components/TriiiceratopsViewer.svelte

@@ -234,6 +234,19 @@
 
         // Use Manifesto to get images
         let images = canvas.getImages();
+        if (internalViewerState.viewingMode === 'paged') {
+            // Single pages at the start: pagedOffset (default 0, shifted = 1)
+            const singlePages = internalViewerState.pagedOffset;
+            // Only show two-page spread if we're past the single pages section
+            if (currentCanvasIndex >= singlePages) {
+                const nextIndex = currentCanvasIndex + 1;
+                if (nextIndex < canvases.length) {
+                    const nextCanvas = canvases[nextIndex];
+                    const nextImages = nextCanvas.getImages();
+                    images = images.concat(nextImages);
+                }
+            }
+        }
 
         // Fallback for IIIF v3: iterate content if images is empty
         if ((!images || !images.length) && canvas.getContent) {
@@ -251,7 +264,14 @@
             return null;
         }
 
-        const annotation = images[0];
+        // Map images to tile sources, in two page mode, this will get two image sources
+        const tileSourcesArray = images.map((annotation: any) =>
+            getImageService(annotation),
+        );
+        return tileSourcesArray;
+    });
+
+    function getImageService(annotation: any) {
         let resource = annotation.getResource ? annotation.getResource() : null;
 
         // v3 fallback: getBody
@@ -357,7 +377,7 @@
         );
         const url = resourceId;
         return { type: 'image', url };
-    });
+    }
 </script>
 
 <div
@@ -385,7 +405,11 @@
 
             <!-- Gallery (when docked left) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'left'}
-                <div class="h-full w-[140px] pointer-events-auto relative">
+                <div
+                    class="h-full pointer-events-auto relative"
+                    style="width: {internalViewerState.galleryFixedHeight +
+                        40}px"
+                >
                     <ThumbnailGallery {canvases} />
                 </div>
             {/if}
@@ -411,7 +435,8 @@
         <!-- Top Area (Gallery) -->
         {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'top'}
             <div
-                class="flex-none h-40 w-full pointer-events-auto relative z-20"
+                class="flex-none w-full pointer-events-auto relative z-20"
+                style="height: {internalViewerState.galleryFixedHeight + 50}px"
             >
                 <ThumbnailGallery {canvases} />
             </div>
@@ -438,12 +463,7 @@
                     {manifestData.error}
                 </div>
             {:else if tileSources}
-                {#key tileSources}
-                    <OSDViewer
-                        {tileSources}
-                        viewerState={internalViewerState}
-                    />
-                {/key}
+                <OSDViewer {tileSources} viewerState={internalViewerState} />
             {:else if manifestData && !manifestData.isFetching && !tileSources}
                 <div
                     class="w-full h-full flex items-center justify-center text-base-content/50"
@@ -484,7 +504,8 @@
         <!-- Bottom Area (Gallery) -->
         {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'bottom'}
             <div
-                class="flex-none h-40 w-full pointer-events-auto relative z-20"
+                class="flex-none w-full pointer-events-auto relative z-20"
+                style="height: {internalViewerState.galleryFixedHeight + 50}px"
             >
                 <ThumbnailGallery {canvases} />
             </div>
@@ -520,7 +541,11 @@
 
             <!-- Gallery (when docked right) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'right'}
-                <div class="h-full w-[140px] pointer-events-auto relative">
+                <div
+                    class="h-full pointer-events-auto relative"
+                    style="width: {internalViewerState.galleryFixedHeight +
+                        40}px"
+                >
                     <ThumbnailGallery {canvases} />
                 </div>
             {/if}

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-CmWuQiOc.js}

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

package/dist/paraglide/messages/_index.d.ts

@@ -121,4 +121,13 @@ export * from "./image_filters_reset.js";
 export * from "./annotation_tool_rectangle.js";
 export * from "./annotation_tool_polygon.js";
 export * from "./annotation_tool_point.js";
+export * from "./viewing_mode_label.js";
+export * from "./viewing_mode_individuals.js";
+export * from "./viewing_mode_paged.js";
+export * from "./viewing_mode_shift_pairing.js";
+export * from "./settings_toggle_show_viewing_mode.js";
+export * from "./toggle_two_page_mode.js";
+export * from "./toggle_single_page_mode.js";
+export * from "./show_mode_toggle.js";
+export * from "./two_page_mode.js";
 export type LocalizedString = import("../runtime.js").LocalizedString;