triiiceratops 0.9.13 → 0.10.1

package/dist/types/plugin.d.ts

@@ -1,28 +1,5 @@
 import type { Component } from 'svelte';
-import type OpenSeadragon from 'openseadragon';
 import type { ViewerState } from '../state/viewer.svelte';
-/**
- * Context object passed to plugins during registration.
- * This is the stable public API that plugins depend on.
- */
-export interface PluginContext {
-    /** The ViewerState instance for accessing/modifying viewer state */
-    viewerState: ViewerState;
-    /** Get the OpenSeadragon viewer instance (null until ready) */
-    getOSDViewer(): OpenSeadragon.Viewer | null;
-    /** Register a menu button in the FloatingMenu */
-    registerMenuButton(button: PluginMenuButton): void;
-    /** Unregister a menu button by ID */
-    unregisterMenuButton(buttonId: string): void;
-    /** Register a panel component */
-    registerPanel(panel: PluginPanel): void;
-    /** Unregister a panel by ID */
-    unregisterPanel(panelId: string): void;
-    /** Emit a custom event that other plugins can listen to */
-    emit(eventName: string, data?: unknown): void;
-    /** Subscribe to custom events from other plugins */
-    on(eventName: string, handler: (data: unknown) => void): () => void;
-}
 /**
  * Menu button configuration for plugin UI injection.
  */
@@ -30,7 +7,7 @@ export interface PluginMenuButton {
     /** Unique identifier (convention: `pluginId:buttonName`) */
     id: string;
     /** Phosphor icon component */
-    icon: Component;
+    icon: Component<any>;
     /** Tooltip text */
     tooltip: string;
     /** Click handler */
@@ -49,7 +26,7 @@ export interface PluginPanel {
     /** Unique identifier (convention: `pluginId:panelName`) */
     id: string;
     /** Svelte component to render */
-    component: Component;
+    component: Component<any>;
     /** Props passed to the component */
     props?: Record<string, unknown>;
     /** Panel position in the viewer */
@@ -58,44 +35,26 @@ export interface PluginPanel {
     isVisible: () => boolean;
 }
 /**
- * Main plugin interface. All plugins must implement this.
+ * Simplified definition for a plugin.
+ * This allows plugins to be defined as simple objects with a component and icon.
  */
-export interface TriiiceratopsPlugin {
-    /** Unique plugin identifier (e.g., 'image-manipulation') */
-    readonly id: string;
-    /** Human-readable name */
-    readonly name: string;
-    /** Plugin version (semver) */
-    readonly version: string;
-    /**
-     * Called when plugin is registered with the viewer.
-     * Store the context and register UI elements here.
-     */
-    onRegister(context: PluginContext): void;
-    /**
-     * Called when OpenSeadragon viewer is ready.
-     * Attach OSD event handlers here.
-     */
-    onViewerReady?(viewer: OpenSeadragon.Viewer): void;
+export interface PluginDef {
+    /** Unique ID (optional, will be auto-generated if missing) */
+    id?: string;
+    /** Name/Tooltip for the menu button */
+    name: string;
+    /** Icon component */
+    icon: Component<any>;
+    /** Panel component */
+    panel: Component<any>;
+    /** Preferred position (default: 'left') */
+    position?: 'left' | 'right' | 'bottom' | 'overlay';
+    /** Props to pass to the panel component */
+    props?: Record<string, unknown>;
     /**
-     * Called when the plugin is being destroyed.
-     * Clean up all handlers and state.
+     * Lifecycle hook called when the plugin is registered.
+     * Use this to set up background logic, reactive effects, or event listeners
+     * that should run regardless of whether the plugin's UI is open.
      */
-    onDestroy?(): void;
-}
-/**
- * Optional base class providing common plugin functionality.
- */
-export declare abstract class BasePlugin implements TriiiceratopsPlugin {
-    abstract readonly id: string;
-    abstract readonly name: string;
-    abstract readonly version: string;
-    protected context: PluginContext | null;
-    onRegister(context: PluginContext): void;
-    onViewerReady?(viewer: OpenSeadragon.Viewer): void;
-    onDestroy(): void;
-    /** Convenience getter for ViewerState */
-    protected get viewerState(): ViewerState;
-    /** Convenience getter for OSD viewer */
-    protected get osdViewer(): OpenSeadragon.Viewer | null;
+    onInit?: (viewerState: ViewerState) => void;
 }

package/dist/types/plugin.js

@@ -1,23 +1 @@
-/**
- * Optional base class providing common plugin functionality.
- */
-export class BasePlugin {
-    context = null;
-    onRegister(context) {
-        this.context = context;
-    }
-    onDestroy() {
-        this.context = null;
-    }
-    /** Convenience getter for ViewerState */
-    get viewerState() {
-        if (!this.context) {
-            throw new Error(`Plugin ${this.id} accessed viewerState before registration`);
-        }
-        return this.context.viewerState;
-    }
-    /** Convenience getter for OSD viewer */
-    get osdViewer() {
-        return this.context?.getOSDViewer() ?? null;
-    }
-}
+export {};

package/dist/utils/annotationAdapter.d.ts

@@ -7,7 +7,9 @@ export interface ParsedAnnotation {
     body: {
         value: string;
         isHtml: boolean;
-    };
+        purpose?: string;
+        format?: string;
+    }[];
     isSearchHit: boolean;
 }
 export interface RectangleGeometry {
@@ -21,6 +23,15 @@ export interface PolygonGeometry {
     type: 'POLYGON';
     points: [number, number][];
 }
+/**
+ * Extract annotation body content (text, label, etc)
+ */
+export declare function extractBody(annotation: any): {
+    value: string;
+    isHtml: boolean;
+    purpose?: string;
+    format?: string;
+}[];
 /**
  * Parse Manifesto/IIIF annotation to internal format
  */

package/dist/utils/annotationAdapter.js

@@ -3,7 +3,9 @@
  * Handles Manifesto objects and raw JSON
  */
 function getAnnotationId(anno) {
-    return anno.id || anno['@id'] || (typeof anno.getId === 'function' ? anno.getId() : '');
+    return (anno.id ||
+        anno['@id'] ||
+        (typeof anno.getId === 'function' ? anno.getId() : ''));
 }
 /**
  * Parse xywh media fragment from target string
@@ -12,13 +14,14 @@ function getAnnotationId(anno) {
 function parseXywh(targetStr) {
     if (!targetStr)
         return null;
-    const match = targetStr.match(/xywh=(\d+),(\d+),(\d+),(\d+)/);
+    // Match xywh= optionally followed by "pixel:" and handle floats
+    const match = targetStr.match(/xywh=(?:pixel:)?([\d.]+),([\d.]+),([\d.]+),([\d.]+)/);
     if (match) {
         return {
-            x: parseInt(match[1], 10),
-            y: parseInt(match[2], 10),
-            w: parseInt(match[3], 10),
-            h: parseInt(match[4], 10),
+            x: parseFloat(match[1]),
+            y: parseFloat(match[2]),
+            w: parseFloat(match[3]),
+            h: parseFloat(match[4]),
         };
     }
     return null;
@@ -89,8 +92,19 @@ function extractSvgFromTarget(target) {
 function extractSvgValue(target) {
     if (!target)
         return null;
+    // Check for selector property or use target itself
+    let selector = target.selector || target;
+    // Handle array of selectors
+    if (Array.isArray(selector)) {
+        // Determine which selector to use?
+        // Usually SvgSelector is preferred if present
+        const svgSel = selector.find((s) => s.type === 'SvgSelector');
+        if (svgSel && svgSel.value)
+            return svgSel.value;
+        // Or just look for any with value?
+        return null;
+    }
     // Check for SvgSelector
-    const selector = target.selector || target;
     if (selector?.type === 'SvgSelector' && selector.value) {
         return selector.value;
     }
@@ -140,6 +154,15 @@ function convertSvgToPolygon(svgString) {
             const circlePoints = generateCirclePoints(cx, cy, r);
             points.push(...circlePoints);
         }
+        // Extract points from rect elements
+        const rects = doc.querySelectorAll('rect');
+        for (const rect of rects) {
+            const x = parseFloat(rect.getAttribute('x') || '0');
+            const y = parseFloat(rect.getAttribute('y') || '0');
+            const w = parseFloat(rect.getAttribute('width') || '0');
+            const h = parseFloat(rect.getAttribute('height') || '0');
+            points.push([x, y], [x + w, y], [x + w, y + h], [x, y + h]);
+        }
         if (points.length === 0) {
             return null;
         }
@@ -244,9 +267,25 @@ function extractXywhFromRawTarget(target) {
     }
     // Handle object with selector
     if (target.selector) {
-        const sel = target.selector;
+        let sel = target.selector;
+        // Handle array of selectors
+        if (Array.isArray(sel)) {
+            // Prefer FragmentSelector
+            const fragment = sel.find((s) => s.type === 'FragmentSelector' &&
+                s.value &&
+                s.value.includes('xywh='));
+            if (fragment)
+                return parseXywh(fragment.value);
+            // Or generic
+            const anyXywh = sel.find((s) => s.value && s.value.includes('xywh='));
+            if (anyXywh)
+                return parseXywh(anyXywh.value);
+            return null;
+        }
         const item = sel.item || sel;
-        if (item.value && typeof item.value === 'string' && item.value.includes('xywh=')) {
+        if (item.value &&
+            typeof item.value === 'string' &&
+            item.value.includes('xywh=')) {
             return parseXywh(item.value);
         }
     }
@@ -255,60 +294,80 @@ function extractXywhFromRawTarget(target) {
 /**
  * Extract annotation body content (text, label, etc)
  */
-function extractBody(annotation) {
-    let value = '';
-    let isHtml = false;
+export function extractBody(annotation) {
+    const bodies = [];
     // Try Manifesto getBody method
     if (typeof annotation.getBody === 'function') {
         const body = annotation.getBody();
-        if (body && Array.isArray(body)) {
-            const values = [];
-            for (const b of body) {
+        if (body) {
+            const bodyArr = Array.isArray(body) ? body : [body];
+            for (const b of bodyArr) {
                 const val = b.getValue ? b.getValue() : '';
                 if (val) {
-                    values.push(val);
                     const format = b.getFormat ? b.getFormat() : '';
-                    if (format === 'text/html' || format === 'application/html') {
-                        isHtml = true;
-                    }
+                    const purpose = b.getPurpose ? b.getPurpose() : undefined;
+                    bodies.push({
+                        value: val,
+                        isHtml: format === 'text/html' ||
+                            format === 'application/html',
+                        purpose: purpose,
+                        format: format,
+                    });
                 }
             }
-            value = values.join(' ');
         }
     }
     else {
         // Handle raw JSON body/resource
-        const getText = (r) => {
-            if (!r)
-                return '';
-            return r.chars || r.value || r['cnt:chars'] || '';
-        };
-        const checkHtml = (r) => {
-            if (!r)
-                return false;
-            return r.format === 'text/html' || r.type === 'TextualBody';
+        const processResource = (r) => {
+            const val = r.chars || r.value || r['cnt:chars'] || '';
+            if (val) {
+                const isHtml = r.format === 'text/html' || r.type === 'TextualBody';
+                bodies.push({
+                    value: val,
+                    isHtml,
+                    purpose: r.purpose,
+                    format: r.format,
+                });
+            }
         };
         if (annotation.resource) {
-            const resources = Array.isArray(annotation.resource) ? annotation.resource : [annotation.resource];
-            value = resources.map(getText).filter(Boolean).join(' ');
-            isHtml = resources.some(checkHtml);
+            const resources = Array.isArray(annotation.resource)
+                ? annotation.resource
+                : [annotation.resource];
+            resources.forEach(processResource);
         }
         else if (annotation.body) {
-            const bodyArr = Array.isArray(annotation.body) ? annotation.body : [annotation.body];
-            value = bodyArr.map(getText).filter(Boolean).join(' ');
-            isHtml = bodyArr.some(checkHtml);
+            const bodyArr = Array.isArray(annotation.body)
+                ? annotation.body
+                : [annotation.body];
+            bodyArr.forEach(processResource);
         }
     }
-    // Try to extract label if no body content found
-    if (!value) {
+    // fallback for label if no bodies found
+    if (bodies.length === 0) {
+        let value = '';
         if (typeof annotation.getLabel === 'function') {
             value = annotation.getLabel() || '';
         }
         else if (annotation.label) {
-            value = Array.isArray(annotation.label) ? annotation.label.join(' ') : annotation.label;
+            value = Array.isArray(annotation.label)
+                ? annotation.label.join(' ')
+                : annotation.label;
         }
+        if (value) {
+            bodies.push({ value, isHtml: false, purpose: 'commenting' });
+        }
+    }
+    // Default if still nothing
+    if (bodies.length === 0) {
+        bodies.push({
+            value: 'Annotation',
+            isHtml: false,
+            purpose: 'commenting',
+        });
     }
-    return { value: value || 'Annotation', isHtml };
+    return bodies;
 }
 /**
  * Parse Manifesto/IIIF annotation to internal format

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triiiceratops",
-  "version": "0.9.13",
+  "version": "0.10.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -31,10 +31,14 @@
       "svelte": "./dist/plugins/image-manipulation.js",
       "import": "./dist/plugins/image-manipulation.js"
     },
-    "./element": {
-      "import": "./dist/triiiceratops-element.js"
+    "./plugins/annotation-editor": {
+      "types": "./dist/plugins/annotation-editor/index.d.ts",
+      "svelte": "./dist/plugins/annotation-editor.js",
+      "import": "./dist/plugins/annotation-editor.js"
     },
-    "./element.iife": "./dist/triiiceratops-element.iife.js",
+    "./element": "./dist/triiiceratops-element.iife.js",
+    "./plugins/image-manipulation.iife": "./dist/triiiceratops-plugin-image-manipulation.iife.js",
+    "./plugins/annotation-editor.iife": "./dist/triiiceratops-plugin-annotation-editor.iife.js",
     "./style.css": "./dist/triiiceratops.css"
   },
   "peerDependencies": {
@@ -68,6 +72,8 @@
     "vitest": "^4.0.15"
   },
   "dependencies": {
+    "@annotorious/annotorious": "^3.7.19",
+    "@annotorious/openseadragon": "^3.7.19",
     "@tailwindcss/vite": "^4.1.17",
     "daisyui": "^5.5.8",
     "manifesto.js": "^4.3.0",
@@ -81,8 +87,9 @@
     "build:lib": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide && svelte-package --tsconfig ./tsconfig.app.json && rm -f dist/paraglide/.gitignore dist/paraglide/.prettierignore && vite build --config vite.config.lib.ts",
     "build:element": "vite build --config vite.config.element.ts",
     "build:demo": "vite build --config vite.config.demo.ts",
-    "build:consumer": "vite build --config vite.config.demo-consumer.ts",
-    "build:all": "pnpm build:lib && pnpm build:element && pnpm build:demo && pnpm build:consumer",
+    "build:consumer": "rm -rf docs/demo-consumer && mkdir -p docs/demo-consumer && cp src/demo-consumer/index.html docs/demo-consumer/index.html && cp src/demo-consumer/app.css docs/demo-consumer/app.css && rm -rf docs/dist && cp -r dist docs/dist",
+    "build:plugins-iife": "PLUGIN_NAME=image-manipulation vite build --config vite.config.plugins-iife.ts && PLUGIN_NAME=annotation-editor vite build --config vite.config.plugins-iife.ts",
+    "build:all": "pnpm build:lib && pnpm build:element && pnpm build:plugins-iife && pnpm build:demo && pnpm build:consumer",
     "preview": "vite preview",
     "dev:consumer": "vite --config vite.config.demo-consumer.ts",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",