triiiceratops 0.8.2 → 0.9.0

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

@@ -0,0 +1,9 @@
+declare const DemoHeader: import("svelte").Component<{
+    manifestUrl?: any;
+    onLoad: any;
+    viewerMode?: string;
+    canvasId?: string;
+    config?: Record<string, any>;
+}, {}, "canvasId" | "config" | "manifestUrl" | "viewerMode">;
+type DemoHeader = ReturnType<typeof DemoHeader>;
+export default DemoHeader;

package/dist/components/FloatingMenu.svelte

@@ -0,0 +1,208 @@
+<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

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

package/dist/components/LeftFab.svelte

@@ -0,0 +1,69 @@
+<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 } from '../state/i18n.svelte';
+
+    const viewerState = getContext<ViewerState>(VIEWER_STATE_KEY);
+
+    let sortedPluginButtons = $derived(
+        [...viewerState.pluginMenuButtons].sort(
+            (a, b) => (a.order ?? 100) - (b.order ?? 100),
+        ),
+    );
+
+    let isOpen = $state(false);
+
+    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}
+                <div class="tooltip tooltip-right" data-tip={button.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>
+
+        <!-- Main Toggle Button -->
+        <div class="tooltip tooltip-right" data-tip={m.plugins_tooltip()}>
+            <button
+                class="btn btn-lg btn-secondary btn-circle shadow-xl transition-transform duration-300 {isOpen
+                    ? 'rotate-90'
+                    : ''}"
+                aria-label={m.plugins_tooltip()}
+                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

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

package/dist/components/MetadataDialog.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import { getContext } from 'svelte';
+    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 manifest = $derived(viewerState.manifest);
+
+    // Helper to extract metadata
+    let metadata = $derived.by(() => {
+        const currentLang = language.current;
+        if (!manifest) return [];
+
+        // Manifesto's getMetadata() returns an array of { label: ..., value: ... } objects
+        // The values might be strings or arrays of objects (LanguageMap)
+        const rawMetadata = manifest.getMetadata();
+
+        if (!rawMetadata) return [];
+
+        return rawMetadata.map((item: any) => {
+            let label = '';
+            let value = '';
+
+            // Helper to pick best language
+            const pickLang = (val: string | any[]) => {
+                if (typeof val === 'string') return val;
+                if (Array.isArray(val)) {
+                    // exact match
+                    let match = val.find(
+                        (x: any) =>
+                            x.locale === currentLang ||
+                            x.language === currentLang,
+                    );
+                    // fallback to en
+                    if (!match)
+                        match = val.find(
+                            (x: any) =>
+                                x.locale === 'en' || x.language === 'en',
+                        );
+                    // fallback to none/null
+                    if (!match)
+                        match = val.find((x: any) => !x.locale && !x.language);
+                    // fallback to first
+                    if (!match) match = val[0];
+
+                    return match ? match.value : '';
+                }
+                return String(val);
+            };
+
+            // Handle Label
+            if (item.getLabel) {
+                label = pickLang(item.getLabel());
+            } else if (item.label) {
+                label = pickLang(item.label);
+            }
+
+            // Handle Value
+            if (item.getValue) {
+                value = pickLang(item.getValue());
+            } else if (item.value) {
+                value = pickLang(item.value);
+            }
+
+            return { label, value };
+        });
+    });
+
+    // Also get top-level description, attribution, license/rights
+    let description = $derived(manifest ? manifest.getDescription() : '');
+    let attribution = $derived(
+        manifest ? manifest.getRequiredStatement()?.getValue() : '',
+    );
+    // getRequiredStatement usually returns { label: ..., value: ... } or similar structure that supports getValue()
+
+    let license = $derived(manifest ? manifest.getLicense() : '');
+</script>
+
+<!-- Modal -->
+<dialog class="modal" open={viewerState.showMetadataDialog}>
+    <div class="modal-box w-11/12 max-w-5xl">
+        <form method="dialog">
+            <button
+                class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+                onclick={() => viewerState.toggleMetadataDialog()}>✕</button
+            >
+        </form>
+
+        <h3 class="font-bold text-lg mb-4">
+            {manifest
+                ? manifest.getLabel().length && manifest.getLabel()[0]
+                    ? manifest.getLabel()[0].value
+                    : m.metadata_label_fallback()
+                : m.loading()}
+        </h3>
+
+        <div class="py-4 overflow-y-auto max-h-[70vh]">
+            {#if description}
+                <div class="mb-6 prose">
+                    <p>{@html description}</p>
+                </div>
+            {/if}
+
+            <dl class="grid grid-cols-1 md:grid-cols-[200px_1fr]">
+                {#if attribution}
+                    <dt class="font-bold text-lg opacity-70 mt-6">
+                        {m.attribution()}
+                    </dt>
+                    <dd class="text-sm ps-2">{@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">
+                        <a
+                            href={license}
+                            target="_blank"
+                            rel="noreferrer"
+                            class="link link-primary break-all">{license}</a
+                        >
+                    </dd>
+                {/if}
+
+                {#each metadata as item}
+                    <dt class="font-bold text-lg opacity-70 mt-6">
+                        {item.label}
+                    </dt>
+                    <dd class="text-sm ps-2">{@html item.value}</dd>
+                {/each}
+            </dl>
+        </div>
+
+        <div class="modal-action">
+            <form method="dialog">
+                <button
+                    class="btn"
+                    onclick={() => viewerState.toggleMetadataDialog()}
+                    >{m.close()}</button
+                >
+            </form>
+        </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+        <button onclick={() => viewerState.toggleMetadataDialog()}
+            >{m.close()}</button
+        >
+    </form>
+</dialog>

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

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