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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppearanceProvider } from '@recogito/studio-sdk/components';
+import { SupabaseStorageAdapter, } from './SupabaseStorageAdapter';
+/**
+ * SupabaseStorageAdapter that also colours present users by author. Must be
+ * rendered inside an <AuthorColorProvider> (so `useAppearanceProvider` can read
+ * the author colours).
+ */
+export const StorageAdapter = (props) => {
+    const appearanceProvider = useAppearanceProvider();
+    return (_jsx(SupabaseStorageAdapter, { ...props, appearanceProvider: appearanceProvider }));
+};

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

@@ -0,0 +1,23 @@
+import type { PostgrestError } from '@supabase/supabase-js';
+import type { Annotation, AppearanceProvider, PresentUser, User } from '@annotorious/react';
+import type { OffPageActivityEvent } from '@recogito/annotorious-supabase';
+import { DocumentLayer } from '@recogito/studio-sdk';
+export type SupabasePluginProps = {
+    channelId: string;
+    layers: DocumentLayer[];
+    activeLayer: DocumentLayer;
+    privacyMode: boolean;
+    source?: string;
+    appearanceProvider?: AppearanceProvider;
+    onConnected?(user: User): void;
+    onConnectError?(error: string): void;
+    onInitialLoad?(annotations: Annotation[]): void;
+    onInitialLoadError?(error: PostgrestError): void;
+    onIntegrityError?(message: string): void;
+    onOffPageActivity?(event: OffPageActivityEvent): void;
+    onPresence?(users: PresentUser[]): void;
+    onSaveError?(error: PostgrestError): void;
+    onSelectionChange?(user: PresentUser): void;
+};
+export declare const SupabaseStorageAdapter: (props: SupabasePluginProps) => null;
+//# sourceMappingURL=SupabaseStorageAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SupabaseStorageAdapter.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/components/SupabaseStorageAdapter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EACV,UAAU,EAEV,kBAAkB,EAClB,WAAW,EACX,IAAI,EACL,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;IAElB,MAAM,EAAE,aAAa,EAAE,CAAC;IAExB,WAAW,EAAE,aAAa,CAAC;IAE3B,WAAW,EAAE,OAAO,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAExC,WAAW,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAE/B,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErC,aAAa,CAAC,CAAC,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAEhD,kBAAkB,CAAC,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAEjD,gBAAgB,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAEtD,UAAU,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IAExC,WAAW,CAAC,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAE1C,iBAAiB,CAAC,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,mBAAmB,SAyDhE,CAAC"}

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

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+import { useAnnotator } from '@annotorious/react';
+import { SupabasePlugin } from '@recogito/annotorious-supabase';
+import { SUPABASE_KEY, SUPABASE_URL } from '../supabase';
+export const SupabaseStorageAdapter = (props) => {
+    const anno = useAnnotator();
+    const pluginRef = useRef(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useEffect(() => {
+        if (!anno)
+            return;
+        const plugin = SupabasePlugin(anno, {
+            apiKey: SUPABASE_KEY,
+            supabaseUrl: SUPABASE_URL,
+            channel: props.channelId,
+            layerIds: props.layers.map((l) => l.id),
+            defaultLayer: props.activeLayer.id,
+            appearanceProvider: props.appearanceProvider,
+            source: props.source,
+        });
+        plugin.privacyMode = props.privacyMode;
+        plugin
+            .connect()
+            .then((user) => props.onConnected && props.onConnected(user))
+            .catch((error) => {
+            console.error('Connection error', error);
+            props.onConnectError && props.onConnectError(error);
+        });
+        plugin.on('initialLoad', (annotations) => props.onInitialLoad?.(annotations));
+        plugin.on('presence', (users) => props.onPresence?.(users));
+        plugin.on('offPageActivity', (event) => propsRef.current.onOffPageActivity?.(event));
+        plugin.on('selectionChange', (user) => propsRef.current.onSelectionChange?.(user));
+        pluginRef.current = plugin;
+        return () => {
+            plugin.destroy();
+            pluginRef.current = null;
+        };
+    }, [anno, props.channelId, props.layers, props.activeLayer, props.appearanceProvider, props.source]);
+    useEffect(() => {
+        if (pluginRef.current) {
+            pluginRef.current.privacyMode = props.privacyMode;
+        }
+    }, [props.privacyMode]);
+    return null;
+};

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

@@ -0,0 +1,90 @@
+.tabs-root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.tabs-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 3px;
+  border-bottom: 1px solid var(--gray-200);
+  background-color: var(--gray-100);
+  color: var(--gray-500);
+  position: sticky;
+  top: calc(4.25rem + 1px);
+  z-index: 10;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  padding: 4px 8px;
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--gray-600);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+  margin: 0;
+  height: calc(100% - 1px);
+  box-shadow: none;
+  min-width: 0;
+}
+
+.tab-btn svg {
+  font-size: 16px;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.tab-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  /* Buttons inherit the SDK's global line-height: 13.2px, which is shorter than
+     the 14px font — combined with overflow: hidden that clips descenders. */
+  line-height: 1.4;
+}
+
+.tab-btn:hover {
+  color: var(--gray-900);
+}
+
+.tab-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--bright-blue);
+}
+
+.tab-btn[data-state='active'] {
+  color: var(--gray-900);
+  background-color: white;
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.05),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+button.tab-btn[data-state='active']:hover:not(:disabled) {
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.15),
+    0 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.tab-content-wrapper {
+  flex: 1 1 0%;
+  outline: none;
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,6 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const Tabs: (props: TabsPrimitive.TabsProps) => import("react").JSX.Element;
+export declare const TabsList: (props: TabsPrimitive.TabsListProps) => import("react").JSX.Element;
+export declare const TabsTrigger: (props: TabsPrimitive.TabsTriggerProps) => import("react").JSX.Element;
+export declare const TabsContent: (props: TabsPrimitive.TabsContentProps) => import("react").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/pages/_components/shared/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,eAAO,MAAM,IAAI,GAAI,OAAO,aAAa,CAAC,SAAS,gCAKlD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,CAAC,aAAa,gCAK1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,aAAa,CAAC,gBAAgB,gCAKhE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,aAAa,CAAC,gBAAgB,gCAKhE,CAAC"}

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export const Tabs = (props) => (_jsx(TabsPrimitive.Root, { ...props, className: `tabs-root ${props.className || ''}` }));
+export const TabsList = (props) => (_jsx(TabsPrimitive.List, { ...props, className: `tabs-list ${props.className || ''}` }));
+export const TabsTrigger = (props) => (_jsx(TabsPrimitive.Trigger, { ...props, className: `tab-btn ${props.className || ''}` }));
+export const TabsContent = (props) => (_jsx(TabsPrimitive.Content, { ...props, className: `tab-content-wrapper ${props.className || ''}` }));

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+export * from './Accordion';
+export * from './Conversation';
+export * from './Filters';
+export * from './HideAllState';
+export * from './Metadata';
+export * from './StorageAdapter';
+export * from './SupabaseStorageAdapter';
+export * from './Tabs';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,QAAQ,CAAC"}

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

@@ -0,0 +1,8 @@
+export * from './Accordion';
+export * from './Conversation';
+export * from './Filters';
+export * from './HideAllState';
+export * from './Metadata';
+export * from './StorageAdapter';
+export * from './SupabaseStorageAdapter';
+export * from './Tabs';

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

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

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

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

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

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

package/dist/pages/_components/shared/hooks/useDocument.d.ts

@@ -0,0 +1,3 @@
+import type { Document } from '@recogito/studio-sdk';
+export declare const useDocument: (documentId: string) => Document | undefined;
+//# sourceMappingURL=useDocument.d.ts.map

package/dist/pages/_components/shared/hooks/useDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocument.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/hooks/useDocument.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM,yBAe7C,CAAA"}

package/dist/pages/_components/shared/hooks/useDocument.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { sdk } from '../supabase';
+export const useDocument = (documentId) => {
+    const [document, setDocument] = useState();
+    useEffect(() => {
+        sdk.documents.get(documentId).then(({ data, error }) => {
+            if (error)
+                throw error;
+            else
+                setDocument(data);
+        });
+    }, [documentId]);
+    return document;
+};

package/dist/pages/_components/shared/hooks/useDocumentLayers.d.ts

@@ -0,0 +1,6 @@
+import { DocumentLayer } from '@recogito/studio-sdk';
+export declare const useDocumentLayers: (documentId: string, contextId: string) => {
+    layers: DocumentLayer[];
+    activeLayer: DocumentLayer | undefined;
+};
+//# sourceMappingURL=useDocumentLayers.d.ts.map

package/dist/pages/_components/shared/hooks/useDocumentLayers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentLayers.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/hooks/useDocumentLayers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,EAAE,WAAW,MAAM;;;CAmBtE,CAAA"}

package/dist/pages/_components/shared/hooks/useDocumentLayers.js

@@ -0,0 +1,18 @@
+import { useEffect, useMemo, useState } from 'react';
+import { sdk } from '../supabase';
+export const useDocumentLayers = (documentId, contextId) => {
+    const [layers, setLayers] = useState([]);
+    const activeLayer = useMemo(() => {
+        if (layers)
+            return layers.find(l => l.is_active_layer);
+    }, [layers]);
+    useEffect(() => {
+        sdk.layers.getDocumentLayersInContext(documentId, contextId).then(({ data, error }) => {
+            if (error)
+                throw error;
+            else
+                setLayers(data || []);
+        });
+    }, [documentId, contextId]);
+    return { layers, activeLayer };
+};

package/dist/pages/_components/shared/hooks/useLayerPolicies.d.ts

@@ -0,0 +1,3 @@
+import { Policies } from '@recogito/studio-sdk';
+export declare const useLayerPolicies: (layerId?: string) => Policies | undefined;
+//# sourceMappingURL=useLayerPolicies.d.ts.map

package/dist/pages/_components/shared/hooks/useLayerPolicies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayerPolicies.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/hooks/useLayerPolicies.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGhD,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,yBAiBhD,CAAA"}

package/dist/pages/_components/shared/hooks/useLayerPolicies.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { sdk } from '../supabase';
+export const useLayerPolicies = (layerId) => {
+    const [policies, setPolicies] = useState();
+    useEffect(() => {
+        if (!layerId)
+            return;
+        sdk.layers.getLayerPolicies(layerId).then(({ data, error }) => {
+            if (error)
+                throw error;
+            else
+                setPolicies(data);
+        });
+    }, [layerId]);
+    return policies;
+};

package/dist/pages/_components/shared/hooks/useSelectAction.d.ts

@@ -0,0 +1,18 @@
+import { UserSelectAction, type User } from '@annotorious/react';
+import type { Policies } from '@recogito/studio-sdk';
+import type { SupabaseAnnotation } from '@recogito/annotorious-supabase';
+interface SelectActionRules {
+    isLocked: boolean;
+    activeLayerId?: string;
+    policies?: Policies;
+    getUser(): User | undefined;
+}
+/**
+ * Same rules as the Recogito client: annotations are editable (target,
+ * content, delete) for their creator and layer admins, on the active layer,
+ * unless the project is locked. Everyone else can only select them. The
+ * resulting `editable` flag on the selection drives the UI.
+ */
+export declare const useSelectAction: (rules: SelectActionRules) => (annotation: SupabaseAnnotation) => UserSelectAction.EDIT | UserSelectAction.SELECT;
+export {};
+//# sourceMappingURL=useSelectAction.d.ts.map

package/dist/pages/_components/shared/hooks/useSelectAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectAction.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/hooks/useSelectAction.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEzE,UAAU,iBAAiB;IACzB,QAAQ,EAAE,OAAO,CAAC;IAElB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAGpB,OAAO,IAAI,IAAI,GAAG,SAAS,CAAC;CAC7B;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,iBAAiB,kBAIvC,kBAAkB,oDAoBlC,CAAC"}

package/dist/pages/_components/shared/hooks/useSelectAction.js

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { UserSelectAction } from '@annotorious/react';
+/**
+ * Same rules as the Recogito client: annotations are editable (target,
+ * content, delete) for their creator and layer admins, on the active layer,
+ * unless the project is locked. Everyone else can only select them. The
+ * resulting `editable` flag on the selection drives the UI.
+ */
+export const useSelectAction = (rules) => {
+    const { isLocked, activeLayerId, policies, getUser } = rules;
+    return useCallback((annotation) => {
+        if (isLocked)
+            return UserSelectAction.SELECT;
+        // Directly after creation, annotations have no layer_id yet (the
+        // storage plugin adds it later)
+        const isActiveLayer = annotation.layer_id === undefined ||
+            annotation.layer_id === activeLayerId;
+        const canEdit = isActiveLayer &&
+            (annotation.target.creator?.id === getUser()?.id ||
+                Boolean(policies?.get('layers').has('INSERT')));
+        return canEdit ? UserSelectAction.EDIT : UserSelectAction.SELECT;
+    }, 
+    // getUser is expected to be stable (or read from a ref)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isLocked, activeLayerId, policies]);
+};

package/dist/pages/_components/shared/hooks/useStoredFileDocument.d.ts

@@ -0,0 +1,5 @@
+export declare const useStoredFileDocument: (documentId: string) => {
+    document: import("@recogito/studio-sdk").Document | undefined;
+    content: string | undefined;
+};
+//# sourceMappingURL=useStoredFileDocument.d.ts.map

package/dist/pages/_components/shared/hooks/useStoredFileDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStoredFileDocument.d.ts","sourceRoot":"","sources":["../../../../../src/pages/_components/shared/hooks/useStoredFileDocument.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,GAAI,YAAY,MAAM;;;CAuBvD,CAAA"}

package/dist/pages/_components/shared/hooks/useStoredFileDocument.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { useDocument } from './useDocument';
+import { sdk } from '../supabase';
+export const useStoredFileDocument = (documentId) => {
+    const document = useDocument(documentId);
+    const [content, setContent] = useState();
+    useEffect(() => {
+        if (!document)
+            return;
+        sdk.supabase
+            .storage
+            .from(document.bucket_id)
+            .download(document.id)
+            .then(({ data, error }) => {
+            if (error)
+                console.log(error);
+            else
+                return data.text().then(setContent);
+        });
+    }, [document]);
+    return { document, content };
+};

package/dist/pages/_components/shared/i18n.d.ts

@@ -0,0 +1,4 @@
+import { type i18n as I18nInstance } from 'i18next';
+declare const clientI18next: I18nInstance;
+export default clientI18next;
+//# sourceMappingURL=i18n.d.ts.map

package/dist/pages/_components/shared/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/shared/i18n.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,IAAI,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AASpE,QAAA,MAAM,aAAa,EAAE,YAA+B,CAAC;AAyBrD,eAAe,aAAa,CAAC"}

package/dist/pages/_components/shared/i18n.js

@@ -0,0 +1,31 @@
+import { i18n } from 'astro:config/client';
+import { createInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import HttpBackend from 'i18next-http-backend';
+import BrowserLanguageDetector from 'i18next-browser-languagedetector';
+import pluginEn from '../../../../locales/en/annotate-metaphor.json';
+import pluginDe from '../../../../locales/de/annotate-metaphor.json';
+// render-time i18next instance
+const clientI18next = createInstance();
+clientI18next
+    .use(HttpBackend)
+    .use(BrowserLanguageDetector)
+    .use(initReactI18next)
+    .init({
+    fallbackLng: i18n?.defaultLocale || 'en',
+    supportedLngs: i18n?.locales || ['en'],
+    ns: ['common', 'project-assignments', 'annotate-metaphor'],
+    defaultNS: 'annotate-metaphor',
+    backend: {
+        loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+    partialBundledLanguages: true,
+    interpolation: { escapeValue: false },
+    detection: {
+        order: ['path', 'navigator'],
+        lookupFromPathIndex: 0,
+    },
+});
+clientI18next.addResourceBundle('en', 'annotate-metaphor', pluginEn, true, true);
+clientI18next.addResourceBundle('de', 'annotate-metaphor', pluginDe, true, true);
+export default clientI18next;

package/dist/pages/_components/shared/supabase.d.ts

@@ -0,0 +1,7 @@
+import { createBrowserSDK } from '@recogito/studio-sdk';
+import type { SupabaseClient } from '@supabase/supabase-js';
+export declare const SUPABASE_URL: any;
+export declare const SUPABASE_KEY: any;
+export declare const sdk: NonNullable<ReturnType<typeof createBrowserSDK>>;
+export declare const supabase: SupabaseClient<any, "public", "public">;
+//# sourceMappingURL=supabase.d.ts.map

package/dist/pages/_components/shared/supabase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supabase.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/shared/supabase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,YAAY,KAAkC,CAAC;AAC5D,eAAO,MAAM,YAAY,KAA0C,CAAC;AAEpE,eAAO,MAAM,GAAG,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAsC,CAAC;AACxG,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,CAAyB,CAAC"}

package/dist/pages/_components/shared/supabase.js

@@ -0,0 +1,7 @@
+import { createBrowserSDK } from '@recogito/studio-sdk';
+export const SUPABASE_URL = import.meta.env.PUBLIC_SUPABASE;
+export const SUPABASE_KEY = import.meta.env.PUBLIC_SUPABASE_API_KEY;
+export const sdk = createBrowserSDK(import.meta.env);
+export const supabase = sdk?.supabase;
+if (!sdk)
+    throw new Error('Failed to initialize browser SDK');

package/dist/pages/_components/shared/types.d.ts

@@ -0,0 +1,16 @@
+export type AnnotationType = 'metaphor' | 'mrw';
+export interface TableOfContents {
+    root: TableOfContentsNode;
+}
+export interface TableOfContentsNode {
+    label: string;
+    element: Element;
+    childNodes: TableOfContentsNode[];
+}
+export interface Translations {
+    lang: string;
+    t: {
+        [key: string]: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/pages/_components/shared/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/pages/_components/shared/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,KAAK,CAAC;AAEhD,MAAM,WAAW,eAAe;IAE9B,IAAI,EAAE,mBAAmB,CAAC;CAE3B;AAED,MAAM,WAAW,mBAAmB;IAElC,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,EAAE,OAAO,CAAC;IAEjB,UAAU,EAAE,mBAAmB,EAAE,CAAC;CAEnC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IAEb,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CAC9B"}

package/dist/pages/_components/shared/types.js

@@ -0,0 +1 @@
+export {};

package/dist/pages/metaphor-annotation-view.astro

@@ -0,0 +1,122 @@
+---
+import crypto from 'crypto';
+import { TeiMetaphorView } from './_components/TeiMetaphorView';
+import { ImageMetaphorView } from './_components/ImageMetaphorView';
+import { createServerSDK } from '@recogito/studio-sdk';
+
+// Note: it is ESSENTIAL that the component CSS styles are imported here,
+// in the .astro file. DO NOT IMPORT THEM IN THE REACT component! If you
+// do, Astro's build pipeline will get confused and wrongly import the stylesheet
+// into any page that shares dependencies with the plugin. (That generally
+// means any page that imports from the `@recogito/studio-sdk` package!)
+//
+// If you import CSS from here, in the .astro page, however, Astro's build
+// pipeline will work fine.
+import '@recogito/studio-sdk/style.css';
+import '@recogito/react-text-annotator/react-text-annotator.css';
+import '@annotorious/react/annotorious-react.css';
+import '@annotorious/plugin-tools/annotorious-plugin-tools.css';
+import '@annotorious/plugin-magnetic-outline/plugin-magnetic-outline.css';
+import '@annotorious/plugin-arrows-react/annotorious-arrows.css';
+import './_components/TeiMetaphorView/TeiMetaphorView.css';
+import './_components/shared/components/AccountActions/AccountActions.css';
+import './_components/TeiMetaphorView/components/AnnotationPanel/AnnotationPanel.css';
+import './_components/shared/components/EditorToolbar/EditorToolbar.css';
+import './_components/TeiMetaphorView/components/InlineToolbar/InlineToolbar.css';
+import './_components/TeiMetaphorView/components/MetadataPanel/MetadataPanel.css';
+import './_components/TeiMetaphorView/components/AnnotationPanel/AnnotationPanel.css';
+import './_components/TeiMetaphorView/components/AnnotationPanel/SelectedTab/SelectedTab.css';
+import './_components/TeiMetaphorView/components/AnnotationPanel/ListTab/ListTab.css';
+import './_components/TeiMetaphorView/components/AnnotationPanel/SettingsTab/SettingsTab.css';
+import './_components/shared/components/Tabs/Tabs.css';
+import './_components/shared/components/Accordion/Accordion.css';
+import './_components/shared/components/Conversation/Conversation.css';
+import './_components/ImageMetaphorView/ImageMetaphorView.css';
+import './_components/ImageMetaphorView/components/Toolbar/Toolbar.css';
+import './_components/ImageMetaphorView/components/MetadataPanel/MetadataPanel.css';
+import './_components/ImageMetaphorView/components/image-panel.css';
+
+const { contextId, documentId } = Astro.params;
+const lang = Astro.currentLocale || Astro.preferredLocale || "en";
+
+//  Check if this user is actually logged in (via SDK), redirect if not
+const sdk = await createServerSDK(
+  Astro.request,
+  Astro.cookies,
+  import.meta.env
+);
+const { error: profileError, data: profile } = await sdk.profile.getMyProfile();
+if (profileError || !profile) {
+  return Astro.redirect(`/${lang}/sign-in?redirect-to=${Astro.url.pathname}`);
+}
+
+// Ensure context and document IDs are provided
+if (!contextId || !documentId) {
+  const error = await fetch(`${Astro.url}/404`);
+  return new Response(error.body, { headers: error.headers, status: 404 });
+}
+
+// Check if this user has access to the document/context
+const document = await sdk.documents.get(documentId);
+const context = await sdk.contexts.get(contextId);
+if (document.error || !document.data || context.error || !context.data) {
+  // If not: is this an open join project? If so, redirect
+  const projectId = await sdk.contexts.isOpenJoinEdit(contextId);
+  if (projectId) {
+    return Astro.redirect(
+      `/${lang}/projects/${projectId}/join?redirect-to=${Astro.url.pathname}`
+    );
+  } else {
+    return Astro.redirect(`/${lang}/projects`);
+  }
+}
+const project = await sdk.project.get(context.data.project_id);
+if (!project.data || project.error) {
+  return Astro.redirect(`/${lang}/projects`);
+}
+
+
+// Room secret is only available on the server!
+const secret = import.meta.env.ROOM_SECRET || '';
+const hash = crypto.createHash('sha256');
+const data = hash.update(`${secret}.${contextId}.${documentId}`);
+
+const channelId = data.digest('hex');
+
+// Identify the document type on the server and render a dedicated SPA:
+// TEI XML documents get the TeiMetaphorView, IIIF images (identified by
+// their meta_data protocol) get the ImageMetaphorView. Any other content
+// type is unsupported in this view.
+const isTei = document.data.content_type === 'text/xml';
+const isIIIF = document.data.meta_data?.protocol?.startsWith('IIIF');
+
+if (!isTei && !isIIIF) {
+  return new Response('Unsupported Media Type', { status: 415 });
+}
+---
+
+<!doctype html>
+<html>
+  <head>
+    <title>Metaphor Annotation View</title>
+  </head>
+  <body>
+    {isTei ? (
+      <TeiMetaphorView
+        client:only='react'
+        channelId={channelId}
+        context={context.data}
+        document={document.data}
+        project={project.data}
+      />
+    ) : (
+      <ImageMetaphorView
+        client:only='react'
+        channelId={channelId}
+        context={context.data}
+        document={document.data}
+        project={project.data}
+      />
+    )}
+  </body>
+</html>