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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TeiMetaphorView.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/TeiMetaphorView/TeiMetaphorView.tsx"],"names":[],"mappings":"AAgBA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,QAAQ,EACb,KAAK,OAAO,EACb,MAAM,sBAAsB,CAAC;AAU9B,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAElB,OAAO,EAAE,OAAO,CAAC;IAEjB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCAiH1D,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Annotorious } from '@annotorious/react';
+import { useRef, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { useStoredFileDocument } from '../shared/hooks/useStoredFileDocument';
+import { AnnotatableTEI } from './components/AnnotatableTEI';
+import { MetadataPanel } from './components/MetadataPanel';
+import { useDocumentLayers } from '../shared/hooks/useDocumentLayers';
+import { HideAllState, StorageAdapter } from '../shared/components';
+import { useLayerPolicies } from '../shared/hooks/useLayerPolicies';
+import { EditorToolbar } from '../shared/components/EditorToolbar';
+import clientI18next from '../shared/i18n';
+import { ColorCodingState } from './components/ColorCodingState';
+import { AnnotationPanel, } from './components/AnnotationPanel';
+import { AuthorColorProvider, FilterState, SelectionURLState, Spinner, UndoStack, } from '@recogito/studio-sdk/components';
+export const TeiMetaphorView = (props) => {
+    const { context, document, project } = props;
+    const { layers, activeLayer } = useDocumentLayers(document.id, context.id);
+    const { content } = useStoredFileDocument(document.id);
+    const [metadataOpen, setMetadataOpen] = useState(true);
+    const metadataOpenButtonRef = useRef(null);
+    const [present, setPresent] = useState([]);
+    const [privacy, setPrivacy] = useState('public');
+    const onMetadataOpenChange = (open) => {
+        setMetadataOpen(open);
+        if (!open) {
+            metadataOpenButtonRef.current?.focus();
+        }
+    };
+    const [annotationTab, setAnnotationTab] = useState();
+    const annotationsOpenButtonRef = useRef(null);
+    const onAnnotationsOpenChange = (open) => {
+        setAnnotationTab(open ? 'list' : undefined);
+        if (!open) {
+            annotationsOpenButtonRef.current?.focus();
+        }
+    };
+    const policies = useLayerPolicies(activeLayer?.id);
+    const isLocked = Boolean(project.is_locked);
+    return (_jsx(I18nextProvider, { i18n: clientI18next, children: document.content_type !== 'text/xml' ? (_jsx("div", { className: 'view-unsupported', children: clientI18next.t('This document type is not supported in this view.') })) : document && content && activeLayer ? (_jsx(AuthorColorProvider, { children: _jsx(Annotorious, { children: _jsx(FilterState, { children: _jsx(ColorCodingState, { children: _jsx(HideAllState, { children: _jsxs("div", { id: 'metaphor-tei-root', children: [_jsx(MetadataPanel, { document: document, onOpenChange: onMetadataOpenChange, open: metadataOpen }), _jsxs("div", { id: 'main', children: [_jsx(EditorToolbar, { annotationsOpen: !!annotationTab, annotationsOpenButtonRef: annotationsOpenButtonRef, context: context, document: document, metadataOpen: metadataOpen, metadataOpenButtonRef: metadataOpenButtonRef, onAnnotationsOpenChange: onAnnotationsOpenChange, onMetadataOpenChange: onMetadataOpenChange, present: present, project: project, privacy: privacy, onChangePrivacy: setPrivacy }), _jsx(AnnotatableTEI, { document: document, content: content, isLocked: isLocked, activeLayerId: activeLayer.id, policies: policies, onFocusAnnotationPanel: setAnnotationTab }), _jsx(UndoStack, { undoEmpty: true }), _jsx(SelectionURLState, { backButton: true }), layers.length > 0 && (_jsx(StorageAdapter, { activeLayer: activeLayer, channelId: props.channelId, layers: layers, onPresence: setPresent, privacyMode: privacy === 'private' }))] }), _jsx(AnnotationPanel, { isLocked: isLocked, onStateChange: setAnnotationTab, projectId: project.id, tab: annotationTab })] }) }) }) }) }) })) : (_jsx("div", { className: 'spinner-container', children: _jsx(Spinner, { className: 'spinner', size: 32 }) })) }));
+};

package/dist/pages/_components/TeiMetaphorView/components/AnnotatableTEI/AnnotatableTEI.d.ts

@@ -0,0 +1,14 @@
+import type { Document, Policies } from '@recogito/studio-sdk';
+import type { AnnotationPanelTab } from '../AnnotationPanel';
+import '@recogito/text-annotator-plugin-inline-markers/style.css';
+interface AnnotatableTEIProps {
+    content: string;
+    document: Document;
+    isLocked: boolean;
+    activeLayerId: string;
+    policies?: Policies;
+    onFocusAnnotationPanel(tab: AnnotationPanelTab): void;
+}
+export declare const AnnotatableTEI: (props: AnnotatableTEIProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AnnotatableTEI.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotatableTEI.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotatableTEI/AnnotatableTEI.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAO/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,0DAA0D,CAAC;AAElE,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;IAEhB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,QAAQ,EAAE,OAAO,CAAC;IAElB,aAAa,EAAE,MAAM,CAAC;IAEtB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB,sBAAsB,CAAC,GAAG,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAiDxD,CAAC"}

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useAnnotator } from '@annotorious/react';
+import { CETEIcean, TEIAnnotator, } from '@recogito/react-text-annotator';
+import { useAnnotationsStyle, useSuggestAnnotationType } from '../../hooks';
+import { useFilter } from '@recogito/studio-sdk/components';
+import { useHideAll } from '../../../shared/components';
+import { useSelectAction } from '../../../shared/hooks/useSelectAction';
+import { InlineMarkersPlugin } from '@recogito/text-annotator-plugin-inline-markers/react';
+import { InlineToolbar } from '../InlineToolbar';
+import '@recogito/text-annotator-plugin-inline-markers/style.css';
+export const AnnotatableTEI = (props) => {
+    const style = useAnnotationsStyle(props.activeLayerId);
+    const { filter } = useFilter();
+    const { hideAll } = useHideAll();
+    // auto-assign a suggested type to each new annotation
+    useSuggestAnnotationType();
+    const anno = useAnnotator();
+    const annoRef = useRef(anno);
+    annoRef.current = anno;
+    // Creators and layer admins can edit, everyone else can only select
+    const selectAction = useSelectAction({
+        isLocked: props.isLocked,
+        activeLayerId: props.activeLayerId,
+        policies: props.policies,
+        getUser: () => annoRef.current?.getUser(),
+    });
+    // Set imperatively: <TEIAnnotator> only reads userSelectAction once, on
+    // creation. Re-setting also re-evaluates the current selection (e.g.
+    // once the policies have loaded).
+    useEffect(() => {
+        anno?.setUserSelectAction(selectAction);
+    }, [anno, selectAction]);
+    return (_jsx("main", { children: _jsxs(TEIAnnotator, { annotatingEnabled: !props.isLocked, filter: filter, hideAnnotations: hideAll, style: style, selectionMode: 'all', mergeHighlights: { horizontalTolerance: 24 }, children: [_jsx(InlineMarkersPlugin, {}), _jsx(CETEIcean, { tei: props.content }), _jsx(InlineToolbar, { onOpenListSidebar: () => props.onFocusAnnotationPanel('list'), onOpenSelectedSidebar: () => props.onFocusAnnotationPanel('selected') })] }) }));
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export * from "./AnnotatableTEI";

package/dist/pages/_components/TeiMetaphorView/components/AnnotationPanel/AnnotationPanel.css

@@ -0,0 +1,67 @@
+/* AnnotationPanel */
+.annotation-panel {
+  background-color: white;
+  border-left: 1px solid var(--gray-200);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.annotation-panel.open {
+  width: 320px;
+}
+
+.annotation-panel.closed {
+  width: 0;
+  border-left: none;
+}
+
+.annotation-panel-content {
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.annotation-panel-header {
+  background-color: white;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0 1rem;
+  height: 4.25rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.annotation-panel-title {
+  font-family: Poppins, sans-serif;
+  font-weight: 600;
+  margin: 0;
+  font-size: 16px;
+}
+
+.annotation-panel-tabs-root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.annotation-panel-tab-content[data-state='active'] {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.annotation-panel-tab-content[data-state='inactive'] {
+  display: none !important;
+}

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

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

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

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

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

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

package/dist/pages/_components/TeiMetaphorView/components/AnnotationPanel/ListTab/ListCard.d.ts

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

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

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

package/dist/pages/_components/TeiMetaphorView/components/AnnotationPanel/ListTab/ListCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Visibility, } from '@recogito/annotorious-supabase';
+import { ChatTeardropTextIcon, LockIcon } from '@phosphor-icons/react';
+import { Avatar } from '@recogito/studio-sdk/components';
+import { getTags } from '@recogito/studio-sdk';
+import { getAnnotationType, interleaveLinkedAnnotations, timeAgo, } from '../../../utils';
+export const ListCard = (props) => {
+    const { t, i18n } = useTranslation();
+    const { annotation, linked, selected, emphasize, deemphasize, onToggleSelect, onOpenComments, } = props;
+    const type = getAnnotationType(annotation);
+    const creator = annotation.target.creator;
+    const creatorName = creator?.name || t('Unknown User');
+    const timestamp = timeAgo(annotation.target.created || new Date(), i18n.language);
+    const tags = useMemo(() => getTags(annotation), [annotation.bodies]);
+    const isPrivate = annotation.visibility === Visibility.PRIVATE;
+    const commentCount = useMemo(() => annotation.bodies.filter((b) => b.purpose === 'commenting' || b.purpose === 'replying').length, [annotation.bodies]);
+    const renderQuote = () => {
+        const tokens = interleaveLinkedAnnotations(annotation, linked);
+        return (_jsx("div", { className: 'list-card-quote-text', children: tokens.map(({ value, type }, idx) => (_jsx("span", { className: type === 'word' ? 'highlight-word' : '', children: value }, idx))) }));
+    };
+    const cardClass = [
+        'list-card',
+        type === 'mrw' ? 'is-mrw' : '',
+        emphasize ? 'is-emphasized' : '',
+        deemphasize ? 'is-deemphasized' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: cardClass, children: [_jsx("button", { type: 'button', className: 'unstyled list-card-select', "aria-pressed": selected, "aria-label": t('Select Annotation'), onClick: onToggleSelect }), _jsxs("div", { className: 'list-card-content', children: [tags.length > 0 && (_jsx("div", { className: 'list-card-tags', children: tags.map((tag, idx) => (_jsxs("div", { className: 'list-card-tag', children: [_jsx("div", { className: 'list-card-tag-dot' }), _jsx("span", { children: tag.label })] }, `${tag.id || tag.label}-${idx}`))) })), _jsx("div", { className: 'list-card-quote-box', children: renderQuote() }), _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 ", timestamp] })] }), _jsxs("div", { className: 'list-card-footer-actions', children: [commentCount > 0 && (_jsxs("button", { type: 'button', className: 'unstyled list-card-comments', "aria-label": t('Comments'), onClick: onOpenComments, children: [_jsx(ChatTeardropTextIcon, { size: 14, weight: 'bold', "aria-hidden": 'true' }), _jsx("span", { children: commentCount })] })), isPrivate && (_jsx("span", { className: 'list-card-private', "aria-label": t('Private'), title: t('Private'), children: _jsx(LockIcon, { size: 14, weight: 'bold' }) }))] })] })] })] }));
+};

package/dist/pages/_components/TeiMetaphorView/components/AnnotationPanel/ListTab/ListTab.css

@@ -0,0 +1,230 @@
+.list-tab-container {
+  padding: 8px;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--font-light, #6b7280);
+  margin-bottom: 12px;
+}
+
+.list-header-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+button.list-select-trigger {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  padding: 2px 8px;
+  cursor: pointer;
+  color: var(--font-light, #6b7280);
+  transition: color 0.15s ease;
+}
+
+button.list-select-trigger:hover {
+  color: var(--font-dark, #111827);
+}
+
+.list-select-content {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 4px;
+  font-size: 12px;
+  border: 1px solid var(--gray-200, #e5e7eb);
+  z-index: 50;
+}
+
+.list-select-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 24px 6px 8px;
+  position: relative;
+  border-radius: 4px;
+  cursor: default;
+  outline: none;
+  color: var(--font-dark, #111827);
+}
+
+.list-select-item:hover,
+.list-select-item[data-highlighted] {
+  background-color: var(--gray-100, #f3f4f6);
+}
+
+.list-select-indicator {
+  position: absolute;
+  right: 6px;
+  display: flex;
+  align-items: center;
+}
+
+.list-search-icon {
+  margin-right: 2px;
+}
+
+.list-cards-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.list-card {
+  position: relative;
+  padding: 2px;
+  border-radius: 8px;
+  background-color: white;
+  border: 1px solid var(--gray-200, #e5e7eb);
+  transition: all 0.2s ease;
+}
+
+.list-card:hover {
+  border-color: var(--gray-300, #d1d5db);
+}
+
+.list-card-select {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.list-card .list-card-select:not(:disabled):hover {
+  background-color: rgba(0, 0, 0, 0.06);
+  box-shadow: none;
+}
+
+.list-card-select:focus-visible {
+  outline: 2px solid var(--bright-blue, #2563eb);
+  outline-offset: -2px;
+}
+
+.list-card.is-mrw {
+  background-color: rgba(22, 163, 74, 0.15);
+  border-color: rgba(22, 163, 74, 0.3);
+}
+
+.list-card.is-emphasized {
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35);
+  border-color: transparent;
+}
+
+.list-card.is-deemphasized {
+  opacity: 0.5;
+}
+
+.list-card-content {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.list-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--font-light, #6b7280);
+  font-weight: 300;
+  padding: 2px;
+}
+
+.list-card-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.list-card-tag-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--purple-500, #a855f7);
+}
+
+.list-card-quote-box {
+  font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  font-style: italic;
+  font-weight: 300;
+  padding: 10px;
+  background-color: var(--gray-100, #f3f4f6);
+  border-radius: 6px;
+  line-height: 1.625;
+}
+
+.list-card-quote-text {
+  font-size: 14px;
+  color: var(--font-dark, #111827);
+}
+
+.highlight-word {
+  background-color: var(--pink-200, #fbcfe8);
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.list-card-footer {
+  position: relative;
+  padding: 2px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.list-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.list-card-author {
+  font-weight: 500;
+  color: var(--font-dark, #111827);
+}
+
+.list-card-date {
+  color: var(--font-light, #6b7280);
+}
+
+.list-card-footer-actions {
+  position: absolute;
+  bottom: -2px;
+  right: 2px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.list-card-comments {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--font-light, #6b7280);
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.list-card-footer-actions .list-card-comments:not(:disabled):hover {
+  color: var(--bright-blue, #2563eb);
+  box-shadow: none;
+}
+
+.list-card-private {
+  display: flex;
+  align-items: center;
+  color: var(--font-light, #6b7280);
+}

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

@@ -0,0 +1,7 @@
+import { AnnotationPanelTab } from '../AnnotationPanel';
+interface ListTabProps {
+    onStateChange(tab: AnnotationPanelTab): void;
+}
+export declare const ListTab: (props: ListTabProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ListTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/ListTab/ListTab.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,UAAU,YAAY;IACpB,aAAa,CAAC,GAAG,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCAgP1C,CAAC"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAnnotations, useSelection, useViewportState, useAnnotator, } from '@annotorious/react';
+import * as Select from '@radix-ui/react-select';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { CaretDownIcon, CheckIcon, SortAscendingIcon, SortDescendingIcon, } from '@phosphor-icons/react';
+import { getAnnotationType, sortAnnotationsByCharPosition, } from '../../../utils';
+import { useFilter } from '@recogito/studio-sdk/components';
+import { ListCard } from './ListCard';
+export const ListTab = (props) => {
+    const { t } = useTranslation();
+    const [sortBy, setSortBy] = useState('natural');
+    const [sortDirection, setSortDirection] = useState('asc');
+    const [viewportFilter, setViewportFilter] = useState('all');
+    const anno = useAnnotator();
+    const allAnnotations = useAnnotations(250);
+    const visibleAnnotations = useViewportState(250);
+    const { selected } = useSelection();
+    const hasSelection = selected.length > 0;
+    const isSelected = (annotation) => selected.some((t) => t.annotation.id === annotation.id);
+    const { filter } = useFilter();
+    // Toggle which array we process based on the dropdown, then apply
+    // the same filter that controls highlight visibility
+    const unfiltered = viewportFilter === 'viewport' ? visibleAnnotations : allAnnotations;
+    const activeAnnotations = filter ? unfiltered.filter(filter) : unfiltered;
+    const grouped = useMemo(() => {
+        const metaphors = activeAnnotations.filter((a) => getAnnotationType(a) === 'metaphor');
+        const words = activeAnnotations.filter((a) => getAnnotationType(a) === 'mrw');
+        const linkedWordIds = new Set(metaphors.reduce((ids, metaphor) => {
+            const linkedIds = metaphor.bodies
+                .filter((b) => b.purpose === 'linking' && b.value)
+                .map((b) => b.value);
+            return [...ids, ...linkedIds];
+        }, []));
+        let rootAnnotations = [
+            ...metaphors,
+            ...words.filter((a) => !linkedWordIds.has(a.id)),
+        ];
+        // sort
+        if (sortBy === 'natural') {
+            rootAnnotations = sortAnnotationsByCharPosition(rootAnnotations);
+        }
+        else if (sortBy === 'created') {
+            rootAnnotations.sort((a, b) => {
+                const dateA = a.target.created?.getTime() || 0;
+                const dateB = b.target.created?.getTime() || 0;
+                return dateA - dateB;
+            });
+        }
+        else if (sortBy === 'updated') {
+            // find the most recent date between the target creation and all bodies (comments/replies)
+            const getLatestDate = (a) => {
+                const dates = [
+                    a.target.created?.getTime() || 0,
+                    ...a.bodies.map((b) => b.created?.getTime() || 0),
+                ];
+                return Math.max(...dates);
+            };
+            rootAnnotations.sort((a, b) => getLatestDate(a) - getLatestDate(b));
+        }
+        // sort direction
+        if (sortDirection === 'desc') {
+            rootAnnotations.reverse();
+        }
+        const getLinkedAnnotations = (annotation) => {
+            const linkedIds = annotation.bodies
+                .filter((b) => b.purpose === 'linking' && b.value)
+                .map((b) => b.value);
+            return linkedIds
+                .map((id) => activeAnnotations.find((a) => a.id === id))
+                .filter(Boolean);
+        };
+        return rootAnnotations.map((root) => [root, getLinkedAnnotations(root)]);
+    }, [activeAnnotations, sortBy, sortDirection]);
+    const handleToggleSelect = (annotation) => {
+        if (!anno)
+            return;
+        if (isSelected(annotation)) {
+            anno.state.selection.clear();
+        }
+        else {
+            anno.state.selection.setSelected(annotation.id);
+        }
+    };
+    const handleOpenComments = (annotationId) => {
+        if (anno) {
+            anno.state.selection.setSelected(annotationId);
+            props.onStateChange('selected');
+            setTimeout(() => {
+                window.dispatchEvent(new CustomEvent('request-focus-conversation', {
+                    detail: annotationId,
+                }));
+            }, 150);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: 'list-header', children: [_jsxs("div", { className: 'list-header-group', children: [_jsx(Tooltip.Provider, { children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'unstyled toolbar-btn icon-only', "aria-label": t('Toggle sort direction'), onClick: () => setSortDirection((prev) => prev === 'asc' ? 'desc' : 'asc'), children: sortDirection === 'asc' ? (_jsx(SortAscendingIcon, {})) : (_jsx(SortDescendingIcon, {})) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { side: 'top', className: 'tooltip-content', children: [sortDirection === 'asc'
+                                                        ? t('Sort descending')
+                                                        : t('Sort ascending'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }) }), _jsxs(Select.Root, { value: sortBy, onValueChange: (v) => setSortBy(v), children: [_jsxs(Select.Trigger, { className: 'unstyled list-select-trigger', children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(CaretDownIcon, { size: 12 }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'list-select-content', position: 'popper', sideOffset: 4, children: _jsxs(Select.Viewport, { children: [_jsxs(Select.Item, { value: 'natural', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Text order') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] }), _jsxs(Select.Item, { value: 'created', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Created') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] }), _jsxs(Select.Item, { value: 'updated', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Updated') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] })] }) }) })] })] }), _jsx("div", { className: 'list-header-group', children: _jsxs(Select.Root, { value: viewportFilter, onValueChange: (v) => setViewportFilter(v), children: [_jsxs(Select.Trigger, { className: 'unstyled list-select-trigger', children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { children: _jsx(CaretDownIcon, { size: 12 }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'list-select-content', position: 'popper', sideOffset: 4, children: _jsxs(Select.Viewport, { children: [_jsxs(Select.Item, { value: 'all', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Show all') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] }), _jsxs(Select.Item, { value: 'viewport', className: 'list-select-item', children: [_jsx(Select.ItemText, { children: t('Current viewport') }), _jsx(Select.ItemIndicator, { className: 'list-select-indicator', children: _jsx(CheckIcon, { size: 14 }) })] })] }) }) })] }) })] }), _jsx("div", { className: 'list-cards-wrapper', children: grouped.map(([root, linked]) => (_jsx(ListCard, { annotation: root, linked: linked, selected: isSelected(root), emphasize: hasSelection && isSelected(root), deemphasize: hasSelection && !isSelected(root), onToggleSelect: () => handleToggleSelect(root), onOpenComments: () => handleOpenComments(root.id) }, root.id))) })] }));
+};

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

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

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

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

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

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