triiiceratops 0.11.2 → 0.12.1

package/dist/{annotation_tool_point-rZvdAtGa.js → annotation_tool_point-LoRp_nrI.js}

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

package/dist/components/DemoHeader.svelte

@@ -434,6 +434,49 @@
                                     />
                                 </label>
                             </li>
+                            <li>
+                                <label class="label cursor-pointer py-1">
+                                    <span class="label-text"
+                                        >{m.settings_toggle_show_viewing_mode()}</span
+                                    >
+                                    <input
+                                        type="checkbox"
+                                        class="checkbox checkbox-xs"
+                                        checked={config.toolbar
+                                            ?.showViewingMode ?? true}
+                                        onchange={(e) => {
+                                            if (!config.toolbar)
+                                                config.toolbar = {};
+                                            config.toolbar.showViewingMode =
+                                                e.currentTarget.checked;
+                                        }}
+                                    />
+                                </label>
+                            </li>
+                            <li>
+                                <label class="label cursor-pointer py-1">
+                                    <span class="label-text"
+                                        >{m.viewing_mode_label()}</span
+                                    >
+                                    <select
+                                        class="select select-bordered select-xs"
+                                        value={config.viewingMode ??
+                                            'individuals'}
+                                        onchange={(e) => {
+                                            config.viewingMode = (
+                                                e.currentTarget as HTMLSelectElement
+                                            ).value as 'individuals' | 'paged';
+                                        }}
+                                    >
+                                        <option value="individuals"
+                                            >{m.viewing_mode_individuals()}</option
+                                        >
+                                        <option value="paged"
+                                            >{m.viewing_mode_paged()}</option
+                                        >
+                                    </select>
+                                </label>
+                            </li>
                         </ul>
                     </details>
                 </li>
@@ -534,6 +577,32 @@
                                     </select>
                                 </label>
                             </li>
+                            <li>
+                                <label class="label cursor-pointer py-1 gap-2">
+                                    <span class="label-text"
+                                        >Thumbnail Height</span
+                                    >
+                                    <input
+                                        type="range"
+                                        min="50"
+                                        max="300"
+                                        value={config.gallery?.fixedHeight ??
+                                            120}
+                                        class="range range-xs range-primary w-24"
+                                        oninput={(e) => {
+                                            if (!config.gallery)
+                                                config.gallery = {};
+                                            config.gallery.fixedHeight =
+                                                parseInt(e.currentTarget.value);
+                                        }}
+                                    />
+                                    <span
+                                        class="text-xs opacity-50 w-8 text-right"
+                                        >{config.gallery?.fixedHeight ??
+                                            120}px</span
+                                    >
+                                </label>
+                            </li>
                         </ul>
                     </details>
                 </li>

package/dist/components/MetadataDialog.svelte

@@ -103,20 +103,20 @@
                 </div>
             {/if}
 
-            <dl class="grid grid-cols-1 md:grid-cols-[200px_1fr]">
+            <dl>
                 {#if attribution}
                     <dt class="font-bold text-lg opacity-70 mt-6">
                         {m.attribution()}
                     </dt>
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    <dd class="text-sm ps-2">{@html attribution}</dd>
+                    <dd class="text-sm ps-4">{@html attribution}</dd>
                 {/if}
 
                 {#if license}
                     <dt class="font-bold text-lg opacity-70 mt-6">
                         {m.license()}
                     </dt>
-                    <dd class="text-sm ps-2">
+                    <dd class="text-sm ps-4">
                         <a
                             href={license}
                             target="_blank"
@@ -131,8 +131,24 @@
                         {item.label}
                     </dt>
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                    <dd class="text-sm ps-2">{@html item.value}</dd>
+                    <dd class="text-sm ps-4">{@html item.value}</dd>
                 {/each}
+
+                {#if viewerState.manifestId}
+                    <dt class="font-bold text-lg opacity-70 mt-6">
+                        {m.iiif_manifest_label()}
+                    </dt>
+                    <dd class="text-sm ps-4">
+                        <a
+                            href={viewerState.manifestId}
+                            target="_blank"
+                            rel="noreferrer"
+                            class="link link-primary break-all"
+                        >
+                            {viewerState.manifestId}
+                        </a>
+                    </dd>
+                {/if}
             </dl>
         </div>
 

package/dist/components/OSDViewer.svelte

@@ -17,6 +17,8 @@
 
     // Track OSD state changes for reactivity
     let osdVersion = $state(0);
+    // Track last opened tile source to prevent unnecessary resets
+    let lastTileSourceStr = '';
 
     // Get all annotations for current canvas (manifest + search)
     let allAnnotations = $derived.by(() => {
@@ -231,7 +233,35 @@
     $effect(() => {
         if (!viewer || !tileSources) return;
 
-        viewer.open(tileSources);
+        // Check if source actually changed to avoid resetting zoom
+        const currentStr = JSON.stringify(tileSources);
+        if (currentStr === lastTileSourceStr) return;
+        lastTileSourceStr = currentStr;
+
+        if (
+            viewerState.viewingMode === 'paged' &&
+            tileSources instanceof Array &&
+            tileSources.length === 2
+        ) {
+            const secondPageLocation = 1.025;
+            const twoPageSpread = [
+                {
+                    tileSource: tileSources[0],
+                    x: 0,
+                    y: 0,
+                    width: 1.0,
+                },
+                {
+                    tileSource: tileSources[1],
+                    x: secondPageLocation, // small gap between pages
+                    y: 0,
+                    width: 1.0,
+                },
+            ];
+            viewer.open(twoPageSpread);
+        } else {
+            viewer.open(tileSources);
+        }
     });
 </script>
 

package/dist/components/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))
@@ -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 (thumb.id)}
-                    <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,6 +36,7 @@
     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(() => {
@@ -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',