triiiceratops 0.12.6 → 0.12.8

package/dist/components/SettingsMenu.svelte

@@ -80,7 +80,26 @@
                 <li>
                     <label class="label cursor-pointer py-1">
                         <span class="label-text"
-                            >{m.settings_toolbar_open()}</span
+                            >{m.settings_toggle_close_button()}</span
+                        >
+                        <input
+                            type="checkbox"
+                            class="checkbox checkbox-xs"
+                            checked={config.annotations?.showCloseButton ??
+                                true}
+                            onchange={(e) => {
+                                if (!config.annotations)
+                                    config.annotations = {};
+                                config.annotations.showCloseButton =
+                                    e.currentTarget.checked;
+                            }}
+                        />
+                    </label>
+                </li>
+                <li>
+                    <label class="label cursor-pointer py-1 gap-2">
+                        <span class="label-text"
+                            >{m.settings_select_dock_position()}</span
                         >
                         <input
                             type="checkbox"
@@ -501,6 +520,73 @@
                         />
                     </label>
                 </li>
+                <li>
+                    <label class="label cursor-pointer py-1">
+                        <span class="label-text"
+                            >{m.settings_toggle_close_button()}</span
+                        >
+                        <input
+                            type="checkbox"
+                            class="checkbox checkbox-xs"
+                            checked={config.annotations?.showCloseButton ??
+                                true}
+                            onchange={(e) => {
+                                if (!config.annotations)
+                                    config.annotations = {};
+                                config.annotations.showCloseButton =
+                                    e.currentTarget.checked;
+                            }}
+                        />
+                    </label>
+                </li>
+                <li>
+                    <label class="label cursor-pointer py-1 gap-2">
+                        <span class="label-text"
+                            >{m.settings_select_dock_position()}</span
+                        >
+                        <select
+                            class="select select-bordered select-xs w-24"
+                            value={config.annotations?.position ?? 'right'}
+                            onchange={(e) => {
+                                if (!config.annotations)
+                                    config.annotations = {};
+                                config.annotations.position = (
+                                    e.currentTarget as HTMLSelectElement
+                                ).value as 'left' | 'right';
+                            }}
+                            onclick={(e) => e.stopPropagation()}
+                        >
+                            <option value="right"
+                                >{m.settings_position_right()}</option
+                            >
+                            <option value="left"
+                                >{m.settings_position_left()}</option
+                            >
+                        </select>
+                    </label>
+                </li>
+                <li>
+                    <label class="label cursor-pointer py-1 gap-2">
+                        <span class="label-text"
+                            >{m.settings_panel_width()}</span
+                        >
+                        <input
+                            type="range"
+                            min="200"
+                            max="800"
+                            value={parseInt(config.annotations?.width ?? '320')}
+                            class="range range-xs range-primary w-32"
+                            oninput={(e) => {
+                                if (!config.annotations)
+                                    config.annotations = {};
+                                config.annotations.width = `${e.currentTarget.value}px`;
+                            }}
+                        />
+                        <span class="text-xs opacity-50 w-8 text-right"
+                            >{config.annotations?.width ?? '320px'}</span
+                        >
+                    </label>
+                </li>
             </ul>
         </details>
     </li>

package/dist/components/Toolbar.svelte

@@ -118,9 +118,6 @@
                     <X size={20} weight="bold" />
                 </button>
             </div>
-        {:else}
-            <!-- Add some padding if no close button -->
-            <div class={isTop ? 'w-2' : 'h-2'}></div>
         {/if}
 
         <!-- Scrollable Actions -->
@@ -134,8 +131,8 @@
                 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',
+                    'py-2 px-0 flex-1 overflow-y-auto overflow-x-hidden w-12',
+                !isTop && isOverflowVisible && 'py-2 px-0 flex-1 w-12',
             ]}
         >
             <!-- --- Standard Actions --- -->
@@ -144,7 +141,7 @@
                 <li>
                     <button
                         class={[
-                            'flex items-center justify-center',
+                            'flex items-center justify-center aspect-square rounded-full',
                             viewerState.showSearchPanel && 'active',
                         ]}
                         use:tooltip={{
@@ -163,7 +160,7 @@
                 <li>
                     <button
                         class={[
-                            'flex items-center justify-center',
+                            'flex items-center justify-center aspect-square rounded-full',
                             viewerState.showThumbnailGallery && 'active',
                         ]}
                         use:tooltip={{
@@ -193,7 +190,7 @@
                     <div
                         tabindex="0"
                         role="button"
-                        class="flex items-center justify-center"
+                        class="flex items-center justify-center aspect-square rounded-full"
                         use:tooltip={{
                             content: m.viewing_mode_label(),
                             position: tooltipPos,
@@ -271,7 +268,7 @@
                 <li>
                     <button
                         class={[
-                            'flex items-center justify-center',
+                            'flex items-center justify-center aspect-square rounded-full',
                             viewerState.isFullScreen && 'active',
                         ]}
                         use:tooltip={{
@@ -298,7 +295,7 @@
                 <li>
                     <button
                         class={[
-                            'flex items-center justify-center',
+                            'flex items-center justify-center aspect-square rounded-full',
                             viewerState.showAnnotations && 'active',
                         ]}
                         use:tooltip={{
@@ -321,7 +318,7 @@
                 <li>
                     <button
                         class={[
-                            'flex items-center justify-center',
+                            'flex items-center justify-center aspect-square rounded-full',
                             viewerState.showMetadataDialog && 'active',
                         ]}
                         use:tooltip={{
@@ -359,7 +356,7 @@
                 <li>
                     <button
                         class={[
-                            'flex items-center justify-center',
+                            'flex items-center justify-center aspect-square rounded-full',
                             button.isActive?.() && 'active',
                         ]}
                         use:tooltip={{

package/dist/components/TriiiceratopsViewer.svelte

@@ -12,6 +12,7 @@
     import Toolbar from './Toolbar.svelte';
     import MetadataDialog from './MetadataDialog.svelte';
     import SearchPanel from './SearchPanel.svelte';
+    import AnnotationPanel from './AnnotationPanel.svelte';
     import { m, language } from '../state/i18n.svelte';
 
     // SSR-safe browser detection for library consumers
@@ -164,6 +165,8 @@
             internalViewerState.dockSide === 'left') ||
             (internalViewerState.showSearchPanel &&
                 internalViewerState.config.search?.position === 'left') ||
+            (internalViewerState.showAnnotations &&
+                internalViewerState.config.annotations?.position === 'left') ||
             internalViewerState.pluginPanels.some(
                 (p) => p.position === 'left' && p.isVisible(),
             ),
@@ -172,6 +175,8 @@
     let isRightSidebarVisible = $derived(
         (internalViewerState.showSearchPanel &&
             internalViewerState.config.search?.position !== 'left') ||
+            (internalViewerState.showAnnotations &&
+                internalViewerState.config.annotations?.position !== 'left') ||
             (internalViewerState.showThumbnailGallery &&
                 internalViewerState.dockSide === 'right') ||
             internalViewerState.pluginPanels.some(
@@ -429,6 +434,13 @@
                 </div>
             {/if}
 
+            <!-- Annotations Panel (when configured left) -->
+            {#if internalViewerState.showAnnotations && internalViewerState.config.annotations?.position === 'left'}
+                <div class="h-full relative pointer-events-auto">
+                    <AnnotationPanel />
+                </div>
+            {/if}
+
             <!-- Gallery (when docked left) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'left'}
                 <div
@@ -565,6 +577,13 @@
                 </div>
             {/if}
 
+            <!-- Annotations Panel (when configured right) -->
+            {#if internalViewerState.showAnnotations && internalViewerState.config.annotations?.position !== 'left'}
+                <div class="h-full relative pointer-events-auto">
+                    <AnnotationPanel />
+                </div>
+            {/if}
+
             <!-- Gallery (when docked right) -->
             {#if internalViewerState.showThumbnailGallery && internalViewerState.dockSide === 'right'}
                 <div

package/dist/components/TriiiceratopsViewerElement.svelte

@@ -1,4 +1,3 @@
-<!-- svelte-ignore options_missing_custom_element -->
 <svelte:options
     customElement={{
         tag: 'triiiceratops-viewer',

package/dist/{image_filters_reset-jtpS22ff.js → image_filters_reset-P5hB896L.js}

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

package/dist/plugins/annotation-editor.js

@@ -4,9 +4,9 @@ var B = (V, t, a) => Me(V, typeof t != "symbol" ? t + "" : t, a);
 import "svelte/internal/disclose-version";
 import * as e from "svelte/internal/client";
 import { getContext as He, untrack as Ce, onMount as Le, onDestroy as Se } from "svelte";
-import { m as _e, g as re, l as ze, s as Ie, X as we, c as Te, V as De } from "../X-B3XldraD.js";
-import { A as Ee } from "../ArrowCounterClockwise-BkrSndVO.js";
-import { q as je, h as Ue, c as Re, j as Pe, k as Oe, t as Be, u as Fe, v as qe, r as We, s as Ke, m as Ne, C as Je, i as Xe, g as Ye, a as Ge, n as Qe, f as $e, e as et, b as tt, d as at, o as ot, l as nt, p as rt } from "../Check-CB_Zdp64.js";
+import { m as _e, g as re, l as ze, s as Ie, X as we, c as Te, V as De } from "../X-DaQiCkfE.js";
+import { A as Ee } from "../ArrowCounterClockwise-DvXnnh0Z.js";
+import { q as je, h as Ue, c as Re, j as Pe, k as Oe, t as Be, u as Fe, v as qe, r as We, s as Ke, m as Ne, C as Je, i as Xe, g as Ye, a as Ge, n as Qe, f as $e, e as et, b as tt, d as at, o as ot, l as nt, p as rt } from "../Check-BUdiej1n.js";
 class ue {
   constructor() {
     B(this, "id", "localStorage");

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-B3XldraD.js";
-import { A as d0 } from "../ArrowCounterClockwise-BkrSndVO.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-jtpS22ff.js";
+import { l as l0, s as i0, X as n0, c as o0, V as c0, g as v0 } from "../X-DaQiCkfE.js";
+import { A as d0 } from "../ArrowCounterClockwise-DvXnnh0Z.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-P5hB896L.js";
 const G = {
   brightness: 100,
   contrast: 100,

package/dist/state/viewer.svelte.d.ts

@@ -38,6 +38,7 @@ export declare class ViewerState {
     showMetadataDialog: boolean;
     dockSide: string;
     visibleAnnotationIds: SvelteSet<string>;
+    hoveredAnnotationId: string | null;
     config: ViewerConfig;
     get showToggle(): boolean;
     get showCanvasNav(): boolean;

package/dist/state/viewer.svelte.js

@@ -12,6 +12,7 @@ export class ViewerState {
     showMetadataDialog = $state(false);
     dockSide = $state('bottom');
     visibleAnnotationIds = new SvelteSet();
+    hoveredAnnotationId = $state(null);
     // UI Configuration
     config = $state({});
     // Derived configuration specific getters