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

package/dist/pages/_components/ImageMetaphorView/components/image-panel.css

@@ -0,0 +1,347 @@
+/* "Selected" tab */
+.ia-selected {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.ia-selected-section {
+  padding: 1rem 1rem 0;
+}
+
+.ia-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-tiny);
+  font-weight: 600;
+  color: var(--font-light);
+  margin-bottom: 0.5rem;
+}
+
+.ia-selected-footer {
+  margin-top: auto;
+  padding: 1rem;
+}
+
+.ia-selected-footer button {
+  width: 100%;
+}
+
+/* Category chip */
+.ia-category-chip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+  color: #fff;
+  font-size: var(--font-tiny);
+  font-weight: 500;
+  border-radius: var(--border-radius);
+  padding: 4px 6px 4px 10px;
+}
+
+/* Clear button: white X on a dark translucent circle, legible on any
+   category color */
+.ia-category-chip button.icon-only {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #fff;
+}
+
+.ia-category-chip button.unstyled.icon-only svg {
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  color: #fff;
+}
+
+.ia-category-chip button.icon-only:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: none;
+}
+
+.ia-add-class {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--border-radius);
+  background-color: var(--gray-50);
+  color: var(--font-light);
+  font-size: var(--font-tiny);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.ia-add-class:hover {
+  background-color: var(--gray-100);
+}
+
+/* Properties */
+.ia-property-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ia-property-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--font-tiny);
+  background-color: var(--gray-100);
+  color: var(--font-dark);
+  border-radius: 999px;
+  padding: 3px 4px 3px 10px;
+}
+
+.ia-property-pill .icon-only {
+  width: 20px;
+  height: 20px;
+}
+
+.ia-add-property {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--font-tiny);
+  color: var(--link-color);
+}
+
+.ia-add-property svg {
+  top: 0;
+}
+
+/* Empty states + list */
+.ia-panel-empty {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  color: var(--font-light);
+  text-align: center;
+  padding: 2rem;
+}
+
+.ia-panel-empty p {
+  margin: 0;
+  font-size: var(--font-small);
+}
+
+/* List cards */
+.ia-list-card-category {
+  align-self: flex-start;
+  color: #fff;
+  font-size: var(--font-tiny);
+  font-weight: 500;
+  border-radius: var(--border-radius);
+  padding: 3px 10px;
+}
+
+.ia-list-card-untitled {
+  color: var(--font-light);
+  font-size: var(--font-tiny);
+  font-style: italic;
+}
+
+.ia-list-sort-label {
+  font-size: var(--font-tiny);
+  color: var(--font-light);
+}
+
+/* Shape toolbar */
+.ia-shape-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.1),
+    0 20px 40px rgba(0, 0, 0, 0.06);
+}
+
+.ia-shape-toolbar .ia-shape-toolbar-sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 4px 2px;
+  background-color: var(--gray-200);
+}
+
+/* SetCategory / AddProperty */
+.ia-set-category {
+  padding: 12px;
+  width: 240px;
+}
+
+.ia-set-category-label {
+  display: block;
+  font-size: var(--font-tiny);
+  font-weight: 600;
+  color: var(--font-light);
+  margin-bottom: 6px;
+}
+
+.ia-set-category-form {
+  display: flex;
+  gap: 6px;
+}
+
+.ia-set-category-form input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* RelationPreview */
+.ia-relation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ia-relation-preview {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 6px;
+  border: 1px solid var(--gray-200);
+  border-radius: 999px;
+  background-color: var(--gray-50);
+  font-size: var(--font-tiny);
+}
+
+.ia-relation-end {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  max-width: 40%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+
+.ia-relation-dot {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-color: var(--gray-400);
+}
+
+.ia-relation-end-point {
+  width: 8px;
+  height: 8px;
+  border: 1px solid var(--gray-400);
+  border-radius: 50%;
+}
+
+.ia-relation-untitled {
+  color: var(--font-light);
+  font-style: italic;
+  font-weight: 400;
+}
+
+.ia-relation-line {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 24px;
+  height: 16px;
+}
+
+/* dashed line */
+.ia-relation-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  border-top: 1px dashed var(--gray-400);
+}
+
+/* arrowhead */
+.ia-relation-line::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.ia-relation-line.outgoing::after {
+  right: -2px;
+  border-left: 7px solid var(--gray-400);
+}
+
+.ia-relation-line.incoming::after {
+  left: -2px;
+  border-right: 7px solid var(--gray-400);
+}
+
+.ia-relation-category {
+  position: relative;
+  max-width: 100px;
+  padding: 0 3px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: var(--gray-50);
+  font-weight: 300;
+}
+
+.ia-relations-empty {
+  margin: 0;
+  color: var(--font-light);
+  font-size: var(--font-tiny);
+}
+
+/* Hover tooltip on the image */
+.ia-hover-tooltip {
+  position: relative;
+  padding: 4px 8px;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  backdrop-filter: blur(4px);
+  background-color: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  color: var(--font-dark);
+  font-size: var(--font-tiny);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.ia-hover-tooltip-tint {
+  position: absolute;
+  inset: 0;
+  opacity: 0.35;
+}
+
+.ia-hover-tooltip span {
+  position: relative;
+}

package/dist/pages/_components/ImageMetaphorView/components/shared/AddProperty.d.ts

@@ -0,0 +1,6 @@
+interface AddPropertyProps {
+    onAddProperty(value: string): void;
+}
+export declare const AddProperty: (props: AddPropertyProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AddProperty.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/AddProperty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddProperty.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/AddProperty.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAgDlD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/AddProperty.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Popover from '@radix-ui/react-popover';
+import { PlusIcon } from '@phosphor-icons/react';
+export const AddProperty = (props) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState('');
+    const onSave = () => {
+        if (!value.trim())
+            return;
+        props.onAddProperty(value.trim());
+        setValue('');
+        setOpen(false);
+    };
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs("button", { className: 'unstyled ia-add-property', children: [_jsx(PlusIcon, {}), " ", t('Add property')] }) }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: 'popover-content ia-set-category', sideOffset: 6, align: 'end', children: [_jsx("label", { className: 'ia-set-category-label', children: t('Property') }), _jsxs("form", { className: 'ia-set-category-form', onSubmit: (evt) => {
+                                evt.preventDefault();
+                                onSave();
+                            }, children: [_jsx("input", { autoFocus: true, value: value, onChange: (evt) => setValue(evt.target.value) }), _jsx("button", { type: 'submit', className: 'primary sm', disabled: !value.trim(), children: t('Add') })] })] }) })] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/shared/RelationPreview.d.ts

@@ -0,0 +1,12 @@
+import { type ArrowAnnotation } from '@annotorious/plugin-arrows-react';
+interface RelationPreviewProps {
+    arrow: ArrowAnnotation;
+    referenceAnnotationId?: string;
+}
+/**
+ * Compact "A ⇢ B" pill for a relation (arrow) between annotations, after
+ * the bochum wireframes' RelationPreview.
+ */
+export declare const RelationPreview: (props: RelationPreviewProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RelationPreview.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/RelationPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationPreview.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/RelationPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAQ1C,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,CAAC;IAIvB,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,gCA8D1D,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/RelationPreview.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAnnotation } from '@annotorious/react';
+import { isArrowAnchor, } from '@annotorious/plugin-arrows-react';
+import { getCategoryColor } from './colors';
+const getCategory = (annotation) => annotation?.bodies.find((b) => b.purpose === 'classifying')?.value;
+/**
+ * Compact "A ⇢ B" pill for a relation (arrow) between annotations, after
+ * the bochum wireframes' RelationPreview.
+ */
+export const RelationPreview = (props) => {
+    const { t } = useTranslation();
+    const { start, end } = props.arrow.target.selector;
+    const startAnnotation = useAnnotation(isArrowAnchor(start) ? start.annotationId : '');
+    const endAnnotation = useAnnotation(isArrowAnchor(end) ? end.annotationId : '');
+    // Arrow points away from the reference annotation (or no reference)
+    const isOutgoing = !props.referenceAnnotationId ||
+        (isArrowAnchor(start) && start.annotationId === props.referenceAnnotationId);
+    const category = useMemo(() => getCategory(props.arrow), [props.arrow]);
+    const renderEnd = (annotation) => {
+        // Free-floating end (a point on the image, not an annotation)
+        if (!annotation)
+            return _jsx("span", { className: 'ia-relation-end ia-relation-end-point' });
+        const endCategory = getCategory(annotation);
+        return (_jsxs("span", { className: 'ia-relation-end', children: [_jsx("span", { className: 'ia-relation-dot', style: endCategory
+                        ? { backgroundColor: getCategoryColor(endCategory) }
+                        : undefined }), _jsx("span", { className: endCategory ? undefined : 'ia-relation-untitled', children: endCategory || t('Untitled') })] }));
+    };
+    const [left, right] = isOutgoing
+        ? [startAnnotation, endAnnotation]
+        : [endAnnotation, startAnnotation];
+    return (_jsxs("div", { className: 'ia-relation-preview', children: [renderEnd(left), _jsx("span", { className: `ia-relation-line ${isOutgoing ? 'outgoing' : 'incoming'}`, "aria-label": isOutgoing ? t('links to') : t('linked from'), children: category && _jsx("span", { className: 'ia-relation-category', children: category }) }), renderEnd(right)] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/shared/SetCategory.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+interface SetCategoryProps {
+    children: ReactNode;
+    onSetCategory(value: string): void;
+}
+export declare const SetCategory: (props: SetCategoryProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SetCategory.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/SetCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetCategory.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/SetCategory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IAEpB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCA4ClD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/SetCategory.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import * as Popover from '@radix-ui/react-popover';
+export const SetCategory = (props) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState('');
+    const onSave = () => {
+        if (!value.trim())
+            return;
+        props.onSetCategory(value.trim());
+        setValue('');
+        setOpen(false);
+    };
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: props.children }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: 'popover-content ia-set-category', sideOffset: 6, align: 'start', children: [_jsx("label", { className: 'ia-set-category-label', children: t('Enter concept') }), _jsxs("form", { className: 'ia-set-category-form', onSubmit: (evt) => {
+                                evt.preventDefault();
+                                onSave();
+                            }, children: [_jsx("input", { autoFocus: true, value: value, onChange: (evt) => setValue(evt.target.value) }), _jsx("button", { type: 'submit', className: 'primary sm', disabled: !value.trim(), children: t('Add') })] })] }) })] }));
+};

package/dist/pages/_components/ImageMetaphorView/components/shared/colors.d.ts

@@ -0,0 +1,2 @@
+export declare const getCategoryColor: (category: string) => string;
+//# sourceMappingURL=colors.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/colors.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,WAOhD,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/colors.js

@@ -0,0 +1,17 @@
+const PALETTE = [
+    '#c026d3',
+    '#fb923c',
+    '#a16207',
+    '#65a30d',
+    '#0891b2',
+    '#7c3aed',
+];
+const assigned = new Map();
+export const getCategoryColor = (category) => {
+    const existing = assigned.get(category);
+    if (existing)
+        return existing;
+    const next = PALETTE[assigned.size % PALETTE.length];
+    assigned.set(category, next);
+    return next;
+};

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

@@ -0,0 +1,6 @@
+export * from './colors';
+export * from './SetCategory';
+export * from './AddProperty';
+export * from './RelationPreview';
+export * from './useRelations';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

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

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './SetCategory';
+export * from './AddProperty';
+export * from './RelationPreview';
+export * from './useRelations';

package/dist/pages/_components/ImageMetaphorView/components/shared/useRelations.d.ts

@@ -0,0 +1,8 @@
+import { type ArrowAnnotation } from '@annotorious/plugin-arrows-react';
+/**
+ * The relations (arrows) connected to an annotation, excluding arrows whose
+ * other end is attached to an annotation that isn't loaded (e.g. a private
+ * annotation, or older data). The arrows plugin doesn't draw those either.
+ */
+export declare const useRelations: (annotationId: string) => ArrowAnnotation[];
+//# sourceMappingURL=useRelations.d.ts.map

package/dist/pages/_components/ImageMetaphorView/components/shared/useRelations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRelations.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/ImageMetaphorView/components/shared/useRelations.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAE1C;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,KAAG,eAAe,EAclE,CAAC"}

package/dist/pages/_components/ImageMetaphorView/components/shared/useRelations.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useAnnotationStore } from '@annotorious/react';
+import { isArrowAnchor, useArrows, } from '@annotorious/plugin-arrows-react';
+/**
+ * The relations (arrows) connected to an annotation, excluding arrows whose
+ * other end is attached to an annotation that isn't loaded (e.g. a private
+ * annotation, or older data). The arrows plugin doesn't draw those either.
+ */
+export const useRelations = (annotationId) => {
+    const store = useAnnotationStore();
+    const arrows = useArrows(annotationId);
+    return useMemo(() => arrows.filter((arrow) => [arrow.target.selector.start, arrow.target.selector.end].every((end) => !isArrowAnchor(end) || !!store?.getAnnotation(end.annotationId))), [arrows, store]);
+};

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

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

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

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

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

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

package/dist/pages/_components/ImageMetaphorView/hooks/useMultiPagePresence.d.ts

@@ -0,0 +1,17 @@
+import type { PresentUser, User } from '@annotorious/react';
+export type ActiveUsers = {
+    [source: string]: PresentUser[];
+};
+/**
+ * Tracks which canvas each present user was last active on, from the
+ * storage plugin's off-page activity and selection events. Same as the
+ * client's useMultiPagePresence
+ */
+export declare const useMultiPagePresence: (present: PresentUser[]) => {
+    activeUsers: ActiveUsers;
+    onPageActivity: (event: {
+        source: string;
+        user: User;
+    }) => void;
+};
+//# sourceMappingURL=useMultiPagePresence.d.ts.map

package/dist/pages/_components/ImageMetaphorView/hooks/useMultiPagePresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiPagePresence.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/ImageMetaphorView/hooks/useMultiPagePresence.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG5D,MAAM,MAAM,WAAW,GAAG;IAAE,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,CAAA;CAAE,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,WAAW,EAAE;;4BAK/C;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAE;CA0DzC,CAAC"}

package/dist/pages/_components/ImageMetaphorView/hooks/useMultiPagePresence.js

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+/**
+ * Tracks which canvas each present user was last active on, from the
+ * storage plugin's off-page activity and selection events. Same as the
+ * client's useMultiPagePresence
+ */
+export const useMultiPagePresence = (present) => {
+    // Active user IDs per source
+    const [active, setActivity] = useState({});
+    const onPageActivity = useCallback((event) => {
+        setActivity((active) => {
+            const { source, user } = event;
+            // Move the user to this source (a user is active on one source at a time)
+            const others = Object.entries(active).map(([s, ids]) => [s, ids.filter((id) => id !== user.id)]);
+            const current = active[source] || [];
+            const next = Object.fromEntries([
+                ...others.filter(([s]) => s !== source),
+                [source, [...new Set([...current, user.id])]],
+            ].filter(([, ids]) => ids.length > 0));
+            // Compare by value, to avoid unnecessary re-renders
+            return JSON.stringify(active) === JSON.stringify(next) ? active : next;
+        });
+    }, []);
+    // Drop users who are no longer present
+    useEffect(() => {
+        setActivity((active) => {
+            const next = Object.fromEntries(Object.entries(active)
+                .map(([source, ids]) => [source, ids.filter((id) => present.some((p) => p.id === id))])
+                .filter(([, ids]) => ids.length > 0));
+            return JSON.stringify(active) === JSON.stringify(next) ? active : next;
+        });
+    }, [present]);
+    // Resolve user IDs to present users
+    const activeUsers = useMemo(() => Object.fromEntries(Object.entries(active)
+        .map(([source, ids]) => [
+        source,
+        ids
+            .map((id) => present.find((p) => p.id === id))
+            .filter(Boolean),
+    ])
+        .filter(([, users]) => users.length > 0)), [active, present]);
+    return { activeUsers, onPageActivity };
+};

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

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

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

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

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

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