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

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

@@ -0,0 +1,189 @@
+.inline-toolbar {
+  position: relative;
+  background-color: white;
+  padding: 6px;
+  border-radius: 12px;
+  border: 1px solid var(--border-light-color);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.1),
+    0 20px 40px rgba(0, 0, 0, 0.06);
+}
+
+.toolbar-flex-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.toolbar-btn {
+  background: transparent;
+  border: none;
+  border-radius: var(--button-border-radius);
+  color: var(--font-dark);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.toolbar-btn:is(button, a.button) + .toolbar-btn:is(button, a.button) {
+  margin-left: 0;
+}
+
+.toolbar-btn:hover:not(:disabled) {
+  background-color: var(--gray-100);
+}
+
+.toolbar-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toolbar-btn.icon-only {
+  padding: 6px;
+}
+
+button.unstyled.toolbar-type-btn {
+  border-radius: var(--button-border-radius);
+  padding: 8px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toolbar-type-btn.metaphor-style {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.toolbar-type-btn.mrw-style {
+  letter-spacing: 0.025em;
+}
+
+.toolbar-type-btn.active {
+  background-color: rgba(7, 82, 154, 0.1);
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.icon-danger,
+.icon-danger svg {
+  color: var(--red-500);
+}
+
+.icon-danger:hover {
+  background-color: var(--red-500-10);
+}
+
+.toolbar-separator {
+  width: 1px;
+  height: 16px;
+  background-color: var(--gray-300);
+  margin: 0 4px;
+}
+
+.toolbar-btn-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.toolbar-badge {
+  position: absolute;
+  z-index: 10;
+  top: 1px;
+  right: 0;
+  background-color: var(--gray-800);
+  color: white;
+  border-radius: 50%;
+  padding: 2px;
+  aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  line-height: 1;
+  width: 10px;
+  font-size: 10px;
+}
+
+.toolbar-choice-container {
+  min-width: 240px;
+}
+
+.toolbar-choice-header {
+  padding: 0 4px 6px 10px;
+  border-bottom: 1px solid var(--gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--gray-900);
+}
+
+.toolbar-choice-list {
+  padding-top: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+button.unstyled.toolbar-choice-item {
+  position: relative;
+  padding: 8px;
+  width: 100%;
+  border-radius: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.choice-item-content {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  max-width: 80%;
+}
+
+.choice-quote {
+  font-style: italic;
+  color: var(--gray-600);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 192px;
+}
+
+.choice-meta {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  transition: color 0.2s;
+}
+
+.toolbar-choice-item:hover .choice-meta {
+  color: var(--primary);
+}
+
+.micro-avatar {
+  clip-path: none;
+  height: 20px;
+  width: 20px;
+  margin: 0;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.micro-avatar .avatar,
+.micro-avatar .avatar-wrapper {
+  width: 20px !important;
+  height: 20px !important;
+  min-width: 20px !important;
+  min-height: 20px !important;
+}
+
+.micro-avatar .avatar-fallback {
+  font-size: 9px !important;
+  font-weight: 500;
+}

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

@@ -0,0 +1,7 @@
+interface InlineToolbarProps {
+    onOpenSelectedSidebar?: () => void;
+    onOpenListSidebar?: () => void;
+}
+export declare const InlineToolbar: (props: InlineToolbarProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=InlineToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/InlineToolbar/InlineToolbar.tsx"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAyCtD,CAAC"}

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { TextAnnotationPopup, } from '@recogito/react-text-annotator';
+import { useSelection, useAnnotator } from '@annotorious/react';
+import { ToolbarStateChoice } from './ToolbarStateChoice';
+import { ToolbarStateSelected } from './ToolbarStateSelected';
+export const InlineToolbar = (props) => {
+    const anno = useAnnotator();
+    const selection = useSelection();
+    const onClose = useCallback(() => {
+        const { previous } = selection;
+        // Should never happen (after close, there's always a previous)
+        if (previous.length === 0)
+            return;
+        // Clean up empty annotations (only ones this user may edit, i.e. their
+        // own abandoned selections - never someone else's)
+        const isEmpty = previous[0].annotation.bodies.length === 0;
+        if (isEmpty && previous[0].editable) {
+            anno.removeAnnotation(previous[0].annotation);
+        }
+    }, [selection, anno]);
+    const onSelectChoice = (annotation) => anno?.setSelected(annotation.id);
+    return (_jsx(TextAnnotationPopup, { placement: 'bottom', popup: (popupProps) => popupProps.selected.length > 1 ? (_jsx(ToolbarStateChoice, { ...popupProps, onSelect: onSelectChoice, onOpenList: props.onOpenListSidebar || (() => { }) })) : (_jsx(ToolbarStateSelected, { ...popupProps, onClickAdvanced: props.onOpenSelectedSidebar || (() => { }) })), onClose: onClose }));
+};

package/dist/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateChoice.d.ts

@@ -0,0 +1,8 @@
+import type { TEIAnnotation, TextAnnotationPopupContentProps } from '@recogito/react-text-annotator';
+interface ToolbarStateChoiceProps extends TextAnnotationPopupContentProps {
+    onOpenList(): void;
+    onSelect(annotation: TEIAnnotation): void;
+}
+export declare const ToolbarStateChoice: (props: ToolbarStateChoiceProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarStateChoice.d.ts.map

package/dist/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateChoice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarStateChoice.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateChoice.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,EACb,+BAA+B,EAChC,MAAM,gCAAgC,CAAC;AAKxC,UAAU,uBAAwB,SAAQ,+BAA+B;IACvE,UAAU,IAAI,IAAI,CAAC;IACnB,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAsFhE,CAAC"}

package/dist/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateChoice.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { DotsThreeIcon, ChatTeardropTextIcon } from '@phosphor-icons/react';
+import { Button, Avatar, getInitials } from '@recogito/studio-sdk/components';
+import { getQuote } from '../../utils';
+export const ToolbarStateChoice = (props) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'inline-toolbar toolbar-choice-container', onFocusCapture: (evt) => evt.stopPropagation(), children: [_jsxs("div", { className: 'toolbar-choice-header text-body-small-bold', children: [t('annotationsCount', { count: props.selected.length }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { onClick: props.onOpenList, className: 'unstyled toolbar-btn icon-only', children: _jsx(DotsThreeIcon, { weight: 'bold' }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('More'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }), _jsx("div", { className: 'toolbar-choice-list', children: props.selected.map(({ annotation: textAnnotation }) => {
+                        const annotation = textAnnotation;
+                        const creator = annotation.target?.creator ||
+                            (annotation.bodies && annotation.bodies.length > 0
+                                ? annotation.bodies[0].creator
+                                : undefined);
+                        const creatorName = creator
+                            ? 'appearance' in creator
+                                ? creator.appearance.label
+                                : creator.name || t('Anonymous', { ns: 'annotation-common' })
+                            : t('Anonymous', { ns: 'annotation-common' });
+                        const creatorId = creator?.id || 'anonymous';
+                        const commentCount = (annotation.bodies || []).filter((b) => b.purpose === 'commenting' || b.purpose === 'replying').length;
+                        return (_jsxs(Button, { className: 'unstyled toolbar-btn toolbar-choice-item', onClick: () => props.onSelect(annotation), children: [_jsxs("div", { className: 'choice-item-content', children: [_jsx("div", { className: 'micro-avatar', children: _jsx(Avatar, { id: creatorId, initials: getInitials(creatorName), color: creator && 'appearance' in creator
+                                                    ? creator.appearance.color
+                                                    : undefined }) }), _jsx("span", { className: 'choice-quote text-body-small', children: getQuote(annotation) })] }), commentCount > 0 && (_jsxs("div", { className: 'choice-meta text-body-tiny', children: [_jsx(ChatTeardropTextIcon, { weight: 'fill' }), _jsx("span", { className: 'choice-meta-count', children: commentCount })] }))] }, annotation.id));
+                    }) })] }) }));
+};

package/dist/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateSelected.d.ts

@@ -0,0 +1,7 @@
+import { type TextAnnotationPopupContentProps } from '@recogito/react-text-annotator';
+interface ToolbarStateSelectedProps extends TextAnnotationPopupContentProps {
+    onClickAdvanced(): void;
+}
+export declare const ToolbarStateSelected: (props: ToolbarStateSelectedProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ToolbarStateSelected.d.ts.map

package/dist/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateSelected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarStateSelected.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateSelected.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,gCAAgC,CAAC;AAYxC,UAAU,yBAA0B,SAAQ,+BAA+B;IACzE,eAAe,IAAI,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,gCAoNpE,CAAC"}

package/dist/pages/_components/TeiMetaphorView/components/InlineToolbar/ToolbarStateSelected.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAnnotationStore } from '@annotorious/react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { createBody, } from '@recogito/react-text-annotator';
+import { ChatTeardropTextIcon, DotsThreeIcon, LinkSimpleHorizontalIcon, TrashIcon, } from '@phosphor-icons/react';
+import { Button } from '@recogito/studio-sdk/components';
+import { getAnnotationType, setAnnotationType } from '../../utils';
+import { useIntersectingAnnotations } from '../../hooks';
+export const ToolbarStateSelected = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    // popup supplies TextAnnotation, but here it's always TEIAnnotation
+    const teiAnnotation = props.annotation;
+    const currentType = getAnnotationType(teiAnnotation);
+    const { getIntersecting } = useIntersectingAnnotations();
+    const onSelectType = (type) => {
+        if (!store)
+            return;
+        if (currentType === type)
+            return;
+        store.updateAnnotation(setAnnotationType(teiAnnotation, type));
+    };
+    const onDelete = () => {
+        if (!store)
+            return;
+        store.deleteAnnotation(teiAnnotation.id);
+        window.getSelection()?.empty();
+    };
+    const canLinkAll = useMemo(() => {
+        const type = getAnnotationType(teiAnnotation);
+        if (type === 'mrw')
+            return false;
+        const intersecting = getIntersecting(teiAnnotation);
+        const linked = new Set(teiAnnotation.bodies
+            .filter((b) => b.purpose === 'linking' && b.value)
+            .map((b) => b.value));
+        const linkable = intersecting.filter((a) => !linked.has(a.id));
+        return linkable.length > 0;
+    }, [getIntersecting, teiAnnotation]);
+    const onLinkAll = () => {
+        if (!store)
+            return;
+        const intersecting = getIntersecting(teiAnnotation);
+        const updated = {
+            ...teiAnnotation,
+            bodies: [
+                ...teiAnnotation.bodies.filter((b) => b.purpose !== 'linking'),
+                ...intersecting.map((a) => createBody(teiAnnotation, {
+                    purpose: 'linking',
+                    value: a.id,
+                })),
+            ],
+        };
+        store.updateAnnotation(updated);
+    };
+    const onCommentClick = () => {
+        // open right sidebar
+        props.onClickAdvanced();
+        // custom event to scroll to conversation section
+        setTimeout(() => {
+            window.dispatchEvent(new CustomEvent('request-focus-conversation', {
+                detail: teiAnnotation.id,
+            }));
+            // small delay to ensure sidebar has mounted
+        }, 100);
+    };
+    const commentCount = useMemo(() => (teiAnnotation.bodies || []).filter((b) => b.purpose === 'commenting' || b.purpose === 'replying').length, [teiAnnotation]);
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsx("div", { className: 'inline-toolbar', onFocusCapture: (evt) => evt.stopPropagation(), children: _jsxs("div", { className: 'toolbar-flex-row', children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { className: `unstyled toolbar-btn toolbar-type-btn text-body-tiny metaphor-style ${currentType === 'metaphor' ? 'active' : ''}`, "aria-pressed": currentType === 'metaphor', disabled: !props.editable, onClick: () => onSelectType('metaphor'), children: t('Metaphor') }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Mark as Metaphor'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { className: `unstyled toolbar-btn toolbar-type-btn text-body-tiny mrw-style ${currentType === 'mrw' ? 'active' : ''}`, "aria-pressed": currentType === 'mrw', disabled: !props.editable, onClick: () => onSelectType('mrw'), children: t('Word') }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Mark as Metaphor-Related Word'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsx("div", { className: 'toolbar-separator' }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { className: 'unstyled toolbar-btn icon-only', disabled: !props.editable || !canLinkAll, onClick: onLinkAll, children: _jsx(LinkSimpleHorizontalIcon, { weight: 'bold' }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Link all intersecting words to this metaphor'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsxs("div", { className: 'toolbar-btn-wrapper', children: [_jsx(Button, { className: 'unstyled toolbar-btn icon-only', onClick: onCommentClick, children: _jsx(ChatTeardropTextIcon, { weight: 'bold' }) }), commentCount > 0 && (_jsx("span", { className: 'toolbar-badge text-body-tiny', children: commentCount }))] }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Comment'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), props.editable && (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { onClick: onDelete, className: 'unstyled toolbar-btn icon-only icon-danger', children: _jsx(TrashIcon, { weight: 'bold' }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Delete annotation'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { onClick: props.onClickAdvanced, className: 'unstyled toolbar-btn icon-only', children: _jsx(DotsThreeIcon, { weight: 'bold' }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('More'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }) }) }));
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { MetadataList, isValidURL, } from '../../../../shared/components/Metadata';
+import { getTeiMetadata } from './getTeiMetadata';
+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 from TEI (title, author, language, type)
+    const teiItems = props.teiRoot
+        ? getTeiMetadata(props.teiRoot, {
+            title: t('Title'),
+            author: t('Author'),
+            language: t('Language'),
+            type: t('Type'),
+        }, i18n.language)
+        : [];
+    // 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)));
+    // Custom user-supplied database metadata
+    const meta = document.meta_data?.meta ?? [];
+    if (teiItems.length === 0 &&
+        documentItems.length === 0 &&
+        meta.length === 0) {
+        return (_jsx("div", { className: 'metadata-empty', children: t('No document metadata available.') }));
+    }
+    return (_jsxs("div", { className: 'metadata-sections', children: [teiItems.length > 0 && (_jsxs("section", { children: [_jsx("h4", { className: 'metadata-section-title', children: t('Text') }), _jsx(MetadataList, { items: teiItems })] })), documentItems.length > 0 && (_jsxs("section", { children: [_jsx("h4", { className: 'metadata-section-title', children: t('Document') }), _jsx(MetadataList, { items: documentItems })] })), meta.length > 0 && (_jsxs("section", { children: [_jsx("h4", { className: 'metadata-section-title', children: t('Metadata') }), _jsx(MetadataList, { items: meta })] }))] }));
+};

package/dist/pages/_components/TeiMetaphorView/components/MetadataPanel/Info/getTeiMetadata.d.ts

@@ -0,0 +1,9 @@
+import type { MetadataItem } from '../../../../shared/components/Metadata';
+export interface TeiMetadataLabels {
+    title: string;
+    author: string;
+    language: string;
+    type: string;
+}
+export declare const getTeiMetadata: (teiRoot: Element, labels: TeiMetadataLabels, locale?: string) => MetadataItem[];
+//# sourceMappingURL=getTeiMetadata.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getTeiMetadata.d.ts","sourceRoot":"","sources":["../../../../../../../src/pages/_components/TeiMetaphorView/components/MetadataPanel/Info/getTeiMetadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAE3E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAiBD,eAAO,MAAM,cAAc,GACzB,SAAS,OAAO,EAChB,QAAQ,iBAAiB,EACzB,SAAS,MAAM,KACd,YAAY,EAgCd,CAAC"}

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

@@ -0,0 +1,33 @@
+const text = (el) => (el?.textContent || '').replace(/\s+/g, ' ').trim();
+const languageName = (code, locale) => {
+    try {
+        return (new Intl.DisplayNames([locale || 'en'], { type: 'language' }).of(code) ||
+            code);
+    }
+    catch {
+        return code;
+    }
+};
+// Bibliographic + structural metadata from the rendered TEI DOM
+export const getTeiMetadata = (teiRoot, labels, locale) => {
+    const container = teiRoot.closest('.tei-container');
+    const header = container?.querySelector('tei-teiheader');
+    const textEl = teiRoot.closest('tei-text');
+    const bodyEl = teiRoot.closest('tei-body');
+    // Prefer teiHeader title, fall back to <body> @n
+    const title = text(header?.querySelector('tei-titlestmt tei-title') ??
+        header?.querySelector('tei-title')) ||
+        bodyEl?.getAttribute('n') ||
+        '';
+    const author = text(header?.querySelector('tei-titlestmt tei-author') ??
+        header?.querySelector('tei-author'));
+    const langCode = textEl?.getAttribute('xml:lang') || textEl?.getAttribute('lang') || '';
+    const language = langCode ? languageName(langCode, locale) : '';
+    const type = textEl?.getAttribute('type') || '';
+    return [
+        { label: labels.title, value: title },
+        { label: labels.author, value: author },
+        { label: labels.language, value: language },
+        { label: labels.type, value: type },
+    ].filter((item) => item.value);
+};

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

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

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

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

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

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

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

@@ -0,0 +1,159 @@
+#metadata-panel {
+  width: 20rem;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  border-right: 1px solid var(--gray-200);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#metadata-panel[data-open='false'] {
+  width: 0;
+}
+
+#metadata-panel .header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0 1rem;
+  height: 4.25rem;
+  min-height: 4.25rem;
+  max-height: 4.25rem;
+  overflow: hidden;
+}
+
+#metadata-panel .header h3 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 16px;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#metadata-panel .header button {
+  flex: 0 0 auto;
+}
+
+.metadata-tabs-root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+/* Two tabs here (Contents, Info), not the drawer's three */
+.metadata-tabs-root .tabs-list {
+  grid-template-columns: repeat(2, 1fr);
+  position: static;
+  top: auto;
+}
+
+.metadata-tab-content[data-state='active'] {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.metadata-tab-content[data-state='inactive'] {
+  display: none !important;
+}
+
+/* TOC */
+.metadata-panel-body {
+  padding: 1.5rem;
+}
+
+.toc {
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+.toc-title {
+  margin: 0 0 0.5rem;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.toc-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-list .toc-list {
+  padding-left: 0.75rem;
+}
+
+.toc-item {
+  margin-top: 0.375rem;
+}
+
+.toc-link {
+  display: block;
+  color: var(--gray-700, #374151);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toc-link:hover {
+  text-decoration: underline;
+}
+
+/* XML structural type ("post", "thread", "replies") shown before the label */
+.toc-prefix {
+  margin-right: 0.375rem;
+  color: var(--font-light, #6b7280);
+  font-size: 0.75em;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+/* Metadata: section headers reuse the Contents h3 style */
+.metadata-section-title {
+  margin: 1rem 0 0.5rem;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.metadata-sections > section:first-child .metadata-section-title {
+  margin-top: 0;
+}
+
+.metadata-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+}
+
+.metadata-list > li {
+  padding: 0.5rem 0;
+  word-break: break-word;
+}
+
+.metadata-list > li + li {
+  border-top: 1px solid var(--gray-200);
+}
+
+.metadata-list .metadata-label {
+  color: var(--font-light, #6b7280);
+}
+
+.metadata-empty {
+  padding: 1rem 0;
+  text-align: center;
+  color: var(--font-light, #6b7280);
+}

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

@@ -0,0 +1,9 @@
+import type { Document } from '@recogito/studio-sdk';
+interface MetadataPanelProps {
+    document: Document;
+    open: boolean;
+    onOpenChange(open: boolean): void;
+}
+export declare const MetadataPanel: (props: MetadataPanelProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MetadataPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetadataPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/TeiMetaphorView/components/MetadataPanel/MetadataPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAarD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IAEnB,IAAI,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCA8FtD,CAAC"}