@recogito/metaphor-annotation-plugin 0.0.11-beta.4 → 0.0.11-beta.7

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

@@ -1 +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"}
+{"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;AAoC9B,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,gCAgR9D,CAAC"}

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

@@ -20,6 +20,7 @@ import { AnnotationPanel, } from './components/AnnotationPanel';
 import { ShapeToolbar } from './components/ShapeToolbar';
 import { ImageArrows } from './components/ImageArrows';
 import { HoverTooltip } from './components/HoverTooltip';
+import { CurrentImageProvider } from './components/shared';
 import { useMultiPagePresence } from './hooks';
 import { ImageUndoStack } from './components/ImageUndoStack';
 import { MetadataPanel } from './components/MetadataPanel';
@@ -87,11 +88,11 @@ export const ImageMetaphorView = (props) => {
         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
+    // OSD tile source: the info.json URL for a IIIF image service, or an
+    // 'image' tile source for a static image.
     const tilesource = useMemo(() => currentImage
         ? currentImage.type === 'static'
-            ? currentImage.url
+            ? { type: 'image', url: currentImage.url }
             : currentImage.serviceUrl
         : undefined, [currentImage]);
     const [present, setPresent] = useState([]);
@@ -128,9 +129,9 @@ export const ImageMetaphorView = (props) => {
             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 }) })) }));
+    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(CurrentImageProvider, { image: currentImage, authToken: authToken, 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/ListTab/ImageListCard.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"ImageListCard.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/ListTab/ImageListCard.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,gCAAgC,CAAC;AAexC,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,gCAgItD,CAAC"}

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

@@ -4,7 +4,8 @@ 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';
+import { RelationPreview, ShapeSnippet, useRelations } from '../../shared';
+import { getCategoryColor, getCategoryTextColor } from '../../../../shared/categoryColors';
 const timeAgo = (date, locale) => {
     const rtf = new Intl.RelativeTimeFormat(locale || 'en', { numeric: 'auto' });
     const mins = Math.round((date.getTime() - Date.now()) / 60000);
@@ -33,5 +34,8 @@ export const ImageListCard = (props) => {
     ]
         .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' }) }))] })] })] })] }));
+    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: [_jsxs("div", { className: 'ia-list-card-header', children: [_jsx(ShapeSnippet, { annotation: annotation, size: 28 }), category ? (_jsx("div", { className: 'ia-list-card-category', style: {
+                                    backgroundColor: getCategoryColor(category),
+                                    color: getCategoryTextColor(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/SelectedTab/SelectedArrowAnnotation.d.ts.map

@@ -1 +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"}
+{"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;AAIxE,UAAU,4BAA4B;IACpC,UAAU,EAAE,eAAe,CAAC;IAE5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,uBAAuB,GAAI,OAAO,4BAA4B,gCAwE1E,CAAC"}

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

@@ -3,7 +3,8 @@ 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';
+import { RelationPreview, SetCategory } from '../../shared';
+import { getCategoryColor, getCategoryTextColor } from '../../../../shared/categoryColors';
 export const SelectedArrowAnnotation = (props) => {
     const { t } = useTranslation();
     const store = useAnnotationStore();
@@ -16,5 +17,8 @@ export const SelectedArrowAnnotation = (props) => {
             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')] }) }))] }));
+    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),
+                        color: getCategoryTextColor(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.map

@@ -1 +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"}
+{"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,gCAyL1E,CAAC"}

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ArrowsLeftRightIcon, ChatsIcon, XIcon, ShapesIcon, TrashIcon, } from '@phosphor-icons/react';
 import { createBody, useAnnotationStore, } from '@annotorious/react';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Conversation, } from '../../../../shared/components';
-import { getCategoryColor, SetCategory, AddProperty, RelationPreview, useRelations, } from '../../shared';
+import { SetCategory, AddProperty, RelationPreview, useRelations, } from '../../shared';
+import { getCategoryColor, getCategoryTextColor } from '../../../../shared/categoryColors';
 export const SelectedImageAnnotation = (props) => {
     const { t } = useTranslation();
     const store = useAnnotationStore();
@@ -20,6 +21,28 @@ export const SelectedImageAnnotation = (props) => {
     const onDeleteProperty = (body) => store?.deleteBody(body);
     const onDelete = () => store?.deleteAnnotation(props.annotation.id);
     const arrows = useRelations(props.annotation.id);
+    const [openAccordions, setOpenAccordions] = useState([]);
+    // Comment button: open the conversation and focus the reply input
+    useEffect(() => {
+        const onFocusConversation = (evt) => {
+            if (evt.detail !== props.annotation.id)
+                return;
+            setOpenAccordions((open) => open.includes('conversation') ? open : [...open, 'conversation']);
+            // wait for the accordion animation
+            setTimeout(() => {
+                const reply = document.getElementById('conversation-reply');
+                if (reply) {
+                    reply.focus({ preventScroll: true });
+                    reply.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }, 350);
+        };
+        window.addEventListener('request-focus-conversation', onFocusConversation);
+        return () => window.removeEventListener('request-focus-conversation', onFocusConversation);
+    }, [props.annotation.id]);
     const commentCount = useMemo(() => props.annotation.bodies.filter((b) => b.purpose === 'commenting' || b.purpose === 'replying').length, [props.annotation]);
-    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')] }) })) }), _jsxs("div", { className: 'ia-selected-section', children: [_jsxs("div", { className: 'ia-section-header', children: [_jsx("span", { children: t('Properties') }), props.editable && _jsx(AddProperty, { onAddProperty: onAddProperty })] }), properties.length > 0 && (_jsx("ul", { className: 'ia-property-list', children: properties.map((body) => (_jsxs("li", { className: 'ia-property-pill', children: [body.value, props.editable && (_jsx("button", { className: 'unstyled icon-only', "aria-label": t('Remove property'), onClick: () => onDeleteProperty(body), children: _jsx(XIcon, {}) }))] }, body.id))) }))] }), _jsx("div", { className: 'ia-selected-section', children: _jsxs(Accordion, { type: 'multiple', children: [_jsxs(AccordionItem, { value: 'relations', children: [_jsx(AccordionTrigger, { children: _jsxs("div", { className: 'accordion-trigger-layout', children: [_jsx(ArrowsLeftRightIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Relations'), arrows.length > 0 && (_jsx("span", { className: 'accordion-badge', children: arrows.length }))] }) }), _jsx(AccordionContent, { children: arrows.length > 0 ? (_jsx("div", { className: 'ia-relation-list', children: arrows.map((arrow) => (_jsx(RelationPreview, { arrow: arrow, referenceAnnotationId: props.annotation.id }, arrow.id))) })) : (_jsx("p", { className: 'ia-relations-empty', children: t('No relations') })) })] }), _jsxs(AccordionItem, { value: 'conversation', children: [_jsx(AccordionTrigger, { children: _jsxs("div", { className: 'accordion-trigger-layout', children: [_jsx(ChatsIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Conversation'), commentCount > 0 && (_jsx("span", { className: 'accordion-badge', children: commentCount }))] }) }), _jsx(AccordionContent, { children: _jsx(Conversation, { annotation: props.annotation, isLocked: props.isLocked }) })] })] }) }), props.editable && (_jsx("div", { className: 'ia-selected-footer', children: _jsxs("button", { className: 'danger', onClick: onDelete, children: [_jsx(TrashIcon, {}), " ", t('Delete annotation')] }) }))] }));
+    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),
+                        color: getCategoryTextColor(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')] }) })) }), _jsxs("div", { className: 'ia-selected-section', children: [_jsxs("div", { className: 'ia-section-header', children: [_jsx("span", { children: t('Properties') }), props.editable && _jsx(AddProperty, { onAddProperty: onAddProperty })] }), properties.length > 0 && (_jsx("ul", { className: 'ia-property-list', children: properties.map((body) => (_jsxs("li", { className: 'ia-property-pill', children: [body.value, props.editable && (_jsx("button", { className: 'unstyled icon-only', "aria-label": t('Remove property'), onClick: () => onDeleteProperty(body), children: _jsx(XIcon, {}) }))] }, body.id))) }))] }), _jsx("div", { className: 'ia-selected-section', children: _jsxs(Accordion, { type: 'multiple', value: openAccordions, onValueChange: setOpenAccordions, children: [_jsxs(AccordionItem, { value: 'relations', children: [_jsx(AccordionTrigger, { children: _jsxs("div", { className: 'accordion-trigger-layout', children: [_jsx(ArrowsLeftRightIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Relations'), arrows.length > 0 && (_jsx("span", { className: 'accordion-badge', children: arrows.length }))] }) }), _jsx(AccordionContent, { children: arrows.length > 0 ? (_jsx("div", { className: 'ia-relation-list', children: arrows.map((arrow) => (_jsx(RelationPreview, { arrow: arrow, referenceAnnotationId: props.annotation.id }, arrow.id))) })) : (_jsx("p", { className: 'ia-relations-empty', children: t('No relations') })) })] }), _jsxs(AccordionItem, { value: 'conversation', children: [_jsx(AccordionTrigger, { children: _jsxs("div", { className: 'accordion-trigger-layout', children: [_jsx(ChatsIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Conversation'), commentCount > 0 && (_jsx("span", { className: 'accordion-badge', children: commentCount }))] }) }), _jsx(AccordionContent, { children: _jsx(Conversation, { annotation: props.annotation, isLocked: props.isLocked }) })] })] }) }), props.editable && (_jsx("div", { className: 'ia-selected-footer', children: _jsxs("button", { className: 'danger', onClick: onDelete, children: [_jsx(TrashIcon, {}), " ", t('Delete annotation')] }) }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ArrowToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ArrowToolbar/ArrowToolbar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAIxE,eAAO,MAAM,YAAY,GAAI,OAAO,eAAe,uCAyFlD,CAAC"}
+{"version":3,"file":"ArrowToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ArrowToolbar/ArrowToolbar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAKxE,eAAO,MAAM,YAAY,GAAI,OAAO,eAAe,uCAsGlD,CAAC"}

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

@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { TagIcon, TrashIcon, XIcon } from '@phosphor-icons/react';
 import { createBody, useAnnotationStore, useSelection, } from '@annotorious/react';
-import { getCategoryColor, SetCategory } from '../shared';
+import { SetCategory } from '../shared';
+import { getCategoryColor, getCategoryTextColor } from '../../../shared/categoryColors';
 // Popup for a selected arrow (relation)
 export const ArrowToolbar = (props) => {
     const { t } = useTranslation();
@@ -23,5 +24,8 @@ export const ArrowToolbar = (props) => {
     // Nothing to show or do for a read-only relation without a category
     if (!editable && !category)
         return null;
-    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'ia-shape-toolbar', children: [category ? (_jsxs("div", { className: 'ia-category-chip', style: { backgroundColor: getCategoryColor(category) }, children: [_jsx("span", { children: category }), editable && (_jsx("button", { className: 'unstyled icon-only', "aria-label": t('Clear class'), onClick: onClearCategory, children: _jsx(XIcon, {}) }))] })) : (_jsx(SetCategory, { onSetCategory: onSetCategory, children: _jsx("button", { className: 'compact', "aria-label": t('Add relationship tag'), children: _jsx(TagIcon, { size: 16 }) }) })), editable && (_jsxs(_Fragment, { children: [_jsx("span", { className: 'ia-shape-toolbar-sep' }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Delete relation'), onClick: onDelete, children: _jsx(TrashIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Delete relation'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }))] }) }));
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'ia-shape-toolbar', children: [category ? (_jsxs("div", { className: 'ia-category-chip', style: {
+                        backgroundColor: getCategoryColor(category),
+                        color: getCategoryTextColor(category),
+                    }, children: [_jsx("span", { children: category }), editable && (_jsx("button", { className: 'unstyled icon-only', "aria-label": t('Clear class'), onClick: onClearCategory, children: _jsx(XIcon, {}) }))] })) : (_jsxs(Tooltip.Root, { children: [_jsx(SetCategory, { onSetCategory: onSetCategory, children: _jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Add relationship tag'), children: _jsx(TagIcon, { size: 16 }) }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Add relationship tag'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })), editable && (_jsxs(_Fragment, { children: [_jsx("span", { className: 'ia-shape-toolbar-sep' }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Delete relation'), onClick: onDelete, children: _jsx(TrashIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Delete relation'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }))] }) }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isArrowAnnotation } from '@annotorious/plugin-arrows-react';
-import { getCategoryColor } from '../shared';
+import { getCategoryColor } from '../../../shared/categoryColors';
 /**
  * Tooltip for the hovered annotation on the image: shows the category (if
  * any), tinted with the category color (except for arrow annotations).

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/Contents.js

@@ -32,5 +32,5 @@ export const Contents = (props) => {
         }
         return [];
     }, [props.canvases, props.currentCanvas, props.image, props.documentName, props.activeUsers, i18n.language]);
-    return (_jsx("ul", { className: 'ia-canvas-list', children: items.map((item) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: `unstyled ia-canvas-item${item.current ? ' is-current' : ''}`, "aria-current": item.current ? 'true' : undefined, onClick: item.onSelect, children: [_jsxs("span", { className: 'ia-canvas-thumb', children: [_jsx(IIIFThumbnail, { url: item.url, authToken: props.authToken, fallback: _jsx(ImageIcon, { size: 28, weight: 'thin', "aria-hidden": 'true' }) }), item.activeUsers.length > 0 && (_jsx("ul", { className: 'ia-canvas-activity', "aria-label": t('Users active on this page'), children: item.activeUsers.slice(0, 10).map((user) => (_jsx("li", { title: user.name || t('Anonymous'), style: { backgroundColor: user.appearance.color }, children: _jsx("span", { children: user.name || t('Anonymous') }) }, user.presenceKey))) }))] }), _jsx("span", { className: 'ia-canvas-label', children: item.label })] }) }, item.key))) }));
+    return (_jsx("ul", { className: 'ia-canvas-list', children: items.map((item) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: `unstyled ia-canvas-item${item.current ? ' is-current' : ''}`, "aria-current": item.current ? 'true' : undefined, onClick: item.onSelect, children: [_jsxs("span", { className: 'ia-canvas-thumb', children: [_jsx(IIIFThumbnail, { url: item.url, authToken: props.authToken, fallback: _jsx(ImageIcon, { size: 28, weight: 'thin', "aria-hidden": 'true' }) }), item.activeUsers.length > 0 && (_jsx("ul", { className: 'ia-canvas-activity', "aria-label": t('Users active on this page'), children: item.activeUsers.slice(0, 10).map((user) => (_jsx("li", { title: user.name || t('Anonymous', { ns: 'annotation-common' }), style: { backgroundColor: user.appearance.color }, children: _jsx("span", { children: user.name || t('Anonymous', { ns: 'annotation-common' }) }) }, user.presenceKey))) }))] }), _jsx("span", { className: 'ia-canvas-label', children: item.label })] }) }, item.key))) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ShapeToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ShapeToolbar/ShapeToolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,eAAe,EAErB,MAAM,oBAAoB,CAAC;AAG5B,UAAU,iBAAiB;IACzB,UAAU,EAAE,eAAe,CAAC;IAG5B,QAAQ,EAAE,OAAO,CAAC;IAElB,eAAe,IAAI,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA2FpD,CAAC"}
+{"version":3,"file":"ShapeToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ShapeToolbar/ShapeToolbar.tsx"],"names":[],"mappings":"AAUA,OAAO,EAGL,KAAK,eAAe,EAErB,MAAM,oBAAoB,CAAC;AAI5B,UAAU,iBAAiB;IACzB,UAAU,EAAE,eAAe,CAAC;IAG5B,QAAQ,EAAE,OAAO,CAAC;IAElB,eAAe,IAAI,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAuJpD,CAAC"}

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

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import { TagIcon, TrashIcon, DotsThreeIcon, XIcon } from '@phosphor-icons/react';
+import { ChatTeardropTextIcon, DotsThreeIcon, TagIcon, TrashIcon, XIcon, } from '@phosphor-icons/react';
 import { createBody, useAnnotationStore, } from '@annotorious/react';
-import { getCategoryColor, SetCategory } from '../shared';
+import { SetCategory } from '../shared';
+import { getCategoryColor, getCategoryTextColor } from '../../../shared/categoryColors';
 export const ShapeToolbar = (props) => {
     const { t } = useTranslation();
     const store = useAnnotationStore();
@@ -16,5 +17,19 @@ export const ShapeToolbar = (props) => {
             store?.deleteBody(body);
     };
     const onDelete = () => store?.deleteAnnotation(props.annotation.id);
-    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'ia-shape-toolbar', 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: _jsx("button", { className: 'compact', "aria-label": t('Add concept tag'), children: _jsx(TagIcon, { size: 16 }) }) })), props.editable && (_jsxs(_Fragment, { children: [_jsx("span", { className: 'ia-shape-toolbar-sep' }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Delete annotation'), onClick: onDelete, children: _jsx(TrashIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Delete annotation'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] })), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('More'), onClick: props.onClickAdvanced, children: _jsx(DotsThreeIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('More'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }) }));
+    const commentCount = useMemo(() => props.annotation.bodies.filter((b) => b.purpose === 'commenting' || b.purpose === 'replying').length, [props.annotation]);
+    // Open the Selected tab, then ask it to open + focus the conversation
+    const onComment = () => {
+        props.onClickAdvanced();
+        // small delay, so the Selected tab is mounted
+        setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('request-focus-conversation', {
+                detail: props.annotation.id,
+            }));
+        }, 100);
+    };
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'ia-shape-toolbar', children: [category ? (_jsxs("div", { className: 'ia-category-chip', style: {
+                        backgroundColor: getCategoryColor(category),
+                        color: getCategoryTextColor(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 && (_jsxs(Tooltip.Root, { children: [_jsx(SetCategory, { onSetCategory: onSetCategory, children: _jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Add concept tag'), children: _jsx(TagIcon, { size: 16 }) }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Add concept tag'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsxs("div", { className: 'toolbar-btn-wrapper', children: [_jsx("button", { className: 'compact', "aria-label": t('Comment'), onClick: onComment, children: _jsx(ChatTeardropTextIcon, { size: 16 }) }), commentCount > 0 && (_jsx("span", { className: 'toolbar-badge text-body-tiny', children: commentCount }))] }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Comment'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), props.editable && (_jsxs(_Fragment, { children: [_jsx("span", { className: 'ia-shape-toolbar-sep' }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('Delete annotation'), onClick: onDelete, children: _jsx(TrashIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Delete annotation'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] })), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', "aria-label": t('More'), onClick: props.onClickAdvanced, children: _jsx(DotsThreeIcon, { size: 16 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('More'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }) }));
 };

package/dist/pages/_components/ImageMetaphorView/components/image-panel.css

@@ -211,6 +211,8 @@
 .ia-set-category-form input {
   flex: 1 1 auto;
   min-width: 0;
+  font-family: inherit;
+  font-size: var(--font-tiny);
 }
 
 /* RelationPreview */
@@ -345,3 +347,48 @@
 .ia-hover-tooltip span {
   position: relative;
 }
+
+/* Annotation region thumbnail */
+.ia-shape-snippet {
+  display: inline-block;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 4px;
+  background-color: var(--gray-100);
+  background-repeat: no-repeat;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.ia-shape-snippet img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ia-list-card-header {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+}
+
+.ia-list-card-header .ia-list-card-untitled {
+  align-self: center;
+}
+
+.ia-relation-end {
+  position: relative;
+  z-index: 2;
+}
+
+.ia-snippet-tooltip {
+  padding: 4px;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+}
+
+.ia-snippet-tooltip .ia-shape-snippet {
+  display: block;
+}

package/dist/pages/_components/ImageMetaphorView/components/shared/CurrentImage.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { CozyImageResource } from 'cozy-iiif';
+interface CurrentImageContextValue {
+    image?: CozyImageResource;
+    authToken?: string;
+}
+export declare const CurrentImageProvider: (props: CurrentImageContextValue & {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const useCurrentImage: () => CurrentImageContextValue;
+export {};
+//# sourceMappingURL=CurrentImage.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/CurrentImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrentImage.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/CurrentImage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,oBAAoB,GAC/B,OAAO,wBAAwB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAO1D,CAAC;AAEF,eAAO,MAAM,eAAe,gCAAwC,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/CurrentImage.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const CurrentImageContext = createContext({});
+// The image shown in the viewer (and its auth token, for uploaded images), so
+// that components can crop annotation snippets out of it
+export const CurrentImageProvider = (props) => (_jsx(CurrentImageContext.Provider, { value: { image: props.image, authToken: props.authToken }, children: props.children }));
+export const useCurrentImage = () => useContext(CurrentImageContext);

package/dist/pages/_components/ImageMetaphorView/components/shared/RelationPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationPreview.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/RelationPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAQ1C,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IAIvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCA8D1D,CAAC"}
+{"version":3,"file":"RelationPreview.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/RelationPreview.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAS1C,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IAIvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAyE1D,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/RelationPreview.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAnnotation } from '@annotorious/react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useAnnotation, } from '@annotorious/react';
 import { isArrowAnchor, } from '@annotorious/plugin-arrows-react';
-import { getCategoryColor } from './colors';
+import { getCategoryColor } from '../../../shared/categoryColors';
+import { ShapeSnippet } from './ShapeSnippet';
 const getCategory = (annotation) => annotation?.bodies.find((b) => b.purpose === 'classifying')?.value;
 /**
  * Compact "A ⇢ B" pill for a relation (arrow) between annotations, after
@@ -23,12 +25,12 @@ export const RelationPreview = (props) => {
         if (!annotation)
             return _jsx("span", { className: 'ia-relation-end ia-relation-end-point' });
         const endCategory = getCategory(annotation);
-        return (_jsxs("span", { className: 'ia-relation-end', children: [_jsx("span", { className: 'ia-relation-dot', style: endCategory
-                        ? { backgroundColor: getCategoryColor(endCategory) }
-                        : undefined }), _jsx("span", { className: endCategory ? undefined : 'ia-relation-untitled', children: endCategory || t('Untitled') })] }));
+        return (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsxs("span", { className: 'ia-relation-end', children: [_jsx("span", { className: 'ia-relation-dot', style: endCategory
+                                    ? { backgroundColor: getCategoryColor(endCategory) }
+                                    : undefined }), _jsx("span", { className: endCategory ? undefined : 'ia-relation-untitled', children: endCategory || t('Untitled') })] }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { className: 'ia-snippet-tooltip', side: 'top', sideOffset: 6, children: _jsx(ShapeSnippet, { annotation: annotation, size: 96 }) }) })] }));
     };
     const [left, right] = isOutgoing
         ? [startAnnotation, endAnnotation]
         : [endAnnotation, startAnnotation];
-    return (_jsxs("div", { className: 'ia-relation-preview', children: [renderEnd(left), _jsx("span", { className: `ia-relation-line ${isOutgoing ? 'outgoing' : 'incoming'}`, "aria-label": isOutgoing ? t('links to') : t('linked from'), children: category && _jsx("span", { className: 'ia-relation-category', children: category }) }), renderEnd(right)] }));
+    return (_jsx(Tooltip.Provider, { delayDuration: 100, children: _jsxs("div", { className: 'ia-relation-preview', children: [renderEnd(left), _jsx("span", { className: `ia-relation-line ${isOutgoing ? 'outgoing' : 'incoming'}`, "aria-label": isOutgoing ? t('links to') : t('linked from'), children: category && _jsx("span", { className: 'ia-relation-category', children: category }) }), renderEnd(right)] }) }));
 };

package/dist/pages/_components/ImageMetaphorView/components/shared/ShapeSnippet.d.ts

@@ -0,0 +1,14 @@
+import type { ImageAnnotation } from '@annotorious/react';
+interface ShapeSnippetProps {
+    annotation: ImageAnnotation;
+    size: number;
+    className?: string;
+}
+/**
+ * Thumbnail of an annotation's region (its bounding box), cropped out of the
+ * current image. IIIF images use an Image API region request, static images
+ * are cropped via CSS.
+ */
+export declare const ShapeSnippet: (props: ShapeSnippetProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ShapeSnippet.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/ShapeSnippet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeSnippet.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/ShapeSnippet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA6B1D,UAAU,iBAAiB;IACzB,UAAU,EAAE,eAAe,CAAC;IAE5B,IAAI,EAAE,MAAM,CAAC;IAEb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,uCAkDpD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/ShapeSnippet.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { IIIFThumbnail, useAuthImageSrc } from '@recogito/studio-sdk/components';
+import { useCurrentImage } from './CurrentImage';
+// Requested pixel width of the cropped region (enough for 2x displays)
+const REQUEST_WIDTH = 200;
+const getRegion = (annotation, width, height) => {
+    const bounds = annotation.target?.selector?.geometry?.bounds;
+    if (!bounds)
+        return;
+    // Clamp to the image, so the image server doesn't reject the region
+    const x = Math.max(0, Math.floor(bounds.minX));
+    const y = Math.max(0, Math.floor(bounds.minY));
+    const maxX = width ? Math.min(width, Math.ceil(bounds.maxX)) : Math.ceil(bounds.maxX);
+    const maxY = height ? Math.min(height, Math.ceil(bounds.maxY)) : Math.ceil(bounds.maxY);
+    const w = maxX - x;
+    const h = maxY - y;
+    return w > 0 && h > 0 ? { x, y, w, h } : undefined;
+};
+/**
+ * Thumbnail of an annotation's region (its bounding box), cropped out of the
+ * current image. IIIF images use an Image API region request, static images
+ * are cropped via CSS.
+ */
+export const ShapeSnippet = (props) => {
+    const { image, authToken } = useCurrentImage();
+    const region = useMemo(() => image && getRegion(props.annotation, image.width, image.height), [image, props.annotation]);
+    // Level-1 compatible: region by pixels + size by width
+    const regionUrl = useMemo(() => {
+        if (!image || image.type !== 'dynamic' || !region)
+            return;
+        const width = Math.min(REQUEST_WIDTH, region.w);
+        const service = image.serviceUrl.replace(/\/info\.json$/, '').replace(/\/$/, '');
+        return `${service}/${region.x},${region.y},${region.w},${region.h}/${width},/0/default.jpg`;
+    }, [image, region]);
+    const staticUrl = image?.type === 'static' ? image.url : undefined;
+    const { src: staticSrc } = useAuthImageSrc(staticUrl, authToken);
+    const style = { width: props.size, height: props.size };
+    const className = ['ia-shape-snippet', props.className].filter(Boolean).join(' ');
+    if (regionUrl)
+        return (_jsx("span", { className: className, style: style, children: _jsx(IIIFThumbnail, { url: regionUrl, authToken: authToken }) }));
+    // Static image: show the full image, scaled and offset so the region covers the box
+    if (staticSrc && region && image?.width && image?.height) {
+        const scale = props.size / Math.min(region.w, region.h);
+        const offsetX = (props.size - region.w * scale) / 2 - region.x * scale;
+        const offsetY = (props.size - region.h * scale) / 2 - region.y * scale;
+        return (_jsx("span", { className: className, style: {
+                ...style,
+                backgroundImage: `url(${staticSrc})`,
+                backgroundSize: `${image.width * scale}px ${image.height * scale}px`,
+                backgroundPosition: `${offsetX}px ${offsetY}px`,
+            } }));
+    }
+    return null;
+};

package/dist/pages/_components/ImageMetaphorView/components/shared/index.d.ts

@@ -1,6 +1,7 @@
-export * from './colors';
 export * from './SetCategory';
 export * from './AddProperty';
 export * from './RelationPreview';
 export * from './useRelations';
+export * from './CurrentImage';
+export * from './ShapeSnippet';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/index.js

@@ -1,5 +1,6 @@
-export * from './colors';
 export * from './SetCategory';
 export * from './AddProperty';
 export * from './RelationPreview';
 export * from './useRelations';
+export * from './CurrentImage';
+export * from './ShapeSnippet';

package/dist/pages/_components/TeiMetaphorView/components/ColorCodingState/ColorCodingState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorCodingState.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/ColorCodingState/ColorCodingState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAOhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAGpE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAE1B,0BAA0B,EAAE,MAAM,CAAC;IAEnC,sBAAsB,EAAE,MAAM,CAAC;CAChC;AAGD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,WAAW,CAWlD,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC9B;AAKD,UAAU,uBAAuB;IAC/B,MAAM,EAAE,WAAW,CAAC;IAEpB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAErC,KAAK,EAAE,UAAU,CAAC;IAElB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAElC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,KAAK,CAAC;IAE3C,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,gCA8D5D,CAAC;AAEF,eAAO,MAAM,cAAc,+BAAuC,CAAC"}
+{"version":3,"file":"ColorCodingState.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/ColorCodingState/ColorCodingState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,KAAK,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAKhE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAIpE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WAAW;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAE1B,0BAA0B,EAAE,MAAM,CAAC;IAEnC,sBAAsB,EAAE,MAAM,CAAC;CAChC;AAGD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,WAAW,CAWlD,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC9B;AAKD,UAAU,uBAAuB;IAC/B,MAAM,EAAE,WAAW,CAAC;IAEpB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAErC,KAAK,EAAE,UAAU,CAAC;IAElB,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAElC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,KAAK,CAAC;IAE3C,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,gCA+D5D,CAAC;AAEF,eAAO,MAAM,cAAc,+BAAuC,CAAC"}

package/dist/pages/_components/TeiMetaphorView/components/ColorCodingState/ColorCodingState.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState, } from 'react';
 import { useAnnotations } from '@annotorious/react';
-import { AdobeCategorical12, createPalette, enumerateTags, getTags, } from '@recogito/studio-sdk';
+import { enumerateTags, getTags, } from '@recogito/studio-sdk';
 import { getAnnotationType } from '../../utils';
+import { getCategoryColor } from '../../../shared/categoryColors';
 // themes for 'by-type' color coding
 export const THEMES = {
     ORANGE: {
@@ -29,7 +30,8 @@ export const ColorCodingState = (props) => {
     const { getColor, legend } = useMemo(() => {
         // 'by-tag': mapped from palette by first tag
         if (coding === 'by-tag') {
-            const palette = createPalette(AdobeCategorical12);
+            // Stable per-tag colors
+            const palette = { getColor: (label) => getCategoryColor(label) };
             const legend = tags.map((tag) => ({
                 label: tag.label,
                 color: palette.getColor(tag.label),

package/dist/pages/_components/shared/categoryColors.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Color for a category (or tag) label. Derived from the label itself, so the
+ * same category gets the same color for everyone, on every load, in both
+ * views - unlike assigning palette colors in first-seen order.
+ */
+export declare const getCategoryColor: (label: string) => string;
+/** Text color (white or near-black) with the better contrast on the category color */
+export declare const getCategoryTextColor: (label: string) => string;
+//# sourceMappingURL=categoryColors.d.ts.map

package/dist/pages/_components/shared/categoryColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"categoryColors.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/shared/categoryColors.ts"],"names":[],"mappings":"AAcA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,KAAG,MACV,CAAC;AAYxC,sFAAsF;AACtF,eAAO,MAAM,oBAAoB,GAAI,OAAO,MAAM,KAAG,MAKpD,CAAC"}

package/dist/pages/_components/shared/categoryColors.js

@@ -0,0 +1,32 @@
+import { AdobeCategorical12 } from '@recogito/studio-sdk';
+const PALETTE = AdobeCategorical12;
+// FNV-1a: small, fast, stable string hash
+const hash = (str) => {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < str.length; i++) {
+        h ^= str.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+};
+/**
+ * Color for a category (or tag) label. Derived from the label itself, so the
+ * same category gets the same color for everyone, on every load, in both
+ * views - unlike assigning palette colors in first-seen order.
+ */
+export const getCategoryColor = (label) => PALETTE[hash(label) % PALETTE.length];
+const luminance = (hex) => {
+    const [r, g, b] = [1, 3, 5].map((i) => {
+        const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+        return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+const DARK_TEXT = '#1a1a1a';
+/** Text color (white or near-black) with the better contrast on the category color */
+export const getCategoryTextColor = (label) => {
+    const bg = luminance(getCategoryColor(label));
+    const onWhite = 1.05 / (bg + 0.05);
+    const onDark = (bg + 0.05) / (luminance(DARK_TEXT) + 0.05);
+    return onWhite >= onDark ? '#ffffff' : DARK_TEXT;
+};

package/dist/pages/_components/shared/components/Conversation/Conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Conversation/Conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAO5B,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,CAAC;IAGvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAsGpD,CAAC"}
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Conversation/Conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAO5B,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,CAAC;IAGvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAyGpD,CAAC"}

package/dist/pages/_components/shared/components/Conversation/Conversation.js

@@ -36,6 +36,7 @@ export const Conversation = (props) => {
         store.updateAnnotation(updated);
         setReplyText('');
     };
+    const replyPlaceholder = comments.length === 0 ? t('Add a comment...') : t('Add a reply...');
     const onKeyDown = (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
@@ -51,5 +52,5 @@ export const Conversation = (props) => {
                     }).format(comment.created)
                     : t('Unknown date');
                 return (_jsxs("div", { className: 'annotation-section conversation-section', children: [_jsx("div", { className: 'annotation-header', children: _jsx("div", { className: 'annotation-header-left', children: _jsxs("div", { className: 'conversation-meta', children: [_jsx(Avatar, { id: comment.creator?.id || 'default', name: authorName, avatar: comment.creator?.avatar, size: 'sm' }), _jsx("span", { className: 'author', children: authorName }), _jsxs("span", { className: 'date', children: ["\u00B7 ", dateStr] })] }) }) }), _jsx(Comment, { children: comment.value })] }, comment.id));
-            }), !props.isLocked && (_jsx("div", { className: 'conversation-reply-area', children: _jsxs("div", { className: 'conversation-reply-wrapper', children: [_jsx("textarea", { id: 'conversation-reply', className: 'conversation-reply-input', placeholder: t('Add a reply...'), "aria-label": t('Add a reply...'), value: replyText, onChange: (e) => setReplyText(e.target.value), onKeyDown: onKeyDown }), _jsx(Button, { className: 'unstyled conversation-reply-submit', onClick: onReplySubmit, disabled: !replyText.trim(), "aria-label": t('Save reply'), children: _jsx(ArrowRightIcon, { size: 18, "aria-hidden": 'true' }) })] }) }))] }));
+            }), !props.isLocked && (_jsx("div", { className: 'conversation-reply-area', children: _jsxs("div", { className: 'conversation-reply-wrapper', children: [_jsx("textarea", { id: 'conversation-reply', className: 'conversation-reply-input', placeholder: replyPlaceholder, "aria-label": replyPlaceholder, value: replyText, onChange: (e) => setReplyText(e.target.value), onKeyDown: onKeyDown }), _jsx(Button, { className: 'unstyled conversation-reply-submit', onClick: onReplySubmit, disabled: !replyText.trim(), "aria-label": t('Save reply'), children: _jsx(ArrowRightIcon, { size: 18, "aria-hidden": 'true' }) })] }) }))] }));
 };

package/dist/pages/_components/shared/i18n.js

@@ -14,7 +14,7 @@ clientI18next
     .init({
     fallbackLng: i18n?.defaultLocale || 'en',
     supportedLngs: i18n?.locales || ['en'],
-    ns: ['common', 'project-assignments', 'annotate-metaphor'],
+    ns: ['common', 'annotation-common', 'project-assignments', 'annotate-metaphor'],
     defaultNS: 'annotate-metaphor',
     backend: {
         loadPath: '/locales/{{lng}}/{{ns}}.json',

package/locales/de/annotate-metaphor.json

@@ -0,0 +1,142 @@
+{
+  "Account": "Konto",
+  "Add": "Hinzufügen",
+  "Add a comment...": "Kommentar schreiben...",
+  "Add class": "Klasse hinzufügen",
+  "Add concept tag": "Konzept-Tag hinzufügen",
+  "Add property": "Eigenschaft hinzufügen",
+  "Add relationship tag": "Beziehungs-Tag hinzufügen",
+  "All": "Alle",
+  "All annotations": "Alle Annotationen",
+  "Add a reply...": "Antwort hinzufügen...",
+  "Add or extend span": "Markierung erweitern oder hinzufügen",
+  "Analysis": "Analyse",
+  "Annotation visibility": "Sichtbarkeit der Annotationen",
+  "Annotations": "Annotationen",
+  "Annotations you create in Private mode will be visible to no-one except you.": "Annotationen die Du im privaten Modus erstellst sind nur für Dich sichtbar.",
+  "Author": "Autor",
+  "Box": "Box",
+  "By annotation type": "Nach Annotationstyp",
+  "By first tag": "Nach erstem Tag",
+  "annotationsCount_one": "{{count}} Annotation",
+  "annotationsCount_other": "{{count}} Annotationen",
+  "Clear class": "Klasse entfernen",
+  "Close annotation panel": "Annotations-Panel schließen",
+  "Close navigation/metadata panel": "Navigations-/Metadaten-Panel schließen",
+  "Close sidebar": "Seitenleiste schließen",
+  "Collections": "Sammlungen",
+  "Color theme": "Farbschema",
+  "Comment": "Kommentar",
+  "Comments": "Kommentare",
+  "Contents": "Inhalt",
+  "Conversation": "Unterhaltung",
+  "Created": "Erstellt",
+  "Current viewport": "Im sichtbaren Bereich",
+  "Cyan": "Cyan",
+  "Delete annotation": "Annotation löschen",
+  "Delete relation": "Beziehung löschen",
+  "Delete tag": "Tag löschen",
+  "Direct": "Direkt",
+  "Document": "Dokument",
+  "Document navigation and metadata": "Dokumentnavigation und Metadaten",
+  "Draw arrows": "Pfeile zeichnen",
+  "Edit word": "Wort bearbeiten",
+  "Ellipse": "Ellipse",
+  "Enter concept": "Konzept eingeben",
+  "Filter": "Filter",
+  "Help": "Hilfe",
+  "Hide all annotations": "Alle Annotationen ausblenden",
+  "Hide relations": "Beziehungen ausblenden",
+  "Highlight Style": "Markierungsstil",
+  "Indirect": "Indirekt",
+  "Info": "Info",
+  "Jobs": "Jobs",
+  "Link all intersecting words to this metaphor": "Alle überschneidenden Wörter mit dieser Metapher verknüpfen",
+  "Language": "Sprache",
+  "linked from": "verknüpft von",
+  "Linked Words": "Verknüpfte Wörter",
+  "links to": "verknüpft mit",
+  "List": "Liste",
+  "Manifest": "Manifest",
+  "Mark as Metaphor": "Als Metapher markieren",
+  "Mark as Metaphor-Related Word": "Als Metaphor-Related Word markieren",
+  "Metadata": "Metadaten",
+  "Metaphor": "Metapher",
+  "Metaphor Annotation View": "Metaphor Annotation View",
+  "Metaphor-Related Word": "Metaphor-Related Word",
+  "More": "Mehr",
+  "More tools": "Weitere Werkzeuge",
+  "Move & select": "Bewegen & auswählen",
+  "MRW Type": "MRW-Typ",
+  "Name": "Name",
+  "No annotations in the current view": "Keine Annotationen im sichtbaren Bereich",
+  "No annotations yet": "Noch keine Annotationen",
+  "No document metadata available.": "Keine Dokumentmetadaten verfügbar.",
+  "No intersecting annotations": "Keine überschneidenden Annotationen",
+  "No relations": "Keine Beziehungen",
+  "No tags yet": "Noch keine Tags",
+  "No users yet": "Noch keine Benutzer",
+  "Open in Metaphor Annotation View": "In Metaphor Annotation View öffnen",
+  "Open or close annotation panel": "Annotations-Panel öffnen oder schließen",
+  "Open or close metadata panel": "Metadaten-Panel öffnen oder schließen",
+  "Orange": "Orange",
+  "Organization Admin": "Organisationsadmin",
+  "Page {{n}}": "Seite {{n}}",
+  "Path": "Pfad",
+  "Polygon": "Polygon",
+  "Private": "Privat",
+  "Private annotations only": "Nur private Annotationen",
+  "Profile Settings": "Profileinstellungen",
+  "Properties": "Eigenschaften",
+  "Property": "Eigenschaft",
+  "Public": "Öffentlich",
+  "Public annotations are visible to anyone with access to this document. This may include invited users or the general public.": "Öffentliche Annotationen sind für alle Benutzer sichtbar, die Zugriff auf dieses Dokument haben.",
+  "Public annotations only": "Nur öffentliche Annotationen",
+  "Re-select & replace span": "Markierung neu auswählen und ersetzen",
+  "Read less": "Weniger anzeigen",
+  "Read more": "Mehr anzeigen",
+  "Redo": "Wiederherstellen",
+  "Relations": "Beziehungen",
+  "Remove property": "Eigenschaft entfernen",
+  "Rotate clockwise": "Im Uhrzeigersinn drehen",
+  "Rotate counter-clockwise": "Gegen den Uhrzeigersinn drehen",
+  "Save reply": "Antwort speichern",
+  "Scissors": "Kontur-Schere",
+  "Search tags...": "Tags suchen...",
+  "Select all intersecting words": "Alle überschneidenden Wörter auswählen",
+  "Select an annotation": "Annotation auswählen",
+  "Select Annotation": "Annotation auswählen",
+  "Select annotation type": "Annotationstyp auswählen",
+  "Select highlight style": "Markierungsstil auswählen",
+  "Select MRW type": "MRW-Typ auswählen",
+  "Select MRW type...": "MRW-Typ auswählen...",
+  "Select shape": "Form auswählen",
+  "Selected": "Auswahl",
+  "Settings": "Einstellungen",
+  "Shift": "Umschalt",
+  "Show all": "Alle anzeigen",
+  "Sign out": "Abmelden",
+  "Site Administration": "Administration",
+  "Source": "Quelle",
+  "Sort ascending": "Aufsteigend sortieren",
+  "Sort descending": "Absteigend sortieren",
+  "Text": "Text",
+  "Text order": "Textreihenfolge",
+  "This document type is not supported in this view.": "Dieser Dokumenttyp wird in dieser Ansicht nicht unterstützt.",
+  "Title": "Titel",
+  "Toggle sort direction": "Sortierrichtung umschalten",
+  "Type": "Typ",
+  "Undo": "Rückgängig",
+  "Unknown": "Unbekannt",
+  "Unknown date": "Unbekanntes Datum",
+  "Unknown User": "Unbekannter Benutzer",
+  "Untitled": "Ohne Titel",
+  "Untitled annotation": "Annotation ohne Titel",
+  "Updated": "Aktualisiert",
+  "Users": "Benutzer",
+  "Users active on this page": "Aktive Benutzer auf dieser Seite",
+  "Visibility": "Sichtbarkeit",
+  "Word": "Wort",
+  "Zoom in": "Vergrößern",
+  "Zoom out": "Verkleinern"
+}

package/locales/en/annotate-metaphor.json

@@ -0,0 +1,142 @@
+{
+  "Account": "Account",
+  "Add": "Add",
+  "Add a comment...": "Add a comment...",
+  "Add class": "Add class",
+  "Add concept tag": "Add concept tag",
+  "Add property": "Add property",
+  "Add relationship tag": "Add relationship tag",
+  "All": "All",
+  "All annotations": "All annotations",
+  "Add a reply...": "Add a reply...",
+  "Add or extend span": "Add or extend span",
+  "Analysis": "Analysis",
+  "Annotation visibility": "Annotation visibility",
+  "Annotations": "Annotations",
+  "Annotations you create in Private mode will be visible to no-one except you.": "Annotations you create in Private mode will be visible to no-one except you.",
+  "Author": "Author",
+  "Box": "Box",
+  "By annotation type": "By annotation type",
+  "By first tag": "By first tag",
+  "annotationsCount_one": "{{count}} Annotation",
+  "annotationsCount_other": "{{count}} Annotations",
+  "Clear class": "Clear class",
+  "Close annotation panel": "Close annotation panel",
+  "Close navigation/metadata panel": "Close navigation/metadata panel",
+  "Close sidebar": "Close sidebar",
+  "Collections": "Collections",
+  "Color theme": "Color theme",
+  "Comment": "Comment",
+  "Comments": "Comments",
+  "Contents": "Contents",
+  "Conversation": "Conversation",
+  "Created": "Created",
+  "Current viewport": "Current viewport",
+  "Cyan": "Cyan",
+  "Delete annotation": "Delete annotation",
+  "Delete relation": "Delete relation",
+  "Delete tag": "Delete tag",
+  "Direct": "Direct",
+  "Document": "Document",
+  "Document navigation and metadata": "Document navigation and metadata",
+  "Draw arrows": "Draw arrows",
+  "Edit word": "Edit word",
+  "Ellipse": "Ellipse",
+  "Enter concept": "Enter concept",
+  "Filter": "Filter",
+  "Help": "Help",
+  "Hide all annotations": "Hide all annotations",
+  "Hide relations": "Hide relations",
+  "Highlight Style": "Highlight Style",
+  "Indirect": "Indirect",
+  "Info": "Info",
+  "Jobs": "Jobs",
+  "Link all intersecting words to this metaphor": "Link all intersecting words to this metaphor",
+  "Language": "Language",
+  "linked from": "linked from",
+  "Linked Words": "Linked Words",
+  "links to": "links to",
+  "List": "List",
+  "Manifest": "Manifest",
+  "Mark as Metaphor": "Mark as Metaphor",
+  "Mark as Metaphor-Related Word": "Mark as Metaphor-Related Word",
+  "Metadata": "Metadata",
+  "Metaphor": "Metaphor",
+  "Metaphor Annotation View": "Metaphor Annotation View",
+  "Metaphor-Related Word": "Metaphor-Related Word",
+  "More": "More",
+  "More tools": "More tools",
+  "Move & select": "Move & select",
+  "MRW Type": "MRW Type",
+  "Name": "Name",
+  "No annotations in the current view": "No annotations in the current view",
+  "No annotations yet": "No annotations yet",
+  "No document metadata available.": "No document metadata available.",
+  "No intersecting annotations": "No intersecting annotations",
+  "No relations": "No relations",
+  "No tags yet": "No tags yet",
+  "No users yet": "No users yet",
+  "Open in Metaphor Annotation View": "Open in Metaphor Annotation View",
+  "Open or close annotation panel": "Open or close annotation panel",
+  "Open or close metadata panel": "Open or close metadata panel",
+  "Orange": "Orange",
+  "Organization Admin": "Organization Admin",
+  "Page {{n}}": "Page {{n}}",
+  "Path": "Path",
+  "Polygon": "Polygon",
+  "Private": "Private",
+  "Private annotations only": "Private annotations only",
+  "Profile Settings": "Profile Settings",
+  "Properties": "Properties",
+  "Property": "Property",
+  "Public": "Public",
+  "Public annotations are visible to anyone with access to this document. This may include invited users or the general public.": "Public annotations are visible to anyone with access to this document. This may include invited users or the general public.",
+  "Public annotations only": "Public annotations only",
+  "Re-select & replace span": "Re-select & replace span",
+  "Read less": "Read less",
+  "Read more": "Read more",
+  "Redo": "Redo",
+  "Relations": "Relations",
+  "Remove property": "Remove property",
+  "Rotate clockwise": "Rotate clockwise",
+  "Rotate counter-clockwise": "Rotate counter-clockwise",
+  "Save reply": "Save reply",
+  "Scissors": "Scissors",
+  "Search tags...": "Search tags...",
+  "Select all intersecting words": "Select all intersecting words",
+  "Select an annotation": "Select an annotation",
+  "Select Annotation": "Select Annotation",
+  "Select annotation type": "Select annotation type",
+  "Select highlight style": "Select highlight style",
+  "Select MRW type": "Select MRW type",
+  "Select MRW type...": "Select MRW type...",
+  "Select shape": "Select shape",
+  "Selected": "Selected",
+  "Settings": "Settings",
+  "Shift": "Shift",
+  "Show all": "Show all",
+  "Sign out": "Sign out",
+  "Site Administration": "Site Administration",
+  "Source": "Source",
+  "Sort ascending": "Sort ascending",
+  "Sort descending": "Sort descending",
+  "Text": "Text",
+  "Text order": "Text order",
+  "This document type is not supported in this view.": "This document type is not supported in this view.",
+  "Title": "Title",
+  "Toggle sort direction": "Toggle sort direction",
+  "Type": "Type",
+  "Undo": "Undo",
+  "Unknown": "Unknown",
+  "Unknown date": "Unknown date",
+  "Unknown User": "Unknown User",
+  "Untitled": "Untitled",
+  "Untitled annotation": "Untitled annotation",
+  "Updated": "Updated",
+  "Users": "Users",
+  "Users active on this page": "Users active on this page",
+  "Visibility": "Visibility",
+  "Word": "Word",
+  "Zoom in": "Zoom in",
+  "Zoom out": "Zoom out"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/metaphor-annotation-plugin",
-  "version": "0.0.11-beta.4",
+  "version": "0.0.11-beta.7",
   "description": "A plugin that adds the Metaphor Annotation View, a custom annotation view route for TEI documents",
   "homepage": "https://github.com/recogito/metaphor-annotation-plugin#readme",
   "bugs": {
@@ -12,7 +12,8 @@
   },
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "locales"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -40,10 +41,10 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@annotorious/react": "^3.9.4",
+    "@annotorious/react": "^3.9.5",
     "@recogito/annotorious-supabase": "^1.6.0",
     "@recogito/react-text-annotator": "^4.3.4",
-    "@recogito/studio-sdk": "^0.12.0",
+    "@recogito/studio-sdk": "^0.13.0",
     "react": ">=19.x",
     "react-dom": ">=19.x"
   },

package/dist/pages/_components/ImageMetaphorView/components/shared/colors.d.ts

@@ -1,2 +0,0 @@
-export declare const getCategoryColor: (category: string) => string;
-//# sourceMappingURL=colors.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/colors.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/colors.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,WAOhD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/colors.js

@@ -1,17 +0,0 @@
-const PALETTE = [
-    '#c026d3',
-    '#fb923c',
-    '#a16207',
-    '#65a30d',
-    '#0891b2',
-    '#7c3aed',
-];
-const assigned = new Map();
-export const getCategoryColor = (category) => {
-    const existing = assigned.get(category);
-    if (existing)
-        return existing;
-    const next = PALETTE[assigned.size % PALETTE.length];
-    assigned.set(category, next);
-    return next;
-};