@recogito/metaphor-annotation-plugin 0.0.0-stage → 0.0.11-beta.1

package/README.md

@@ -1,3 +1,103 @@
-# Temporary Holding Version
+# Metaphor Annotation View
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Recogito Studio plugin that **injects a custom Metaphor Annotation View** for working with metaphor in TEI documents, fully replacing the standard Recogito Studio text-/image annotation view. This plugin provides:
+1. A new Astro page route at `/[lang]/annotate-metaphor/[contextId]/[documentId]`
+2. A new menu option in the Document Card, which opens the document in the Metaphor Annotation View.
+
+## Overview
+
+### Injected Page Route
+
+The annotation view is injected using the standard Astro Integrations mechanism (see `src/index.ts`). The page itself is a minimal `.astro` file (`src/pages/metaphor-annotation-view.astro`) that:
+- Computes the realtime channel ID (derived from the server-side env variable).
+- Instantiates the React entry-point component.
+
+> [!NOTE]
+> The React component is instantiated with `client:only`. This is necessary because OpenSeadragon is not compatible with SSR! Initially, I had trouble with `client:only` failing in Vite (`client:load` was fine):
+>
+> ```
+> The request url [...] is outside of Vite serving allow list
+> ```
+>
+> I got around this by explicitly allowing the parent directory in the dev app config (`.dev/astro.config.mjs`). This adjustment should only be necessary in dev mode, and wouldn't be needed in a Recogito Studio production deployment. But I haven't tested yet!
+
+### Document Menu Extension
+
+The `GoToMetaphorAnnotationView` extension (`src/extensions/GoToMetaphorAnnotationView.tsx`) adds a new menu entry to the `project:document-actions` extension point, providing a link to the custom route.
+
+<img src="menu-extension-screenshot.png" style="max-width: 600px;" width="600" />
+
+> [!WARNING]
+> Currently, we have no mechanism for disabling or replacing the standard **Open document** and **Open document in new tab** entries. This may be worth thinking about for later!
+
+### Metaphor Annotation View
+
+The annotation view itself is a React single page app (`src/pages/_components/TeiMetaphorView/TeiMetaphorView.tsx`). It receives the following input props from the `.astro` page:
+
+- **documentId**
+- **contextId**
+- **channelId** for realtime annotation updates
+
+> [!IMPORTANT]
+> The view only supports **TEI/XML documents**. For other content types (plaintext, PDF, image) it mounts an error message instead of the annotation view. Later, we should implement separate React SPAs, and conditionally load them from the `.astro` page.
+
+**Implementation Notes:**
+
+- Backend interaction happens through the SDK. This requires an **.env file with valid credentials** in the `.dev/` folder.
+- I added convenience hooks for easier access to document, context and stored file content.
+- Similarly, I added a simplified `SupabaseStorageAdapter` (`src/pages/_components/shared/components/SupabaseStorageAdapter.tsx`), adapted from the [core codebase](https://github.com/recogito/recogito-client/blob/develop/src/components/SupabasePlugin/SupabasePlugin.ts). This component transparently handles annotation storage and realtime sync.
+
+## Installation
+
+To test this plugin, you'll need access to a live Recogito Studio backend. For most development, I recommend running the plugin through the SDK development app (already included in this repo), though setup is tricky.
+
+### 1. Build the Plugin
+
+First, build the plugin itself:
+
+```sh
+cd .dev
+npm install
+cd ..
+npm install
+npm run build
+```
+
+### 2. Install in a Local Recogito Client
+
+1. Clone a local copy of the [recogito-client](https://github.com/recogito/recogito-client).
+2. Make sure a valid `.env` file is configured in your client.
+3. Add this plugin as a local `file:` dependency in the client's `package.json` (adjust the path as needed), then run `npm install`:
+
+   ```jsonc
+   "dependencies": {
+     // ...
+     "@recogito/metaphor-annotation-plugin": "file:../metaphor-annotation-plugin"
+     // ...
+   }
+   ```
+4. Register the plugin by adding its package name to `INSTALLED_PLUGINS` in the client's `.env`:
+
+   ```sh
+   INSTALLED_PLUGINS="@recogito/metaphor-annotation-plugin"
+   ```
+5. Start Recogito Studio with `npm start`.
+6. To verify installation was successful: open a project, go to **Project Settings** → **Plugins** and check if the plugin is available in the plugin gallery.
+7. Navigate to a **TEI document**, open it in the annotation view, and note its **contextId** and **documentId** from the URL (e.g. `http://localhost:4321/en/annotate/[contextId]/[documentId]`).
+
+### 3. Run with the Development App
+
+For active development, it's easier to use the plugin **outside of Recogito Studio**, with the SDK development app (with hot-reloading).
+
+**Requirements:**
+
+- A valid `.env` file in the `.dev/` folder with backend credentials (see `.dev/.env.example`).
+- You must be **logged in to Recogito Studio**. The dev app does not currently provide a login mechanism. Therefore the ugly workaround is:
+  - Start a local Recogito Client (e.g. at http://localhost:4321) and log in.
+  - Stop Recogito, then **run the dev app on the same port**. This reuses the login credentials from your earlier session.
+
+Finally, open a valid context/document manually:
+
+```
+http://localhost:4321/en/annotate-metaphor/[contextId]/[documentId]
+```

package/dist/extensions/GoToMetaphorAnnotationView.d.ts

@@ -0,0 +1,3 @@
+import { DocumentCardActionsExtensionProps } from '@recogito/studio-sdk';
+export declare const GoToMetaphorAnnotationView: import("react").ForwardRefExoticComponent<DocumentCardActionsExtensionProps<any> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=GoToMetaphorAnnotationView.d.ts.map

package/dist/extensions/GoToMetaphorAnnotationView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoToMetaphorAnnotationView.d.ts","sourceRoot":"","sources":["../../src/extensions/GoToMetaphorAnnotationView.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iCAAiC,EAAE,MAAM,sBAAsB,CAAC;AAGzE,eAAO,MAAM,0BAA0B,mIAyBtC,CAAC"}

package/dist/extensions/GoToMetaphorAnnotationView.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { useTranslation } from 'react-i18next';
+export const GoToMetaphorAnnotationView = forwardRef((props, forwardedRef) => {
+    const { t, i18n } = useTranslation();
+    // the metaphor view supports TEI XML documents and IIIF images
+    const isTei = props.document.content_type === 'text/xml';
+    const isIIIF = props.document.meta_data?.protocol?.startsWith('IIIF');
+    if (!isTei && !isIIIF)
+        return null;
+    const onSelect = () => (window.location.href = `/${i18n.language}/annotate-metaphor/${props.context.id}/${props.document.id}`);
+    return (_jsx(Dropdown.Item, { ref: forwardedRef, className: 'dropdown-item', onSelect: onSelect, children: t('Open in Metaphor Annotation View') }));
+});

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import type { AstroIntegration } from 'astro';
+declare const plugin: () => AstroIntegration;
+export default plugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAuB9C,QAAA,MAAM,MAAM,QAAO,gBAmBjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/index.js

@@ -0,0 +1,37 @@
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { registerPlugin } from '@recogito/studio-sdk';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const MetaphorAnnotationViewPlugin = {
+    name: "Metaphor Annotation View",
+    module_name: '@recogito/metaphor-annotation-plugin',
+    description: "A plugin that adds the Metaphor Annotation View, a custom annotation view for TEI documents.",
+    author: "Performant Software",
+    homepage: "https://www.performantsoftware.com/",
+    extensions: [
+        {
+            name: "metaphor-annotation-view-menuitem",
+            component_name: "GoToMetaphorAnnotationView",
+            extension_point: "project:document-actions",
+        }
+    ]
+};
+const plugin = () => ({
+    name: "plugin-metaphor-annotation-view",
+    hooks: {
+        "astro:config:setup": ({ config, logger, injectRoute }) => {
+            // Register document menu items
+            registerPlugin(MetaphorAnnotationViewPlugin, config, logger);
+            // Inject route to the Metaphor Annotation View
+            logger.info('Injecting new API route: /[lang]/annotate-metaphor/[contextId]/[documentId]');
+            const integrationPagePath = join(__dirname, 'pages', 'metaphor-annotation-view.astro');
+            injectRoute({
+                pattern: '/[lang]/annotate-metaphor/[contextId]/[documentId]',
+                entrypoint: integrationPagePath,
+                prerender: false
+            });
+        },
+    },
+});
+export default plugin;

package/dist/pages/_components/ImageMetaphorView/ImageMetaphorView.css

@@ -0,0 +1,22 @@
+#metaphor-image-root {
+  display: flex;
+  max-width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* OpenSeadragon needs an explicitly-sized container */
+.ia-osd-container {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--gray-100, #f4f4f4);
+}
+
+/* "Hide all" also hides relations (arrows) */
+.ia-hide-arrows .a9s-arrows-layer {
+  display: none;
+}

package/dist/pages/_components/ImageMetaphorView/ImageMetaphorView.d.ts

@@ -0,0 +1,10 @@
+import { type Context, type Document, type Project } from '@recogito/studio-sdk';
+interface ImageMetaphorViewProps {
+    channelId: string;
+    context: Context;
+    document: Document;
+    project: Project;
+}
+export declare const ImageMetaphorView: (props: ImageMetaphorViewProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageMetaphorView.d.ts.map

package/dist/pages/_components/ImageMetaphorView/ImageMetaphorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageMetaphorView.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/ImageMetaphorView/ImageMetaphorView.tsx"],"names":[],"mappings":"AAuBA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,QAAQ,EACb,KAAK,OAAO,EACb,MAAM,sBAAsB,CAAC;AAmC9B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAElB,OAAO,EAAE,OAAO,CAAC;IAEjB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,gCA8Q9D,CAAC"}

package/dist/pages/_components/ImageMetaphorView/ImageMetaphorView.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { Annotorious, AnnotoriousPlugin, OpenSeadragonAnnotationPopup, OpenSeadragonAnnotator, OpenSeadragonHoverTooltip, OpenSeadragonViewer, } from '@annotorious/react';
+import { mountPlugin as ToolsPlugin } from '@annotorious/plugin-tools';
+import { mountPlugin as MagneticOutlinePlugin } from '@annotorious/plugin-magnetic-outline';
+import { AuthorColorProvider, FilterState, SelectionURLState, Spinner, } from '@recogito/studio-sdk/components';
+import { HideAllState } from '../shared/components';
+import { FilterAdapter } from './components/FilterAdapter';
+import { useDocumentIIIF } from '@recogito/studio-sdk/iiif';
+import { useDocumentLayers } from '../shared/hooks/useDocumentLayers';
+import { useLayerPolicies } from '../shared/hooks/useLayerPolicies';
+import { useSelectAction } from '../shared/hooks/useSelectAction';
+import { StorageAdapter } from '../shared/components';
+import { supabase } from '../shared/supabase';
+import clientI18next from '../shared/i18n';
+import { EditorToolbar } from '../shared/components/EditorToolbar';
+import { Toolbar, ImageMoreTools } from './components/Toolbar';
+import { AnnotationPanel, } from './components/AnnotationPanel';
+import { ShapeToolbar } from './components/ShapeToolbar';
+import { ImageArrows } from './components/ImageArrows';
+import { HoverTooltip } from './components/HoverTooltip';
+import { useMultiPagePresence } from './hooks';
+import { ImageUndoStack } from './components/ImageUndoStack';
+import { MetadataPanel } from './components/MetadataPanel';
+const CANTALOUPE_PATH = import.meta.env
+    .PUBLIC_IIIF_CANTALOUPE_PATH;
+const getAccessToken = () => supabase.auth.getSession().then(({ data }) => data.session?.access_token);
+const OSD_BASE_OPTIONS = {
+    crossOriginPolicy: 'Anonymous',
+    gestureSettingsMouse: {
+        clickToZoom: false,
+        dblClickToZoom: false,
+    },
+    gestureSettingsTouch: {
+        pinchRotate: true,
+    },
+    maxZoomLevel: 100,
+    minZoomLevel: 0.1,
+    preserveImageSizeOnResize: true,
+    showNavigationControl: false,
+    showRotationControl: true,
+    visibilityRatio: 0.2,
+    drawer: 'canvas',
+};
+// Match the client's default annotation style for now
+const DRAWING_STYLE = (state) => ({
+    fill: '#0080ff',
+    fillOpacity: state?.hovered ? 0.28 : 0.2,
+    stroke: '#0080ff',
+    strokeOpacity: state?.selected ? 0.9 : 0.5,
+    strokeWidth: state?.selected ? 2 : 1,
+});
+// Same as the client: annotations on inactive (read-only) layers
+const READ_ONLY_STYLE = (state) => ({
+    fill: '#010101',
+    fillOpacity: state?.hovered ? 0.1 : 0,
+    stroke: '#010101',
+    strokeOpacity: state?.selected ? 1 : 0.65,
+    strokeWidth: state?.selected ? 2.5 : 2,
+});
+export const ImageMetaphorView = (props) => {
+    const { channelId, context, document, project } = props;
+    const isIIIF = document.meta_data?.protocol?.startsWith('IIIF');
+    const { layers, activeLayer } = useDocumentLayers(document.id, context.id);
+    const policies = useLayerPolicies(activeLayer?.id);
+    const isLocked = Boolean(project.is_locked);
+    const style = useMemo(() => (annotation, state) => {
+        const layerId = annotation
+            .layer_id;
+        return activeLayer && layerId && layerId !== activeLayer.id
+            ? READ_ONLY_STYLE(state)
+            : DRAWING_STYLE(state);
+    }, [activeLayer?.id]);
+    const annoRef = useRef(null);
+    // Creators and layer admins can edit, everyone else can only select. The
+    // resulting `editable` flag drives the popups and the Selected tab.
+    const selectAction = useSelectAction({
+        isLocked,
+        activeLayerId: activeLayer?.id,
+        policies,
+        getUser: () => annoRef.current?.getUser(),
+    });
+    // Resolves remote IIIF (meta_data.url) and locally-uploaded images (served
+    // via cantaloupe)
+    const { manifest, canvases, currentCanvas, currentImage, image, error, authToken, isPresentationManifest, setCurrentCanvas, } = useDocumentIIIF(document, {
+        cantaloupePath: CANTALOUPE_PATH,
+        getAccessToken,
+    });
+    // OSD tile source: the info.json URL for a IIIF image service, or the plain
+    // image URL for a static image
+    const tilesource = useMemo(() => currentImage
+        ? currentImage.type === 'static'
+            ? currentImage.url
+            : currentImage.serviceUrl
+        : undefined, [currentImage]);
+    const [present, setPresent] = useState([]);
+    // Where other users are working, for multi-canvas documents
+    const { activeUsers, onPageActivity } = useMultiPagePresence(present);
+    const isMultiCanvas = canvases.length > 1;
+    const [privacy, setPrivacy] = useState('public');
+    const [tool, setTool] = useState('rectangle');
+    const [drawingEnabled, setDrawingEnabled] = useState(false);
+    const [arrowsMode, setArrowsMode] = useState('select');
+    const [arrowsVisibility, setArrowsVisibility] = useState('ALWAYS');
+    const [annotationTab, setAnnotationTab] = useState();
+    const [metadataOpen, setMetadataOpen] = useState(true);
+    const metadataOpenButtonRef = useRef(null);
+    const onMetadataOpenChange = (open) => {
+        setMetadataOpen(open);
+        if (!open) {
+            metadataOpenButtonRef.current?.focus();
+        }
+    };
+    const options = useMemo(() => {
+        if (!tilesource)
+            return OSD_BASE_OPTIONS;
+        return {
+            ...OSD_BASE_OPTIONS,
+            tileSources: {
+                tileSource: tilesource,
+                loadTilesWithAjax: Boolean(authToken),
+                ajaxHeaders: authToken
+                    ? { Authorization: `Bearer ${authToken}` }
+                    : undefined,
+            },
+            crossOriginPolicy: authToken ? undefined : 'Anonymous',
+            ajaxWithCredentials: authToken ? true : undefined,
+        };
+    }, [tilesource, authToken]);
+    return (_jsx(I18nextProvider, { i18n: clientI18next, children: !isIIIF ? (_jsx("div", { className: 'view-unsupported', children: clientI18next.t('This document type is not supported in this view.') })) : error ? (_jsx("div", { className: 'view-unsupported', children: error })) : activeLayer && tilesource ? (_jsx(AuthorColorProvider, { children: _jsx(Annotorious, { children: _jsx(FilterState, { children: _jsx(HideAllState, { children: _jsxs("div", { id: 'metaphor-image-root', children: [_jsx(MetadataPanel, { document: document, open: metadataOpen, onOpenChange: onMetadataOpenChange, canvases: canvases, currentCanvas: currentCanvas, image: image, manifest: manifest, authToken: authToken, onSelectCanvas: setCurrentCanvas, activeUsers: activeUsers }), _jsx("div", { id: 'main', children: _jsxs(OpenSeadragonAnnotator, { ref: annoRef, autoSave: true, disableUndoRedoKeys: true, tool: tool, drawingMode: 'drag', drawingEnabled: drawingEnabled && !isLocked, userSelectAction: selectAction, style: style, onInitError: (error) => console.error('[metaphor] OSD annotator init failed', error), children: [_jsx(EditorToolbar, { annotationsOpen: !!annotationTab, context: context, document: document, metadataOpen: metadataOpen, metadataOpenButtonRef: metadataOpenButtonRef, onMetadataOpenChange: onMetadataOpenChange, present: present, project: project, privacy: privacy, onChangePrivacy: setPrivacy, onAnnotationsOpenChange: (open) => setAnnotationTab(open ? 'list' : undefined), tools: 
+                                                // no drawing tools in locked projects
+                                                !isLocked && (_jsx(Toolbar, { tool: tool, drawingEnabled: drawingEnabled, arrowsMode: arrowsMode, onChangeTool: setTool, onSetDrawingEnabled: setDrawingEnabled, onSetArrowsMode: setArrowsMode })), moreMenu: _jsx(ImageMoreTools, { privacy: privacy, arrowsVisibility: arrowsVisibility, onChangePrivacy: setPrivacy, onSetArrowsVisibility: setArrowsVisibility }) }), _jsx(OpenSeadragonViewer, { className: 'ia-osd-container', options: options }, currentCanvas?.id), _jsx(ImageUndoStack, {}), _jsx(SelectionURLState, { backButton: true }), _jsx(FilterAdapter, {}), layers.length > 0 && (_jsx(StorageAdapter, { activeLayer: activeLayer, channelId: channelId, layers: layers, onPresence: setPresent, onOffPageActivity: isMultiCanvas ? onPageActivity : undefined, onSelectionChange: isMultiCanvas && currentCanvas
+                                                    ? (user) => onPageActivity({ source: currentCanvas.id, user })
+                                                    : undefined, privacyMode: privacy === 'private', source: isPresentationManifest ? currentCanvas?.id : undefined })), _jsx(OpenSeadragonHoverTooltip, { tooltip: (tooltipProps) => (_jsx(HoverTooltip, { annotation: tooltipProps.annotation })) }), _jsx(OpenSeadragonAnnotationPopup, { popup: (popupProps) => (_jsx(ShapeToolbar, { annotation: popupProps.annotation, editable: Boolean(popupProps.editable), onClickAdvanced: () => setAnnotationTab('selected') })) }), _jsx(AnnotoriousPlugin, { plugin: ToolsPlugin }), _jsx(AnnotoriousPlugin, { plugin: MagneticOutlinePlugin }), _jsx(ImageArrows, { mode: arrowsMode, visibility: arrowsVisibility })] }) }), _jsx(AnnotationPanel, { isLocked: isLocked, tab: annotationTab, onStateChange: setAnnotationTab })] }) }) }) }) })) : (_jsx("div", { className: 'spinner-container', children: _jsx(Spinner, { className: 'spinner', size: 32 }) })) }));
+};

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/AnnotationPanel.d.ts

@@ -0,0 +1,9 @@
+export type AnnotationPanelTab = 'selected' | 'list' | 'settings';
+interface AnnotationPanelProps {
+    isLocked: boolean;
+    tab?: AnnotationPanelTab;
+    onStateChange(tab?: AnnotationPanelTab): void;
+}
+export declare const AnnotationPanel: (props: AnnotationPanelProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AnnotationPanel.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/AnnotationPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/AnnotationPanel.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AAElE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAElB,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAEzB,aAAa,CAAC,GAAG,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCA8D1D,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/AnnotationPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { XIcon, CursorIcon, ChatsIcon, SlidersHorizontalIcon, } from '@phosphor-icons/react';
+import { Button } from '@recogito/studio-sdk/components';
+import { SelectedTab } from './SelectedTab';
+import { ListTab } from './ListTab';
+import { SettingsTab } from './SettingsTab';
+import { Tabs, TabsList, TabsTrigger, TabsContent, } from '../../../shared/components';
+export const AnnotationPanel = (props) => {
+    const { t } = useTranslation();
+    return (_jsx("div", { className: `annotation-panel ${props.tab ? 'open' : 'closed'}`, inert: !props.tab, children: _jsxs("div", { className: 'annotation-panel-content', children: [_jsxs("div", { className: 'annotation-panel-header', children: [_jsx("h3", { className: 'annotation-panel-title', children: t('Annotations') }), _jsx(Button, { className: 'unstyled toolbar-btn icon-only', onClick: () => props.onStateChange(undefined), "aria-label": t('Close sidebar'), children: _jsx(XIcon, { weight: 'bold', "aria-hidden": 'true' }) })] }), _jsxs(Tabs, { value: props.tab || 'selected', onValueChange: (val) => props.onStateChange(val), className: 'annotation-panel-tabs-root', children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: 'selected', children: [_jsx(CursorIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('Selected') })] }), _jsxs(TabsTrigger, { value: 'list', children: [_jsx(ChatsIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('List') })] }), _jsxs(TabsTrigger, { value: 'settings', children: [_jsx(SlidersHorizontalIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('Settings') })] })] }), _jsx(TabsContent, { value: 'selected', className: 'annotation-panel-tab-content', children: _jsx(SelectedTab, { isLocked: props.isLocked }) }), _jsx(TabsContent, { value: 'list', className: 'annotation-panel-tab-content list-tab-container', children: _jsx(ListTab, {}) }), _jsx(TabsContent, { value: 'settings', className: 'annotation-panel-tab-content', children: _jsx(SettingsTab, {}) })] })] }) }));
+};

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ImageListCard.d.ts

@@ -0,0 +1,11 @@
+import { type SupabaseAnnotation } from '@recogito/annotorious-supabase';
+interface ImageListCardProps {
+    annotation: SupabaseAnnotation;
+    selected: boolean;
+    emphasize: boolean;
+    deemphasize: boolean;
+    onToggleSelect(): void;
+}
+export declare const ImageListCard: (props: ImageListCardProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageListCard.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ImageListCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageListCard.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ImageListCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,gCAAgC,CAAC;AAcxC,UAAU,kBAAkB;IAC1B,UAAU,EAAE,kBAAkB,CAAC;IAE/B,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,WAAW,EAAE,OAAO,CAAC;IAErB,cAAc,IAAI,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAyHtD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ImageListCard.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Visibility, } from '@recogito/annotorious-supabase';
+import { ChatTeardropTextIcon, LockIcon } from '@phosphor-icons/react';
+import { Avatar } from '@recogito/studio-sdk/components';
+import { getCategoryColor, RelationPreview, useRelations } from '../../shared';
+const timeAgo = (date, locale) => {
+    const rtf = new Intl.RelativeTimeFormat(locale || 'en', { numeric: 'auto' });
+    const mins = Math.round((date.getTime() - Date.now()) / 60000);
+    if (Math.abs(mins) < 60)
+        return rtf.format(mins, 'minute');
+    const hrs = Math.round(mins / 60);
+    if (Math.abs(hrs) < 24)
+        return rtf.format(hrs, 'hour');
+    return rtf.format(Math.round(hrs / 24), 'day');
+};
+export const ImageListCard = (props) => {
+    const { t, i18n } = useTranslation();
+    const { annotation } = props;
+    const category = useMemo(() => annotation.bodies.find((b) => b.purpose === 'classifying')?.value, [annotation.bodies]);
+    const properties = useMemo(() => annotation.bodies.filter((b) => b.purpose === 'tagging' && b.value), [annotation.bodies]);
+    const creator = annotation.target.creator;
+    const creatorName = creator?.name || t('Unknown User');
+    const created = annotation.target.created || new Date();
+    const isPrivate = annotation.visibility === Visibility.PRIVATE;
+    const arrows = useRelations(annotation.id);
+    const commentCount = useMemo(() => annotation.bodies.filter((b) => b.purpose === 'commenting' || b.purpose === 'replying').length, [annotation.bodies]);
+    const cardClass = [
+        'list-card',
+        props.emphasize ? 'is-emphasized' : '',
+        props.deemphasize ? 'is-deemphasized' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: cardClass, children: [_jsx("button", { type: 'button', className: 'unstyled list-card-select', "aria-pressed": props.selected, "aria-label": t('Select Annotation'), onClick: props.onToggleSelect }), _jsxs("div", { className: 'list-card-content', children: [category ? (_jsx("div", { className: 'ia-list-card-category', style: { backgroundColor: getCategoryColor(category) }, children: category })) : (_jsx("div", { className: 'ia-list-card-untitled', children: t('Untitled annotation') })), properties.length > 0 && (_jsx("div", { className: 'list-card-tags', children: properties.map((body, idx) => (_jsxs("div", { className: 'list-card-tag', children: [_jsx("div", { className: 'list-card-tag-dot' }), _jsx("span", { children: body.value })] }, body.id || idx))) })), arrows.length > 0 && (_jsx("div", { className: 'ia-relation-list', children: arrows.map((arrow) => (_jsx(RelationPreview, { arrow: arrow, referenceAnnotationId: annotation.id }, arrow.id))) })), _jsxs("div", { className: 'list-card-footer', children: [_jsxs("div", { className: 'list-card-meta', children: [_jsx(Avatar, { id: creator?.id || 'unknown', name: creatorName, avatar: creator?.avatar, size: 'sm' }), _jsx("span", { className: 'list-card-author', children: creatorName }), _jsxs("span", { className: 'list-card-date', children: ["\u00B7 ", timeAgo(created, i18n.language)] })] }), _jsxs("div", { className: 'list-card-footer-actions', children: [commentCount > 0 && (_jsxs("span", { className: 'list-card-comments', children: [_jsx(ChatTeardropTextIcon, { size: 14, weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { children: commentCount })] })), isPrivate && (_jsx("span", { className: 'list-card-private', title: t('Private'), children: _jsx(LockIcon, { size: 14, weight: 'bold' }) }))] })] })] })] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ListTab.d.ts

@@ -0,0 +1,2 @@
+export declare const ListTab: () => import("react").JSX.Element;
+//# sourceMappingURL=ListTab.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ListTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ListTab.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,OAAO,mCA2NnB,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ListTab.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import * as Select from '@radix-ui/react-select';
+import { CaretDownIcon, CheckIcon, SortAscendingIcon, SortDescendingIcon, } from '@phosphor-icons/react';
+import { useAnnotationStore, useAnnotator, useSelection, useViewportState, } from '@annotorious/react';
+import { useFilter } from '@recogito/studio-sdk/components';
+import { isArrowAnchor, isArrowAnnotation } from '@annotorious/plugin-arrows-react';
+import { ImageListCard } from './ImageListCard';
+export const ListTab = () => {
+    const { t } = useTranslation();
+    const [sortBy, setSortBy] = useState('created');
+    const [sortDirection, setSortDirection] = useState('desc');
+    const [viewportFilter, setViewportFilter] = useState('all');
+    const anno = useAnnotator();
+    const store = useAnnotationStore();
+    const [allAnnotations, setAllAnnotations] = useState([]);
+    // Keep annotations list in sync
+    useEffect(() => {
+        if (!store)
+            return;
+        const update = () => setAllAnnotations(store.all());
+        update();
+        store.observe(update);
+        return () => store.unobserve(update);
+    }, [store]);
+    const visibleAnnotations = useViewportState(250);
+    const { selected } = useSelection();
+    const { filter } = useFilter();
+    const hasSelection = selected.length > 0;
+    const isSelected = (annotation) => selected.some((s) => s.annotation.id === annotation.id);
+    // When a relation (arrow) is selected, emphasize the annotations it links
+    const linkedBySelection = useMemo(() => new Set(selected
+        .map((s) => s.annotation)
+        .filter(isArrowAnnotation)
+        .flatMap(({ target: { selector } }) => [selector.start, selector.end])
+        .filter(isArrowAnchor)
+        .map((anchor) => anchor.annotationId)), [selected]);
+    const isEmphasized = (annotation) => isSelected(annotation) || linkedBySelection.has(annotation.id);
+    // Relations (arrows) are shown on the cards of the annotations they link,
+    // not as cards of their own
+    const unfiltered = (viewportFilter === 'viewport' ? visibleAnnotations : allAnnotations).filter((a) => !isArrowAnnotation(a));
+    const activeAnnotations = filter ? unfiltered.filter(filter) : unfiltered;
+    const sorted = useMemo(() => {
+        const getLatest = (a) => Math.max(a.target.created?.getTime() || 0, ...a.bodies.map((b) => b.created?.getTime() || 0));
+        const list = [...activeAnnotations].sort((a, b) => sortBy === 'updated'
+            ? getLatest(a) - getLatest(b)
+            : (a.target.created?.getTime() || 0) -
+                (b.target.created?.getTime() || 0));
+        if (sortDirection === 'desc')
+            list.reverse();
+        return list;
+    }, [activeAnnotations, sortBy, sortDirection]);
+    const onToggleSelect = (annotation) => {
+        if (!anno)
+            return;
+        if (isSelected(annotation)) {
+            anno.state.selection.clear();
+        }
+        else {
+            anno.state.selection.setSelected(annotation.id);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: 'list-header', children: [_jsxs("div", { className: 'list-header-group', children: [_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'unstyled toolbar-btn icon-only', "aria-label": t('Toggle sort direction'), onClick: () => setSortDirection((prev) => prev === 'asc' ? 'desc' : 'asc'), children: sortDirection === 'asc' ? (_jsx(SortAscendingIcon, {})) : (_jsx(SortDescendingIcon, {})) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { side: 'top', className: 'tooltip-content', children: [sortDirection === 'asc'
+                                                        ? t('Sort descending')
+                                                        : t('Sort ascending'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }) }), _jsxs(Select.Root, { value: sortBy, onValueChange: (v) => setSortBy(v), children: [_jsxs(Select.Trigger, { className: 'unstyled list-select-trigger', children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(CaretDownIcon, { size: 12 }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'list-select-content', position: 'popper', sideOffset: 4, children: _jsxs(Select.Viewport, { children: [_jsxs(Select.Item, { value: 'created', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Created') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] }), _jsxs(Select.Item, { value: 'updated', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Updated') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] })] }) }) })] })] }), _jsx("div", { className: 'list-header-group', children: _jsxs(Select.Root, { value: viewportFilter, onValueChange: (v) => setViewportFilter(v), children: [_jsxs(Select.Trigger, { className: 'unstyled list-select-trigger', children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(CaretDownIcon, { size: 12 }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'list-select-content', position: 'popper', sideOffset: 4, children: _jsxs(Select.Viewport, { children: [_jsxs(Select.Item, { value: 'all', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Show all') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] }), _jsxs(Select.Item, { value: 'viewport', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Current viewport') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] })] }) }) })] }) })] }), sorted.length === 0 ? (_jsx("div", { className: 'ia-panel-empty', children: _jsx("p", { children: viewportFilter === 'viewport'
+                        ? t('No annotations in the current view')
+                        : t('No annotations yet') }) })) : (_jsx("div", { className: 'list-cards-wrapper', children: sorted.map((annotation) => (_jsx(ImageListCard, { annotation: annotation, selected: isSelected(annotation), emphasize: hasSelection && isEmphasized(annotation), deemphasize: hasSelection && !isEmphasized(annotation), onToggleSelect: () => onToggleSelect(annotation) }, annotation.id))) }))] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListTab';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/index.js

@@ -0,0 +1 @@
+export * from './ListTab';

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedArrowAnnotation.d.ts

@@ -0,0 +1,8 @@
+import type { ArrowAnnotation } from '@annotorious/plugin-arrows-react';
+interface SelectedArrowAnnotationProps {
+    annotation: ArrowAnnotation;
+    editable: boolean;
+}
+export declare const SelectedArrowAnnotation: (props: SelectedArrowAnnotationProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SelectedArrowAnnotation.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedArrowAnnotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedArrowAnnotation.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedArrowAnnotation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGxE,UAAU,4BAA4B;IACpC,UAAU,EAAE,eAAe,CAAC;IAE5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,uBAAuB,GAAI,OAAO,4BAA4B,gCAqE1E,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedArrowAnnotation.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ShapesIcon, TrashIcon, XIcon } from '@phosphor-icons/react';
+import { createBody, useAnnotationStore } from '@annotorious/react';
+import { getCategoryColor, RelationPreview, SetCategory } from '../../shared';
+export const SelectedArrowAnnotation = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    // Relation categories reuse the shape categories (a 'classifying' body)
+    const category = useMemo(() => props.annotation.bodies.find((b) => b.purpose === 'classifying')?.value, [props.annotation]);
+    const onSetCategory = (value) => store?.addBody(createBody(props.annotation, { purpose: 'classifying', value }));
+    const onClearCategory = () => {
+        const body = props.annotation.bodies.find((b) => b.purpose === 'classifying');
+        if (body)
+            store?.deleteBody(body);
+    };
+    const onDelete = () => store?.deleteAnnotation(props.annotation.id);
+    return (_jsxs("div", { className: 'ia-selected', children: [_jsx("div", { className: 'ia-selected-section', children: category ? (_jsxs("div", { className: 'ia-category-chip', style: { backgroundColor: getCategoryColor(category) }, children: [_jsx("span", { children: category }), props.editable && (_jsx("button", { className: 'unstyled icon-only', "aria-label": t('Clear class'), onClick: onClearCategory, children: _jsx(XIcon, {}) }))] })) : props.editable && (_jsx(SetCategory, { onSetCategory: onSetCategory, children: _jsxs("button", { className: 'ia-add-class', children: [_jsx(ShapesIcon, { size: 20 }), " ", t('Add class')] }) })) }), _jsx("div", { className: 'ia-selected-section', children: _jsx(RelationPreview, { arrow: props.annotation }) }), props.editable && (_jsx("div", { className: 'ia-selected-footer', children: _jsxs("button", { className: 'danger', onClick: onDelete, children: [_jsx(TrashIcon, {}), " ", t('Delete relation')] }) }))] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedImageAnnotation.d.ts

@@ -0,0 +1,9 @@
+import { type ImageAnnotation } from '@annotorious/react';
+interface SelectedImageAnnotationProps {
+    annotation: ImageAnnotation;
+    editable: boolean;
+    isLocked: boolean;
+}
+export declare const SelectedImageAnnotation: (props: SelectedImageAnnotationProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SelectedImageAnnotation.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedImageAnnotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedImageAnnotation.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedImageAnnotation.tsx"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,eAAe,EAErB,MAAM,oBAAoB,CAAC;AAgB5B,UAAU,4BAA4B;IACpC,UAAU,EAAE,eAAe,CAAC;IAE5B,QAAQ,EAAE,OAAO,CAAC;IAElB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,uBAAuB,GAAI,OAAO,4BAA4B,gCAwJ1E,CAAC"}