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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetaphorTags.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/components/MetaphorTags.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAGpE,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,sBAAsB,CAAC;AAI9B,UAAU,iBAAiB;IACzB,UAAU,EAAE,aAAa,CAAC;IAE1B,UAAU,EAAE,cAAc,EAAE,CAAC;IAE7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAwEpD,CAAC"}

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { createBody, useAnnotationStore } from '@annotorious/react';
+import { Autosuggest } from '@recogito/studio-sdk/components';
+import { getTags, parseTagBody, } from '@recogito/studio-sdk';
+import { useTranslation } from 'react-i18next';
+import { Tag } from './Tag';
+export const MetaphorTags = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    const [inputValue, setInputValue] = useState();
+    const tags = useMemo(() => getTags(props.annotation), [props.annotation]);
+    const onAddTag = (term) => {
+        if (!store)
+            return;
+        if (!term.label.trim())
+            return;
+        if (tags.some((tag) => tag.label === term.label))
+            return;
+        const body = createBody(props.annotation, {
+            purpose: 'tagging',
+            value: term.id ? JSON.stringify(term) : term.label,
+        });
+        store.updateAnnotation({
+            ...props.annotation,
+            bodies: [...(props.annotation.bodies || []), body],
+        });
+        setInputValue(undefined);
+    };
+    const onDeleteTag = (tag) => {
+        if (!store)
+            return;
+        store.updateAnnotation({
+            ...props.annotation,
+            bodies: (props.annotation.bodies || []).filter((b) => !(b.purpose === 'tagging' && parseTagBody(b)?.label === tag.label)),
+        });
+    };
+    return (_jsxs("div", { className: 'metaphor-tags-root', children: [!props.readOnly && (_jsx("div", { className: 'metaphor-tags-header', children: _jsx("div", { className: 'tag-editor', children: _jsx(Autosuggest, { value: inputValue, vocabulary: props.vocabulary, onChange: setInputValue, onSubmit: onAddTag, placeholder: t('Search tags...') }) }) })), _jsx("ul", { className: props.readOnly ? 'taglist' : 'taglist editable', children: tags.map((tag) => (_jsx("li", { children: _jsx(Tag, { value: tag.label, onDelete: props.readOnly ? undefined : () => onDeleteTag(tag) }) }, tag.id || tag.label))) })] }));
+};

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

@@ -0,0 +1,8 @@
+import type { AnnotatingMode } from '@recogito/react-text-annotator';
+interface SpanToolsProps {
+    mode: AnnotatingMode;
+    onChangeMode(mode: AnnotatingMode): void;
+}
+export declare const SpanTools: (props: SpanToolsProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SpanTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpanTools.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/components/SpanTools.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGrE,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IAErB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAkD9C,CAAC"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Toggle from '@radix-ui/react-toggle';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { SelectionIcon, SelectionPlusIcon } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+export const SpanTools = (props) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("div", { className: 'span-tools-container', children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Toggle.Root, { className: 'compact toggle', pressed: props.mode === 'REPLACE_CURRENT', onPressedChange: (pressed) => props.onChangeMode(pressed ? 'REPLACE_CURRENT' : 'CREATE_NEW'), "aria-label": t('Re-select & replace span'), children: _jsx(SelectionIcon, { size: 18, weight: 'bold', "aria-hidden": 'true' }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Re-select & replace span'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Toggle.Root, { className: 'compact toggle', pressed: props.mode === 'ADD_TO_CURRENT', onPressedChange: (pressed) => props.onChangeMode(pressed ? 'ADD_TO_CURRENT' : 'CREATE_NEW'), "aria-label": t('Add or extend span'), children: _jsx(SelectionPlusIcon, { size: 18, weight: 'bold', "aria-hidden": 'true' }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Add or extend span'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }) }));
+};

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

@@ -0,0 +1,7 @@
+interface TagProps {
+    value: string;
+    onDelete?(): void;
+}
+export declare const Tag: (props: TagProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/components/Tag.tsx"],"names":[],"mappings":"AAGA,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IAEd,QAAQ,CAAC,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,gCAiBlC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+export const Tag = (props) => {
+    const { t } = useTranslation();
+    return (_jsxs("span", { className: props.onDelete ? 'tag editable' : 'tag', children: [_jsx("span", { children: props.value }), props.onDelete && (_jsx("button", { className: 'unstyled tag-delete-btn', onClick: props.onDelete, "aria-label": t('Delete tag'), children: _jsx(XIcon, { "aria-hidden": 'true' }) }))] }));
+};

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

@@ -0,0 +1,9 @@
+import type { AnnotationType } from '../../../../../shared/types';
+interface TypeSelectorProps {
+    type: AnnotationType;
+    disabled?: boolean;
+    onChangeType(type: AnnotationType): void;
+}
+export declare const TypeSelector: (props: TypeSelectorProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TypeSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TypeSelector.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/components/TypeSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAGlE,UAAU,iBAAiB;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCA2CpD,CAAC"}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Select from '@radix-ui/react-select';
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+export const TypeSelector = (props) => {
+    const { t } = useTranslation();
+    return (_jsxs(Select.Root, { value: props.type || '', disabled: props.disabled, onValueChange: props.onChangeType, children: [_jsxs(Select.Trigger, { className: 'select-trigger', "aria-label": t('Select annotation type'), children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { className: 'select-icon', children: _jsx(CaretDownIcon, { weight: 'bold' }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'select-content', position: 'popper', sideOffset: 4, children: _jsxs(Select.Viewport, { className: 'select-viewport', children: [_jsxs(Select.Item, { value: 'metaphor', className: 'select-item', children: [_jsx(Select.ItemIndicator, { className: 'select-item-indicator', children: _jsx(CheckIcon, { weight: 'bold' }) }), _jsx(Select.ItemText, { children: t('Metaphor') })] }), _jsxs(Select.Item, { value: 'mrw', className: 'select-item', children: [_jsx(Select.ItemIndicator, { className: 'select-item-indicator', children: _jsx(CheckIcon, { weight: 'bold' }) }), _jsx(Select.ItemText, { children: t('Metaphor-Related Word') })] })] }) }) })] }));
+};

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

@@ -0,0 +1,10 @@
+import type { TEIAnnotation } from '@recogito/react-text-annotator';
+import { MrwOption } from '../../../../hooks';
+interface WordTagsProps {
+    annotation: TEIAnnotation;
+    mrwOptions: MrwOption[];
+    disabled?: boolean;
+}
+export declare const WordTags: (props: WordTagsProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=WordTags.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WordTags.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/components/WordTags.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAKpE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,UAAU,aAAa;IACrB,UAAU,EAAE,aAAa,CAAC;IAC1B,UAAU,EAAE,SAAS,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCA8E5C,CAAC"}

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { createBody, useAnnotationStore } from '@annotorious/react';
+import * as Select from '@radix-ui/react-select';
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';
+import { isMRWTypeBody } from '../../../../utils';
+import { useTranslation } from 'react-i18next';
+export const WordTags = (props) => {
+    const { t } = useTranslation();
+    const store = useAnnotationStore();
+    const mrwType = useMemo(() => {
+        const typeBody = props.annotation.bodies.find(isMRWTypeBody);
+        return typeBody ? typeBody.value : undefined;
+    }, [props.annotation]);
+    const onValueChange = (value) => {
+        if (!store)
+            return;
+        const updated = {
+            ...props.annotation,
+            bodies: [
+                ...props.annotation.bodies.filter((b) => !isMRWTypeBody(b)),
+                createBody(props.annotation, {
+                    purpose: 'classifying',
+                    conformsTo: 'mrw_type',
+                    value,
+                }),
+            ],
+        };
+        store.updateAnnotation(updated);
+    };
+    return (_jsxs("div", { className: 'word-tags-container', children: [_jsx("div", { children: _jsx("label", { className: 'word-tags-label', children: t('MRW Type') }) }), _jsx("div", { children: _jsxs(Select.Root, { value: mrwType || '', disabled: props.disabled, onValueChange: onValueChange, children: [_jsxs(Select.Trigger, { className: 'select-trigger word-tags-trigger', "aria-label": t('Select MRW type'), children: [_jsx(Select.Value, { placeholder: t('Select MRW type...') }), _jsx(Select.Icon, { className: 'select-icon', children: _jsx(CaretDownIcon, { weight: 'bold', "aria-hidden": 'true' }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'select-content', position: 'popper', sideOffset: 4, children: _jsx(Select.Viewport, { className: 'select-viewport', children: props.mrwOptions?.length > 0 && (_jsx(_Fragment, { children: props.mrwOptions.map((op) => (_jsxs(Select.Item, { value: op.uri, className: 'select-item', children: [_jsx(Select.ItemIndicator, { className: 'select-item-indicator', children: _jsx(CheckIcon, { weight: 'bold', "aria-hidden": 'true' }) }), _jsx(Select.ItemText, { children: op.prefLabel })] }, op.uri))) })) }) }) })] }) })] }));
+};

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

@@ -0,0 +1,7 @@
+import type { TEIAnnotation } from '@recogito/react-text-annotator';
+interface WordUplinkProps {
+    annotation: TEIAnnotation;
+}
+export declare const WordUplink: (props: WordUplinkProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=WordUplink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WordUplink.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/components/WordUplink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAMpE,UAAU,eAAe;IACvB,UAAU,EAAE,aAAa,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,uCA2BhD,CAAC"}

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnnotator } from '@annotorious/react';
+import { Button } from '@recogito/studio-sdk/components';
+import { PencilIcon } from '@phosphor-icons/react';
+import { getQuote } from '../../../../utils';
+import { useLinkedMetaphors } from '../../../../hooks/useLinkedMetaphors';
+export const WordUplink = (props) => {
+    const anno = useAnnotator();
+    const { isLinkedBy } = useLinkedMetaphors();
+    const uplinks = isLinkedBy(props.annotation);
+    const onSelectUplink = (annotation) => {
+        if (!anno)
+            return;
+        anno.setSelected(annotation.id);
+    };
+    return uplinks.length > 0 ? (_jsx("div", { children: uplinks.map((annotation) => (_jsx("div", { className: 'word-uplink-item', children: _jsxs(Button, { className: 'btn-link-variant', onClick: () => onSelectUplink(annotation), children: [_jsx(PencilIcon, { weight: 'bold' }), _jsx("div", { className: 'btn-link-text-wrapper', children: getQuote(annotation) })] }) }, annotation.id))) })) : null;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,157 @@
+/* SettingsTab */
+.settings-tab-content {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/* AnnotationStyle */
+.annotation-style {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px 0;
+}
+
+.annotation-style-trigger {
+  width: 100%;
+}
+
+/* Theme picker (shown when coding by annotation type) */
+.annotation-style-themes {
+  display: flex;
+  gap: 8px;
+}
+
+button.annotation-style-theme {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  font-family: Inter, sans-serif;
+  font-size: 13px;
+  padding: 6px 10px;
+  border: 1px solid var(--gray-300, #d1d5db);
+  border-radius: 6px;
+  background-color: white;
+  color: var(--font-dark, #111827);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+button.annotation-style-theme:hover {
+  background-color: var(--gray-100, #f3f4f6);
+}
+
+button.annotation-style-theme.selected {
+  border-color: var(--bright-blue, #2563eb);
+  background-color: var(--gray-100, #f3f4f6);
+}
+
+.annotation-style-theme-swatch {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.annotation-style-legend {
+  list-style: none;
+  margin: 0;
+  padding: 0 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.annotation-style-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  color: var(--font-dark, #111827);
+}
+
+/* Swatch color is set inline from the active color coding */
+.annotation-style-swatch {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+/* Underline swatch (metaphors) — echoes the in-text underline treatment:
+   the hue lives on a thick bottom border, color set inline. */
+.annotation-style-swatch.underline {
+  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom-width: 2px;
+  border-radius: 4px 4px 0 0;
+}
+
+.annotation-style-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--font-light, #6b7280);
+}
+
+/* Filters */
+.settings-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 8px 0;
+}
+
+.settings-filters-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--font-dark, #111827);
+}
+
+.settings-filters-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-filters-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--font-dark, #111827);
+}
+
+.settings-filters-toggles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+button.settings-filters-toggle {
+  font-family: Inter, sans-serif;
+  font-size: 13px;
+  padding: 4px 12px;
+  border: 1px solid var(--gray-300, #d1d5db);
+  border-radius: 6px;
+  background-color: white;
+  color: var(--font-dark, #111827);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+button.settings-filters-toggle:hover {
+  background-color: var(--gray-100, #f3f4f6);
+}
+
+button.settings-filters-toggle[data-state='on'] {
+  background-color: var(--gray-200, #e5e7eb);
+  border-color: var(--gray-400, #9ca3af);
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationStyle.d.ts","sourceRoot":"","sources":["../../../../../../../../src/pages/_components/TeiMetaphorView/components/AnnotationPanel/SettingsTab/components/AnnotationStyle.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,eAAe,mCAyG3B,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import * as Select from '@radix-ui/react-select';
+import { CaretDownIcon, CheckIcon } from '@phosphor-icons/react';
+import { THEMES, useColorCoding, } from '../../../ColorCodingState';
+const THEME_LABELS = {
+    ORANGE: 'Orange',
+    CYAN: 'Cyan',
+};
+export const AnnotationStyle = () => {
+    const { t } = useTranslation();
+    const { coding, setCoding, theme, setTheme, legend } = useColorCoding();
+    return (_jsxs("div", { className: 'annotation-style', children: [_jsxs(Select.Root, { value: coding, onValueChange: (value) => setCoding(value), children: [_jsxs(Select.Trigger, { className: 'select-trigger annotation-style-trigger', "aria-label": t('Select highlight style'), children: [_jsx(Select.Value, {}), _jsx(Select.Icon, { className: 'select-icon', children: _jsx(CaretDownIcon, { weight: 'bold' }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: 'select-content', position: 'popper', sideOffset: 4, children: _jsxs(Select.Viewport, { className: 'select-viewport', children: [_jsxs(Select.Item, { value: 'by-type', className: 'select-item', children: [_jsx(Select.ItemIndicator, { className: 'select-item-indicator', children: _jsx(CheckIcon, { weight: 'bold' }) }), _jsx(Select.ItemText, { children: t('By annotation type') })] }), _jsxs(Select.Item, { value: 'by-tag', className: 'select-item', children: [_jsx(Select.ItemIndicator, { className: 'select-item-indicator', children: _jsx(CheckIcon, { weight: 'bold' }) }), _jsx(Select.ItemText, { children: t('By first tag') })] })] }) }) })] }), coding === 'by-type' && (_jsx("div", { className: 'annotation-style-themes', role: 'group', "aria-label": t('Color theme'), children: Object.keys(THEMES).map((th) => (_jsxs("button", { type: 'button', className: `annotation-style-theme${theme === th ? ' selected' : ''}`, "aria-pressed": theme === th, "aria-label": t(THEME_LABELS[th]), onClick: () => setTheme(th), children: [_jsx("span", { className: 'annotation-style-theme-swatch', style: { backgroundColor: THEMES[th].FILL_COLOR_OPAQUE }, "aria-hidden": 'true' }), t(THEME_LABELS[th])] }, th))) })), legend.length > 0 ? (_jsx("ul", { className: 'annotation-style-legend', children: legend.map((item, idx) => {
+                    const isUnderline = item.shape === 'underline';
+                    return (_jsxs("li", { className: 'annotation-style-legend-item', children: [_jsx("span", { className: `annotation-style-swatch${isUnderline ? ' underline' : ''}`, style: isUnderline
+                                    ? { borderBottomColor: item.color }
+                                    : { backgroundColor: item.color }, "aria-hidden": 'true' }), coding === 'by-type' ? t(item.label) : item.label] }, `${item.label}-${idx}`));
+                }) })) : (_jsx("p", { className: 'annotation-style-empty', children: t('No tags yet') }))] }));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type Color } from '@annotorious/react';
+import type { TEIAnnotation } from '@recogito/react-text-annotator';
+export type ColorCoding = 'by-type' | 'by-tag';
+export type ColorTheme = 'ORANGE' | 'CYAN';
+export interface ThemeConfig {
+    FILL_COLOR_OPAQUE: string;
+    FILL_COLOR_SEMITRANSPARENT: string;
+    UNDERLINE_COLOR_OPAQUE: string;
+}
+export declare const THEMES: Record<ColorTheme, ThemeConfig>;
+export interface ColorLegendItem {
+    color: Color;
+    label: string;
+    shape?: 'fill' | 'underline';
+}
+interface ColorCodingContextValue {
+    coding: ColorCoding;
+    setCoding(coding: ColorCoding): void;
+    theme: ColorTheme;
+    setTheme(theme: ColorTheme): void;
+    getColor(annotation: TEIAnnotation): Color;
+    legend: ColorLegendItem[];
+}
+interface ColorCodingStateProps {
+    children: ReactNode;
+}
+export declare const ColorCodingState: (props: ColorCodingStateProps) => import("react").JSX.Element;
+export declare const useColorCoding: () => ColorCodingContextValue;
+export {};
+//# sourceMappingURL=ColorCodingState.d.ts.map

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

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

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, } from 'react';
+import { useAnnotations } from '@annotorious/react';
+import { AdobeCategorical12, createPalette, enumerateTags, getTags, } from '@recogito/studio-sdk';
+import { getAnnotationType } from '../../utils';
+// themes for 'by-type' color coding
+export const THEMES = {
+    ORANGE: {
+        FILL_COLOR_OPAQUE: 'oklch(0.78 0.19 57.08 / 0.75)',
+        FILL_COLOR_SEMITRANSPARENT: 'oklch(0.8 0.18 59.17 / 0.14)',
+        UNDERLINE_COLOR_OPAQUE: 'oklch(0.78 0.19 57.08 / 0.87)',
+    },
+    CYAN: {
+        FILL_COLOR_OPAQUE: 'oklch(0.72 0.18 237.15 / 0.5)',
+        FILL_COLOR_SEMITRANSPARENT: 'oklch(0.72 0.19 232.06 / 0.08)',
+        UNDERLINE_COLOR_OPAQUE: 'oklch(0.72 0.19 232.06)',
+    },
+};
+// fallback for annotations with no tag
+const NO_TAG_COLOR = '#9ca3af';
+// @ts-ignore
+const ColorCodingContext = createContext();
+export const ColorCodingState = (props) => {
+    const [coding, setCoding] = useState('by-type');
+    const [theme, setTheme] = useState('ORANGE');
+    const annotations = useAnnotations(500);
+    const tags = useMemo(() => enumerateTags(annotations), [annotations]);
+    // memoize palette shared by both annotation color and color legend
+    const { getColor, legend } = useMemo(() => {
+        // 'by-tag': mapped from palette by first tag
+        if (coding === 'by-tag') {
+            const palette = createPalette(AdobeCategorical12);
+            const legend = tags.map((tag) => ({
+                label: tag.label,
+                color: palette.getColor(tag.label),
+            }));
+            const getColor = (annotation) => {
+                const firstTag = getTags(annotation)[0];
+                return firstTag ? palette.getColor(firstTag.label) : NO_TAG_COLOR;
+            };
+            return { getColor, legend };
+        }
+        // 'by-type': single-hue theme; shape (fill vs underline) marks the type
+        const config = THEMES[theme];
+        const getColor = (annotation) => (getAnnotationType(annotation) === 'mrw'
+            ? config.FILL_COLOR_OPAQUE
+            : config.UNDERLINE_COLOR_OPAQUE);
+        const legend = [
+            {
+                label: 'Metaphor',
+                color: config.UNDERLINE_COLOR_OPAQUE,
+                shape: 'underline',
+            },
+            {
+                label: 'Word',
+                color: config.FILL_COLOR_OPAQUE,
+                shape: 'fill',
+            },
+        ];
+        return { getColor, legend };
+    }, [coding, theme, tags]);
+    return (_jsx(ColorCodingContext.Provider, { value: { coding, setCoding, theme, setTheme, getColor, legend }, children: props.children }));
+};
+export const useColorCoding = () => useContext(ColorCodingContext);

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

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

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

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

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

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