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

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } 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';
+export const SelectedImageAnnotation = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    const category = useMemo(() => props.annotation.bodies.find((b) => b.purpose === 'classifying')?.value, [props.annotation]);
+    const properties = useMemo(() => props.annotation.bodies.filter((b) => b.purpose === 'tagging' && b.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 onAddProperty = (value) => store?.addBody(createBody(props.annotation, { purpose: 'tagging', value }));
+    const onDeleteProperty = (body) => store?.deleteBody(body);
+    const onDelete = () => store?.deleteAnnotation(props.annotation.id);
+    const arrows = useRelations(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')] }) }))] }));
+};

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

@@ -0,0 +1,6 @@
+interface SelectedTabProps {
+    isLocked: boolean;
+}
+export declare const SelectedTab: (props: SelectedTabProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SelectedTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/ImageMetaphorView/components/AnnotationPanel/SelectedTab/SelectedTab.tsx"],"names":[],"mappings":"AAUA,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAyBlD,CAAC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { CursorIcon } from '@phosphor-icons/react';
+import { useSelection } from '@annotorious/react';
+import { isArrowAnnotation, } from '@annotorious/plugin-arrows-react';
+import { SelectedImageAnnotation } from './SelectedImageAnnotation';
+import { SelectedArrowAnnotation } from './SelectedArrowAnnotation';
+export const SelectedTab = (props) => {
+    const { t } = useTranslation();
+    const { selected } = useSelection();
+    if (selected.length === 0) {
+        return (_jsxs("div", { className: 'ia-panel-empty', children: [_jsx(CursorIcon, { size: 40, weight: 'thin' }), _jsx("p", { children: t('Select an annotation') })] }));
+    }
+    const { annotation, editable } = selected[0];
+    return isArrowAnnotation(annotation) ? (_jsx(SelectedArrowAnnotation, { annotation: annotation, editable: !!editable })) : (_jsx(SelectedImageAnnotation, { annotation: annotation, editable: !!editable, isLocked: props.isLocked }));
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FunnelSimpleIcon } from '@phosphor-icons/react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Filters, } from '../../../../shared/components';
+export const SettingsTab = () => {
+    const { t } = useTranslation();
+    const [openAccordions, setOpenAccordions] = useState(['filters']);
+    return (_jsx("div", { className: 'settings-tab-content', children: _jsx("div", { className: 'accordions-wrapper', children: _jsx(Accordion, { type: 'multiple', value: openAccordions, onValueChange: setOpenAccordions, children: _jsxs(AccordionItem, { value: 'filters', children: [_jsx(AccordionTrigger, { children: _jsxs("div", { className: 'accordion-trigger-layout', children: [_jsx(FunnelSimpleIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Filter')] }) }), _jsx(AccordionContent, { children: _jsx(Filters, { showTags: false }) })] }) }) }) }));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+import type { ArrowPopupProps } from '@annotorious/plugin-arrows-react';
+export declare const ArrowToolbar: (props: ArrowPopupProps) => import("react").JSX.Element | null;
+//# sourceMappingURL=ArrowToolbar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+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';
+// Popup for a selected arrow (relation)
+export const ArrowToolbar = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    // ArrowPopupProps has no `editable`, so read it from the selection
+    const { selected } = useSelection();
+    const editable = selected.some((s) => s.annotation.id === props.annotation.id && s.editable);
+    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);
+    // 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' })] }) })] })] }))] }) }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Applies the Settings-tab filters to the OpenSeadragon annotator. The TEI view
+ * passes `filter`/`hideAnnotations` as props to <TEIAnnotator>; here the
+ * annotator is created above the FilterState/HideAllState providers, so we apply
+ * them imperatively instead (mirroring how the annotator's own prop effects call
+ * setFilter/setVisible).
+ */
+export declare const FilterAdapter: () => null;
+//# sourceMappingURL=FilterAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterAdapter.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/FilterAdapter/FilterAdapter.tsx"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,YAgBzB,CAAC"}

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

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useAnnotator } from '@annotorious/react';
+import { useFilter } from '@recogito/studio-sdk/components';
+import { useHideAll } from '../../../shared/components';
+/**
+ * Applies the Settings-tab filters to the OpenSeadragon annotator. The TEI view
+ * passes `filter`/`hideAnnotations` as props to <TEIAnnotator>; here the
+ * annotator is created above the FilterState/HideAllState providers, so we apply
+ * them imperatively instead (mirroring how the annotator's own prop effects call
+ * setFilter/setVisible).
+ */
+export const FilterAdapter = () => {
+    const anno = useAnnotator();
+    const { filter } = useFilter();
+    const { hideAll } = useHideAll();
+    useEffect(() => {
+        anno?.setFilter(filter);
+    }, [anno, filter]);
+    useEffect(() => {
+        anno?.setVisible(!hideAll);
+    }, [anno, hideAll]);
+    return null;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import type { Annotation } from '@annotorious/react';
+interface HoverTooltipProps {
+    annotation: Annotation;
+}
+/**
+ * Tooltip for the hovered annotation on the image: shows the category (if
+ * any), tinted with the category color (except for arrow annotations).
+ */
+export declare const HoverTooltip: (props: HoverTooltipProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=HoverTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/HoverTooltip/HoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrD,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,uCAiBpD,CAAC"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isArrowAnnotation } from '@annotorious/plugin-arrows-react';
+import { getCategoryColor } from '../shared';
+/**
+ * Tooltip for the hovered annotation on the image: shows the category (if
+ * any), tinted with the category color (except for arrow annotations).
+ */
+export const HoverTooltip = (props) => {
+    const category = props.annotation.bodies.find((b) => b.purpose === 'classifying')?.value;
+    if (!category)
+        return null;
+    const tint = isArrowAnnotation(props.annotation)
+        ? '#ffffff'
+        : getCategoryColor(category);
+    return (_jsxs("div", { className: 'ia-hover-tooltip', children: [_jsx("div", { className: 'ia-hover-tooltip-tint', style: { backgroundColor: tint } }), _jsx("span", { children: category })] }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { type ArrowsPluginMode, type ArrowsVisibility } from '@annotorious/plugin-arrows-react';
+interface ImageArrowsProps {
+    mode: ArrowsPluginMode;
+    visibility: ArrowsVisibility;
+}
+/**
+ * Arrows plugin + popup, mounted once the annotator belongs to the current
+ * viewer. On a canvas switch, the new viewer is ready before the new
+ * annotator; this avoids a throwaway mount with the stale annotator.
+ */
+export declare const ImageArrows: (props: ImageArrowsProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ImageArrows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageArrows.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ImageArrows/ImageArrows.tsx"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,kCAAkC,CAAC;AAK1C,UAAU,gBAAgB;IACxB,IAAI,EAAE,gBAAgB,CAAC;IAEvB,UAAU,EAAE,gBAAgB,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,uCAkDlD,CAAC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { useAnnotator, useViewer, } from '@annotorious/react';
+import { isArrowAnchor, OSDArrowPopup, OSDArrowsPlugin, } from '@annotorious/plugin-arrows-react';
+import { useFilter } from '@recogito/studio-sdk/components';
+import { useHideAll } from '../../../shared/components';
+import { ArrowToolbar } from '../ArrowToolbar';
+/**
+ * Arrows plugin + popup, mounted once the annotator belongs to the current
+ * viewer. On a canvas switch, the new viewer is ready before the new
+ * annotator; this avoids a throwaway mount with the stale annotator.
+ */
+export const ImageArrows = (props) => {
+    const anno = useAnnotator();
+    const viewer = useViewer();
+    const { hideAll } = useHideAll();
+    const { filter } = useFilter();
+    // "Hide all" only reaches Annotorious' own layer (setVisible), so
+    // hide the arrows layer too
+    useEffect(() => {
+        if (!viewer?.element)
+            return;
+        viewer.element.classList.toggle('ia-hide-arrows', hideAll);
+    }, [viewer, hideAll]);
+    // Settings filters: hide a relation if it, or an annotation it's attached
+    // to, is filtered out
+    const arrowFilter = useMemo(() => {
+        if (!filter || !anno)
+            return undefined;
+        const { store } = anno.state;
+        return (arrow) => filter(arrow) &&
+            [arrow.target.selector.start, arrow.target.selector.end].every((end) => {
+                if (!isArrowAnchor(end))
+                    return true;
+                const annotation = store.getAnnotation(end.annotationId);
+                return !annotation || filter(annotation);
+            });
+    }, [filter, anno]);
+    if (!anno || !viewer || anno.viewer !== viewer)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(OSDArrowsPlugin, { enabled: true, mode: props.mode, showArrows: props.visibility, filter: arrowFilter }), _jsx(OSDArrowPopup, { popup: (popupProps) => _jsx(ArrowToolbar, { ...popupProps }) })] }));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+/**
+ * UndoStack that doesn't auto-delete arrows (which have no bodies unless
+ * they have a category), or empty shapes that arrows are attached to (which
+ * would delete the arrows with them).
+ */
+export declare const ImageUndoStack: () => import("react").JSX.Element;
+//# sourceMappingURL=ImageUndoStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUndoStack.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/ImageUndoStack/ImageUndoStack.tsx"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,eAAO,MAAM,cAAc,mCAU1B,CAAC"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useAnnotationStore } from '@annotorious/react';
+import { isArrowAnchor, isArrowAnnotation, } from '@annotorious/plugin-arrows-react';
+import { UndoStack } from '@recogito/studio-sdk/components';
+const isConnectedTo = (id) => (a) => {
+    if (!isArrowAnnotation(a))
+        return false;
+    const { start, end } = a.target.selector;
+    return ((isArrowAnchor(start) && start.annotationId === id) ||
+        (isArrowAnchor(end) && end.annotationId === id));
+};
+/**
+ * UndoStack that doesn't auto-delete arrows (which have no bodies unless
+ * they have a category), or empty shapes that arrows are attached to (which
+ * would delete the arrows with them).
+ */
+export const ImageUndoStack = () => {
+    const store = useAnnotationStore();
+    const keepEmpty = useCallback((a) => isArrowAnnotation(a) || !!store?.all().some(isConnectedTo(a.id)), [store]);
+    return _jsx(UndoStack, { undoEmpty: true, keepEmpty: keepEmpty });
+};

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

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

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

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

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

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

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/Contents.d.ts

@@ -0,0 +1,14 @@
+import type { CozyCanvas, CozyImageResource } from 'cozy-iiif';
+import type { ActiveUsers } from '../../hooks';
+interface ContentsProps {
+    canvases: CozyCanvas[];
+    currentCanvas?: CozyCanvas;
+    image?: CozyImageResource;
+    documentName: string;
+    authToken?: string;
+    activeUsers?: ActiveUsers;
+    onSelectCanvas(canvas: CozyCanvas): void;
+}
+export declare const Contents: (props: ContentsProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Contents.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/Contents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Contents.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/MetadataPanel/Contents.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,UAAU,aAAa;IACrB,QAAQ,EAAE,UAAU,EAAE,CAAC;IAEvB,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B,YAAY,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B,cAAc,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCA8E5C,CAAC"}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ImageIcon } from '@phosphor-icons/react';
+import { IIIFThumbnail } from '@recogito/studio-sdk/components';
+export const Contents = (props) => {
+    const { t, i18n } = useTranslation();
+    const items = useMemo(() => {
+        if (props.canvases.length > 0) {
+            return props.canvases.map((canvas, index) => ({
+                key: canvas.id,
+                label: canvas.getLabel(i18n.language) || t('Page {{n}}', { n: index + 1 }),
+                url: canvas.getThumbnailURL(),
+                current: props.currentCanvas?.id === canvas.id,
+                activeUsers: props.activeUsers?.[canvas.id] || [],
+                onSelect: () => props.onSelectCanvas(canvas),
+            }));
+        }
+        // Single (non-manifest) image resource
+        if (props.image) {
+            const image = props.image;
+            return [
+                {
+                    key: image.type === 'static' ? image.url : image.serviceUrl,
+                    label: props.documentName,
+                    url: image.getImageURL(),
+                    current: true,
+                    activeUsers: [],
+                    onSelect: undefined,
+                },
+            ];
+        }
+        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))) }));
+};

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/Info.d.ts

@@ -0,0 +1,9 @@
+import type { Document } from '@recogito/studio-sdk';
+import type { CozyManifest } from 'cozy-iiif';
+interface InfoProps {
+    document: Document;
+    manifest?: CozyManifest;
+}
+export declare const Info: (props: InfoProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Info.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/MetadataPanel/Info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/MetadataPanel/Info.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAO9C,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB;AAUD,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,gCAsDpC,CAAC"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { MetadataList, isValidURL, } from '../../../shared/components/Metadata';
+const formatDate = (value) => value
+    ? new Date(value).toLocaleString(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    })
+    : '';
+export const Info = (props) => {
+    const { t, i18n } = useTranslation();
+    const { document } = props;
+    // Metadata declared in the IIIF manifest (label/value pairs)
+    const toText = (value) => value == null ? '' : String(value);
+    const manifestItems = (props.manifest?.getMetadata(i18n.language) || [])
+        .map((entry) => ({
+        label: toText(entry.label),
+        value: toText(entry.value),
+    }))
+        .filter((item) => item.label && item.value);
+    // Database metadata
+    const documentItems = [
+        { label: t('Name'), value: document.name },
+        { label: t('Type'), value: document.content_type || '' },
+        { label: t('Source'), value: document.meta_data?.url || '' },
+        { label: t('Created'), value: formatDate(document.created_at) },
+        { label: t('Updated'), value: formatDate(document.updated_at) },
+    ].filter((item) => 
+    // Only show a source that is an actual (linkable) URL, not a storage path
+    item.value && (item.label !== t('Source') || isValidURL(item.value)));
+    if (manifestItems.length === 0 && documentItems.length === 0) {
+        return (_jsx("div", { className: 'metadata-empty', children: t('No document metadata available.') }));
+    }
+    return (_jsxs("div", { className: 'metadata-sections', children: [manifestItems.length > 0 && (_jsxs("section", { children: [_jsx("h4", { className: 'metadata-section-title', children: t('Manifest') }), _jsx(MetadataList, { items: manifestItems })] })), documentItems.length > 0 && (_jsxs("section", { children: [_jsx("h4", { className: 'metadata-section-title', children: t('Document') }), _jsx(MetadataList, { items: documentItems })] }))] }));
+};

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

@@ -0,0 +1,96 @@
+.ia-canvas-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ia-canvas-list > li + li {
+  margin-top: 1.5rem;
+}
+
+button.ia-canvas-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  height: auto;
+  padding: 0.25rem;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  color: var(--font-dark);
+}
+
+button.ia-canvas-item:not(:disabled):hover {
+  box-shadow: none;
+}
+
+.ia-canvas-thumb {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: 180px;
+  height: 180px;
+  max-width: 100%;
+  background-color: var(--gray-100);
+  border: 1px solid var(--gray-200);
+  border-radius: 6px;
+  overflow: hidden;
+  color: var(--gray-500);
+  transition: box-shadow 0.15s ease;
+}
+
+.ia-canvas-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.ia-canvas-item:hover .ia-canvas-thumb {
+  box-shadow: 0 0 0 1px var(--gray-300);
+}
+
+.ia-canvas-item.is-current .ia-canvas-thumb {
+  box-shadow: 0 0 0 3px var(--bright-blue);
+  border-color: var(--bright-blue);
+}
+
+.ia-canvas-label {
+  font-size: 14px;
+  line-height: 1.3;
+  text-align: center;
+  color: var(--font-dark);
+}
+
+/* Other users active on a canvas: overlapping dots in their presence colors */
+.ia-canvas-activity {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ia-canvas-activity li {
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin-left: -4px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+
+.ia-canvas-activity li > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,18 @@
+import type { Document } from '@recogito/studio-sdk';
+import type { CozyCanvas, CozyImageResource, CozyManifest } from 'cozy-iiif';
+import type { ActiveUsers } from '../../hooks';
+interface MetadataPanelProps {
+    document: Document;
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    canvases: CozyCanvas[];
+    currentCanvas?: CozyCanvas;
+    image?: CozyImageResource;
+    manifest?: CozyManifest;
+    authToken?: string;
+    activeUsers?: ActiveUsers;
+    onSelectCanvas(canvas: CozyCanvas): void;
+}
+export declare const MetadataPanel: (props: MetadataPanelProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MetadataPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetadataPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/MetadataPanel/MetadataPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAS7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IAEnB,IAAI,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAElC,QAAQ,EAAE,UAAU,EAAE,CAAC;IAEvB,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B,cAAc,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAsFtD,CAAC"}