triiiceratops 0.10.5 → 0.11.0

package/dist/types/config.d.ts

@@ -68,7 +68,7 @@ export interface AnnotationsConfig {
      */
     visible?: boolean;
 }
-export interface MenuConfig {
+export interface ToolbarConfig {
     /**
      * Whether the Search button is shown in this menu.
      * @default true
@@ -97,28 +97,15 @@ export interface MenuConfig {
 }
 export interface ViewerConfig {
     /**
-     * Whether the right floating menu is visible.
-     * @default true
-     */
-    showRightMenu?: boolean;
-    /**
-     * Configuration for the right menu items.
-     */
-    rightMenu?: MenuConfig;
-    /**
-     * Whether the left FAB (plugins menu) is visible.
+     * Whether to show the canvas navigation arrows/controls.
      * @default true
      */
-    showLeftMenu?: boolean;
-    /**
-     * Configuration for the left menu items.
-     */
-    leftMenu?: MenuConfig;
+    showCanvasNav?: boolean;
     /**
-     * Whether to show the canvas navigation arrows/controls.
+     * Whether to show the zoom controls in the canvas navigation.
      * @default true
      */
-    showCanvasNav?: boolean;
+    showZoomControls?: boolean;
     /**
      * Configuration for the thumbnail gallery pane.
      */
@@ -140,4 +127,23 @@ export interface ViewerConfig {
      * @default false
      */
     transparentBackground?: boolean;
+    /**
+     * Whether the toolbar open/close toggle button is visible.
+     * @default true
+     */
+    showToggle?: boolean;
+    /**
+     * Whether the toolbar is currently expanded/open.
+     * @default false
+     */
+    toolbarOpen?: boolean;
+    /**
+     * Which side the toolbar should appear on.
+     * @default 'left'
+     */
+    toolbarPosition?: 'left' | 'right' | 'top';
+    /**
+     * Configuration for the toolbar items.
+     */
+    toolbar?: ToolbarConfig;
 }

package/dist/utils/annotationAdapter.test.js

@@ -1,22 +1,22 @@
-import { describe, it, expect } from "vitest";
-import { parseAnnotation } from "./annotationAdapter";
-describe("annotationAdapter", () => {
-    describe("parseAnnotation", () => {
-        it("should correctly parse a simple xywh string target", () => {
+import { describe, it, expect } from 'vitest';
+import { parseAnnotation } from './annotationAdapter';
+describe('annotationAdapter', () => {
+    describe('parseAnnotation', () => {
+        it('should correctly parse a simple xywh string target', () => {
             const annotation = {
-                "@id": "http://example.org/anno1",
-                on: "http://example.org/image1#xywh=10,20,100,200",
-                label: "Test Annotation",
+                '@id': 'http://example.org/anno1',
+                on: 'http://example.org/image1#xywh=10,20,100,200',
+                label: 'Test Annotation',
             };
             const result = parseAnnotation(annotation, 0);
             expect(result).not.toBeNull();
             if (!result)
                 return;
-            expect(result.geometry.type).toBe("RECTANGLE");
+            expect(result.geometry.type).toBe('RECTANGLE');
             const geometry = result.geometry;
-            if ("x" in geometry) {
+            if ('x' in geometry) {
                 expect(geometry).toEqual({
-                    type: "RECTANGLE",
+                    type: 'RECTANGLE',
                     x: 10,
                     y: 20,
                     w: 100,
@@ -24,15 +24,15 @@ describe("annotationAdapter", () => {
                 });
             }
             else {
-                throw new Error("Geometry should be RECTANGLE type with x, y, w, h");
+                throw new Error('Geometry should be RECTANGLE type with x, y, w, h');
             }
         });
-        it("should extract SVG selector geometry", () => {
+        it('should extract SVG selector geometry', () => {
             const annotation = {
-                "@id": "http://example.org/anno2",
+                '@id': 'http://example.org/anno2',
                 on: {
                     selector: {
-                        type: "SvgSelector",
+                        type: 'SvgSelector',
                         value: '<svg><polygon points="10,10 50,10 50,50 10,50" /></svg>',
                     },
                 },
@@ -41,9 +41,9 @@ describe("annotationAdapter", () => {
             expect(result).not.toBeNull();
             if (!result)
                 return;
-            expect(result.geometry.type).toBe("POLYGON");
+            expect(result.geometry.type).toBe('POLYGON');
             const geometry = result.geometry;
-            if ("points" in geometry) {
+            if ('points' in geometry) {
                 expect(geometry.points).toHaveLength(4);
                 expect(geometry.points).toEqual([
                     [10, 10],
@@ -53,36 +53,39 @@ describe("annotationAdapter", () => {
                 ]);
             }
             else {
-                throw new Error("Geometry should be POLYGON type with points");
+                throw new Error('Geometry should be POLYGON type with points');
             }
         });
-        it("should handle Manifesto-style getTarget and getId methods", () => {
+        it('should handle Manifesto-style getTarget and getId methods', () => {
             const mockManifestoAnno = {
-                getId: () => "http://example.org/manifesto-anno",
-                getTarget: () => "http://example.org/canvas1#xywh=5,5,50,50",
+                getId: () => 'http://example.org/manifesto-anno',
+                getTarget: () => 'http://example.org/canvas1#xywh=5,5,50,50',
                 getBody: () => [
-                    { getValue: () => "Manifesto Body", getFormat: () => "text/plain" },
+                    {
+                        getValue: () => 'Manifesto Body',
+                        getFormat: () => 'text/plain',
+                    },
                 ],
             };
             // @ts-ignore - mocking complex object
             const result = parseAnnotation(mockManifestoAnno, 2);
-            expect(result?.id).toBe("http://example.org/manifesto-anno");
+            expect(result?.id).toBe('http://example.org/manifesto-anno');
             const geometry = result?.geometry;
-            if (geometry && "x" in geometry) {
+            if (geometry && 'x' in geometry) {
                 expect(geometry).toMatchObject({
-                    type: "RECTANGLE",
+                    type: 'RECTANGLE',
                     x: 5,
                     y: 5,
                     w: 50,
                     h: 50,
                 });
             }
-            expect(result?.body.value).toBe("Manifesto Body");
+            expect(result?.body[0].value).toBe('Manifesto Body');
         });
-        it("should return null for invalid annotations with no geometry", () => {
+        it('should return null for invalid annotations with no geometry', () => {
             const invalidAnno = {
-                "@id": "bad-anno",
-                on: "http://example.org/canvas1", // No media fragment or selector
+                '@id': 'bad-anno',
+                on: 'http://example.org/canvas1', // No media fragment or selector
             };
             const result = parseAnnotation(invalidAnno, 3);
             expect(result).toBeNull();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triiiceratops",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "type": "module",
   "repository": {
     "type": "git",

package/dist/components/FloatingMenu.svelte

@@ -1,208 +0,0 @@
-<script lang="ts">
-    import { getContext } from 'svelte';
-    import ChatCenteredText from 'phosphor-svelte/lib/ChatCenteredText';
-    import CornersIn from 'phosphor-svelte/lib/CornersIn';
-    import CornersOut from 'phosphor-svelte/lib/CornersOut';
-    import X from 'phosphor-svelte/lib/X';
-    import Info from 'phosphor-svelte/lib/Info';
-    import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
-    import List from 'phosphor-svelte/lib/List';
-    import Slideshow from 'phosphor-svelte/lib/Slideshow';
-    import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
-    import { m } from '../state/i18n.svelte';
-
-    const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
-
-    const menuConfig = $derived(viewerState.config.rightMenu || {});
-
-    const showSearch = $derived(menuConfig.showSearch !== false);
-    const showGallery = $derived(menuConfig.showGallery !== false);
-    const showFullscreen = $derived(menuConfig.showFullscreen !== false);
-    const showAnnotations = $derived(menuConfig.showAnnotations !== false);
-    const showInfo = $derived(menuConfig.showInfo !== false);
-
-    const activeButtons = $derived(
-        [
-            showSearch ? 'search' : null,
-            showGallery ? 'gallery' : null,
-            showFullscreen ? 'fullscreen' : null,
-            showAnnotations ? 'annotations' : null,
-            showInfo ? 'info' : null,
-        ].filter((b): b is string => b !== null),
-    );
-</script>
-
-{#snippet searchBtn()}
-    <button
-        aria-label={m.toggle_search()}
-        class={[
-            'btn btn-circle btn-lg shadow-lg',
-            viewerState.showSearchPanel ? 'btn-primary' : 'btn-neutral',
-        ]}
-        onclick={() => viewerState.toggleSearchPanel()}
-    >
-        <MagnifyingGlass size={28} weight="bold" />
-    </button>
-{/snippet}
-
-{#snippet galleryBtn()}
-    <button
-        aria-label={viewerState.showThumbnailGallery
-            ? m.hide_gallery()
-            : m.show_gallery()}
-        class="btn btn-lg btn-circle shadow-lg {viewerState.showThumbnailGallery
-            ? 'btn-info'
-            : 'btn-neutral'}"
-        onclick={() => viewerState.toggleThumbnailGallery()}
-    >
-        <Slideshow size={28} weight="bold" />
-    </button>
-{/snippet}
-
-{#snippet fullscreenBtn()}
-    <button
-        class="btn btn-circle btn-lg shadow-lg transition-all duration-300 ease-out {viewerState.isFullScreen
-            ? 'btn-warning'
-            : 'btn-neutral'}"
-        onclick={() => viewerState.toggleFullScreen()}
-    >
-        {#if viewerState.isFullScreen}
-            <CornersIn size={28} weight="bold" />
-        {:else}
-            <CornersOut size={28} weight="bold" />
-        {/if}
-    </button>
-{/snippet}
-
-{#snippet annotationsBtn()}
-    <button
-        aria-label={m.toggle_annotations()}
-        class="btn btn-lg btn-circle shadow-lg {viewerState.showAnnotations
-            ? 'btn-error'
-            : 'btn-neutral'}"
-        onclick={() => viewerState.toggleAnnotations()}
-    >
-        <ChatCenteredText size={28} weight="bold" />
-    </button>
-{/snippet}
-
-{#snippet infoBtn()}
-    <button
-        aria-label={m.toggle_metadata()}
-        class="btn btn-lg btn-circle shadow-lg {viewerState.showMetadataDialog
-            ? 'btn-info'
-            : 'btn-neutral'}"
-        onclick={() => viewerState.toggleMetadataDialog()}
-    >
-        <Info size={28} weight="bold" />
-    </button>
-{/snippet}
-
-{#if activeButtons.length === 1}
-    <div class="absolute z-600 bottom-6 right-6">
-        {#if showSearch}
-            <div class="tooltip tooltip-left" data-tip={m.search()}>
-                {@render searchBtn()}
-            </div>
-        {/if}
-        {#if showGallery}
-            <div
-                class="tooltip tooltip-left"
-                data-tip={viewerState.showThumbnailGallery
-                    ? m.hide_gallery()
-                    : m.show_gallery()}
-            >
-                {@render galleryBtn()}
-            </div>
-        {/if}
-        {#if showFullscreen}
-            <div
-                class="tooltip tooltip-left"
-                data-tip={viewerState.isFullScreen
-                    ? m.exit_full_screen()
-                    : m.enter_full_screen()}
-            >
-                {@render fullscreenBtn()}
-            </div>
-        {/if}
-        {#if showAnnotations}
-            <div
-                class="tooltip tooltip-top"
-                data-tip={viewerState.showAnnotations
-                    ? m.hide_annotations()
-                    : m.show_annotations()}
-            >
-                {@render annotationsBtn()}
-            </div>
-        {/if}
-        {#if showInfo}
-            <div class="tooltip tooltip-top" data-tip={m.metadata()}>
-                {@render infoBtn()}
-            </div>
-        {/if}
-    </div>
-{:else if activeButtons.length > 1}
-    <div
-        class="fab fab-flower fab-top-left absolute z-600 pointer-events-auto bottom-6 right-6"
-    >
-        <!-- Trigger button: focusable div (Safari bug workaround) - hidden when FAB is open -->
-        <div
-            tabindex="0"
-            role="button"
-            class="btn btn-lg btn-primary btn-circle shadow-xl"
-        >
-            <span class="sr-only">{m.menu()}</span>
-            <List size={32} weight="bold" />
-        </div>
-
-        <!-- fab-main-action: replaces the trigger button when FAB is open -->
-        <div class="fab-main-action tooltip tooltip-top" data-tip={m.search()}>
-            {@render searchBtn()}
-        </div>
-
-        <!-- buttons that show up when FAB is open (max 4 for flower layout) -->
-
-        <!-- Gallery Toggle -->
-        {#if showGallery}
-            <div
-                class="tooltip tooltip-left"
-                data-tip={viewerState.showThumbnailGallery
-                    ? m.hide_gallery()
-                    : m.show_gallery()}
-            >
-                {@render galleryBtn()}
-            </div>
-        {/if}
-
-        <!-- Full Screen Toggle -->
-        {#if showFullscreen}
-            <div
-                class="tooltip tooltip-left"
-                data-tip={viewerState.isFullScreen
-                    ? m.exit_full_screen()
-                    : m.enter_full_screen()}
-            >
-                {@render fullscreenBtn()}
-            </div>
-        {/if}
-
-        <!-- Annotations Toggle -->
-        {#if showAnnotations}
-            <div
-                class="tooltip tooltip-top"
-                data-tip={viewerState.showAnnotations
-                    ? m.hide_annotations()
-                    : m.show_annotations()}
-            >
-                {@render annotationsBtn()}
-            </div>
-        {/if}
-
-        <!-- Metadata Toggle -->
-        {#if showInfo}
-            <div class="tooltip tooltip-top" data-tip={m.metadata()}>
-                {@render infoBtn()}
-            </div>
-        {/if}
-    </div>
-{/if}

package/dist/components/FloatingMenu.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const FloatingMenu: import("svelte").Component<Record<string, never>, {}, "">;
-type FloatingMenu = ReturnType<typeof FloatingMenu>;
-export default FloatingMenu;

package/dist/components/LeftFab.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-    import { getContext } from 'svelte';
-    import PuzzlePiece from 'phosphor-svelte/lib/PuzzlePiece';
-    import X from 'phosphor-svelte/lib/X';
-    import { VIEWER_STATE_KEY, type ViewerState } from '../state/viewer.svelte';
-    import { m, language } from '../state/i18n.svelte';
-
-    const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
-
-    let sortedPluginButtons = $derived.by(() => {
-        // Read language to trigger re-evaluation
-        language.current;
-        return [...viewerState.pluginMenuButtons].sort(
-            (a, b) => (a.order ?? 100) - (b.order ?? 100),
-        );
-    });
-
-    let isOpen = $state(false);
-
-    let pluginsTooltip = $derived.by(() => {
-        language.current;
-        return m.plugins_tooltip();
-    });
-
-    function toggleOpen() {
-        isOpen = !isOpen;
-    }
-</script>
-
-{#if sortedPluginButtons.length > 0}
-    <div
-        class="absolute left-6 bottom-6 z-50 pointer-events-auto flex flex-col items-start transition-all duration-300"
-    >
-        <!-- Plugin Buttons Stack -->
-        <div
-            class="flex flex-col-reverse gap-3 mb-3 transition-all duration-300 origin-bottom {isOpen
-                ? 'opacity-100 translate-y-0 scale-100'
-                : 'opacity-0 translate-y-4 scale-90 pointer-events-none'}"
-        >
-            {#each sortedPluginButtons as button (button.id)}
-                {@const Icon = button.icon}
-                {@const tooltip =
-                    // @ts-ignore - access message dynamically
-                    typeof m[button.tooltip] === 'function'
-                        ? // @ts-ignore
-                          m[button.tooltip]()
-                        : button.tooltip}
-                <div class="tooltip tooltip-right" data-tip={tooltip}>
-                    <button
-                        aria-label={button.tooltip}
-                        class="btn btn-lg btn-circle shadow-lg {button.isActive?.()
-                            ? (button.activeClass ?? 'btn-primary')
-                            : 'btn-neutral'}"
-                        onclick={() => {
-                            button.onClick();
-                            isOpen = false;
-                        }}
-                    >
-                        <Icon size={28} weight="bold" />
-                    </button>
-                </div>
-            {/each}
-        </div>
-
-        <div class="tooltip tooltip-right" data-tip={pluginsTooltip}>
-            <button
-                class="btn btn-lg btn-secondary btn-circle shadow-xl transition-transform duration-300 {isOpen
-                    ? 'rotate-90'
-                    : ''}"
-                aria-label={pluginsTooltip}
-                onclick={toggleOpen}
-            >
-                {#if isOpen}
-                    <X size={28} weight="bold" />
-                {:else}
-                    <PuzzlePiece size={28} weight="bold" />
-                {/if}
-            </button>
-        </div>
-    </div>
-{/if}

package/dist/components/LeftFab.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const LeftFab: import("svelte").Component<Record<string, never>, {}, "">;
-type LeftFab = ReturnType<typeof LeftFab>;
-export default LeftFab;