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

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { XIcon, ListBulletsIcon, CodeIcon } from '@phosphor-icons/react';
+import { Tabs, TabsList, TabsTrigger, TabsContent, } from '../../../shared/components';
+import { Toc } from './Toc';
+import { Info } from './Info';
+export const MetadataPanel = (props) => {
+    const { t } = useTranslation();
+    const [tab, setTab] = useState('contents');
+    const headingRef = useRef(null);
+    const wasOpen = useRef(props.open);
+    useEffect(() => {
+        // return focus to panel heading on re-open for accessibility
+        if (props.open && !wasOpen.current) {
+            headingRef.current?.focus();
+        }
+        wasOpen.current = props.open;
+    }, [props.open]);
+    // TEI is rendered async by CETEIcean into `.tei-container`. Grab first
+    // tei-div, or the container, as the root for the TOC when ready.
+    const [teiRoot, setTeiRoot] = useState();
+    useEffect(() => {
+        const find = () => {
+            const container = document.querySelector('.tei-container');
+            if (!container || container.childElementCount === 0)
+                return undefined;
+            return container.querySelector('tei-div') ?? container;
+        };
+        const existing = find();
+        if (existing) {
+            setTeiRoot(existing);
+            return;
+        }
+        const target = document.getElementById('main') ?? document.body;
+        const observer = new MutationObserver(() => {
+            const el = find();
+            if (el) {
+                setTeiRoot(el);
+                observer.disconnect();
+            }
+        });
+        observer.observe(target, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs("aside", { id: 'metadata-panel', inert: !props.open, "data-open": props.open, children: [_jsx("h2", { className: 'sr-only', children: t('Document navigation and metadata') }), _jsxs("div", { className: 'header', children: [_jsx("h3", { ref: headingRef, tabIndex: -1, children: props.document.name }), _jsx("button", { "aria-label": t('Close navigation/metadata panel'), "aria-expanded": props.open, "aria-controls": 'metadata-panel', className: 'unstyled icon-only', onClick: () => props.onOpenChange(false), type: 'button', children: _jsx(XIcon, { size: 16 }) })] }), _jsxs(Tabs, { value: tab, onValueChange: (val) => setTab(val), className: 'metadata-tabs-root', children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: 'contents', children: [_jsx(ListBulletsIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('Contents') })] }), _jsxs(TabsTrigger, { value: 'info', children: [_jsx(CodeIcon, { weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { className: 'tab-label', children: t('Info') })] })] }), _jsx(TabsContent, { value: 'contents', className: 'metadata-tab-content', children: _jsx("nav", { className: 'metadata-panel-body', "aria-label": t('Contents'), children: _jsx(Toc, { tei: teiRoot }) }) }), _jsx(TabsContent, { value: 'info', className: 'metadata-tab-content', children: _jsx("div", { className: 'metadata-panel-body', children: _jsx(Info, { document: props.document, teiRoot: teiRoot }) }) })] })] }));
+};

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/Toc.d.ts

@@ -0,0 +1,6 @@
+interface TocProps {
+    tei?: Element;
+}
+export declare const Toc: (props: TocProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=Toc.d.ts.map

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/Toc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toc.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/Toc.tsx"],"names":[],"mappings":"AAIA,UAAU,QAAQ;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,uCAgBlC,CAAC"}

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/Toc.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { buildTableOfContents } from './buildTableOfContents';
+import { TocLevel } from './TocLevel';
+export const Toc = (props) => {
+    const [toc, setToc] = useState();
+    useEffect(() => {
+        if (!props.tei)
+            return;
+        setToc(buildTableOfContents(props.tei));
+    }, [props.tei]);
+    if (!toc)
+        return null;
+    return (_jsxs("div", { className: 'toc', children: [toc.title && _jsx("h3", { className: 'toc-title', children: toc.title }), _jsx(TocLevel, { nodes: toc.nodes })] }));
+};

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/TocLevel.d.ts

@@ -0,0 +1,7 @@
+import type { TableOfContentsNode } from './buildTableOfContents';
+interface TocLevelProps {
+    nodes: TableOfContentsNode[];
+}
+export declare const TocLevel: (props: TocLevelProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TocLevel.d.ts.map

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/TocLevel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TocLevel.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/TocLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,UAAU,aAAa;IACrB,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCA4B5C,CAAC"}

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/TocLevel.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TocLevel = (props) => {
+    return (_jsx("ul", { className: 'toc-list', children: props.nodes.map((node, index) => {
+            const id = node.element.getAttribute('id');
+            return (_jsxs("li", { className: 'toc-item', children: [_jsxs("a", { className: 'toc-link', href: id ? `#${id}` : '#', onClick: (evt) => {
+                            evt.preventDefault();
+                            node.element.scrollIntoView({
+                                behavior: 'smooth',
+                                block: 'start',
+                            });
+                        }, children: [node.prefix && _jsx("span", { className: 'toc-prefix', children: node.prefix }), node.label] }), node.childNodes.length > 0 && _jsx(TocLevel, { nodes: node.childNodes })] }, id || `${node.label}::${index}`));
+        }) }));
+};

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/buildTableOfContents.d.ts

@@ -0,0 +1,12 @@
+export interface TableOfContents {
+    title?: string;
+    nodes: TableOfContentsNode[];
+}
+export interface TableOfContentsNode {
+    prefix?: string;
+    label: string;
+    element: Element;
+    childNodes: TableOfContentsNode[];
+}
+export declare const buildTableOfContents: (div: Element) => TableOfContents;
+//# sourceMappingURL=buildTableOfContents.d.ts.map

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/buildTableOfContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildTableOfContents.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/buildTableOfContents.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,KAAK,EAAE,mBAAmB,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,EAAE,OAAO,CAAC;IAEjB,UAAU,EAAE,mBAAmB,EAAE,CAAC;CACnC;AA4GD,eAAO,MAAM,oBAAoB,GAAI,KAAK,OAAO,KAAG,eAmBnD,CAAC"}

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/buildTableOfContents.js

@@ -0,0 +1,97 @@
+const SNIPPET_WORDS = 8;
+const directChildren = (parent, name, type) => Array.from(parent.children).filter((e) => e.nodeName.toLowerCase() === name &&
+    (type === undefined || e.getAttribute('type') === type));
+// First few words of an element's text
+const snippet = (el) => {
+    const allWords = (el?.textContent || '')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .split(' ')
+        .filter(Boolean);
+    if (allWords.length === 0)
+        return '';
+    const words = allWords.slice(0, SNIPPET_WORDS);
+    const ellipsis = allWords.length > SNIPPET_WORDS ? '…' : '';
+    return `${words.join(' ')}${ellipsis}`;
+};
+// As a fallback, use the teiHeader title, or the first <head>, in the TOC
+const headingText = (el) => {
+    const root = el.closest('.tei-container') ?? el;
+    const heading = root.querySelector('tei-teiheader tei-titlestmt tei-title') ??
+        root.querySelector('tei-teiheader tei-title') ??
+        root.querySelector('tei-head');
+    return heading?.textContent?.replace(/\s+/g, ' ').trim() || undefined;
+};
+// The structural label from the XML: a div's @type, or the (de-namespaced)
+// element name for everything else.
+const typeLabel = (el) => {
+    const name = el.nodeName.toLowerCase();
+    if (name === 'tei-div')
+        return el.getAttribute('type') || 'section';
+    return name.replace(/^tei-/, '');
+};
+// Structured documents: nested div[type] with @n + @xml:id
+const walkChildren = (parent) => directChildren(parent, 'tei-div')
+    .filter((e) => e.getAttribute('type'))
+    .map((teiDiv) => ({
+    label: `${teiDiv.getAttribute('type')} ${teiDiv.getAttribute('n') || ''}`.trim(),
+    element: teiDiv,
+    childNodes: walkChildren(teiDiv),
+}));
+// Reddit documents: <div type="replies"> with nested <post> and <div type="thread">.
+// Label posts by snippet of text or author
+const labelForPost = (post) => {
+    const text = snippet(post.querySelector('tei-ab') ?? post);
+    if (text)
+        return text;
+    return post.getAttribute('who') || '';
+};
+// Reddit node types
+const postNode = (post) => ({
+    prefix: typeLabel(post),
+    label: labelForPost(post),
+    element: post,
+    childNodes: [],
+});
+const repliesNode = (replies) => ({
+    prefix: typeLabel(replies),
+    label: '',
+    element: replies,
+    childNodes: walkReplies(replies),
+});
+const threadNode = (thread) => {
+    const post = directChildren(thread, 'tei-post')[0];
+    const replies = directChildren(thread, 'tei-div', 'replies')[0];
+    return {
+        prefix: typeLabel(thread),
+        label: post ? labelForPost(post) : '',
+        element: post ?? thread,
+        childNodes: replies ? [repliesNode(replies)] : [],
+    };
+};
+// Redddit replies structure
+const walkReplies = (replies) => Array.from(replies.children).flatMap((child) => {
+    const name = child.nodeName.toLowerCase();
+    if (name === 'tei-post')
+        return [postNode(child)];
+    if (name === 'tei-div' && child.getAttribute('type') === 'thread')
+        return [threadNode(child)];
+    return [];
+});
+export const buildTableOfContents = (div) => {
+    // treat reddit threads differently than typical hierarchical docs
+    if (div.getAttribute('type') === 'thread') {
+        const post = directChildren(div, 'tei-post')[0];
+        const head = post ? directChildren(post, 'tei-head')[0] : undefined;
+        const title = head?.textContent?.replace(/\s+/g, ' ').trim();
+        return { title, nodes: [threadNode(div)] };
+    }
+    const type = div.getAttribute('type');
+    const title = type
+        ? `${type} ${div.getAttribute('n') || ''}`.trim()
+        : undefined;
+    return {
+        title: title || headingText(div),
+        nodes: walkChildren(div),
+    };
+};

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/index.d.ts

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

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/index.d.ts.map

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

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Toc/index.js

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

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/index.d.ts

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

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/index.d.ts.map

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

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/index.js

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

package/dist/pages/_components/TeiMetaphorView/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useAnnotationsStyle';
+export * from './useIntersectingAnnotations';
+export * from './useMrwOptions';
+export * from './useSuggestAnnotationType';
+export * from './useTagVocabulary';
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC"}

package/dist/pages/_components/TeiMetaphorView/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useAnnotationsStyle';
+export * from './useIntersectingAnnotations';
+export * from './useMrwOptions';
+export * from './useSuggestAnnotationType';
+export * from './useTagVocabulary';

package/dist/pages/_components/TeiMetaphorView/hooks/useAnnotationsStyle.d.ts

@@ -0,0 +1,3 @@
+import type { HighlightStyleExpression, TEIAnnotation } from '@recogito/react-text-annotator';
+export declare const useAnnotationsStyle: (activeLayerId?: string) => HighlightStyleExpression<TEIAnnotation>;
+//# sourceMappingURL=useAnnotationsStyle.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/useAnnotationsStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnnotationsStyle.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/useAnnotationsStyle.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,wBAAwB,EAExB,aAAa,EACd,MAAM,gCAAgC,CAAC;AA2IxC,eAAO,MAAM,mBAAmB,GAC9B,gBAAgB,MAAM,KACrB,wBAAwB,CAAC,aAAa,CAgDxC,CAAC"}

package/dist/pages/_components/TeiMetaphorView/hooks/useAnnotationsStyle.js

@@ -0,0 +1,138 @@
+import { useAnnotationStore, useSelection, } from '@annotorious/react';
+import { useMemo } from 'react';
+import { getAnnotationType } from '../utils';
+import { THEMES, useColorCoding, } from '../components/ColorCodingState';
+// dimmed underline for when another annotation is selected
+const DIMMED_UNDERLINE = '#e2e2ff';
+// 'by-type': single-hue themes, with fill for mrw, underline for metaphor
+const themeNoSelection = (theme) => (annotation, _state, z) => {
+    const type = getAnnotationType(annotation);
+    const underlineOffset = z ? 4 * z : 0;
+    if (type === 'mrw') {
+        return {
+            // @ts-ignore
+            fill: theme.FILL_COLOR_OPAQUE,
+        };
+    }
+    else {
+        return {
+            fillOpacity: 0,
+            // @ts-ignore
+            underlineColor: theme.UNDERLINE_COLOR_OPAQUE,
+            underlineThickness: 2,
+            underlineOffset,
+        };
+    }
+};
+const themeWithSelection = (theme, emphasized) => (annotation, state, z) => {
+    const type = getAnnotationType(annotation);
+    const isEmphasized = emphasized.includes(annotation.id) || state.selected;
+    const underlineOffset = z ? 4 * z : 0;
+    if (type === 'mrw') {
+        return {
+            // @ts-ignore
+            fill: isEmphasized ? theme.FILL_COLOR_OPAQUE : '#1a1a1a',
+            fillOpacity: isEmphasized ? undefined : 0.12,
+        };
+    }
+    else {
+        return {
+            // @ts-ignore
+            fill: isEmphasized ? theme.FILL_COLOR_SEMITRANSPARENT : undefined,
+            fillOpacity: isEmphasized ? undefined : 0,
+            // @ts-ignore
+            underlineColor: isEmphasized
+                ? theme.UNDERLINE_COLOR_OPAQUE
+                : DIMMED_UNDERLINE,
+            underlineThickness: 2,
+            underlineOffset,
+        };
+    }
+};
+// 'by-tag': color by first tag, underline or fill determined by type (mrw/metaphor)
+const byTagStyle = (getColor, hasSelection, emphasized) => (annotation, state, z) => {
+    const type = getAnnotationType(annotation);
+    const color = getColor(annotation);
+    const underlineOffset = z ? 4 * z : 0;
+    const isEmphasized = !hasSelection || emphasized.includes(annotation.id) || state.selected;
+    if (type === 'mrw') {
+        return {
+            // @ts-ignore
+            fill: color,
+            fillOpacity: isEmphasized ? 0.45 : 0.12,
+        };
+    }
+    else {
+        return {
+            fillOpacity: 0,
+            // @ts-ignore
+            underlineColor: isEmphasized ? color : DIMMED_UNDERLINE,
+            underlineThickness: 2,
+            underlineOffset,
+        };
+    }
+};
+// Annotations on inactive (read-only) layers: neutral grey regardless of color
+// coding, but keeping the type distinction (fill for MRWs, underline for
+// metaphors). Darker when selected.
+const READ_ONLY_COLOR = '#6b7280';
+const READ_ONLY_COLOR_SELECTED = '#374151';
+const readOnlyStyle = (annotation, state, z) => {
+    const color = state?.selected ? READ_ONLY_COLOR_SELECTED : READ_ONLY_COLOR;
+    if (getAnnotationType(annotation) === 'mrw') {
+        return {
+            // @ts-ignore
+            fill: color,
+            fillOpacity: state?.selected ? 0.35 : 0.2,
+        };
+    }
+    else {
+        return {
+            // @ts-ignore
+            fill: state?.selected ? color : undefined,
+            fillOpacity: state?.selected ? 0.08 : 0,
+            // @ts-ignore
+            underlineColor: color,
+            underlineThickness: 2,
+            underlineOffset: z ? 4 * z : 0,
+        };
+    }
+};
+export const useAnnotationsStyle = (activeLayerId) => {
+    const { coding, theme, getColor } = useColorCoding();
+    const selection = useSelection();
+    const hasSelection = selection.selected.length > 0;
+    const store = useAnnotationStore();
+    const emphasizedIds = useMemo(() => {
+        if (!store || selection.selected.length === 0)
+            return [];
+        const ids = new Set();
+        selection.selected.forEach(({ annotation }) => {
+            ids.add(annotation.id); // Emphasize the selected annotation itself
+            const type = getAnnotationType(annotation);
+            if (type !== 'mrw') {
+                // If it's a metaphor, emphasize any linked MRWs
+                annotation.bodies.forEach((b) => {
+                    if (b.purpose === 'linking' && b.value) {
+                        ids.add(b.value);
+                    }
+                });
+            }
+        });
+        return Array.from(ids);
+    }, [selection.selected, store]);
+    return useMemo(() => {
+        const activeLayerStyle = coding === 'by-type'
+            ? hasSelection
+                ? themeWithSelection(THEMES[theme], emphasizedIds)
+                : themeNoSelection(THEMES[theme])
+            : byTagStyle(getColor, hasSelection, emphasizedIds);
+        return (annotation, state, z) => {
+            const layerId = annotation
+                .layer_id;
+            return activeLayerId && layerId && layerId !== activeLayerId
+                ? readOnlyStyle(annotation, state, z)
+                : activeLayerStyle(annotation, state, z);
+        };
+    }, [coding, theme, getColor, hasSelection, emphasizedIds, activeLayerId]);
+};

package/dist/pages/_components/TeiMetaphorView/hooks/useIntersectingAnnotations.d.ts

@@ -0,0 +1,5 @@
+import { TEIAnnotation } from '@recogito/react-text-annotator';
+export declare const useIntersectingAnnotations: () => {
+    getIntersecting: (annotation: TEIAnnotation) => TEIAnnotation[];
+};
+//# sourceMappingURL=useIntersectingAnnotations.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/useIntersectingAnnotations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectingAnnotations.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/useIntersectingAnnotations.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EAEd,MAAM,gCAAgC,CAAC;AAExC,eAAO,MAAM,0BAA0B;kCAiBA,aAAa;CAyBnD,CAAC"}

package/dist/pages/_components/TeiMetaphorView/hooks/useIntersectingAnnotations.js

@@ -0,0 +1,35 @@
+import { useAnnotationStore } from '@annotorious/react';
+export const useIntersectingAnnotations = () => {
+    const store = useAnnotationStore();
+    const rectOverlaps = (a, b) => a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y;
+    const hasIntersectingRect = (sourceRects, otherId) => {
+        const candidateRects = store.getAnnotationRects(otherId);
+        if (!candidateRects || candidateRects.length === 0)
+            return false;
+        // True intersection only if at least one rect pair overlaps
+        return sourceRects.some(sr => candidateRects.some(cr => rectOverlaps(sr, cr)));
+    };
+    const getIntersecting = (annotation) => {
+        if (!store)
+            return [];
+        // Outer bounds - use this to find intersection candidates
+        const bounds = store.getAnnotationBounds(annotation.id);
+        if (!bounds)
+            return []; // Should never happen
+        const { x, y, width, height } = bounds;
+        // Individual rects per span - use this to check the actual intersection
+        const sourceRects = store.getAnnotationRects(annotation.id);
+        if (!sourceRects || sourceRects.length === 0)
+            return []; // Should never happen
+        const intersecting = store.getIntersecting(x, y, x + width, y + height)
+            .filter((rects) => rects.annotation.id !== annotation.id)
+            .filter((rects) => hasIntersectingRect(sourceRects, rects.annotation.id))
+            .map((rects) => rects.annotation);
+        // order by document position via the TEI selector position property
+        return intersecting.sort((a, b) => a.target.selector[0].position.localeCompare(b.target.selector[0].position));
+    };
+    return { getIntersecting };
+};

package/dist/pages/_components/TeiMetaphorView/hooks/useLinkedMetaphors.d.ts

@@ -0,0 +1,5 @@
+import { TEIAnnotation } from '@recogito/react-text-annotator';
+export declare const useLinkedMetaphors: () => {
+    isLinkedBy: (annotation: TEIAnnotation) => TEIAnnotation[];
+};
+//# sourceMappingURL=useLinkedMetaphors.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/useLinkedMetaphors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLinkedMetaphors.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/useLinkedMetaphors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,eAAO,MAAM,kBAAkB;6BAGG,aAAa;CAc9C,CAAC"}

package/dist/pages/_components/TeiMetaphorView/hooks/useLinkedMetaphors.js

@@ -0,0 +1,14 @@
+import { useAnnotationStore } from '@annotorious/react';
+export const useLinkedMetaphors = () => {
+    const store = useAnnotationStore();
+    const isLinkedBy = (annotation) => {
+        if (!store)
+            return [];
+        return store
+            .all()
+            .filter((a) => a.bodies.some((b) => b.purpose === 'linking' && b.value === annotation.id));
+    };
+    return {
+        isLinkedBy,
+    };
+};

package/dist/pages/_components/TeiMetaphorView/hooks/useMrwOptions.d.ts

@@ -0,0 +1,6 @@
+export interface MrwOption {
+    uri: string;
+    prefLabel: string;
+}
+export declare const useMrwOptions: () => MrwOption[];
+//# sourceMappingURL=useMrwOptions.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/useMrwOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMrwOptions.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/useMrwOptions.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,mBAyBzB,CAAA"}

package/dist/pages/_components/TeiMetaphorView/hooks/useMrwOptions.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+export const useMrwOptions = () => {
+    const [mrwOptions, setMrwOptions] = useState([]);
+    useEffect(() => {
+        const fetchOptions = async () => {
+            try {
+                const base = import.meta.env.PUBLIC_VOCABULARY_API_BASE_URL?.endsWith('/')
+                    ? import.meta.env.PUBLIC_VOCABULARY_API_BASE_URL
+                    : import.meta.env.PUBLIC_VOCABULARY_API_BASE_URL + '/';
+                const url = new URL('narrower', base);
+                url.searchParams.set('uri', import.meta.env.PUBLIC_MRW_PARENT_URI);
+                const data = await fetch(url).then((res) => (res.json()));
+                if (data?.narrower) {
+                    setMrwOptions(data.narrower);
+                }
+            }
+            catch (error) {
+                console.log(error);
+            }
+        };
+        fetchOptions();
+    }, []);
+    return mrwOptions;
+};

package/dist/pages/_components/TeiMetaphorView/hooks/useSuggestAnnotationType.d.ts

@@ -0,0 +1,2 @@
+export declare const useSuggestAnnotationType: () => void;
+//# sourceMappingURL=useSuggestAnnotationType.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/useSuggestAnnotationType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSuggestAnnotationType.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/useSuggestAnnotationType.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,wBAAwB,YA6BpC,CAAC"}

package/dist/pages/_components/TeiMetaphorView/hooks/useSuggestAnnotationType.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useAnnotationStore, useAnnotator } from '@annotorious/react';
+import { getAnnotationType, getQuote, setAnnotationType } from '../utils';
+// Trivial heuristic for "suggesting" the initial annotation type:
+// multi-word selections are metaphors, single words are MRWs.
+const suggestType = (annotation) => getQuote(annotation).includes(' ') ? 'metaphor' : 'mrw';
+// Track annotation IDs we've already auto-typed
+const autoTyped = new Set();
+// Assign a suggested type to each newly created annotation, as part of
+// a createAnnotation event listener
+export const useSuggestAnnotationType = () => {
+    const anno = useAnnotator();
+    const store = useAnnotationStore();
+    useEffect(() => {
+        if (!anno || !store)
+            return;
+        const onCreate = (annotation) => {
+            const { id } = annotation;
+            // Deduplication
+            if (autoTyped.has(id))
+                return;
+            autoTyped.add(id);
+            setTimeout(() => {
+                // Re-read from the store: the annotation may have been revived/updated/
+                // deleted since creation
+                const current = store.getAnnotation(id);
+                if (!current || getAnnotationType(current))
+                    return;
+                store.updateAnnotation(setAnnotationType(current, suggestType(current)));
+            }, 0);
+        };
+        anno.on('createAnnotation', onCreate);
+        return () => anno.off('createAnnotation', onCreate);
+    }, [anno, store]);
+};

package/dist/pages/_components/TeiMetaphorView/hooks/useTagVocabulary.d.ts

@@ -0,0 +1,3 @@
+import { type VocabularyTerm } from '@recogito/studio-sdk';
+export declare const useTagVocabulary: (projectId: string) => VocabularyTerm[];
+//# sourceMappingURL=useTagVocabulary.d.ts.map

package/dist/pages/_components/TeiMetaphorView/hooks/useTagVocabulary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTagVocabulary.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/TeiMetaphorView/hooks/useTagVocabulary.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAKpE,eAAO,MAAM,gBAAgB,GAAI,WAAW,MAAM,qBAsDjD,CAAC"}

package/dist/pages/_components/TeiMetaphorView/hooks/useTagVocabulary.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { useAnnotationStore } from '@annotorious/react';
+import { getTags } from '@recogito/studio-sdk';
+import { sdk } from '../../shared/supabase';
+// Hook to load the project tag vocabulary via the SDK, kept up to date with any
+// tags users create during the session
+export const useTagVocabulary = (projectId) => {
+    const [vocabulary, setVocabulary] = useState([]);
+    const store = useAnnotationStore();
+    useEffect(() => {
+        sdk.tags.getProjectTagVocabulary(projectId).then(({ error, data }) => {
+            if (error)
+                console.error(error);
+            else
+                setVocabulary(data);
+        });
+    }, [projectId]);
+    const getUniqueTags = (annotations) => {
+        const labels = annotations.reduce((all, annotation) => [...all, ...getTags(annotation).map((t) => t.label)], []);
+        return Array.from(new Set(labels));
+    };
+    const addToVocabulary = (labels) => setVocabulary((current) => {
+        const toAdd = labels.filter((label) => !current.some((t) => t.label === label));
+        return [...current, ...toAdd.map((label) => ({ label }))];
+    });
+    // Ensure tags users create during the session become part of the vocabulary
+    useEffect(() => {
+        if (!store)
+            return;
+        const onChange = (event) => {
+            const { created, updated } = event.changes;
+            let labels = [];
+            if (created)
+                labels = getUniqueTags(created);
+            if (updated)
+                labels = [...labels, ...getUniqueTags(updated.map((u) => u.newValue))];
+            if (labels.length > 0)
+                addToVocabulary(labels);
+        };
+        store.observe(onChange);
+        return () => {
+            store.unobserve(onChange);
+        };
+    }, [store]);
+    return vocabulary;
+};

package/dist/pages/_components/TeiMetaphorView/index.d.ts

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

package/dist/pages/_components/TeiMetaphorView/index.d.ts.map

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

package/dist/pages/_components/TeiMetaphorView/index.js

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