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

package/dist/pages/_components/shared/components/EditorToolbar/EditorToolbar.css

@@ -0,0 +1,218 @@
+#editor-toolbar {
+  width: 100%;
+  height: 4.25rem;
+  min-height: 4.25rem;
+  max-height: 4.25rem;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin: 0;
+  padding: 0 1rem;
+  box-sizing: border-box;
+}
+
+nav#breadcrumbs {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+nav#breadcrumbs ol {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.5rem 0;
+  width: 100%;
+}
+
+nav#breadcrumbs ol li {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+nav#breadcrumbs ol li span,
+nav#breadcrumbs ol li a {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+nav#breadcrumbs ol li:not(:last-of-type)::after {
+  content: '/';
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+nav#breadcrumbs ol li a.project {
+  color: var(--font-dark);
+  background-color: var(--gray-100);
+  padding: 0 0.75rem;
+  border-radius: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.375rem;
+}
+
+nav#breadcrumbs ol li:not([aria-current='page']) {
+  font-size: var(--font-small);
+  font-weight: 500;
+}
+
+nav#breadcrumbs ol li[aria-current='page'] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  flex: 0 1 auto;
+}
+
+#editor-toolbar .toolbar-tools {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+#editor-toolbar .toolbar-right-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.anno-toolbar-presence button {
+  border-radius: 50%;
+  color: var(--font-dark);
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  height: 36px;
+  vertical-align: bottom;
+  width: 36px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  box-shadow: none;
+  height: 36px;
+  min-width: auto;
+  outline: none;
+  padding: 0;
+  vertical-align: bottom;
+  width: 36px;
+}
+
+.anno-toolbar-presence button:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.anno-toolbar-presence button.active {
+  background-color: var(--bright-blue);
+  color: #fff;
+}
+
+.anno-toolbar-presence button.active svg {
+  color: #fff;
+}
+
+/* Privacy selector */
+button.unstyled.privacy-selector-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: Inter, sans-serif;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+button.unstyled.privacy-selector-trigger {
+  background-color: var(--gray-100);
+}
+
+button.unstyled.privacy-selector-trigger:hover {
+  background-color: var(--gray-300);
+}
+
+button.unstyled.privacy-selector-trigger svg {
+  margin: 0;
+}
+
+button.unstyled.privacy-selector-trigger .dropdown-indicator {
+  left: 0;
+}
+
+.privacy-dropdown-content {
+  width: 280px;
+}
+
+.privacy-dropdown-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.privacy-item-indicator {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.privacy-item-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 600;
+  font-size: 13px;
+  padding: 4px 0;
+}
+
+.privacy-item-description {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--font-light);
+  margin: 0;
+}
+
+.toolbar-right-controls *:is(button, a.button) + *:is(button, a.button).redo {
+  margin-left: 0;
+}
+
+/* Keyboard-shortcut hint shown in the undo/redo tooltips */
+.tooltip-shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.tooltip-keys {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.tooltip-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background-color: var(--gray-100);
+  color: var(--font-dark);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+}

package/dist/pages/_components/shared/components/EditorToolbar/EditorToolbar.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { type Context, type Document, type Project } from '@recogito/studio-sdk';
+import { PresentUser } from '@annotorious/react';
+import { PrivacyMode } from './PrivacySelector';
+interface EditorToolbarProps {
+    annotationsOpen: boolean;
+    annotationsOpenButtonRef?: React.RefObject<HTMLButtonElement | null>;
+    context: Context;
+    document: Document;
+    tools?: ReactNode;
+    moreMenu?: ReactNode;
+    metadataOpen?: boolean;
+    metadataOpenButtonRef?: React.RefObject<HTMLButtonElement | null>;
+    onAnnotationsOpenChange(open: boolean): void;
+    onMetadataOpenChange?(open: boolean): void;
+    present: PresentUser[];
+    project: Project;
+    privacy: PrivacyMode;
+    onChangePrivacy(mode: PrivacyMode): void;
+}
+export declare const EditorToolbar: (props: EditorToolbarProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=EditorToolbar.d.ts.map

package/dist/pages/_components/shared/components/EditorToolbar/EditorToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/EditorToolbar/EditorToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,QAAQ,EACb,KAAK,OAAO,EACb,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAmB,MAAM,mBAAmB,CAAC;AAIjE,UAAU,kBAAkB;IAC1B,eAAe,EAAE,OAAO,CAAC;IAEzB,wBAAwB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAErE,OAAO,EAAE,OAAO,CAAC;IAEjB,QAAQ,EAAE,QAAQ,CAAC;IAEnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAElE,uBAAuB,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAE7C,oBAAoB,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAE3C,OAAO,EAAE,WAAW,EAAE,CAAC;IAEvB,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,WAAW,CAAC;IAErB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAgGtD,CAAC"}

package/dist/pages/_components/shared/components/EditorToolbar/EditorToolbar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { SidebarSimpleIcon } from '@phosphor-icons/react';
+import { PresenceStack } from '@recogito/studio-sdk/components';
+import { PrivacySelector } from './PrivacySelector';
+import { UndoRedo } from './UndoRedo';
+import { AccountActions } from '../AccountActions';
+export const EditorToolbar = (props) => {
+    const { t, i18n } = useTranslation();
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs("header", { id: 'editor-toolbar', children: [props.onMetadataOpenChange && (_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { ref: props.metadataOpenButtonRef, className: 'compact', "aria-label": t('Open or close metadata panel'), onClick: () => props.onMetadataOpenChange(!props.metadataOpen), children: _jsx(SidebarSimpleIcon, { size: 18 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Open or close metadata panel'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })), _jsx("nav", { id: 'breadcrumbs', children: _jsxs("ol", { children: [_jsx("li", { children: _jsx("a", { className: 'project', href: `/${i18n.language}/projects/${props.project.id}`, children: props.project.name }) }), _jsx("li", { children: _jsx("span", { children: props.context.name ||
+                                        t('Project Baselayer', { ns: 'project-assignments' }) }) }), _jsx("li", { "aria-current": 'page', children: _jsx("span", { children: props.document.name }) })] }) }), props.tools && _jsx("div", { className: 'toolbar-tools', children: props.tools }), _jsxs("div", { className: 'toolbar-right-controls', children: [props.present.length > 1 && (_jsx("div", { className: 'anno-toolbar-section anno-toolbar-presence', children: _jsx(PresenceStack, { present: props.present }) })), props.moreMenu ? (_jsxs(_Fragment, { children: [_jsx(UndoRedo, {}), props.moreMenu] })) : (_jsxs(_Fragment, { children: [_jsx(PrivacySelector, { mode: props.privacy, onChangeMode: props.onChangePrivacy }), _jsx(UndoRedo, {})] })), _jsx(AccountActions, {}), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { ref: props.annotationsOpenButtonRef, className: 'compact', "aria-label": t('Open or close annotation panel'), onClick: () => props.onAnnotationsOpenChange(!props.annotationsOpen), children: _jsx(SidebarSimpleIcon, { size: 18, mirrored: true }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [t('Open or close annotation panel'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] })] }) }));
+};

package/dist/pages/_components/shared/components/EditorToolbar/PrivacySelector.d.ts

@@ -0,0 +1,8 @@
+export type PrivacyMode = 'public' | 'private';
+interface PrivacySelectorProps {
+    mode: PrivacyMode;
+    onChangeMode(mode: PrivacyMode): void;
+}
+export declare const PrivacySelector: (props: PrivacySelectorProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=PrivacySelector.d.ts.map

package/dist/pages/_components/shared/components/EditorToolbar/PrivacySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrivacySelector.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/EditorToolbar/PrivacySelector.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/C,UAAU,oBAAoB;IAC5B,IAAI,EAAE,WAAW,CAAC;IAElB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCA2F1D,CAAC"}

package/dist/pages/_components/shared/components/EditorToolbar/PrivacySelector.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { CaretDownIcon, DetectiveIcon, UsersIcon, CheckIcon, } from '@phosphor-icons/react';
+export const PrivacySelector = (props) => {
+    const { t } = useTranslation();
+    return (_jsx(Tooltip.Provider, { delayDuration: 300, children: _jsxs(Dropdown.Root, { children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Dropdown.Trigger, { asChild: true, children: _jsxs("button", { className: 'unstyled privacy-selector-trigger', "aria-label": t('Annotation visibility'), children: [props.mode === 'private' ? (_jsx(DetectiveIcon, { size: 16, weight: 'bold' })) : (_jsx(UsersIcon, { size: 16, weight: 'bold' })), _jsx("span", { children: props.mode === 'private' ? t('Private') : t('Public') }), _jsx(CaretDownIcon, { size: 14, weight: 'bold', className: 'dropdown-indicator' })] }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 4, children: [t('Annotation visibility'), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsx(Dropdown.Portal, { children: _jsx(Dropdown.Content, { align: 'end', className: 'dropdown-content privacy-dropdown-content', sideOffset: 4, children: _jsxs(Dropdown.RadioGroup, { value: props.mode, onValueChange: (v) => props.onChangeMode(v), children: [_jsxs(Dropdown.RadioItem, { value: 'private', className: 'dropdown-item privacy-dropdown-item', children: [_jsx(Dropdown.ItemIndicator, { className: 'privacy-item-indicator', children: _jsx(CheckIcon, { size: 16, weight: 'bold' }) }), _jsxs("div", { className: 'privacy-item-header', children: [_jsx(DetectiveIcon, { size: 16, weight: 'bold' }), _jsx("span", { children: t('Private') })] }), _jsx("p", { className: 'privacy-item-description', children: t('Annotations you create in Private mode will be visible to no-one except you.') })] }), _jsxs(Dropdown.RadioItem, { value: 'public', className: 'dropdown-item privacy-dropdown-item', children: [_jsx(Dropdown.ItemIndicator, { className: 'privacy-item-indicator', children: _jsx(CheckIcon, { size: 16, weight: 'bold' }) }), _jsxs("div", { className: 'privacy-item-header', children: [_jsx(UsersIcon, { size: 16, weight: 'bold' }), _jsx("span", { children: t('Public') })] }), _jsx("p", { className: 'privacy-item-description', children: t('Public annotations are visible to anyone with access to this document. This may include invited users or the general public.') })] })] }) }) })] }) }));
+};

package/dist/pages/_components/shared/components/EditorToolbar/UndoRedo.d.ts

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

package/dist/pages/_components/shared/components/EditorToolbar/UndoRedo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UndoRedo.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/EditorToolbar/UndoRedo.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,QAAQ,mCAoFpB,CAAC"}

package/dist/pages/_components/shared/components/EditorToolbar/UndoRedo.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { ArrowUUpLeftIcon, ArrowUUpRightIcon } from '@phosphor-icons/react';
+import { useAnnotator } from '@annotorious/react';
+import { isMac, useUndoRedoKeys } from '@recogito/studio-sdk/components';
+const ShortcutHint = (props) => (_jsxs("span", { className: 'tooltip-shortcut', children: [_jsx("span", { children: props.label }), _jsx("span", { className: 'tooltip-keys', children: props.keys.map((key) => (_jsx("kbd", { className: 'tooltip-kbd', children: key }, key))) })] }));
+export const UndoRedo = () => {
+    const { t } = useTranslation();
+    const undoKeys = isMac ? ['⌘', 'Z'] : ['Ctrl', 'Z'];
+    const redoKeys = isMac ? ['⌘', t('Shift'), 'Z'] : ['Ctrl', 'Y'];
+    // use annotator's built-in undo/redo commands
+    const anno = useAnnotator();
+    useUndoRedoKeys();
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    // derive canUndo/canRedo from annotator history
+    const refresh = useCallback(() => {
+        if (!anno)
+            return;
+        const { changes, pointer } = anno.getHistory();
+        setCanUndo(pointer > -1);
+        setCanRedo(changes.length - 1 > pointer);
+    }, [anno]);
+    // sync with store changes
+    useEffect(() => {
+        if (!anno)
+            return;
+        refresh();
+        // undo/redo update anno history only after notifying store observers;
+        // so refresh canUndo/canRedo afterwards
+        const onChange = () => queueMicrotask(refresh);
+        const { store } = anno.state;
+        store.observe(onChange);
+        // clean up: unsubscribe from store changes
+        return () => store.unobserve(onChange);
+    }, [anno, refresh]);
+    const onUndo = () => anno?.undo();
+    const onRedo = () => anno?.redo();
+    return (_jsxs(Tooltip.Provider, { delayDuration: 300, children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact', disabled: !canUndo, "aria-label": t('Undo'), onClick: onUndo, children: _jsx(ArrowUUpLeftIcon, { size: 18 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [_jsx(ShortcutHint, { label: t('Undo'), keys: undoKeys }), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx("button", { className: 'compact redo', disabled: !canRedo, "aria-label": t('Redo'), onClick: onRedo, children: _jsx(ArrowUUpRightIcon, { size: 18 }) }) }), _jsx(Tooltip.Portal, { children: _jsxs(Tooltip.Content, { className: 'tooltip-content', sideOffset: 6, children: [_jsx(ShortcutHint, { label: t('Redo'), keys: redoKeys }), _jsx(Tooltip.Arrow, { className: 'tooltip-arrow' })] }) })] })] }));
+};

package/dist/pages/_components/shared/components/EditorToolbar/index.d.ts

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

package/dist/pages/_components/shared/components/EditorToolbar/index.d.ts.map

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

package/dist/pages/_components/shared/components/EditorToolbar/index.js

@@ -0,0 +1,2 @@
+export * from './EditorToolbar';
+export * from './PrivacySelector';

package/dist/pages/_components/shared/components/Filters/Filters.d.ts

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

package/dist/pages/_components/shared/components/Filters/Filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Filters/Filters.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,gCA+I1C,CAAC"}

package/dist/pages/_components/shared/components/Filters/Filters.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAnnotationStore } from '@annotorious/react';
+import * as Switch from '@radix-ui/react-switch';
+import * as Toggle from '@radix-ui/react-toggle';
+import { TagIcon, UsersIcon } from '@phosphor-icons/react';
+import { enumerateContributors, enumerateTags, getContributors, getTags, } from '@recogito/studio-sdk';
+import { useFilterSettingsState } from '@recogito/studio-sdk/components';
+import { useHideAll } from '../HideAllState';
+import { VisibilityFilter } from './VisibilityFilter';
+export const Filters = (props) => {
+    const { t } = useTranslation();
+    const showTags = props.showTags ?? true;
+    const store = useAnnotationStore();
+    const [annotations, setAnnotations] = useState([]);
+    useEffect(() => {
+        if (!store)
+            return;
+        // Relations (arrows, in the image view) aren't annotations in their own
+        // right for filtering purposes
+        const update = () => setAnnotations(store.all().filter((a) => a.motivation !== 'pointing'));
+        update();
+        store.observe(update);
+        return () => store.unobserve(update);
+    }, [store]);
+    const contributors = useMemo(() => enumerateContributors([], annotations), [annotations]);
+    const tags = useMemo(() => enumerateTags(annotations), [annotations]);
+    const { hideAll, setHideAll } = useHideAll();
+    const { contributorSettings, setContributorSettings, tagSettings, setTagSettings, } = useFilterSettingsState();
+    const selectedContributors = contributorSettings?.state || [];
+    const selectedTags = tagSettings?.state || [];
+    const onToggleContributor = (contributor) => {
+        const next = selectedContributors.some((u) => u.id === contributor.id)
+            ? selectedContributors.filter((u) => u.id !== contributor.id)
+            : [...selectedContributors, contributor];
+        if (next.length > 0) {
+            const showContributorIds = new Set(next.map((u) => u.id));
+            const filter = (a) => getContributors(a).some((u) => showContributorIds.has(u.id));
+            setContributorSettings({ state: next, filter });
+        }
+        else {
+            setContributorSettings(undefined);
+        }
+    };
+    const onToggleTag = (label) => {
+        const next = selectedTags.includes(label)
+            ? selectedTags.filter((l) => l !== label)
+            : [...selectedTags, label];
+        if (next.length > 0) {
+            const showLabels = new Set(next);
+            const filter = (a) => getTags(a).some((tag) => showLabels.has(tag.label));
+            setTagSettings({ state: next, filter });
+        }
+        else {
+            setTagSettings(undefined);
+        }
+    };
+    return (_jsxs("div", { className: 'settings-filters', children: [_jsxs("div", { className: 'settings-filters-row', children: [_jsx(Switch.Root, { id: 'hide-all-annotations', className: 'switch-root', checked: hideAll, onCheckedChange: setHideAll, children: _jsx(Switch.Thumb, { className: 'switch-thumb' }) }), _jsx("label", { htmlFor: 'hide-all-annotations', children: t('Hide all annotations') })] }), _jsx(VisibilityFilter, {}), _jsxs("div", { className: 'settings-filters-group', children: [_jsxs("h4", { className: 'settings-filters-heading', children: [_jsx(UsersIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Users')] }), contributors.length > 0 && (_jsx("div", { className: 'settings-filters-toggles', children: contributors.map((contributor) => (_jsx(Toggle.Root, { className: 'settings-filters-toggle', pressed: selectedContributors.some((u) => u.id === contributor.id), onPressedChange: () => onToggleContributor(contributor), children: contributor.name ||
+                                t('Anonymous', { ns: 'annotation-common' }) }, contributor.id))) }))] }), showTags && (_jsxs("div", { className: 'settings-filters-group', children: [_jsxs("h4", { className: 'settings-filters-heading', children: [_jsx(TagIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Tags', { ns: 'annotation-common' })] }), tags.length > 0 && (_jsx("div", { className: 'settings-filters-toggles', children: tags.map((tag, idx) => (_jsx(Toggle.Root, { className: 'settings-filters-toggle', pressed: selectedTags.includes(tag.label), onPressedChange: () => onToggleTag(tag.label), children: tag.label }, `${tag.id || tag.label}-${idx}`))) }))] }))] }));
+};

package/dist/pages/_components/shared/components/Filters/VisibilityFilter.d.ts

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

package/dist/pages/_components/shared/components/Filters/VisibilityFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisibilityFilter.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Filters/VisibilityFilter.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB,mCAsE5B,CAAC"}

package/dist/pages/_components/shared/components/Filters/VisibilityFilter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { LockIcon } from '@phosphor-icons/react';
+import { Visibility as VisibilityMode, } from '@recogito/annotorious-supabase';
+import { useFilterSettingsState } from '@recogito/studio-sdk/components';
+export const VisibilityFilter = () => {
+    const { t } = useTranslation();
+    const { visibilitySettings, setVisibilitySettings } = useFilterSettingsState();
+    const onValueChange = (value) => {
+        if (value === 'all') {
+            setVisibilitySettings(undefined);
+        }
+        else {
+            const filter = (a) => {
+                const isPrivate = a.visibility === VisibilityMode.PRIVATE;
+                return value === 'private' ? isPrivate : !isPrivate;
+            };
+            setVisibilitySettings({ state: value, filter });
+        }
+    };
+    return (_jsxs("div", { className: 'settings-filters-group', children: [_jsxs("h4", { className: 'settings-filters-heading', children: [_jsx(LockIcon, { weight: 'bold', size: 16, "aria-hidden": 'true' }), t('Visibility')] }), _jsxs(RadioGroup.Root, { className: 'radio-group-root', value: visibilitySettings?.state || 'all', onValueChange: (value) => onValueChange(value), children: [_jsxs("div", { className: 'radio-group-item-wrapper', children: [_jsx(RadioGroup.Item, { className: 'radio-group-item', value: 'all', id: 'visibility-all', children: _jsx(RadioGroup.Indicator, { className: 'radio-group-indicator' }) }), _jsx("label", { htmlFor: 'visibility-all', children: t('All annotations') })] }), _jsxs("div", { className: 'radio-group-item-wrapper', children: [_jsx(RadioGroup.Item, { className: 'radio-group-item', value: 'public', id: 'visibility-public', children: _jsx(RadioGroup.Indicator, { className: 'radio-group-indicator' }) }), _jsx("label", { htmlFor: 'visibility-public', children: t('Public annotations only') })] }), _jsxs("div", { className: 'radio-group-item-wrapper', children: [_jsx(RadioGroup.Item, { className: 'radio-group-item', value: 'private', id: 'visibility-private', children: _jsx(RadioGroup.Indicator, { className: 'radio-group-indicator' }) }), _jsx("label", { htmlFor: 'visibility-private', children: t('Private annotations only') })] })] })] }));
+};

package/dist/pages/_components/shared/components/Filters/index.d.ts

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

package/dist/pages/_components/shared/components/Filters/index.d.ts.map

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

package/dist/pages/_components/shared/components/Filters/index.js

@@ -0,0 +1,2 @@
+export * from './Filters';
+export * from './VisibilityFilter';

package/dist/pages/_components/shared/components/HideAllState/HideAllState.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+interface HideAllContextValue {
+    hideAll: boolean;
+    setHideAll(hideAll: boolean): void;
+}
+interface HideAllStateProps {
+    children: ReactNode;
+}
+export declare const HideAllState: (props: HideAllStateProps) => import("react").JSX.Element;
+export declare const useHideAll: () => HideAllContextValue;
+export {};
+//# sourceMappingURL=HideAllState.d.ts.map

package/dist/pages/_components/shared/components/HideAllState/HideAllState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HideAllState.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/HideAllState/HideAllState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IAEjB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC;AAKD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAQpD,CAAC;AAEF,eAAO,MAAM,UAAU,2BAAmC,CAAC"}

package/dist/pages/_components/shared/components/HideAllState/HideAllState.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+// @ts-ignore
+const HideAllContext = createContext();
+export const HideAllState = (props) => {
+    const [hideAll, setHideAll] = useState(false);
+    return (_jsx(HideAllContext.Provider, { value: { hideAll, setHideAll }, children: props.children }));
+};
+export const useHideAll = () => useContext(HideAllContext);

package/dist/pages/_components/shared/components/HideAllState/index.d.ts

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

package/dist/pages/_components/shared/components/HideAllState/index.d.ts.map

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

package/dist/pages/_components/shared/components/HideAllState/index.js

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

package/dist/pages/_components/shared/components/Metadata/MetadataList.d.ts

@@ -0,0 +1,10 @@
+export interface MetadataItem {
+    label: string;
+    value: string;
+}
+interface MetadataListProps {
+    items: MetadataItem[];
+}
+export declare const MetadataList: (props: MetadataListProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MetadataList.d.ts.map

package/dist/pages/_components/shared/components/Metadata/MetadataList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetadataList.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Metadata/MetadataList.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,gCAuBpD,CAAC"}

package/dist/pages/_components/shared/components/Metadata/MetadataList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cleanHTML, isValidURL } from './sanitize';
+export const MetadataList = (props) => {
+    const renderValue = (item) => {
+        if (isValidURL(item.value)) {
+            return (_jsx("a", { href: item.value, target: '_blank', rel: 'noreferrer', children: item.value }));
+        }
+        return _jsx("div", { dangerouslySetInnerHTML: { __html: cleanHTML(item.value) } });
+    };
+    return (_jsx("ul", { className: 'metadata-list', children: props.items.map((item, index) => (_jsxs("li", { children: [_jsx("div", { className: 'metadata-label', children: item.label }), _jsx("div", { className: 'metadata-value', children: renderValue(item) })] }, index))) }));
+};

package/dist/pages/_components/shared/components/Metadata/index.d.ts

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

package/dist/pages/_components/shared/components/Metadata/index.d.ts.map

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

package/dist/pages/_components/shared/components/Metadata/index.js

@@ -0,0 +1,2 @@
+export * from './MetadataList';
+export * from './sanitize';

package/dist/pages/_components/shared/components/Metadata/sanitize.d.ts

@@ -0,0 +1,3 @@
+export declare const isValidURL: (str: string) => boolean;
+export declare const cleanHTML: (str: string) => string;
+//# sourceMappingURL=sanitize.d.ts.map

package/dist/pages/_components/shared/components/Metadata/sanitize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Metadata/sanitize.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,KAAG,OAMxC,CAAC;AAIF,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,KAAG,MAiDvC,CAAC"}

package/dist/pages/_components/shared/components/Metadata/sanitize.js

@@ -0,0 +1,53 @@
+export const isValidURL = (str) => {
+    try {
+        return Boolean(new URL(str));
+    }
+    catch {
+        return false;
+    }
+};
+// Adapted from https://gomakethings.com/how-to-sanitize-html-strings-with-vanilla-js-to-reduce-your-risk-of-xss-attacks/
+export const cleanHTML = (str) => {
+    //Convert the string to an HTML document
+    const stringToHTML = () => {
+        const doc = new DOMParser().parseFromString(str, 'text/html');
+        return doc.body || document.createElement('body');
+    };
+    //Remove <script> elements
+    const removeScripts = (html) => {
+        for (const script of html.querySelectorAll('script')) {
+            script.remove();
+        }
+    };
+    //Check if the attribute is potentially dangerous
+    const isPossiblyDangerous = (name, value) => {
+        const val = value.replace(/\s+/g, '').toLowerCase();
+        if (['src', 'href', 'xlink:href'].includes(name)) {
+            if (val.includes('javascript:') || val.includes('data:text/html'))
+                return true;
+        }
+        return name.startsWith('on');
+    };
+    //Remove potentially dangerous attributes from an element
+    const removeAttributes = (elem) => {
+        // Loop through each attribute
+        // If it's dangerous, remove it
+        for (const { name, value } of Array.from(elem.attributes)) {
+            if (isPossiblyDangerous(name, value))
+                elem.removeAttribute(name);
+        }
+    };
+    // Remove dangerous stuff from the HTML document's nodes
+    const clean = (html) => {
+        for (const node of Array.from(html.children)) {
+            removeAttributes(node);
+            clean(node);
+        }
+    };
+    // Convert the string to HTML
+    const html = stringToHTML();
+    // Sanitize it
+    removeScripts(html);
+    clean(html);
+    return html.innerHTML;
+};

package/dist/pages/_components/shared/components/StorageAdapter.d.ts

@@ -0,0 +1,8 @@
+import { type SupabasePluginProps } from './SupabaseStorageAdapter';
+/**
+ * SupabaseStorageAdapter that also colours present users by author. Must be
+ * rendered inside an <AuthorColorProvider> (so `useAppearanceProvider` can read
+ * the author colours).
+ */
+export declare const StorageAdapter: (props: SupabasePluginProps) => import("react").JSX.Element;
+//# sourceMappingURL=StorageAdapter.d.ts.map

package/dist/pages/_components/shared/components/StorageAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StorageAdapter.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/components/StorageAdapter.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,0BAA0B,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,gCAKxD,CAAC"}