triiiceratops 0.9.12 → 0.10.0

package/dist/components/TriiiceratopsViewerElementImage.svelte

@@ -1,143 +0,0 @@
-<svelte:options
-    customElement={{
-        tag: 'triiiceratops-viewer-image',
-        shadow: 'open',
-        props: {
-            manifestId: {
-                attribute: 'manifest-id',
-                type: 'String',
-                reflect: true,
-            },
-            canvasId: {
-                attribute: 'canvas-id',
-                type: 'String',
-                reflect: true,
-            },
-            theme: {
-                attribute: 'theme',
-                type: 'String',
-                reflect: true,
-            },
-            themeConfig: {
-                attribute: 'theme-config',
-                type: 'String',
-                reflect: false,
-            },
-            config: {
-                attribute: 'config',
-                type: 'String',
-                reflect: false,
-            },
-        },
-    }}
-/>
-
-<script lang="ts">
-    import styles from '../../app.css?inline';
-    import TriiiceratopsViewer from './TriiiceratopsViewer.svelte';
-    import { ImageManipulationPlugin } from '../plugins/image-manipulation';
-    import type { TriiiceratopsPlugin } from '../types/plugin';
-    import type { DaisyUITheme, ThemeConfig } from '../theme/types';
-    import type { ViewerConfig } from '../types/config';
-    import { isBuiltInTheme, parseThemeConfig } from '../theme/themeManager';
-    import type { ViewerState } from '../state/viewer.svelte';
-
-    let {
-        manifestId = '',
-        canvasId = '',
-        plugins = [new ImageManipulationPlugin()],
-        theme = undefined as string | undefined,
-        themeConfig = undefined as string | ThemeConfig | undefined,
-        config = undefined as string | ViewerConfig | undefined,
-    }: {
-        manifestId?: string;
-        canvasId?: string;
-        plugins?: TriiiceratopsPlugin[];
-        /**
-         * Built-in DaisyUI theme name (e.g., 'light', 'dark', 'cupcake').
-         * When not specified, defaults to 'light' or 'dark' based on prefers-color-scheme.
-         */
-        theme?: string;
-        /**
-         * Custom theme configuration to override the base theme.
-         * Can be a JSON string (for HTML attribute) or ThemeConfig object (for JS property).
-         * @example HTML: theme-config='{"primary":"#3b82f6","radiusBox":"0.5rem"}'
-         * @example JS: element.themeConfig = { primary: '#3b82f6', radiusBox: '0.5rem' }
-         */
-        themeConfig?: string | ThemeConfig;
-        /**
-         * Configuration options for the viewer UI.
-         */
-        config?: string | ViewerConfig;
-    } = $props();
-
-    // Reference to host element for event dispatch
-    let hostElement: HTMLElement;
-
-    // ViewerState from the inner component (via bindable prop)
-    let internalViewerState: ViewerState | undefined = $state();
-
-    // Track if we've already wired up the event target (only do once)
-    let eventTargetSet = false;
-
-    // Wire up eventTarget when viewerState is available - only once
-    $effect(() => {
-        if (internalViewerState && hostElement && !eventTargetSet) {
-            eventTargetSet = true;
-            internalViewerState.setEventTarget(hostElement);
-        }
-    });
-
-    // Validate and convert theme string to DaisyUITheme type
-    let validatedTheme = $derived.by((): DaisyUITheme | undefined => {
-        if (!theme) return undefined;
-        if (isBuiltInTheme(theme)) return theme;
-        console.warn(
-            `Invalid theme "${theme}". Using system preference fallback.`,
-        );
-        return undefined;
-    });
-
-    // Parse themeConfig if it's a JSON string, pass through if it's already an object
-    let parsedThemeConfig = $derived.by((): ThemeConfig | undefined => {
-        if (!themeConfig) return undefined;
-        if (typeof themeConfig === 'string') {
-            const parsed = parseThemeConfig(themeConfig);
-            if (!parsed) {
-                console.warn(
-                    `Invalid theme-config JSON: "${themeConfig}". Ignoring.`,
-                );
-            }
-            return parsed ?? undefined;
-        }
-        return themeConfig;
-    });
-
-    // Parse config if it's a JSON string, pass through if it's already an object
-    let parsedConfig = $derived.by((): ViewerConfig | undefined => {
-        if (!config) return undefined;
-        if (typeof config === 'string') {
-            try {
-                return JSON.parse(config);
-            } catch (e) {
-                console.warn(`Invalid config JSON: "${config}". Ignoring.`);
-                return undefined;
-            }
-        }
-        return config;
-    });
-</script>
-
-{@html `<style>${styles}</style>`}
-
-<div bind:this={hostElement} class="w-full h-full">
-    <TriiiceratopsViewer
-        {manifestId}
-        {canvasId}
-        {plugins}
-        theme={validatedTheme}
-        themeConfig={parsedThemeConfig}
-        config={parsedConfig}
-        bind:viewerState={internalViewerState}
-    />
-</div>

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

@@ -1,27 +0,0 @@
-import type { TriiiceratopsPlugin } from '../types/plugin';
-import type { ThemeConfig } from '../theme/types';
-import type { ViewerConfig } from '../types/config';
-type $$ComponentProps = {
-    manifestId?: string;
-    canvasId?: string;
-    plugins?: TriiiceratopsPlugin[];
-    /**
-     * Built-in DaisyUI theme name (e.g., 'light', 'dark', 'cupcake').
-     * When not specified, defaults to 'light' or 'dark' based on prefers-color-scheme.
-     */
-    theme?: string;
-    /**
-     * Custom theme configuration to override the base theme.
-     * Can be a JSON string (for HTML attribute) or ThemeConfig object (for JS property).
-     * @example HTML: theme-config='{"primary":"#3b82f6","radiusBox":"0.5rem"}'
-     * @example JS: element.themeConfig = { primary: '#3b82f6', radiusBox: '0.5rem' }
-     */
-    themeConfig?: string | ThemeConfig;
-    /**
-     * Configuration options for the viewer UI.
-     */
-    config?: string | ViewerConfig;
-};
-declare const TriiiceratopsViewerElementImage: import("svelte").Component<$$ComponentProps, {}, "">;
-type TriiiceratopsViewerElementImage = ReturnType<typeof TriiiceratopsViewerElementImage>;
-export default TriiiceratopsViewerElementImage;

package/dist/custom-element-image.d.ts

@@ -1 +0,0 @@
-import './components/TriiiceratopsViewerElementImage.svelte';

package/dist/custom-element-image.js

@@ -1,2 +0,0 @@
-// Entry point for custom element build (Image Plugin version)
-import './components/TriiiceratopsViewerElementImage.svelte';

package/dist/plugins/image-manipulation/ImageManipulationPlugin.svelte.d.ts

@@ -1,19 +0,0 @@
-type OSDViewer = import('openseadragon').OpenSeadragon.Viewer;
-import { BasePlugin, type PluginContext } from '../../types/plugin';
-import { type ImageFilters } from './types';
-export declare class ImageManipulationPlugin extends BasePlugin {
-    readonly id = "image-manipulation";
-    readonly name = "Image Manipulation";
-    readonly version = "1.0.0";
-    private _panelOpen;
-    private _filters;
-    private osd;
-    onRegister(context: PluginContext): void;
-    onViewerReady(viewer: OSDViewer): void;
-    onDestroy(): void;
-    togglePanel(): void;
-    setFilters(filters: ImageFilters): void;
-    resetFilters(): void;
-    getFilters(): ImageFilters;
-}
-export {};

package/dist/plugins/image-manipulation/ImageManipulationPlugin.svelte.js

@@ -1,87 +0,0 @@
-import Sliders from 'phosphor-svelte/lib/Sliders';
-import { BasePlugin } from '../../types/plugin';
-import { applyFilters, clearFilters, hasActiveFilters } from './filters';
-import { DEFAULT_FILTERS } from './types';
-import ImageManipulationPanel from './ImageManipulationPanel.svelte';
-import { m } from '../../state/i18n.svelte';
-export class ImageManipulationPlugin extends BasePlugin {
-    id = 'image-manipulation';
-    name = 'Image Manipulation';
-    version = '1.0.0';
-    // Reactive state using Svelte 5 runes
-    _panelOpen = $state(false);
-    _filters = $state({ ...DEFAULT_FILTERS });
-    osd = null;
-    onRegister(context) {
-        super.onRegister(context);
-        // Register menu button
-        context.registerMenuButton({
-            id: `${this.id}:toggle`,
-            icon: Sliders,
-            get tooltip() {
-                return m.image_adjustments();
-            },
-            onClick: () => this.togglePanel(),
-            isActive: () => this._panelOpen,
-            activeClass: 'btn-secondary',
-            order: 50,
-        });
-        // Register panel
-        context.registerPanel({
-            id: `${this.id}:panel`,
-            component: ImageManipulationPanel,
-            position: 'left',
-            isVisible: () => this._panelOpen,
-            props: {
-                filters: this._filters,
-                onFilterChange: (f) => this.setFilters(f),
-                onReset: () => this.resetFilters(),
-                onClose: () => this.togglePanel(),
-            },
-        });
-    }
-    onViewerReady(viewer) {
-        this.osd = viewer;
-        // Apply existing filters if any
-        if (hasActiveFilters(this._filters)) {
-            applyFilters(viewer, this._filters);
-        }
-        // Re-apply filters when new images unlock (canvas change)
-        this.osd.addHandler('open', () => {
-            if (this.osd && hasActiveFilters(this._filters)) {
-                applyFilters(this.osd, this._filters);
-            }
-        });
-    }
-    onDestroy() {
-        if (this.osd) {
-            clearFilters(this.osd);
-        }
-        this.osd = null;
-        super.onDestroy();
-    }
-    // Public API
-    togglePanel() {
-        this._panelOpen = !this._panelOpen;
-    }
-    setFilters(filters) {
-        // Mutate properties to maintain reference for bound props
-        this._filters.brightness = filters.brightness;
-        this._filters.contrast = filters.contrast;
-        this._filters.saturation = filters.saturation;
-        this._filters.invert = filters.invert;
-        this._filters.grayscale = filters.grayscale;
-        if (this.osd) {
-            applyFilters(this.osd, filters);
-        }
-    }
-    resetFilters() {
-        Object.assign(this._filters, DEFAULT_FILTERS);
-        if (this.osd) {
-            clearFilters(this.osd);
-        }
-    }
-    getFilters() {
-        return { ...this._filters };
-    }
-}