@semiont/react-ui 0.2.45 → 0.2.46

package/dist/index.mjs

@@ -563,7 +563,7 @@ var QUERY_KEYS = {
   annotations: {
     detail: (aUri) => ["annotations", aUri],
     history: (aUri) => ["annotations", aUri, "history"],
-    llmContext: (resourceUri2, annotationId) => ["annotations", "llm-context", resourceUri2, annotationId]
+    llmContext: (resourceUri2, annotationId2) => ["annotations", "llm-context", resourceUri2, annotationId2]
   },
   entityTypes: {
     all: () => ["entity-types"]
@@ -767,17 +767,8 @@ function useAnnotations() {
             if (!client) throw new Error("Not authenticated");
             return client.createAnnotation(rUri, data2, { auth: toAccessToken(token2) });
           },
-          onSuccess: (response, variables) => {
-            const queryKey = QUERY_KEYS.resources.annotations(variables.rUri);
-            const currentData = queryClient.getQueryData(queryKey);
-            if (currentData && response.annotation) {
-              queryClient.setQueryData(queryKey, {
-                ...currentData,
-                annotations: [...currentData.annotations, response.annotation]
-              });
-            } else {
-              queryClient.invalidateQueries({ queryKey });
-            }
+          onSuccess: (_4, variables) => {
+            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(variables.rUri) });
             queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(variables.rUri) });
           }
         });
@@ -795,10 +786,10 @@ function useAnnotations() {
             const queryKey = QUERY_KEYS.resources.annotations(variables.resourceUri);
             const currentData = queryClient.getQueryData(queryKey);
             if (currentData) {
-              const annotationId = uriToAnnotationId(variables.annotationUri);
+              const annotationId2 = uriToAnnotationId(variables.annotationUri);
               queryClient.setQueryData(queryKey, {
                 ...currentData,
-                annotations: currentData.annotations.filter((ann) => ann.id !== annotationId)
+                annotations: currentData.annotations.filter((ann) => ann.id !== annotationId2)
               });
             } else {
               queryClient.invalidateQueries({ queryKey });
@@ -820,26 +811,10 @@ function useAnnotations() {
             if (!client) throw new Error("Not authenticated");
             return client.updateAnnotationBody(annotationUri2, data2, { auth: toAccessToken(token2) });
           },
-          onSuccess: (response, variables) => {
-            const singleQueryKey = ["annotations", variables.annotationUri];
-            if (response.annotation) {
-              queryClient.setQueryData(singleQueryKey, response.annotation);
-            } else {
-              queryClient.invalidateQueries({ queryKey: singleQueryKey });
-            }
+          onSuccess: (_4, variables) => {
+            queryClient.invalidateQueries({ queryKey: ["annotations", variables.annotationUri] });
             const resourceUri2 = extractResourceUriFromAnnotationUri(variables.annotationUri);
-            const listQueryKey = QUERY_KEYS.resources.annotations(resourceUri2);
-            const currentList = queryClient.getQueryData(listQueryKey);
-            if (currentList && response.annotation) {
-              queryClient.setQueryData(listQueryKey, {
-                ...currentList,
-                annotations: currentList.annotations.map(
-                  (ann) => ann.id === response.annotation.id ? response.annotation : ann
-                )
-              });
-            } else {
-              queryClient.invalidateQueries({ queryKey: listQueryKey });
-            }
+            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(resourceUri2) });
             if (variables.data.operations) {
               for (const op of variables.data.operations) {
                 if (op.op === "add" && op.item && typeof op.item === "object") {
@@ -858,10 +833,10 @@ function useAnnotations() {
       }
     },
     llmContext: {
-      useQuery: (resourceUri2, annotationId, options) => useQuery({
-        queryKey: QUERY_KEYS.annotations.llmContext(resourceUri2, annotationId),
-        queryFn: () => client.getAnnotationLLMContext(resourceUri2, annotationId, { ...options, auth: toAccessToken(token) }),
-        enabled: !!client && !!resourceUri2 && !!annotationId,
+      useQuery: (resourceUri2, annotationId2, options) => useQuery({
+        queryKey: QUERY_KEYS.annotations.llmContext(resourceUri2, annotationId2),
+        queryFn: () => client.getAnnotationLLMContext(resourceUri2, annotationId2, { ...options, auth: toAccessToken(token) }),
+        enabled: !!client && !!resourceUri2 && !!annotationId2,
         staleTime: 5 * 60 * 1e3
         // 5 minutes - context doesn't change often
       })
@@ -18219,13 +18194,83 @@ function useResourceEvents({
   };
 }
 
+// src/hooks/useGlobalEvents.ts
+import { useEffect as useEffect5, useState as useState6, useRef as useRef5, useCallback as useCallback7 } from "react";
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { accessToken as accessToken3 } from "@semiont/core";
+function useGlobalEvents({ autoConnect = true } = {}) {
+  const client = useApiClient();
+  const token = useAuthToken();
+  const eventBus = useEventBus();
+  const queryClient = useQueryClient2();
+  const [status, setStatus] = useState6("disconnected");
+  const streamRef = useRef5(null);
+  const connectingRef = useRef5(false);
+  const handleEvent = useCallback7((event) => {
+    switch (event.type) {
+      case "entitytype.added":
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.entityTypes.all() });
+        break;
+    }
+  }, [queryClient]);
+  useEffect5(() => {
+    const subscription = eventBus.get("make-meaning:event").subscribe((event) => {
+      handleEvent(event);
+    });
+    return () => subscription.unsubscribe();
+  }, [eventBus, handleEvent]);
+  const connect = useCallback7(async () => {
+    if (connectingRef.current || streamRef.current) return;
+    connectingRef.current = true;
+    if (!client) {
+      setStatus("error");
+      connectingRef.current = false;
+      return;
+    }
+    setStatus("connecting");
+    try {
+      const stream = client.sse.globalEvents({
+        ...token ? { auth: accessToken3(token) } : {},
+        eventBus
+      });
+      streamRef.current = stream;
+      setStatus("connected");
+      connectingRef.current = false;
+    } catch (error) {
+      console.error("[GlobalEvents] Failed to connect:", error);
+      setStatus("error");
+      connectingRef.current = false;
+    }
+  }, [client, token, eventBus]);
+  const disconnect = useCallback7(() => {
+    if (streamRef.current) {
+      streamRef.current.close();
+      streamRef.current = null;
+    }
+    setStatus("disconnected");
+    connectingRef.current = false;
+  }, []);
+  useEffect5(() => {
+    if (autoConnect && client) {
+      connect();
+    }
+    return () => disconnect();
+  }, [autoConnect, client]);
+  return {
+    status,
+    connect,
+    disconnect,
+    isConnected: status === "connected"
+  };
+}
+
 // src/hooks/useRovingTabIndex.ts
-import { useRef as useRef5, useEffect as useEffect5, useCallback as useCallback7 } from "react";
+import { useRef as useRef6, useEffect as useEffect6, useCallback as useCallback8 } from "react";
 function useRovingTabIndex(itemCount, options = {}) {
   const { orientation = "horizontal", loop = true, cols = 1 } = options;
-  const containerRef = useRef5(null);
-  const currentIndexRef = useRef5(0);
-  const getFocusableItems = useCallback7(() => {
+  const containerRef = useRef6(null);
+  const currentIndexRef = useRef6(0);
+  const getFocusableItems = useCallback8(() => {
     if (!containerRef.current) return [];
     return Array.from(
       containerRef.current.querySelectorAll(
@@ -18233,7 +18278,7 @@ function useRovingTabIndex(itemCount, options = {}) {
       )
     );
   }, []);
-  const focusItem = useCallback7((index2) => {
+  const focusItem = useCallback8((index2) => {
     const items = getFocusableItems();
     if (items.length === 0) return;
     let targetIndex = index2;
@@ -18248,7 +18293,7 @@ function useRovingTabIndex(itemCount, options = {}) {
     items[targetIndex]?.focus();
     currentIndexRef.current = targetIndex;
   }, [getFocusableItems, loop]);
-  const handleKeyDown = useCallback7(
+  const handleKeyDown = useCallback8(
     (event) => {
       const items = getFocusableItems();
       if (items.length === 0) return;
@@ -18300,7 +18345,7 @@ function useRovingTabIndex(itemCount, options = {}) {
     },
     [orientation, cols, getFocusableItems, focusItem]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const items = getFocusableItems();
     if (items.length === 0) return;
     items.forEach((item, i12) => {
@@ -18335,12 +18380,12 @@ function useRovingTabIndex(itemCount, options = {}) {
 }
 
 // src/hooks/useSessionExpiry.ts
-import { useState as useState6, useEffect as useEffect6 } from "react";
+import { useState as useState7, useEffect as useEffect7 } from "react";
 function useSessionExpiry() {
   const { expiresAt } = useSessionContext();
-  const [timeRemaining, setTimeRemaining] = useState6(null);
-  const [isExpiringSoon, setIsExpiringSoon] = useState6(false);
-  useEffect6(() => {
+  const [timeRemaining, setTimeRemaining] = useState7(null);
+  const [isExpiringSoon, setIsExpiringSoon] = useState7(false);
+  useEffect7(() => {
     if (!expiresAt) {
       setTimeRemaining(null);
       setIsExpiringSoon(false);
@@ -18359,28 +18404,28 @@ function useSessionExpiry() {
 }
 
 // src/contexts/ThemeContext.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect7, useState as useState7 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect8, useState as useState8 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ThemeContext = createContext2(null);
 function ThemeProvider({ children }) {
-  const [theme2, setThemeState] = useState7(() => {
+  const [theme2, setThemeState] = useState8(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("theme") || "system";
     }
     return "system";
   });
-  const [systemTheme, setSystemTheme] = useState7(() => {
+  const [systemTheme, setSystemTheme] = useState8(() => {
     if (typeof window !== "undefined") {
       return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     return "light";
   });
   const resolvedTheme = theme2 === "system" ? systemTheme : theme2;
-  useEffect7(() => {
+  useEffect8(() => {
     const root4 = window.document.documentElement;
     root4.setAttribute("data-theme", resolvedTheme);
   }, [resolvedTheme]);
-  useEffect7(() => {
+  useEffect8(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = (e6) => {
       setSystemTheme(e6.matches ? "dark" : "light");
@@ -18405,20 +18450,20 @@ function useTheme() {
 }
 
 // src/hooks/useUI.ts
-import { useState as useState8, useEffect as useEffect8, useCallback as useCallback8, useRef as useRef6 } from "react";
+import { useState as useState9, useEffect as useEffect9, useCallback as useCallback9, useRef as useRef7 } from "react";
 function useDropdown() {
-  const [isOpen, setIsOpen] = useState8(false);
-  const dropdownRef = useRef6(null);
-  const toggle = useCallback8(() => {
+  const [isOpen, setIsOpen] = useState9(false);
+  const dropdownRef = useRef7(null);
+  const toggle = useCallback9(() => {
     setIsOpen((prev) => !prev);
   }, []);
-  const open = useCallback8(() => {
+  const open = useCallback9(() => {
     setIsOpen(true);
   }, []);
-  const close = useCallback8(() => {
+  const close = useCallback9(() => {
     setIsOpen(false);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         close();
@@ -18430,7 +18475,7 @@ function useDropdown() {
     }
     return void 0;
   }, [isOpen, close]);
-  useEffect8(() => {
+  useEffect9(() => {
     function handleEscape(event) {
       if (event.key === "Escape") {
         close();
@@ -18451,20 +18496,20 @@ function useDropdown() {
   };
 }
 function useLoadingState(minLoadingTime = 500) {
-  const [isLoading, setIsLoading] = useState8(false);
-  const [showLoading, setShowLoading] = useState8(false);
-  const timeoutRef = useRef6(null);
-  const startLoading = useCallback8(() => {
+  const [isLoading, setIsLoading] = useState9(false);
+  const [showLoading, setShowLoading] = useState9(false);
+  const timeoutRef = useRef7(null);
+  const startLoading = useCallback9(() => {
     setIsLoading(true);
     setShowLoading(true);
   }, []);
-  const stopLoading = useCallback8(() => {
+  const stopLoading = useCallback9(() => {
     setIsLoading(false);
     timeoutRef.current = setTimeout(() => {
       setShowLoading(false);
     }, minLoadingTime);
   }, [minLoadingTime]);
-  useEffect8(() => {
+  useEffect9(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -18479,7 +18524,7 @@ function useLoadingState(minLoadingTime = 500) {
   };
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = useState8(() => {
+  const [storedValue, setStoredValue] = useState9(() => {
     if (typeof window === "undefined") {
       return initialValue;
     }
@@ -18491,7 +18536,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = useCallback8((value) => {
+  const setValue = useCallback9((value) => {
     try {
       const valueToStore = value instanceof Function ? value(storedValue) : value;
       setStoredValue(valueToStore);
@@ -18506,14 +18551,14 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/useResourceContent.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { getPrimaryMediaType } from "@semiont/api-client";
 function useResourceContent(rUri, resource) {
   const { showError } = useToast();
   const resources = useResources();
   const mediaType = getPrimaryMediaType(resource) || "text/plain";
   const { data: data2, isLoading, error } = resources.representation.useQuery(rUri, mediaType);
-  useEffect9(() => {
+  useEffect10(() => {
     if (error) {
       console.error("Failed to fetch representation:", error);
       showError("Failed to load resource representation");
@@ -18556,10 +18601,10 @@ function useCacheManager() {
 }
 
 // src/contexts/ResourceAnnotationsContext.tsx
-import { createContext as createContext6, useContext as useContext6, useState as useState10, useCallback as useCallback10, useMemo } from "react";
+import { createContext as createContext6, useContext as useContext6, useState as useState11, useCallback as useCallback11, useMemo } from "react";
 
 // src/components/LiveRegion.tsx
-import { useState as useState9, createContext as createContext5, useContext as useContext5, useCallback as useCallback9 } from "react";
+import { useState as useState10, createContext as createContext5, useContext as useContext5, useCallback as useCallback10 } from "react";
 import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 var LiveRegionContext = createContext5(null);
 function useLiveRegion() {
@@ -18571,9 +18616,9 @@ function useLiveRegion() {
   return context;
 }
 function LiveRegionProvider({ children }) {
-  const [politeMessage, setPoliteMessage] = useState9("");
-  const [assertiveMessage, setAssertiveMessage] = useState9("");
-  const announce = useCallback9((message, priority = "polite") => {
+  const [politeMessage, setPoliteMessage] = useState10("");
+  const [assertiveMessage, setAssertiveMessage] = useState10("");
+  const announce = useCallback10((message, priority = "polite") => {
     if (priority === "assertive") {
       setAssertiveMessage(message);
       setTimeout(() => setAssertiveMessage(""), 1e3);
@@ -18608,14 +18653,14 @@ function LiveRegionProvider({ children }) {
 }
 function useSearchAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceSearchResults = useCallback9((count2, query) => {
+  const announceSearchResults = useCallback10((count2, query) => {
     if (count2 === 0) {
       announce(`No results found for ${query}`, "polite");
     } else {
       announce(`${count2} result${count2 === 1 ? "" : "s"} found for ${query}`, "polite");
     }
   }, [announce]);
-  const announceSearching = useCallback9(() => {
+  const announceSearching = useCallback10(() => {
     announce("Searching...", "polite");
   }, [announce]);
   return {
@@ -18625,26 +18670,26 @@ function useSearchAnnouncements() {
 }
 function useDocumentAnnouncements(annotators) {
   const { announce } = useLiveRegion();
-  const announceDocumentSaved = useCallback9(() => {
+  const announceDocumentSaved = useCallback10(() => {
     announce("Document saved successfully", "polite");
   }, [announce]);
-  const announceDocumentDeleted = useCallback9(() => {
+  const announceDocumentDeleted = useCallback10(() => {
     announce("Document deleted", "polite");
   }, [announce]);
-  const announceAnnotationCreated = useCallback9((annotation) => {
+  const announceAnnotationCreated = useCallback10((annotation) => {
     const metadata = annotators ? Object.values(annotators).find((a15) => a15.matchesAnnotation(annotation)) : null;
     const message = metadata?.announceOnCreate ?? "Annotation created";
     announce(message, "polite");
   }, [announce, annotators]);
-  const announceAnnotationDeleted = useCallback9(() => {
+  const announceAnnotationDeleted = useCallback10(() => {
     announce("Annotation deleted", "polite");
   }, [announce]);
-  const announceAnnotationUpdated = useCallback9((annotation) => {
+  const announceAnnotationUpdated = useCallback10((annotation) => {
     const metadata = annotators ? Object.values(annotators).find((a15) => a15.matchesAnnotation(annotation)) : null;
     const message = `${metadata?.displayName ?? "Annotation"} updated`;
     announce(message, "polite");
   }, [announce, annotators]);
-  const announceError = useCallback9((message) => {
+  const announceError = useCallback10((message) => {
     announce(`Error: ${message}`, "assertive");
   }, [announce]);
   return {
@@ -18658,18 +18703,18 @@ function useDocumentAnnouncements(annotators) {
 }
 function useResourceLoadingAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceResourceLoading = useCallback9((resourceName) => {
+  const announceResourceLoading = useCallback10((resourceName) => {
     const message = resourceName ? `Loading ${resourceName}...` : "Loading resource...";
     announce(message, "polite");
   }, [announce]);
-  const announceResourceLoaded = useCallback9((resourceName) => {
+  const announceResourceLoaded = useCallback10((resourceName) => {
     announce(`${resourceName} loaded successfully`, "polite");
   }, [announce]);
-  const announceResourceLoadError = useCallback9((resourceName) => {
+  const announceResourceLoadError = useCallback10((resourceName) => {
     const message = resourceName ? `Failed to load ${resourceName}` : "Failed to load resource";
     announce(message, "assertive");
   }, [announce]);
-  const announceResourceUpdating = useCallback9((resourceName) => {
+  const announceResourceUpdating = useCallback10((resourceName) => {
     announce(`Updating ${resourceName}...`, "polite");
   }, [announce]);
   return {
@@ -18681,16 +18726,16 @@ function useResourceLoadingAnnouncements() {
 }
 function useFormAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceFormSubmitting = useCallback9(() => {
+  const announceFormSubmitting = useCallback10(() => {
     announce("Submitting form...", "polite");
   }, [announce]);
-  const announceFormSuccess = useCallback9((message) => {
+  const announceFormSuccess = useCallback10((message) => {
     announce(message || "Form submitted successfully", "polite");
   }, [announce]);
-  const announceFormError = useCallback9((message) => {
+  const announceFormError = useCallback10((message) => {
     announce(message || "Form submission failed. Please check your entries and try again.", "assertive");
   }, [announce]);
-  const announceFormValidationError = useCallback9((fieldCount) => {
+  const announceFormValidationError = useCallback10((fieldCount) => {
     const message = fieldCount === 1 ? "There is 1 field with an error" : `There are ${fieldCount} fields with errors`;
     announce(message, "assertive");
   }, [announce]);
@@ -18703,10 +18748,10 @@ function useFormAnnouncements() {
 }
 function useLanguageChangeAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceLanguageChanging = useCallback9((newLanguage) => {
+  const announceLanguageChanging = useCallback10((newLanguage) => {
     announce(`Changing language to ${newLanguage}...`, "polite");
   }, [announce]);
-  const announceLanguageChanged = useCallback9((newLanguage) => {
+  const announceLanguageChanged = useCallback10((newLanguage) => {
     announce(`Language changed to ${newLanguage}`, "polite");
   }, [announce]);
   return {
@@ -18719,11 +18764,11 @@ function useLanguageChangeAnnouncements() {
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ResourceAnnotationsContext = createContext6(void 0);
 function ResourceAnnotationsProvider({ children }) {
-  const [newAnnotationIds, setNewAnnotationIds] = useState10(/* @__PURE__ */ new Set());
-  const { announceAnnotationCreated, announceError } = useDocumentAnnouncements();
+  const [newAnnotationIds, setNewAnnotationIds] = useState11(/* @__PURE__ */ new Set());
+  const { announce } = useLiveRegion();
   const annotations = useAnnotations();
   const createAnnotationMutation = annotations.create.useMutation();
-  const createAnnotation = useCallback10(async (rUri, motivation, selector, body = []) => {
+  const createAnnotation = useCallback11(async (rUri, motivation, selector, body = []) => {
     try {
       const createData = {
         motivation,
@@ -18737,37 +18782,37 @@ function ResourceAnnotationsProvider({ children }) {
         rUri,
         data: createData
       });
-      if (result.annotation?.id) {
-        setNewAnnotationIds((prev) => new Set(prev).add(result.annotation.id));
+      if (result.annotationId) {
+        setNewAnnotationIds((prev) => new Set(prev).add(result.annotationId));
         setTimeout(() => {
           setNewAnnotationIds((prev) => {
             const next = new Set(prev);
-            next.delete(result.annotation.id);
+            next.delete(result.annotationId);
             return next;
           });
         }, 6e3);
-        announceAnnotationCreated(result.annotation);
+        announce("Annotation created", "polite");
       }
-      return result.annotation;
+      return result.annotationId;
     } catch (err) {
       console.error("Failed to create annotation:", err);
-      announceError("Failed to create annotation");
+      announce("Failed to create annotation", "assertive");
       throw err;
     }
-  }, [createAnnotationMutation, announceAnnotationCreated, announceError]);
-  const clearNewAnnotationId = useCallback10((id2) => {
+  }, [createAnnotationMutation, announce]);
+  const clearNewAnnotationId = useCallback11((id2) => {
     setNewAnnotationIds((prev) => {
       const next = new Set(prev);
       next.delete(id2);
       return next;
     });
   }, []);
-  const triggerSparkleAnimation = useCallback10((annotationId) => {
-    setNewAnnotationIds((prev) => new Set(prev).add(annotationId));
+  const triggerSparkleAnimation = useCallback11((annotationId2) => {
+    setNewAnnotationIds((prev) => new Set(prev).add(annotationId2));
     setTimeout(() => {
       setNewAnnotationIds((prev) => {
         const next = new Set(prev);
-        next.delete(annotationId);
+        next.delete(annotationId2);
         return next;
       });
     }, 6e3);
@@ -18792,7 +18837,7 @@ function useResourceAnnotations() {
 }
 
 // src/components/CodeMirrorRenderer.tsx
-import { useEffect as useEffect10, useRef as useRef7 } from "react";
+import { useEffect as useEffect11, useRef as useRef8 } from "react";
 
 // ../../node_modules/@codemirror/autocomplete/dist/index.js
 var CompletionContext = class {
@@ -26111,11 +26156,11 @@ var pasteURLAsLink = /* @__PURE__ */ EditorView.domEventHandlers({
 });
 
 // src/lib/scroll-utils.ts
-function scrollAnnotationIntoView(annotationId, rootElement, options = {}) {
-  if (!annotationId) return false;
+function scrollAnnotationIntoView(annotationId2, rootElement, options = {}) {
+  if (!annotationId2) return false;
   const { pulse = false, behavior = "smooth" } = options;
   const element2 = rootElement.querySelector(
-    `[data-annotation-id="${CSS.escape(annotationId)}"]`
+    `[data-annotation-id="${CSS.escape(annotationId2)}"]`
   );
   if (!element2) return false;
   const scrollContainer = element2.closest(".semiont-browse-view__content") || element2.closest(".semiont-annotate-view__content") || element2.closest(".semiont-document-viewer__scrollable-body");
@@ -26244,12 +26289,12 @@ function computeWidgetDecorations(segments, generatingReferenceId, getTargetDocu
 // src/lib/codemirror-handlers.ts
 function handleAnnotationClick(target, segmentsById, eventBus) {
   const annotationElement = target.closest("[data-annotation-id]");
-  const annotationId = annotationElement?.getAttribute("data-annotation-id");
-  if (!annotationId) return false;
-  const segment = segmentsById.get(annotationId);
+  const annotationId2 = annotationElement?.getAttribute("data-annotation-id");
+  if (!annotationId2) return false;
+  const segment = segmentsById.get(annotationId2);
   if (!segment?.annotation) return false;
   eventBus.get("browse:click").next({
-    annotationId,
+    annotationId: annotationId2,
     motivation: segment.annotation.motivation
   });
   return true;
@@ -26259,22 +26304,22 @@ function handleWidgetClick(target) {
   if (!widget || widget.dataset.widgetGenerating === "true") {
     return { handled: false };
   }
-  const annotationId = widget.dataset.widgetAnnotationId;
+  const annotationId2 = widget.dataset.widgetAnnotationId;
   const bodySource = widget.dataset.widgetBodySource;
   const isResolved = widget.dataset.widgetResolved === "true";
-  if (!annotationId) return { handled: false };
+  if (!annotationId2) return { handled: false };
   if (isResolved && bodySource) {
     return {
       handled: true,
       action: "navigate",
       documentId: bodySource,
-      annotationId
+      annotationId: annotationId2
     };
   }
   return {
     handled: true,
     action: "browse-click",
-    annotationId,
+    annotationId: annotationId2,
     motivation: widget.dataset.widgetMotivation || "linking"
   };
 }
@@ -26412,15 +26457,15 @@ function CodeMirrorRenderer({
   generatingReferenceId,
   hoverDelayMs
 }) {
-  const containerRef = useRef7(null);
-  const viewRef = useRef7(null);
-  const contentRef = useRef7(content4);
+  const containerRef = useRef8(null);
+  const viewRef = useRef8(null);
+  const contentRef = useRef8(content4);
   const convertedSegments = convertSegmentPositions(segments, content4);
-  const segmentsRef = useRef7(convertedSegments);
-  const segmentsByIdRef = useRef7(/* @__PURE__ */ new Map());
-  const lineNumbersCompartment = useRef7(new Compartment());
-  const eventBusRef = useRef7(eventBus);
-  const getTargetDocumentNameRef = useRef7(getTargetDocumentName);
+  const segmentsRef = useRef8(convertedSegments);
+  const segmentsByIdRef = useRef8(/* @__PURE__ */ new Map());
+  const lineNumbersCompartment = useRef8(new Compartment());
+  const eventBusRef = useRef8(eventBus);
+  const getTargetDocumentNameRef = useRef8(getTargetDocumentName);
   segmentsRef.current = segments;
   const segmentsById = /* @__PURE__ */ new Map();
   for (const s11 of segments) {
@@ -26429,7 +26474,7 @@ function CodeMirrorRenderer({
   segmentsByIdRef.current = segmentsById;
   eventBusRef.current = eventBus;
   getTargetDocumentNameRef.current = getTargetDocumentName;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!containerRef.current || viewRef.current) return;
     const annotationDecorationsField = createAnnotationDecorationsField();
     const state = EditorState.create({
@@ -26510,14 +26555,14 @@ function CodeMirrorRenderer({
     containerRef.current.__cmView = view;
     const container = view.dom;
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBusRef.current?.get("beckon:hover").next({ annotationId }),
+      (annotationId2) => eventBusRef.current?.get("beckon:hover").next({ annotationId: annotationId2 }),
       hoverDelayMs
     );
     const handleMouseOver = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
-      const annotationId = annotationElement?.getAttribute("data-annotation-id");
-      if (annotationId) handleMouseEnter(annotationId);
+      const annotationId2 = annotationElement?.getAttribute("data-annotation-id");
+      if (annotationId2) handleMouseEnter(annotationId2);
     };
     const handleMouseOut = (e6) => {
       const target = e6.target;
@@ -26564,7 +26609,7 @@ function CodeMirrorRenderer({
       viewRef.current = null;
     };
   }, [hoverDelayMs]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!viewRef.current) return;
     const currentContent = viewRef.current.state.doc.toString();
     if (content4 === currentContent) return;
@@ -26580,19 +26625,19 @@ function CodeMirrorRenderer({
     });
     contentRef.current = content4;
   }, [content4]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!viewRef.current) return;
     viewRef.current.dispatch({
       effects: lineNumbersCompartment.current.reconfigure(showLineNumbers ? lineNumbers() : [])
     });
   }, [showLineNumbers]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!viewRef.current) return;
     viewRef.current.dispatch({
       effects: updateAnnotationsEffect.of({ segments: convertedSegments, ...newAnnotationIds && { newAnnotationIds } })
     });
   }, [convertedSegments, newAnnotationIds]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!viewRef.current || !enableWidgets) return;
     viewRef.current.dispatch({
       effects: updateWidgetsEffect.of({
@@ -26603,7 +26648,7 @@ function CodeMirrorRenderer({
       })
     });
   }, [content4, convertedSegments, enableWidgets, generatingReferenceId]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!viewRef.current || !hoveredAnnotationId) return void 0;
     const view = viewRef.current;
     const element2 = view.contentDOM.querySelector(
@@ -26631,7 +26676,7 @@ function CodeMirrorRenderer({
       element2.classList.remove("annotation-pulse");
     };
   }, [hoveredAnnotationId]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!viewRef.current || !scrollToAnnotationId) return;
     scrollAnnotationIntoView(scrollToAnnotationId, viewRef.current.contentDOM);
   }, [scrollToAnnotationId]);
@@ -26818,7 +26863,7 @@ function AsyncErrorBoundary({ children }) {
 }
 
 // src/components/ResizeHandle.tsx
-import { useRef as useRef8, useCallback as useCallback11, useEffect as useEffect11, useState as useState11 } from "react";
+import { useRef as useRef9, useCallback as useCallback12, useEffect as useEffect12, useState as useState12 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function ResizeHandle({
   onResize,
@@ -26827,14 +26872,14 @@ function ResizeHandle({
   position: position3 = "left",
   ariaLabel = "Resize panel"
 }) {
-  const [isDragging, setIsDragging] = useState11(false);
-  const startXRef = useRef8(0);
-  const startWidthRef = useRef8(0);
-  const onResizeRef = useRef8(onResize);
-  useEffect11(() => {
+  const [isDragging, setIsDragging] = useState12(false);
+  const startXRef = useRef9(0);
+  const startWidthRef = useRef9(0);
+  const onResizeRef = useRef9(onResize);
+  useEffect12(() => {
     onResizeRef.current = onResize;
   });
-  const handleMouseDown = useCallback11((e6) => {
+  const handleMouseDown = useCallback12((e6) => {
     e6.preventDefault();
     setIsDragging(true);
     startXRef.current = e6.clientX;
@@ -26843,7 +26888,7 @@ function ResizeHandle({
       startWidthRef.current = parent.offsetWidth;
     }
   }, []);
-  const handleMouseMove = useCallback11((e6) => {
+  const handleMouseMove = useCallback12((e6) => {
     if (!isDragging) return;
     const deltaX = e6.clientX - startXRef.current;
     const widthDelta = position3 === "left" ? -deltaX : deltaX;
@@ -26851,10 +26896,10 @@ function ResizeHandle({
     const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
     onResizeRef.current(constrainedWidth);
   }, [isDragging, minWidth, maxWidth, position3]);
-  const handleMouseUp = useCallback11(() => {
+  const handleMouseUp = useCallback12(() => {
     setIsDragging(false);
   }, []);
-  const handleKeyDown = useCallback11((e6) => {
+  const handleKeyDown = useCallback12((e6) => {
     const parent = e6.target.parentElement;
     if (!parent) return;
     const currentWidth = parent.offsetWidth;
@@ -26882,7 +26927,7 @@ function ResizeHandle({
       onResizeRef.current(constrainedWidth);
     }
   }, [minWidth, maxWidth, position3]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -27040,7 +27085,7 @@ function Toolbar({
 }
 
 // src/components/settings/SettingsPanel.tsx
-import React6, { useEffect as useEffect12 } from "react";
+import React6, { useEffect as useEffect13 } from "react";
 import { LOCALES } from "@semiont/api-client";
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function SettingsPanel({
@@ -27059,7 +27104,7 @@ function SettingsPanel({
     announceLanguageChanging(localeName);
     eventBus.get("settings:locale-changed").next({ locale: newLocale });
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (locale !== previousLocale && !isPendingLocaleChange) {
       const localeName = LOCALES.find((l10) => l10.code === locale)?.nativeName || locale;
       announceLanguageChanged(localeName);
@@ -27178,7 +27223,7 @@ function SettingsPanel({
 }
 
 // src/components/annotation/AnnotateToolbar.tsx
-import React7, { useState as useState12, useRef as useRef9, useEffect as useEffect13 } from "react";
+import React7, { useState as useState13, useRef as useRef10, useEffect as useEffect14 } from "react";
 import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function DropdownGroup({
   label,
@@ -27189,7 +27234,7 @@ function DropdownGroup({
   onPin,
   containerRef
 }) {
-  const dropdownRef = useRef9(null);
+  const dropdownRef = useRef10(null);
   const handleKeyDown = (event) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -27252,23 +27297,23 @@ function AnnotateToolbar({
     const annotator = Object.values(annotators).find((a15) => a15.motivation === motivation);
     return annotator?.iconEmoji || "\u2753";
   };
-  const [modeHovered, setModeHovered] = useState12(false);
-  const [modePinned, setModePinned] = useState12(false);
-  const [clickHovered, setClickHovered] = useState12(false);
-  const [clickPinned, setClickPinned] = useState12(false);
-  const [selectionHovered, setSelectionHovered] = useState12(false);
-  const [selectionPinned, setSelectionPinned] = useState12(false);
-  const [shapeHovered, setShapeHovered] = useState12(false);
-  const [shapePinned, setShapePinned] = useState12(false);
-  const modeRef = useRef9(null);
-  const clickRef = useRef9(null);
-  const selectionRef = useRef9(null);
-  const shapeRef = useRef9(null);
+  const [modeHovered, setModeHovered] = useState13(false);
+  const [modePinned, setModePinned] = useState13(false);
+  const [clickHovered, setClickHovered] = useState13(false);
+  const [clickPinned, setClickPinned] = useState13(false);
+  const [selectionHovered, setSelectionHovered] = useState13(false);
+  const [selectionPinned, setSelectionPinned] = useState13(false);
+  const [shapeHovered, setShapeHovered] = useState13(false);
+  const [shapePinned, setShapePinned] = useState13(false);
+  const modeRef = useRef10(null);
+  const clickRef = useRef10(null);
+  const selectionRef = useRef10(null);
+  const shapeRef = useRef10(null);
   const modeExpanded = modeHovered || modePinned;
   const clickExpanded = clickHovered || clickPinned;
   const selectionExpanded = selectionHovered || selectionPinned;
   const shapeExpanded = shapeHovered || shapePinned;
-  useEffect13(() => {
+  useEffect14(() => {
     const handleClickOutside = (event) => {
       if (modePinned && modeRef.current && !modeRef.current.contains(event.target)) {
         setModePinned(false);
@@ -27286,7 +27331,7 @@ function AnnotateToolbar({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [modePinned, clickPinned, selectionPinned, shapePinned]);
-  useEffect13(() => {
+  useEffect14(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         setModePinned(false);
@@ -27468,7 +27513,7 @@ function AnnotateToolbar({
 }
 
 // src/components/annotation-popups/JsonLdView.tsx
-import { useEffect as useEffect14, useRef as useRef10 } from "react";
+import { useEffect as useEffect15, useRef as useRef11 } from "react";
 
 // ../../node_modules/@lezer/json/dist/index.js
 var jsonHighlighting = styleTags({
@@ -27672,14 +27717,14 @@ var oneDark = [oneDarkTheme, /* @__PURE__ */ syntaxHighlighting(oneDarkHighlight
 // src/components/annotation-popups/JsonLdView.tsx
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function JsonLdView({ annotation, onBack }) {
-  const editorRef = useRef10(null);
-  const viewRef = useRef10(null);
+  const editorRef = useRef11(null);
+  const viewRef = useRef11(null);
   const { showLineNumbers } = useLineNumbers();
-  const onBackRef = useRef10(onBack);
-  useEffect14(() => {
+  const onBackRef = useRef11(onBack);
+  useEffect15(() => {
     onBackRef.current = onBack;
   });
-  useEffect14(() => {
+  useEffect15(() => {
     const handleKeyDown = (e6) => {
       if (e6.key === "Escape") {
         onBackRef.current();
@@ -27688,7 +27733,7 @@ function JsonLdView({ annotation, onBack }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!editorRef.current) return;
     const isDarkMode = document.documentElement.classList.contains("dark");
     const jsonContent = JSON.stringify(annotation, null, 2);
@@ -29406,7 +29451,7 @@ function AnnotationOverlay({
   const scaleX = displayWidth / imageWidth;
   const scaleY = displayHeight / imageHeight;
   const { handleMouseEnter, handleMouseLeave } = useMemo2(
-    () => createHoverHandlers((annotationId) => eventBus?.get("beckon:hover").next({ annotationId }), hoverDelayMs),
+    () => createHoverHandlers((annotationId2) => eventBus?.get("beckon:hover").next({ annotationId: annotationId2 }), hoverDelayMs),
     [eventBus, hoverDelayMs]
   );
   return /* @__PURE__ */ jsx18(
@@ -29574,7 +29619,7 @@ function AnnotationOverlay({
 }
 
 // src/components/image-annotation/SvgDrawingCanvas.tsx
-import { useRef as useRef11, useState as useState14, useEffect as useEffect16, useCallback as useCallback12, useMemo as useMemo3 } from "react";
+import { useRef as useRef12, useState as useState15, useEffect as useEffect17, useCallback as useCallback13, useMemo as useMemo3 } from "react";
 import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector as parseSvgSelector2 } from "@semiont/api-client";
 import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function getMotivationColor(motivation) {
@@ -29612,14 +29657,14 @@ function SvgDrawingCanvas({
     const resourceId = resourceUri2.split("/").pop();
     return `/api/resources/${resourceId}`;
   }, [resourceUri2]);
-  const containerRef = useRef11(null);
-  const imageRef = useRef11(null);
-  const [imageDimensions, setImageDimensions] = useState14(null);
-  const [displayDimensions, setDisplayDimensions] = useState14(null);
-  const [isDrawing, setIsDrawing] = useState14(false);
-  const [startPoint, setStartPoint] = useState14(null);
-  const [currentPoint, setCurrentPoint] = useState14(null);
-  useEffect16(() => {
+  const containerRef = useRef12(null);
+  const imageRef = useRef12(null);
+  const [imageDimensions, setImageDimensions] = useState15(null);
+  const [displayDimensions, setDisplayDimensions] = useState15(null);
+  const [isDrawing, setIsDrawing] = useState15(false);
+  const [startPoint, setStartPoint] = useState15(null);
+  const [currentPoint, setCurrentPoint] = useState15(null);
+  useEffect17(() => {
     const img = new Image();
     img.onload = () => {
       setImageDimensions({
@@ -29629,7 +29674,7 @@ function SvgDrawingCanvas({
     };
     img.src = imageUrl;
   }, [imageUrl]);
-  useEffect16(() => {
+  useEffect17(() => {
     const updateDisplayDimensions = () => {
       if (imageRef.current) {
         setDisplayDimensions({
@@ -29657,7 +29702,7 @@ function SvgDrawingCanvas({
       }
     };
   }, []);
-  const getRelativeCoordinates = useCallback12((e6) => {
+  const getRelativeCoordinates = useCallback13((e6) => {
     if (!imageRef.current) return null;
     const rect = imageRef.current.getBoundingClientRect();
     return {
@@ -29665,7 +29710,7 @@ function SvgDrawingCanvas({
       y: e6.clientY - rect.top
     };
   }, []);
-  const handleMouseDown = useCallback12((e6) => {
+  const handleMouseDown = useCallback13((e6) => {
     if (!drawingMode) return;
     const point4 = getRelativeCoordinates(e6);
     if (point4) {
@@ -29674,14 +29719,14 @@ function SvgDrawingCanvas({
       setCurrentPoint(point4);
     }
   }, [drawingMode, getRelativeCoordinates]);
-  const handleMouseMove = useCallback12((e6) => {
+  const handleMouseMove = useCallback13((e6) => {
     if (!isDrawing || !startPoint) return;
     const point4 = getRelativeCoordinates(e6);
     if (point4) {
       setCurrentPoint(point4);
     }
   }, [isDrawing, startPoint, getRelativeCoordinates]);
-  const handleMouseUp = useCallback12((e6) => {
+  const handleMouseUp = useCallback13((e6) => {
     if (!isDrawing || !startPoint || !drawingMode) return;
     const endPoint = getRelativeCoordinates(e6);
     if (!endPoint || !displayDimensions || !imageDimensions) return;
@@ -29777,7 +29822,7 @@ function SvgDrawingCanvas({
     setStartPoint(null);
     setCurrentPoint(null);
   }, [isDrawing, startPoint, drawingMode, displayDimensions, imageDimensions, getRelativeCoordinates, selectedMotivation, existingAnnotations]);
-  const handleMouseLeave = useCallback12(() => {
+  const handleMouseLeave = useCallback13(() => {
     if (isDrawing) {
       setIsDrawing(false);
       setStartPoint(null);
@@ -30066,7 +30111,7 @@ function KeyboardShortcutsHelpModal({ isOpen, onClose }) {
 }
 
 // src/components/modals/ProposeEntitiesModal.tsx
-import { useEffect as useEffect17, useState as useState15, Fragment as Fragment5 } from "react";
+import { useEffect as useEffect18, useState as useState16, Fragment as Fragment5 } from "react";
 import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var STORAGE_KEY = "userPreferredEntityTypes";
 function ProposeEntitiesModal({
@@ -30074,11 +30119,11 @@ function ProposeEntitiesModal({
   onConfirm,
   onCancel
 }) {
-  const [selectedTypes, setSelectedTypes] = useState15([]);
+  const [selectedTypes, setSelectedTypes] = useState16([]);
   const entityTypesAPI = useEntityTypes();
   const { data: entityTypesData } = entityTypesAPI.list.useQuery();
   const allEntityTypes = entityTypesData?.entityTypes || [];
-  useEffect17(() => {
+  useEffect18(() => {
     if (isOpen) {
       try {
         const saved = sessionStorage.getItem(STORAGE_KEY);
@@ -30188,7 +30233,7 @@ function ProposeEntitiesModal({
 }
 
 // src/components/resource/AnnotateView.tsx
-import { useRef as useRef12, useEffect as useEffect18, useCallback as useCallback13, lazy, Suspense } from "react";
+import { useRef as useRef13, useEffect as useEffect19, useCallback as useCallback14, lazy, Suspense } from "react";
 import { resourceUri as toResourceUri } from "@semiont/core";
 import { getMimeCategory, isPdfMimeType as isPdfMimeType2 } from "@semiont/api-client";
 
@@ -30299,26 +30344,26 @@ function AnnotateView({
   annotateMode
 }) {
   const { newAnnotationIds } = useResourceAnnotations();
-  const containerRef = useRef12(null);
+  const containerRef = useRef13(null);
   const eventBus = useEventBus();
   const category = getMimeCategory(mimeType);
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
   const segments = segmentTextWithAnnotations(content4, allAnnotations);
   const { selectedMotivation, selectedClick, selectedShape, hoveredAnnotationId, scrollToAnnotationId } = uiState;
-  const onUIStateChangeRef = useRef12(onUIStateChange);
+  const onUIStateChangeRef = useRef13(onUIStateChange);
   onUIStateChangeRef.current = onUIStateChange;
-  const handleToolbarSelectionChanged = useCallback13(({ motivation }) => {
+  const handleToolbarSelectionChanged = useCallback14(({ motivation }) => {
     onUIStateChangeRef.current?.({ selectedMotivation: motivation });
   }, []);
-  const handleToolbarClickChanged = useCallback13(({ action }) => {
+  const handleToolbarClickChanged = useCallback14(({ action }) => {
     onUIStateChangeRef.current?.({ selectedClick: action });
   }, []);
-  const handleToolbarShapeChanged = useCallback13(({ shape }) => {
+  const handleToolbarShapeChanged = useCallback14(({ shape }) => {
     onUIStateChangeRef.current?.({ selectedShape: shape });
   }, []);
-  const handleAnnotationHover = useCallback13(({ annotationId }) => {
-    onUIStateChangeRef.current?.({ hoveredAnnotationId: annotationId });
+  const handleAnnotationHover = useCallback14(({ annotationId: annotationId2 }) => {
+    onUIStateChangeRef.current?.({ hoveredAnnotationId: annotationId2 });
   }, []);
   useEventSubscriptions({
     "mark:selection-changed": handleToolbarSelectionChanged,
@@ -30326,7 +30371,7 @@ function AnnotateView({
     "mark:shape-changed": handleToolbarShapeChanged,
     "beckon:hover": handleAnnotationHover
   });
-  useEffect18(() => {
+  useEffect19(() => {
     const container = containerRef.current;
     if (!container) return;
     let clickedOnAnnotation = false;
@@ -30491,11 +30536,11 @@ function AnnotateView({
 }
 
 // src/components/resource/AnnotationHistory.tsx
-import { useEffect as useEffect20, useRef as useRef14 } from "react";
+import { useEffect as useEffect21, useRef as useRef15 } from "react";
 import { getAnnotationUriFromEvent as getAnnotationUriFromEvent2 } from "@semiont/core";
 
 // src/components/resource/HistoryEvent.tsx
-import { useRef as useRef13, useCallback as useCallback14, useEffect as useEffect19 } from "react";
+import { useRef as useRef14, useCallback as useCallback15, useEffect as useEffect20 } from "react";
 import { getAnnotationUriFromEvent } from "@semiont/core";
 
 // src/components/resource/event-formatting.ts
@@ -30735,12 +30780,12 @@ function HistoryEvent({
   const annotationUri2 = getAnnotationUriFromEvent(event);
   const creationDetails = getResourceCreationDetails(event);
   const entityTypes = getEventEntityTypes(event);
-  const hoverTimeoutRef = useRef13(null);
-  const onEventHoverRef = useRef13(onEventHover);
-  useEffect19(() => {
+  const hoverTimeoutRef = useRef14(null);
+  const onEventHoverRef = useRef14(onEventHover);
+  useEffect20(() => {
     onEventHoverRef.current = onEventHover;
   });
-  const handleEmojiMouseEnter = useCallback14(() => {
+  const handleEmojiMouseEnter = useCallback15(() => {
     if (!annotationUri2 || !onEventHoverRef.current) return;
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -30749,7 +30794,7 @@ function HistoryEvent({
       onEventHoverRef.current?.(annotationUri2);
     }, 300);
   }, [annotationUri2]);
-  const handleEmojiMouseLeave = useCallback14(() => {
+  const handleEmojiMouseLeave = useCallback15(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
       hoverTimeoutRef.current = null;
@@ -30841,15 +30886,15 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
   const { data: eventsData, isLoading: loading, isError: error } = resources.events.useQuery(rUri);
   const { data: annotationsData } = resources.annotations.useQuery(rUri);
   const annotations = annotationsData?.annotations || [];
-  const eventRefs = useRef14(/* @__PURE__ */ new Map());
-  const containerRef = useRef14(null);
+  const eventRefs = useRef15(/* @__PURE__ */ new Map());
+  const containerRef = useRef15(null);
   const events2 = !eventsData?.events ? [] : [...eventsData.events].filter((e6) => {
     const eventType = e6.event.type;
     return eventType !== "job.started" && eventType !== "job.progress" && eventType !== "job.completed";
   }).sort(
     (a15, b8) => a15.metadata.sequenceNumber - b8.metadata.sequenceNumber
   );
-  useEffect20(() => {
+  useEffect21(() => {
     if (containerRef.current && events2.length > 0) {
       requestAnimationFrame(() => {
         if (containerRef.current) {
@@ -30858,7 +30903,7 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
       });
     }
   }, [events2.length]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!hoveredAnnotationId) return;
     const eventElement = eventRefs.current.get(hoveredAnnotationId);
     if (eventElement && containerRef.current) {
@@ -30899,11 +30944,11 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
           t: t12,
           Link,
           routes,
-          onEventRef: (annotationId, el) => {
-            if (el && annotationId) {
-              eventRefs.current.set(annotationId, el);
-            } else if (!el && annotationId) {
-              eventRefs.current.delete(annotationId);
+          onEventRef: (annotationId2, el) => {
+            if (el && annotationId2) {
+              eventRefs.current.set(annotationId2, el);
+            } else if (!el && annotationId2) {
+              eventRefs.current.delete(annotationId2);
             }
           },
           ...onEventClick && { onEventClick },
@@ -30916,7 +30961,7 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
 }
 
 // src/components/resource/BrowseView.tsx
-import { useEffect as useEffect22, useRef as useRef15, useCallback as useCallback15, useMemo as useMemo4, memo, lazy as lazy2, Suspense as Suspense2 } from "react";
+import { useEffect as useEffect23, useRef as useRef16, useCallback as useCallback16, useMemo as useMemo4, memo, lazy as lazy2, Suspense as Suspense2 } from "react";
 
 // ../../node_modules/devlop/lib/default.js
 function ok() {
@@ -32791,7 +32836,7 @@ var urlAttributes = {
 
 // ../../node_modules/react-markdown/lib/index.js
 import { Fragment as Fragment6, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-import { useEffect as useEffect21, useState as useState16 } from "react";
+import { useEffect as useEffect22, useState as useState17 } from "react";
 
 // ../../node_modules/mdast-util-to-string/lib/index.js
 var emptyOptions2 = {};
@@ -45476,7 +45521,7 @@ var BrowseView = memo(function BrowseView2({
 }) {
   const { newAnnotationIds } = useResourceAnnotations();
   const eventBus = useEventBus();
-  const containerRef = useRef15(null);
+  const containerRef = useRef16(null);
   const category = getMimeCategory2(mimeType);
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = useMemo4(
@@ -45487,12 +45532,12 @@ var BrowseView = memo(function BrowseView2({
     () => toOverlayAnnotations(allAnnotations),
     [allAnnotations]
   );
-  const offsetMapRef = useRef15(null);
-  useEffect22(() => {
+  const offsetMapRef = useRef16(null);
+  useEffect23(() => {
     if (!containerRef.current) return;
     offsetMapRef.current = buildSourceToRenderedMap(content4, containerRef.current);
   }, [content4]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!containerRef.current || !offsetMapRef.current || overlayAnnotations.length === 0) return;
     const container = containerRef.current;
     const textNodeIndex = buildTextNodeIndex(container);
@@ -45500,31 +45545,31 @@ var BrowseView = memo(function BrowseView2({
     applyHighlights(ranges);
     return () => clearHighlights(container);
   }, [overlayAnnotations]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     const handleClick = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
       if (!annotationElement) return;
-      const annotationId = annotationElement.getAttribute("data-annotation-id");
+      const annotationId2 = annotationElement.getAttribute("data-annotation-id");
       const annotationType = annotationElement.getAttribute("data-annotation-type");
-      if (annotationId && annotationType === "reference") {
-        const annotation = allAnnotations.find((a15) => a15.id === annotationId);
+      if (annotationId2 && annotationType === "reference") {
+        const annotation = allAnnotations.find((a15) => a15.id === annotationId2);
         if (annotation) {
-          eventBus.get("browse:click").next({ annotationId, motivation: annotation.motivation });
+          eventBus.get("browse:click").next({ annotationId: annotationId2, motivation: annotation.motivation });
         }
       }
     };
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId) => eventBus.get("beckon:hover").next({ annotationId }),
+      (annotationId2) => eventBus.get("beckon:hover").next({ annotationId: annotationId2 }),
       hoverDelayMs
     );
     const handleMouseOver = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
-      const annotationId = annotationElement?.getAttribute("data-annotation-id");
-      if (annotationId) handleMouseEnter(annotationId);
+      const annotationId2 = annotationElement?.getAttribute("data-annotation-id");
+      if (annotationId2) handleMouseEnter(annotationId2);
     };
     const handleMouseOut = (e6) => {
       const target = e6.target;
@@ -45534,8 +45579,8 @@ var BrowseView = memo(function BrowseView2({
     if (newAnnotationIds) {
       const annotationSpans = container.querySelectorAll("[data-annotation-id]");
       annotationSpans.forEach((span) => {
-        const annotationId = span.getAttribute("data-annotation-id");
-        if (annotationId && newAnnotationIds.has(annotationId)) {
+        const annotationId2 = span.getAttribute("data-annotation-id");
+        if (annotationId2 && newAnnotationIds.has(annotationId2)) {
           span.classList.add("annotation-sparkle");
         }
       });
@@ -45550,15 +45595,15 @@ var BrowseView = memo(function BrowseView2({
       cleanupHover();
     };
   }, [content4, allAnnotations, newAnnotationIds, hoverDelayMs]);
-  const scrollToAnnotation = useCallback15((annotationId, removePulse = false) => {
+  const scrollToAnnotation = useCallback16((annotationId2, removePulse = false) => {
     if (!containerRef.current) return;
-    scrollAnnotationIntoView(annotationId, containerRef.current, { pulse: removePulse });
+    scrollAnnotationIntoView(annotationId2, containerRef.current, { pulse: removePulse });
   }, []);
-  const handleAnnotationHover = useCallback15(({ annotationId }) => {
-    scrollToAnnotation(annotationId);
+  const handleAnnotationHover = useCallback16(({ annotationId: annotationId2 }) => {
+    scrollToAnnotation(annotationId2);
   }, [scrollToAnnotation]);
-  const handleAnnotationFocus = useCallback15(({ annotationId }) => {
-    scrollToAnnotation(annotationId, true);
+  const handleAnnotationFocus = useCallback16(({ annotationId: annotationId2 }) => {
+    scrollToAnnotation(annotationId2, true);
   }, [scrollToAnnotation]);
   useEventSubscriptions({
     "beckon:hover": handleAnnotationHover,
@@ -45646,8 +45691,8 @@ var BrowseView = memo(function BrowseView2({
 });
 
 // src/components/resource/ResourceViewer.tsx
-import { useState as useState17, useEffect as useEffect23, useCallback as useCallback16, useRef as useRef16, useMemo as useMemo5 } from "react";
-import { resourceUri } from "@semiont/core";
+import { useState as useState18, useEffect as useEffect24, useCallback as useCallback17, useRef as useRef17, useMemo as useMemo5 } from "react";
+import { resourceUri, annotationId as toAnnotationId } from "@semiont/core";
 import { getExactText as getExactText3, getTargetSelector as getTargetSelector4, isHighlight as isHighlight4, isAssessment as isAssessment3, isReference as isReference5, isComment as isComment4, isTag as isTag5, getBodySource as getBodySource4 } from "@semiont/api-client";
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function ResourceViewer({
@@ -45659,7 +45704,7 @@ function ResourceViewer({
   hoveredAnnotationId: hoveredAnnotationIdProp
 }) {
   const t12 = useTranslations("ResourceViewer");
-  const documentViewerRef = useRef16(null);
+  const documentViewerRef = useRef17(null);
   const eventBus = useEventBus();
   const navigate = useObservableExternalNavigation();
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
@@ -45675,38 +45720,38 @@ function ResourceViewer({
     return "text/plain";
   };
   const mimeType = getMimeType();
-  const [annotateMode, setAnnotateMode] = useState17(() => {
+  const [annotateMode, setAnnotateMode] = useState18(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("annotateMode") === "true";
     }
     return false;
   });
-  useEffect23(() => {
+  useEffect24(() => {
     if (typeof window !== "undefined") {
       localStorage.setItem("annotateMode", annotateMode.toString());
     }
   }, [annotateMode]);
-  const handleViewModeToggle = useCallback16(() => {
+  const handleViewModeToggle = useCallback17(() => {
     setAnnotateMode((prev) => !prev);
   }, []);
   const activeView = annotateMode ? "annotate" : "browse";
   const cacheManager = useCacheManager();
-  const handleAnnotateAdded = useCallback16(() => {
+  const handleAnnotateAdded = useCallback17(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
-  const handleAnnotateRemoved = useCallback16(() => {
+  const handleAnnotateRemoved = useCallback17(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
-  const handleAnnotateBodyUpdated = useCallback16(() => {
+  const handleAnnotateBodyUpdated = useCallback17(() => {
     if (cacheManager) {
       cacheManager.invalidateAnnotations(rUri);
     }
   }, [cacheManager, rUri]);
-  const [selectedMotivation, setSelectedMotivation] = useState17(() => {
+  const [selectedMotivation, setSelectedMotivation] = useState18(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("semiont-toolbar-selection");
       if (stored === "null") return null;
@@ -45716,7 +45761,7 @@ function ResourceViewer({
     }
     return "linking";
   });
-  const [selectedClick, setSelectedClick] = useState17(() => {
+  const [selectedClick, setSelectedClick] = useState18(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem("semiont-toolbar-click");
       if (stored && ["detail", "follow", "jsonld", "deleting"].includes(stored)) {
@@ -45726,46 +45771,46 @@ function ResourceViewer({
     return "detail";
   });
   const selectorType = getSelectorType(mimeType);
-  const [selectedShape, setSelectedShape] = useState17(() => {
+  const [selectedShape, setSelectedShape] = useState18(() => {
     return getSelectedShapeForSelectorType(selectorType);
   });
-  const handleToolbarSelectionChanged = useCallback16(({ motivation }) => {
+  const handleToolbarSelectionChanged = useCallback17(({ motivation }) => {
     setSelectedMotivation(motivation);
   }, []);
-  const handleToolbarClickChanged = useCallback16(({ action }) => {
+  const handleToolbarClickChanged = useCallback17(({ action }) => {
     setSelectedClick(action);
   }, []);
-  const handleToolbarShapeChanged = useCallback16(({ shape }) => {
+  const handleToolbarShapeChanged = useCallback17(({ shape }) => {
     setSelectedShape(shape);
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     if (selectedMotivation === null) {
       localStorage.setItem("semiont-toolbar-selection", "null");
     } else {
       localStorage.setItem("semiont-toolbar-selection", selectedMotivation);
     }
   }, [selectedMotivation]);
-  useEffect23(() => {
+  useEffect24(() => {
     localStorage.setItem("semiont-toolbar-click", selectedClick);
   }, [selectedClick]);
-  useEffect23(() => {
+  useEffect24(() => {
     saveSelectedShapeForSelectorType(selectorType, selectedShape);
   }, [selectorType, selectedShape]);
-  useEffect23(() => {
+  useEffect24(() => {
     const shapeForType = getSelectedShapeForSelectorType(selectorType);
     if (shapeForType !== selectedShape) {
       setSelectedShape(shapeForType);
     }
   }, [selectorType]);
-  const [showJsonLdView, setShowJsonLdView] = useState17(false);
-  const [jsonLdAnnotation, setJsonLdAnnotation] = useState17(null);
-  const [deleteConfirmation, setDeleteConfirmation] = useState17(null);
+  const [showJsonLdView, setShowJsonLdView] = useState18(false);
+  const [jsonLdAnnotation, setJsonLdAnnotation] = useState18(null);
+  const [deleteConfirmation, setDeleteConfirmation] = useState18(null);
   const hoveredAnnotationId = hoveredAnnotationIdProp ?? null;
-  const [scrollToAnnotationId, setScrollToAnnotationId] = useState17(null);
-  const [_focusedAnnotationId, setFocusedAnnotationId] = useState17(null);
-  const focusAnnotation = useCallback16((annotationId) => {
-    setFocusedAnnotationId(annotationId);
-    setScrollToAnnotationId(annotationId);
+  const [scrollToAnnotationId, setScrollToAnnotationId] = useState18(null);
+  const [_focusedAnnotationId, setFocusedAnnotationId] = useState18(null);
+  const focusAnnotation = useCallback17((annotationId2) => {
+    setFocusedAnnotationId(annotationId2);
+    setScrollToAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   const getJsonLdModalPosition = () => {
@@ -45777,10 +45822,10 @@ function ResourceViewer({
       y: Math.max(0, (window.innerHeight - popupHeight) / 2)
     };
   };
-  const handleDeleteAnnotation = useCallback16((id2) => {
-    eventBus.get("mark:delete").next({ annotationId: id2 });
+  const handleDeleteAnnotation = useCallback17((id2) => {
+    eventBus.get("mark:delete").next({ annotationId: toAnnotationId(id2) });
   }, []);
-  const handleAnnotationClick2 = useCallback16((annotation, event) => {
+  const handleAnnotationClick2 = useCallback17((annotation, event) => {
     const metadata = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation(annotation));
     if (metadata?.hasSidePanel) {
       if (selectedClick === "detail") {
@@ -45814,11 +45859,11 @@ function ResourceViewer({
       return;
     }
   }, [annotateMode, selectedClick, focusAnnotation]);
-  const handleAnnotationClickEvent = useCallback16(({ annotationId, motivation }) => {
+  const handleAnnotationClickEvent = useCallback17(({ annotationId: annotationId2, motivation }) => {
     const metadata = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation({ motivation }));
     if (!metadata?.hasSidePanel) {
       const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
-      const annotation = allAnnotations.find((a15) => a15.id === annotationId);
+      const annotation = allAnnotations.find((a15) => a15.id === annotationId2);
       if (annotation) {
         handleAnnotationClick2(annotation);
       }
@@ -45826,13 +45871,13 @@ function ResourceViewer({
     }
     if (selectedClick !== "detail") {
       const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
-      const annotation = allAnnotations.find((a15) => a15.id === annotationId);
+      const annotation = allAnnotations.find((a15) => a15.id === annotationId2);
       if (annotation) {
         handleAnnotationClick2(annotation);
       }
       return;
     }
-    eventBus.get("browse:panel-open").next({ panel: "annotations", scrollToAnnotationId: annotationId, motivation });
+    eventBus.get("browse:panel-open").next({ panel: "annotations", scrollToAnnotationId: annotationId2, motivation });
   }, [highlights, references, assessments, comments, tags3, handleAnnotationClick2, selectedClick]);
   useEventSubscriptions({
     // View mode
@@ -45859,7 +45904,7 @@ function ResourceViewer({
     hoveredAnnotationId,
     scrollToAnnotationId
   };
-  const getTargetDocumentName = useCallback16((documentId) => {
+  const getTargetDocumentName = useCallback17((documentId) => {
     const referencedResource = references.find((a15) => getBodySource4(a15.body) === documentId);
     return referencedResource ? getExactText3(getTargetSelector4(referencedResource.target)) : void 0;
   }, [references]);
@@ -46040,11 +46085,11 @@ var AssessmentEntry = forwardRef(
 );
 
 // src/components/resource/panels/AssessmentPanel.tsx
-import { useState as useState19, useEffect as useEffect25, useRef as useRef17, useCallback as useCallback18, useMemo as useMemo6 } from "react";
+import { useState as useState20, useEffect as useEffect26, useRef as useRef18, useCallback as useCallback19, useMemo as useMemo6 } from "react";
 import { getTextPositionSelector as getTextPositionSelector3, getTargetSelector as getTargetSelector5 } from "@semiont/api-client";
 
 // src/components/resource/panels/AssistSection.tsx
-import { useState as useState18, useEffect as useEffect24, useCallback as useCallback17 } from "react";
+import { useState as useState19, useEffect as useEffect25, useCallback as useCallback18 } from "react";
 import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function AssistSection({
   annotationType,
@@ -46054,21 +46099,21 @@ function AssistSection({
   const panelName = annotationType === "highlight" ? "HighlightPanel" : annotationType === "assessment" ? "AssessmentPanel" : "CommentsPanel";
   const t12 = useTranslations(panelName);
   const eventBus = useEventBus();
-  const [instructions, setInstructions] = useState18("");
-  const [tone, setTone] = useState18("");
+  const [instructions, setInstructions] = useState19("");
+  const [tone, setTone] = useState19("");
   const defaultDensity = annotationType === "comment" ? 5 : annotationType === "assessment" ? 4 : annotationType === "highlight" ? 5 : 5;
-  const [density, setDensity] = useState18(defaultDensity);
-  const [useDensity, setUseDensity] = useState18(true);
-  const [isExpanded, setIsExpanded] = useState18(() => {
+  const [density, setDensity] = useState19(defaultDensity);
+  const [useDensity, setUseDensity] = useState19(true);
+  const [isExpanded, setIsExpanded] = useState19(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem(`assist-section-expanded-${annotationType}`);
     return stored ? stored === "true" : true;
   });
-  useEffect24(() => {
+  useEffect25(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem(`assist-section-expanded-${annotationType}`, String(isExpanded));
   }, [isExpanded, annotationType]);
-  const handleAssist = useCallback17(() => {
+  const handleAssist = useCallback18(() => {
     const motivation = annotationType === "highlight" ? "highlighting" : annotationType === "assessment" ? "assessing" : "commenting";
     eventBus.get("mark:assist-request").next({
       motivation,
@@ -46081,7 +46126,7 @@ function AssistSection({
     setInstructions("");
     setTone("");
   }, [annotationType, instructions, tone, useDensity, density]);
-  const handleDismissProgress = useCallback17(() => {
+  const handleDismissProgress = useCallback18(() => {
     eventBus.get("mark:progress-dismiss").next(void 0);
   }, []);
   return /* @__PURE__ */ jsxs20("div", { className: "semiont-panel__section", children: [
@@ -46286,10 +46331,10 @@ function AssessmentPanel({
 }) {
   const t12 = useTranslations("AssessmentPanel");
   const eventBus = useEventBus();
-  const [newAssessmentText, setNewAssessmentText] = useState19("");
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState19(null);
-  const containerRef = useRef17(null);
-  const entryRefs = useRef17(/* @__PURE__ */ new Map());
+  const [newAssessmentText, setNewAssessmentText] = useState20("");
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState20(null);
+  const containerRef = useRef18(null);
+  const entryRefs = useRef18(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo6(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector3(getTargetSelector5(a15.target));
@@ -46298,14 +46343,14 @@ function AssessmentPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback18((id2, element2) => {
+  const setEntryRef = useCallback19((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -46320,7 +46365,7 @@ function AssessmentPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -46339,7 +46384,7 @@ function AssessmentPanel({
   const handleSaveNewAssessment = () => {
     if (pendingAnnotation) {
       const body = newAssessmentText.trim() ? [{ type: "TextualBody", value: newAssessmentText, purpose: "assessing" }] : [];
-      eventBus.get("mark:create").next({
+      eventBus.get("mark:submit").next({
         motivation: "assessing",
         selector: pendingAnnotation.selector,
         body
@@ -46347,7 +46392,7 @@ function AssessmentPanel({
       setNewAssessmentText("");
     }
   };
-  useEffect25(() => {
+  useEffect26(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -46358,8 +46403,8 @@ function AssessmentPanel({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [pendingAnnotation]);
-  const handleAnnotationClick2 = useCallback18(({ annotationId }) => {
-    setFocusedAnnotationId(annotationId);
+  const handleAnnotationClick2 = useCallback19(({ annotationId: annotationId2 }) => {
+    setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -46519,7 +46564,7 @@ function CollaborationPanel({
 }
 
 // src/components/resource/panels/CommentEntry.tsx
-import { useState as useState20, useEffect as useEffect26, useRef as useRef18, forwardRef as forwardRef2, useImperativeHandle } from "react";
+import { useState as useState21, useEffect as useEffect27, useRef as useRef19, forwardRef as forwardRef2, useImperativeHandle } from "react";
 import { getAnnotationExactText as getAnnotationExactText2, getCommentText } from "@semiont/api-client";
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function formatRelativeTime3(isoString) {
@@ -46546,13 +46591,13 @@ var CommentEntry = forwardRef2(
     const t12 = useTranslations("CommentsPanel");
     const eventBus = useEventBus();
     const hoverProps = useHoverEmitter(comment2.id);
-    const [isEditing, setIsEditing] = useState20(false);
-    const [editText, setEditText] = useState20("");
-    const internalRef = useRef18(null);
+    const [isEditing, setIsEditing] = useState21(false);
+    const [editText, setEditText] = useState21("");
+    const internalRef = useRef19(null);
     useImperativeHandle(ref, () => internalRef.current);
     const commentText = getCommentText(comment2) || "";
     const selectedText = getAnnotationExactText2(comment2);
-    useEffect26(() => {
+    useEffect27(() => {
       if (isFocused && internalRef.current) {
         internalRef.current.scrollIntoView({
           behavior: "smooth",
@@ -46651,7 +46696,7 @@ var CommentEntry = forwardRef2(
 );
 
 // src/components/resource/panels/CommentsPanel.tsx
-import { useState as useState21, useEffect as useEffect27, useRef as useRef19, useCallback as useCallback19, useMemo as useMemo7 } from "react";
+import { useState as useState22, useEffect as useEffect28, useRef as useRef20, useCallback as useCallback20, useMemo as useMemo7 } from "react";
 import { getTextPositionSelector as getTextPositionSelector4, getTargetSelector as getTargetSelector6 } from "@semiont/api-client";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function getSelectorDisplayText2(selector) {
@@ -46679,10 +46724,10 @@ function CommentsPanel({
 }) {
   const t12 = useTranslations("CommentsPanel");
   const eventBus = useEventBus();
-  const [newCommentText, setNewCommentText] = useState21("");
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState21(null);
-  const containerRef = useRef19(null);
-  const entryRefs = useRef19(/* @__PURE__ */ new Map());
+  const [newCommentText, setNewCommentText] = useState22("");
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState22(null);
+  const containerRef = useRef20(null);
+  const entryRefs = useRef20(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo7(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector4(getTargetSelector6(a15.target));
@@ -46691,14 +46736,14 @@ function CommentsPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback19((id2, element2) => {
+  const setEntryRef = useCallback20((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -46715,7 +46760,7 @@ function CommentsPanel({
       }
     }
   }, [scrollToAnnotationId]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -46731,8 +46776,8 @@ function CommentsPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick2 = useCallback19(({ annotationId }) => {
-    setFocusedAnnotationId(annotationId);
+  const handleAnnotationClick2 = useCallback20(({ annotationId: annotationId2 }) => {
+    setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -46740,7 +46785,7 @@ function CommentsPanel({
   });
   const handleSaveNewComment = () => {
     if (newCommentText.trim() && pendingAnnotation) {
-      eventBus.get("mark:create").next({
+      eventBus.get("mark:submit").next({
         motivation: "commenting",
         selector: pendingAnnotation.selector,
         body: [{ type: "TextualBody", value: newCommentText, purpose: "commenting" }]
@@ -46748,7 +46793,7 @@ function CommentsPanel({
       setNewCommentText("");
     }
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -46894,7 +46939,7 @@ var HighlightEntry = forwardRef3(
 );
 
 // src/components/resource/panels/HighlightPanel.tsx
-import { useEffect as useEffect28, useState as useState22, useRef as useRef20, useCallback as useCallback20, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect29, useState as useState23, useRef as useRef21, useCallback as useCallback21, useMemo as useMemo8 } from "react";
 import { getTextPositionSelector as getTextPositionSelector5, getTargetSelector as getTargetSelector7 } from "@semiont/api-client";
 import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function HighlightPanel({
@@ -46909,9 +46954,9 @@ function HighlightPanel({
 }) {
   const t12 = useTranslations("HighlightPanel");
   const eventBus = useEventBus();
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState22(null);
-  const containerRef = useRef20(null);
-  const entryRefs = useRef20(/* @__PURE__ */ new Map());
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState23(null);
+  const containerRef = useRef21(null);
+  const entryRefs = useRef21(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo8(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector5(getTargetSelector7(a15.target));
@@ -46920,14 +46965,14 @@ function HighlightPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback20((id2, element2) => {
+  const setEntryRef = useCallback21((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -46942,7 +46987,7 @@ function HighlightPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -46958,16 +47003,16 @@ function HighlightPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick2 = useCallback20(({ annotationId }) => {
-    setFocusedAnnotationId(annotationId);
+  const handleAnnotationClick2 = useCallback21(({ annotationId: annotationId2 }) => {
+    setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
     "browse:click": handleAnnotationClick2
   });
-  useEffect28(() => {
+  useEffect29(() => {
     if (pendingAnnotation && pendingAnnotation.motivation === "highlighting") {
-      eventBus.get("mark:create").next({
+      eventBus.get("mark:submit").next({
         motivation: "highlighting",
         selector: pendingAnnotation.selector,
         body: []
@@ -47000,13 +47045,13 @@ function HighlightPanel({
 }
 
 // src/components/resource/panels/JsonLdPanel.tsx
-import { useEffect as useEffect29, useRef as useRef21 } from "react";
+import { useEffect as useEffect30, useRef as useRef22 } from "react";
 import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function JsonLdPanel({ resource: semiontResource }) {
-  const editorRef = useRef21(null);
-  const viewRef = useRef21(null);
+  const editorRef = useRef22(null);
+  const viewRef = useRef22(null);
   const { showLineNumbers } = useLineNumbers();
-  useEffect29(() => {
+  useEffect30(() => {
     if (!editorRef.current) return;
     const isDarkMode = document.documentElement?.classList.contains("dark") ?? false;
     const jsonLdContent = JSON.stringify(semiontResource, null, 2);
@@ -47238,7 +47283,7 @@ var ReferenceEntry = forwardRef4(
 );
 
 // src/components/resource/panels/ReferencesPanel.tsx
-import { useState as useState23, useRef as useRef22, useEffect as useEffect30, useCallback as useCallback21, useMemo as useMemo9 } from "react";
+import { useState as useState24, useRef as useRef23, useEffect as useEffect31, useCallback as useCallback22, useMemo as useMemo9 } from "react";
 import { getTextPositionSelector as getTextPositionSelector6, getTargetSelector as getTargetSelector9 } from "@semiont/api-client";
 import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 function getSelectorDisplayText3(selector) {
@@ -47272,22 +47317,22 @@ function ReferencesPanel({
 }) {
   const t12 = useTranslations("ReferencesPanel");
   const eventBus = useEventBus();
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState23([]);
-  const [lastAnnotationLog, setLastDetectionLog] = useState23(null);
-  const [pendingEntityTypes, setPendingEntityTypes] = useState23([]);
-  const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState23(false);
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState23(null);
-  const containerRef = useRef22(null);
-  const [isAssistExpanded, setIsDetectExpanded] = useState23(() => {
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState24([]);
+  const [lastAnnotationLog, setLastDetectionLog] = useState24(null);
+  const [pendingEntityTypes, setPendingEntityTypes] = useState24([]);
+  const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState24(false);
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState24(null);
+  const containerRef = useRef23(null);
+  const [isAssistExpanded, setIsDetectExpanded] = useState24(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem("assist-section-expanded-reference");
     return stored ? stored === "true" : true;
   });
-  useEffect30(() => {
+  useEffect31(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem("assist-section-expanded-reference", String(isAssistExpanded));
   }, [isAssistExpanded]);
-  const entryRefs = useRef22(/* @__PURE__ */ new Map());
+  const entryRefs = useRef23(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo9(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector6(getTargetSelector9(a15.target));
@@ -47296,14 +47341,14 @@ function ReferencesPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback21((id2, element2) => {
+  const setEntryRef = useCallback22((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -47322,7 +47367,7 @@ function ReferencesPanel({
       console.warn("[ReferencesPanel] Element not found for scrollToAnnotationId:", scrollToAnnotationId);
     }
   }, [scrollToAnnotationId]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -47338,8 +47383,8 @@ function ReferencesPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick2 = useCallback21(({ annotationId }) => {
-    setFocusedAnnotationId(annotationId);
+  const handleAnnotationClick2 = useCallback22(({ annotationId: annotationId2 }) => {
+    setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -47355,8 +47400,8 @@ function ReferencesPanel({
       }
     });
   };
-  const hasSavedLogRef = useRef22(false);
-  useEffect30(() => {
+  const hasSavedLogRef = useRef23(false);
+  useEffect31(() => {
     if (isAssisting) {
       hasSavedLogRef.current = false;
       return;
@@ -47375,7 +47420,7 @@ function ReferencesPanel({
   const handleCreateReference = () => {
     if (pendingAnnotation) {
       const entityType3 = pendingEntityTypes.join(",") || void 0;
-      eventBus.get("mark:create").next({
+      eventBus.get("mark:submit").next({
         motivation: "linking",
         selector: pendingAnnotation.selector,
         body: entityType3 ? [{ type: "TextualBody", value: entityType3, purpose: "tagging" }] : []
@@ -47383,7 +47428,7 @@ function ReferencesPanel({
       setPendingEntityTypes([]);
     }
   };
-  useEffect30(() => {
+  useEffect31(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -47796,7 +47841,7 @@ var TagEntry = forwardRef5(
 );
 
 // src/components/resource/panels/TaggingPanel.tsx
-import { useState as useState24, useEffect as useEffect31, useRef as useRef23, useCallback as useCallback22, useMemo as useMemo10 } from "react";
+import { useState as useState25, useEffect as useEffect32, useRef as useRef24, useCallback as useCallback23, useMemo as useMemo10 } from "react";
 import { getTextPositionSelector as getTextPositionSelector7, getTargetSelector as getTargetSelector10 } from "@semiont/api-client";
 import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function getSelectorDisplayText4(selector) {
@@ -47824,27 +47869,27 @@ function TaggingPanel({
 }) {
   const t12 = useTranslations("TaggingPanel");
   const eventBus = useEventBus();
-  const [selectedSchemaId, setSelectedSchemaId] = useState24("legal-irac");
-  const [selectedCategories, setSelectedCategories] = useState24(/* @__PURE__ */ new Set());
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState24(null);
-  const containerRef = useRef23(null);
-  const [isAssistExpanded, setIsDetectExpanded] = useState24(() => {
+  const [selectedSchemaId, setSelectedSchemaId] = useState25("legal-irac");
+  const [selectedCategories, setSelectedCategories] = useState25(/* @__PURE__ */ new Set());
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState25(null);
+  const containerRef = useRef24(null);
+  const [isAssistExpanded, setIsDetectExpanded] = useState25(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem("assist-section-expanded-tag");
     return stored ? stored === "true" : true;
   });
-  useEffect31(() => {
+  useEffect32(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem("assist-section-expanded-tag", String(isAssistExpanded));
   }, [isAssistExpanded]);
-  const handleAnnotationClick2 = useCallback22(({ annotationId }) => {
-    setFocusedAnnotationId(annotationId);
+  const handleAnnotationClick2 = useCallback23(({ annotationId: annotationId2 }) => {
+    setFocusedAnnotationId(annotationId2);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
     "browse:click": handleAnnotationClick2
   });
-  const entryRefs = useRef23(/* @__PURE__ */ new Map());
+  const entryRefs = useRef24(/* @__PURE__ */ new Map());
   const sortedAnnotations = useMemo10(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector7(getTargetSelector10(a15.target));
@@ -47853,14 +47898,14 @@ function TaggingPanel({
       return aSelector.start - bSelector.start;
     });
   }, [annotations]);
-  const setEntryRef = useCallback22((id2, element2) => {
+  const setEntryRef = useCallback23((id2, element2) => {
     if (element2) {
       entryRefs.current.set(id2, element2);
     } else {
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -47875,7 +47920,7 @@ function TaggingPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -47926,7 +47971,7 @@ function TaggingPanel({
       setSelectedCategories(/* @__PURE__ */ new Set());
     }
   };
-  useEffect31(() => {
+  useEffect32(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -47968,7 +48013,7 @@ function TaggingPanel({
               className: "semiont-select",
               onChange: (e6) => {
                 if (e6.target.value && pendingAnnotation) {
-                  eventBus.get("mark:create").next({
+                  eventBus.get("mark:submit").next({
                     motivation: "tagging",
                     selector: pendingAnnotation.selector,
                     body: [
@@ -48153,7 +48198,7 @@ function TaggingPanel({
 }
 
 // src/components/resource/panels/UnifiedAnnotationsPanel.tsx
-import { useState as useState25, useEffect as useEffect32 } from "react";
+import { useState as useState26, useEffect as useEffect33 } from "react";
 import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var TAB_ORDER = ["statistics", "reference", "highlight", "assessment", "comment", "tag"];
 function UnifiedAnnotationsPanel(props) {
@@ -48175,7 +48220,7 @@ function UnifiedAnnotationsPanel(props) {
     }
   }
   const grouped = groups;
-  const [activeTab, setActiveTab] = useState25(() => {
+  const [activeTab, setActiveTab] = useState26(() => {
     if (typeof window === "undefined") return props.initialTab || "statistics";
     const storageKey = props.resourceId ? `annotations-tab-${props.resourceId}` : "annotations-tab-global";
     const stored = localStorage.getItem(storageKey);
@@ -48184,17 +48229,17 @@ function UnifiedAnnotationsPanel(props) {
     }
     return props.initialTab || "statistics";
   });
-  useEffect32(() => {
+  useEffect33(() => {
     if (typeof window === "undefined") return;
     const storageKey = props.resourceId ? `annotations-tab-${props.resourceId}` : "annotations-tab-global";
     localStorage.setItem(storageKey, activeTab);
   }, [activeTab, props.resourceId]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (props.initialTab && props.initialTabGeneration !== void 0) {
       setActiveTab(props.initialTab);
     }
   }, [props.initialTabGeneration]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (props.pendingAnnotation) {
       const motivationToTab = {
         "linking": "reference",
@@ -48333,7 +48378,7 @@ function UnifiedAnnotationsPanel(props) {
 }
 
 // src/components/navigation/Footer.tsx
-import { useState as useState26 } from "react";
+import { useState as useState27 } from "react";
 import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 function Footer({
   Link,
@@ -48344,7 +48389,7 @@ function Footer({
   apiDocsUrl = "/api/docs",
   sourceCodeUrl = "https://github.com/The-AI-Alliance/semiont"
 }) {
-  const [showCookiePreferences, setShowCookiePreferences] = useState26(false);
+  const [showCookiePreferences, setShowCookiePreferences] = useState27(false);
   return /* @__PURE__ */ jsxs36(Fragment11, { children: [
     /* @__PURE__ */ jsx45("footer", { role: "contentinfo", className: "semiont-footer", children: /* @__PURE__ */ jsx45("div", { className: "semiont-footer__container", children: /* @__PURE__ */ jsxs36("div", { className: "semiont-footer__content", children: [
       /* @__PURE__ */ jsx45("div", { className: "semiont-footer__copyright", children: t12("copyright", { year: (/* @__PURE__ */ new Date()).getFullYear() }) }),
@@ -48482,7 +48527,7 @@ function NavigationMenu({
 }
 
 // src/components/navigation/ObservableLink.tsx
-import { useCallback as useCallback23, useRef as useRef24, useEffect as useEffect33 } from "react";
+import { useCallback as useCallback24, useRef as useRef25, useEffect as useEffect34 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function ObservableLink({
   href,
@@ -48492,11 +48537,11 @@ function ObservableLink({
   ...anchorProps
 }) {
   const eventBus = useEventBus();
-  const onClickRef = useRef24(onClick);
-  useEffect33(() => {
+  const onClickRef = useRef25(onClick);
+  useEffect34(() => {
     onClickRef.current = onClick;
   });
-  const handleClick = useCallback23((e6) => {
+  const handleClick = useCallback24((e6) => {
     eventBus.get("browse:link-clicked").next({
       href,
       label
@@ -48515,7 +48560,7 @@ function ObservableLink({
 }
 
 // src/components/navigation/SimpleNavigation.tsx
-import { useState as useState27, useRef as useRef25, useEffect as useEffect34 } from "react";
+import { useState as useState28, useRef as useRef26, useEffect as useEffect35 } from "react";
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 function SimpleNavigation({
   title,
@@ -48530,12 +48575,12 @@ function SimpleNavigation({
 }) {
   const ChevronLeftIcon = icons.chevronLeft;
   const BarsIcon = icons.bars;
-  const [isDropdownOpen, setIsDropdownOpen] = useState27(false);
-  const dropdownRef = useRef25(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState28(false);
+  const dropdownRef = useRef26(null);
   const eventBus = useEventBus();
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
-  useEffect34(() => {
+  useEffect35(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         closeDropdown();
@@ -48611,14 +48656,14 @@ function SimpleNavigation({
 }
 
 // src/components/navigation/CollapsibleResourceNavigation.tsx
-import { useCallback as useCallback29, useState as useState31, useRef as useRef30, useEffect as useEffect39 } from "react";
+import { useCallback as useCallback30, useState as useState32, useRef as useRef31, useEffect as useEffect40 } from "react";
 
 // ../../node_modules/@dnd-kit/core/dist/core.esm.js
-import React20, { createContext as createContext7, useContext as useContext7, useEffect as useEffect36, useState as useState29, useCallback as useCallback26, useMemo as useMemo12, useRef as useRef27, memo as memo2, useReducer, cloneElement, forwardRef as forwardRef6 } from "react";
+import React20, { createContext as createContext7, useContext as useContext7, useEffect as useEffect37, useState as useState30, useCallback as useCallback27, useMemo as useMemo12, useRef as useRef28, memo as memo2, useReducer, cloneElement, forwardRef as forwardRef6 } from "react";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
 
 // ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
-import { useMemo as useMemo11, useLayoutEffect, useEffect as useEffect35, useRef as useRef26, useCallback as useCallback24 } from "react";
+import { useMemo as useMemo11, useLayoutEffect, useEffect as useEffect36, useRef as useRef27, useCallback as useCallback25 } from "react";
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -48686,13 +48731,13 @@ function getOwnerDocument(target) {
   }
   return document;
 }
-var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect35;
+var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect36;
 function useEvent(handler) {
-  const handlerRef = useRef26(handler);
+  const handlerRef = useRef27(handler);
   useIsomorphicLayoutEffect(() => {
     handlerRef.current = handler;
   });
-  return useCallback24(function() {
+  return useCallback25(function() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -48700,11 +48745,11 @@ function useEvent(handler) {
   }, []);
 }
 function useInterval() {
-  const intervalRef = useRef26(null);
-  const set = useCallback24((listener, duration) => {
+  const intervalRef = useRef27(null);
+  const set = useCallback25((listener, duration) => {
     intervalRef.current = setInterval(listener, duration);
   }, []);
-  const clear = useCallback24(() => {
+  const clear = useCallback25(() => {
     if (intervalRef.current !== null) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
@@ -48716,7 +48761,7 @@ function useLatestValue(value, dependencies) {
   if (dependencies === void 0) {
     dependencies = [value];
   }
-  const valueRef = useRef26(value);
+  const valueRef = useRef27(value);
   useIsomorphicLayoutEffect(() => {
     if (valueRef.current !== value) {
       valueRef.current = value;
@@ -48725,7 +48770,7 @@ function useLatestValue(value, dependencies) {
   return valueRef;
 }
 function useLazyMemo(callback, dependencies) {
-  const valueRef = useRef26();
+  const valueRef = useRef27();
   return useMemo11(
     () => {
       const newValue = callback(valueRef.current);
@@ -48738,8 +48783,8 @@ function useLazyMemo(callback, dependencies) {
 }
 function useNodeRef(onChange) {
   const onChangeHandler = useEvent(onChange);
-  const node2 = useRef26(null);
-  const setNodeRef = useCallback24(
+  const node2 = useRef27(null);
+  const setNodeRef = useCallback25(
     (element2) => {
       if (element2 !== node2.current) {
         onChangeHandler == null ? void 0 : onChangeHandler(element2, node2.current);
@@ -48752,8 +48797,8 @@ function useNodeRef(onChange) {
   return [node2, setNodeRef];
 }
 function usePrevious(value) {
-  const ref = useRef26();
-  useEffect35(() => {
+  const ref = useRef27();
+  useEffect36(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
@@ -48894,7 +48939,7 @@ function findFirstFocusableNode(element2) {
 }
 
 // ../../node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js
-import React19, { useState as useState28, useCallback as useCallback25 } from "react";
+import React19, { useState as useState29, useCallback as useCallback26 } from "react";
 var hiddenStyles = {
   display: "none"
 };
@@ -48937,8 +48982,8 @@ function LiveRegion(_ref) {
   }, announcement);
 }
 function useAnnouncement() {
-  const [announcement, setAnnouncement] = useState28("");
-  const announce = useCallback25((value) => {
+  const [announcement, setAnnouncement] = useState29("");
+  const announce = useCallback26((value) => {
     if (value != null) {
       setAnnouncement(value);
     }
@@ -48953,7 +48998,7 @@ function useAnnouncement() {
 var DndMonitorContext = /* @__PURE__ */ createContext7(null);
 function useDndMonitor(listener) {
   const registerListener = useContext7(DndMonitorContext);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!registerListener) {
       throw new Error("useDndMonitor must be used within a children of <DndContext>");
     }
@@ -48962,12 +49007,12 @@ function useDndMonitor(listener) {
   }, [listener, registerListener]);
 }
 function useDndMonitorProvider() {
-  const [listeners] = useState29(() => /* @__PURE__ */ new Set());
-  const registerListener = useCallback26((listener) => {
+  const [listeners] = useState30(() => /* @__PURE__ */ new Set());
+  const registerListener = useCallback27((listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
   }, [listeners]);
-  const dispatch = useCallback26((_ref) => {
+  const dispatch = useCallback27((_ref) => {
     let {
       type,
       event
@@ -49028,8 +49073,8 @@ function Accessibility(_ref) {
     announcement
   } = useAnnouncement();
   const liveRegionId = useUniqueId("DndLiveRegion");
-  const [mounted, setMounted] = useState29(false);
-  useEffect36(() => {
+  const [mounted, setMounted] = useState30(false);
+  useEffect37(() => {
     setMounted(true);
   }, []);
   useDndMonitor(useMemo12(() => ({
@@ -50365,11 +50410,11 @@ function useAutoScroller(_ref) {
     disabled: !enabled
   });
   const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
-  const scrollSpeed = useRef27({
+  const scrollSpeed = useRef28({
     x: 0,
     y: 0
   });
-  const scrollDirection = useRef27({
+  const scrollDirection = useRef28({
     x: 0,
     y: 0
   });
@@ -50386,8 +50431,8 @@ function useAutoScroller(_ref) {
         return draggingRect;
     }
   }, [activator, draggingRect, pointerCoordinates]);
-  const scrollContainerRef = useRef27(null);
-  const autoScroll = useCallback26(() => {
+  const scrollContainerRef = useRef28(null);
+  const autoScroll = useCallback27(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) {
       return;
@@ -50397,7 +50442,7 @@ function useAutoScroller(_ref) {
     scrollContainer.scrollBy(scrollLeft, scrollTop);
   }, []);
   const sortedScrollableAncestors = useMemo12(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
-  useEffect36(
+  useEffect37(
     () => {
       if (!enabled || !scrollableAncestors.length || !rect) {
         clearAutoScrollInterval();
@@ -50538,16 +50583,16 @@ function useDroppableMeasuring(containers, _ref) {
     dependencies,
     config
   } = _ref;
-  const [queue, setQueue] = useState29(null);
+  const [queue, setQueue] = useState30(null);
   const {
     frequency,
     measure,
     strategy
   } = config;
-  const containersRef = useRef27(containers);
+  const containersRef = useRef28(containers);
   const disabled = isDisabled();
   const disabledRef = useLatestValue(disabled);
-  const measureDroppableContainers = useCallback26(function(ids2) {
+  const measureDroppableContainers = useCallback27(function(ids2) {
     if (ids2 === void 0) {
       ids2 = [];
     }
@@ -50561,7 +50606,7 @@ function useDroppableMeasuring(containers, _ref) {
       return value.concat(ids2.filter((id2) => !value.includes(id2)));
     });
   }, [disabledRef]);
-  const timeoutId = useRef27(null);
+  const timeoutId = useRef28(null);
   const droppableRects = useLazyMemo((previousValue) => {
     if (disabled && !dragging) {
       return defaultValue;
@@ -50587,10 +50632,10 @@ function useDroppableMeasuring(containers, _ref) {
     }
     return previousValue;
   }, [containers, queue, dragging, disabled, measure]);
-  useEffect36(() => {
+  useEffect37(() => {
     containersRef.current = containers;
   }, [containers]);
-  useEffect36(
+  useEffect37(
     () => {
       if (disabled) {
         return;
@@ -50600,7 +50645,7 @@ function useDroppableMeasuring(containers, _ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [dragging, disabled]
   );
-  useEffect36(
+  useEffect37(
     () => {
       if (queue && queue.length > 0) {
         setQueue(null);
@@ -50609,7 +50654,7 @@ function useDroppableMeasuring(containers, _ref) {
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(queue)]
   );
-  useEffect36(
+  useEffect37(
     () => {
       if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
         return;
@@ -50667,7 +50712,7 @@ function useMutationObserver(_ref) {
     } = window;
     return new MutationObserver2(handleMutations);
   }, [handleMutations, disabled]);
-  useEffect36(() => {
+  useEffect37(() => {
     return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
   }, [mutationObserver]);
   return mutationObserver;
@@ -50691,7 +50736,7 @@ function useResizeObserver(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled]
   );
-  useEffect36(() => {
+  useEffect37(() => {
     return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
   }, [resizeObserver]);
   return resizeObserver;
@@ -50703,7 +50748,7 @@ function useRect(element2, measure, fallbackRect2) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, setRect] = useState29(null);
+  const [rect, setRect] = useState30(null);
   function measureRect() {
     setRect((currentRect) => {
       if (!element2) {
@@ -50761,7 +50806,7 @@ function useRectDelta(rect) {
 }
 var defaultValue$1 = [];
 function useScrollableAncestors(node2) {
-  const previousNode = useRef27(node2);
+  const previousNode = useRef28(node2);
   const ancestors = useLazyMemo((previousValue) => {
     if (!node2) {
       return defaultValue$1;
@@ -50771,15 +50816,15 @@ function useScrollableAncestors(node2) {
     }
     return getScrollableAncestors(node2);
   }, [node2]);
-  useEffect36(() => {
+  useEffect37(() => {
     previousNode.current = node2;
   }, [node2]);
   return ancestors;
 }
 function useScrollOffsets(elements) {
-  const [scrollCoordinates, setScrollCoordinates] = useState29(null);
-  const prevElements = useRef27(elements);
-  const handleScroll = useCallback26((event) => {
+  const [scrollCoordinates, setScrollCoordinates] = useState30(null);
+  const prevElements = useRef28(elements);
+  const handleScroll = useCallback27((event) => {
     const scrollingElement = getScrollableElement(event.target);
     if (!scrollingElement) {
       return;
@@ -50792,7 +50837,7 @@ function useScrollOffsets(elements) {
       return new Map(scrollCoordinates2);
     });
   }, []);
-  useEffect36(() => {
+  useEffect37(() => {
     const previousElements = prevElements.current;
     if (elements !== previousElements) {
       cleanup(previousElements);
@@ -50831,15 +50876,15 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
   if (dependencies === void 0) {
     dependencies = [];
   }
-  const initialScrollOffsets = useRef27(null);
-  useEffect36(
+  const initialScrollOffsets = useRef28(null);
+  useEffect37(
     () => {
       initialScrollOffsets.current = null;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     dependencies
   );
-  useEffect36(() => {
+  useEffect37(() => {
     const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
     if (hasScrollOffsets && !initialScrollOffsets.current) {
       initialScrollOffsets.current = scrollOffsets;
@@ -50851,7 +50896,7 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
   return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
 }
 function useSensorSetup(sensors) {
-  useEffect36(
+  useEffect37(
     () => {
       if (!canUseDOM) {
         return;
@@ -50902,7 +50947,7 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect2 = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, setRects] = useState29(defaultValue$2);
+  const [rects, setRects] = useState30(defaultValue$2);
   function measureRects() {
     setRects(() => {
       if (!elements.length) {
@@ -50935,8 +50980,8 @@ function useDragOverlayMeasuring(_ref) {
   let {
     measure
   } = _ref;
-  const [rect, setRect] = useState29(null);
-  const handleResize = useCallback26((entries) => {
+  const [rect, setRect] = useState30(null);
+  const handleResize = useCallback27((entries) => {
     for (const {
       target
     } of entries) {
@@ -50956,7 +51001,7 @@ function useDragOverlayMeasuring(_ref) {
   const resizeObserver = useResizeObserver({
     callback: handleResize
   });
-  const handleNodeChange = useCallback26((element2) => {
+  const handleNodeChange = useCallback27((element2) => {
     const node2 = getMeasurableNode(element2);
     resizeObserver == null ? void 0 : resizeObserver.disconnect();
     if (node2) {
@@ -51191,7 +51236,7 @@ function RestoreFocus(_ref) {
   } = useContext7(InternalContext);
   const previousActivatorEvent = usePrevious(activatorEvent);
   const previousActiveId = usePrevious(active == null ? void 0 : active.id);
-  useEffect36(() => {
+  useEffect37(() => {
     if (disabled) {
       return;
     }
@@ -51268,7 +51313,7 @@ function useLayoutShiftScrollCompensation(_ref) {
     initialRect,
     config = true
   } = _ref;
-  const initialized = useRef27(false);
+  const initialized = useRef28(false);
   const {
     x: x8,
     y: y4
@@ -51336,7 +51381,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
   const store = useReducer(reducer, void 0, getInitialState);
   const [state, dispatch] = store;
   const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
-  const [status, setStatus] = useState29(Status.Uninitialized);
+  const [status, setStatus] = useState30(Status.Uninitialized);
   const isInitialized = status === Status.Initialized;
   const {
     draggable: {
@@ -51349,7 +51394,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     }
   } = state;
   const node2 = activeId != null ? draggableNodes.get(activeId) : null;
-  const activeRects = useRef27({
+  const activeRects = useRef28({
     initial: null,
     translated: null
   });
@@ -51362,9 +51407,9 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
       rect: activeRects
     } : null;
   }, [activeId, node2]);
-  const activeRef = useRef27(null);
-  const [activeSensor, setActiveSensor] = useState29(null);
-  const [activatorEvent, setActivatorEvent] = useState29(null);
+  const activeRef = useRef28(null);
+  const [activeSensor, setActiveSensor] = useState30(null);
+  const [activatorEvent, setActivatorEvent] = useState30(null);
   const latestProps = useLatestValue(props, Object.values(props));
   const draggableDescribedById = useUniqueId("DndDescribedBy", id2);
   const enabledDroppableContainers = useMemo12(() => droppableContainers.getEnabled(), [droppableContainers]);
@@ -51390,7 +51435,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
   });
   const activeNodeRect = useRect(activeNode, measuringConfiguration.draggable.measure, initialActiveNodeRect);
   const containerNodeRect = useRect(activeNode ? activeNode.parentElement : null);
-  const sensorContext = useRef27({
+  const sensorContext = useRef28({
     activatorEvent: null,
     active: null,
     activeNode,
@@ -51448,11 +51493,11 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     pointerCoordinates
   }) : null;
   const overId = getFirstCollision(collisions, "id");
-  const [over, setOver] = useState29(null);
+  const [over, setOver] = useState30(null);
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
-  const activeSensorRef = useRef27(null);
-  const instantiateSensor = useCallback26(
+  const activeSensorRef = useRef28(null);
+  const instantiateSensor = useCallback27(
     (event, _ref2) => {
       let {
         sensor: Sensor,
@@ -51610,7 +51655,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [draggableNodes]
   );
-  const bindActivatorToSensorInstantiator = useCallback26((handler, sensor) => {
+  const bindActivatorToSensorInstantiator = useCallback27((handler, sensor) => {
     return (event, active2) => {
       const nativeEvent = event.nativeEvent;
       const activeDraggableNode = draggableNodes.get(active2);
@@ -51642,7 +51687,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
       setStatus(Status.Initialized);
     }
   }, [activeNodeRect, status]);
-  useEffect36(
+  useEffect37(
     () => {
       const {
         onDragMove
@@ -51677,7 +51722,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]
   );
-  useEffect36(
+  useEffect37(
     () => {
       const {
         active: active2,
@@ -51910,12 +51955,12 @@ function useDroppable(_ref) {
     over,
     measureDroppableContainers
   } = useContext7(InternalContext);
-  const previous3 = useRef27({
+  const previous3 = useRef28({
     disabled
   });
-  const resizeObserverConnected = useRef27(false);
-  const rect = useRef27(null);
-  const callbackId = useRef27(null);
+  const resizeObserverConnected = useRef28(false);
+  const rect = useRef28(null);
+  const callbackId = useRef28(null);
   const {
     disabled: resizeObserverDisabled,
     updateMeasurementsFor,
@@ -51925,7 +51970,7 @@ function useDroppable(_ref) {
     ...resizeObserverConfig
   };
   const ids2 = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id2);
-  const handleResize = useCallback26(
+  const handleResize = useCallback27(
     () => {
       if (!resizeObserverConnected.current) {
         resizeObserverConnected.current = true;
@@ -51946,7 +51991,7 @@ function useDroppable(_ref) {
     callback: handleResize,
     disabled: resizeObserverDisabled || !active
   });
-  const handleNodeChange = useCallback26((newElement, previousElement) => {
+  const handleNodeChange = useCallback27((newElement, previousElement) => {
     if (!resizeObserver) {
       return;
     }
@@ -51960,7 +52005,7 @@ function useDroppable(_ref) {
   }, [resizeObserver]);
   const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
   const dataRef = useLatestValue(data2);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!resizeObserver || !nodeRef.current) {
       return;
     }
@@ -51968,7 +52013,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useEffect36(
+  useEffect37(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -51990,7 +52035,7 @@ function useDroppable(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [id2]
   );
-  useEffect36(() => {
+  useEffect37(() => {
     if (disabled !== previous3.current.disabled) {
       dispatch({
         type: Action.SetDroppableDisabled,
@@ -52012,7 +52057,7 @@ function useDroppable(_ref) {
 }
 
 // ../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js
-import React21, { useMemo as useMemo13, useRef as useRef28, useEffect as useEffect37, useState as useState30, useContext as useContext8 } from "react";
+import React21, { useMemo as useMemo13, useRef as useRef29, useEffect as useEffect38, useState as useState31, useContext as useContext8 } from "react";
 function arrayMove(array, from, to) {
   const newArray = array.slice();
   newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -52170,7 +52215,7 @@ function SortableContext(_ref) {
   const isDragging = active != null;
   const activeIndex = active ? items.indexOf(active.id) : -1;
   const overIndex = over ? items.indexOf(over.id) : -1;
-  const previousItemsRef = useRef28(items);
+  const previousItemsRef = useRef29(items);
   const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
   const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
   const disabled = normalizeDisabled(disabledProp);
@@ -52179,7 +52224,7 @@ function SortableContext(_ref) {
       measureDroppableContainers(items);
     }
   }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
-  useEffect37(() => {
+  useEffect38(() => {
     previousItemsRef.current = items;
   }, [items]);
   const contextValue = useMemo13(
@@ -52253,8 +52298,8 @@ function useDerivedTransform(_ref) {
     node: node2,
     rect
   } = _ref;
-  const [derivedTransform, setDerivedtransform] = useState30(null);
-  const previousIndex = useRef28(index2);
+  const [derivedTransform, setDerivedtransform] = useState31(null);
+  const previousIndex = useRef29(index2);
   useIsomorphicLayoutEffect(() => {
     if (!disabled && index2 !== previousIndex.current && node2.current) {
       const initial = rect.current;
@@ -52277,7 +52322,7 @@ function useDerivedTransform(_ref) {
       previousIndex.current = index2;
     }
   }, [disabled, index2, node2, rect]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (derivedTransform) {
       setDerivedtransform(null);
     }
@@ -52372,7 +52417,7 @@ function useSortable(_ref) {
     overIndex
   }) : index2;
   const activeId = active == null ? void 0 : active.id;
-  const previous3 = useRef28({
+  const previous3 = useRef29({
     activeId,
     items,
     newIndex,
@@ -52399,7 +52444,7 @@ function useSortable(_ref) {
     node: node2,
     rect
   });
-  useEffect37(() => {
+  useEffect38(() => {
     if (isSorting && previous3.current.newIndex !== newIndex) {
       previous3.current.newIndex = newIndex;
     }
@@ -52410,7 +52455,7 @@ function useSortable(_ref) {
       previous3.current.items = items;
     }
   }, [isSorting, newIndex, containerId, items]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (activeId === previous3.current.activeId) {
       return;
     }
@@ -52595,7 +52640,7 @@ function isAfter(a15, b8) {
 }
 
 // src/components/navigation/SortableResourceTab.tsx
-import { useCallback as useCallback27, useRef as useRef29, useEffect as useEffect38 } from "react";
+import { useCallback as useCallback28, useRef as useRef30, useEffect as useEffect39 } from "react";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 function SortableResourceTab({
   resource,
@@ -52618,8 +52663,8 @@ function SortableResourceTab({
     transition,
     isDragging: isSortableDragging
   } = useSortable({ id: resource.id });
-  const onReorderRef = useRef29(onReorder);
-  useEffect38(() => {
+  const onReorderRef = useRef30(onReorder);
+  useEffect39(() => {
     onReorderRef.current = onReorder;
   });
   const style = {
@@ -52629,7 +52674,7 @@ function SortableResourceTab({
   };
   const iconEmoji = getResourceIcon(resource.mediaType);
   const isCurrentlyDragging = isSortableDragging || isDragging;
-  const handleKeyDown = useCallback27((e6) => {
+  const handleKeyDown = useCallback28((e6) => {
     if (onReorderRef.current && e6.altKey) {
       if (e6.key === "ArrowUp") {
         e6.preventDefault();
@@ -52682,37 +52727,37 @@ function SortableResourceTab({
 }
 
 // src/hooks/useDragAnnouncements.ts
-import { useCallback as useCallback28 } from "react";
+import { useCallback as useCallback29 } from "react";
 function useDragAnnouncements() {
   const { announce } = useLiveRegion();
-  const announceReorder = useCallback28((message) => {
+  const announceReorder = useCallback29((message) => {
     announce(message, "assertive");
   }, [announce]);
-  const announcePickup = useCallback28((resourceName, position3, total) => {
+  const announcePickup = useCallback29((resourceName, position3, total) => {
     announce(
       `Picked up ${resourceName}. Position ${position3} of ${total}. Use arrow keys to move, space to drop.`,
       "assertive"
     );
   }, [announce]);
-  const announceDrop = useCallback28((resourceName, newPosition, total) => {
+  const announceDrop = useCallback29((resourceName, newPosition, total) => {
     announce(
       `Dropped ${resourceName} at position ${newPosition} of ${total}.`,
       "assertive"
     );
   }, [announce]);
-  const announceMove = useCallback28((resourceName, direction, newPosition, total) => {
+  const announceMove = useCallback29((resourceName, direction, newPosition, total) => {
     announce(
       `Moved ${resourceName} ${direction} to position ${newPosition} of ${total}.`,
       "polite"
     );
   }, [announce]);
-  const announceKeyboardReorder = useCallback28((resourceName, direction, newPosition, total) => {
+  const announceKeyboardReorder = useCallback29((resourceName, direction, newPosition, total) => {
     announce(
       `${resourceName} moved ${direction} to position ${newPosition} of ${total}.`,
       "assertive"
     );
   }, [announce]);
-  const announceCannotMove = useCallback28((direction) => {
+  const announceCannotMove = useCallback29((direction) => {
     announce(
       `Cannot move ${direction}. Already at the ${direction === "up" ? "top" : "bottom"} of the list.`,
       "polite"
@@ -52745,8 +52790,8 @@ function CollapsibleResourceNavigation({
 }) {
   const ChevronLeftIcon = icons.chevronLeft;
   const BarsIcon = icons.bars;
-  const [isDropdownOpen, setIsDropdownOpen] = useState31(false);
-  const dropdownRef = useRef30(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState32(false);
+  const dropdownRef = useRef31(null);
   const { announcePickup, announceDrop, announceKeyboardReorder, announceCannotMove } = useDragAnnouncements();
   const t12 = useTranslations("CollapsibleResourceNavigation");
   const eventBus = useEventBus();
@@ -52761,7 +52806,7 @@ function CollapsibleResourceNavigation({
   };
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
-  useEffect39(() => {
+  useEffect40(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         closeDropdown();
@@ -52783,7 +52828,7 @@ function CollapsibleResourceNavigation({
       coordinateGetter: sortableKeyboardCoordinates
     })
   );
-  const handleKeyboardReorder = useCallback29((resourceId, direction) => {
+  const handleKeyboardReorder = useCallback30((resourceId, direction) => {
     const currentIndex = resources.findIndex((r14) => r14.id === resourceId);
     if (currentIndex === -1) return;
     const newIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
@@ -52959,16 +53004,16 @@ function CollapsibleResourceNavigation({
 }
 
 // src/components/modals/SearchModal.tsx
-import { useState as useState32, useEffect as useEffect40, Fragment as Fragment13 } from "react";
+import { useState as useState33, useEffect as useEffect41, Fragment as Fragment13 } from "react";
 
 // src/hooks/useSearchAnnouncements.ts
-import { useCallback as useCallback30 } from "react";
+import { useCallback as useCallback31 } from "react";
 function useSearchAnnouncements2() {
   const { announce } = useLiveRegion();
-  const announceSearching = useCallback30(() => {
+  const announceSearching = useCallback31(() => {
     announce("Searching...", "polite");
   }, [announce]);
-  const announceSearchResults = useCallback30((count2, query) => {
+  const announceSearchResults = useCallback31((count2, query) => {
     if (count2 === 0) {
       announce(`No results found for ${query}`, "polite");
     } else if (count2 === 1) {
@@ -52977,10 +53022,10 @@ function useSearchAnnouncements2() {
       announce(`${count2} results found for ${query}`, "polite");
     }
   }, [announce]);
-  const announceSelection = useCallback30((name3, type) => {
+  const announceSelection = useCallback31((name3, type) => {
     announce(`Selected ${type}: ${name3}. Press Enter to navigate.`, "polite");
   }, [announce]);
-  const announceNavigation = useCallback30((name3, type) => {
+  const announceNavigation = useCallback31((name3, type) => {
     announce(`Navigating to ${type}: ${name3}`, "assertive");
   }, [announce]);
   return {
@@ -53001,10 +53046,10 @@ function SearchModal({
   translations = {}
 }) {
   const { announceSearchResults, announceSearching } = useSearchAnnouncements2();
-  const [query, setQuery] = useState32("");
-  const [debouncedQuery, setDebouncedQuery] = useState32("");
-  const [results, setResults] = useState32([]);
-  const [selectedIndex, setSelectedIndex] = useState32(0);
+  const [query, setQuery] = useState33("");
+  const [debouncedQuery, setDebouncedQuery] = useState33("");
+  const [results, setResults] = useState33([]);
+  const [selectedIndex, setSelectedIndex] = useState33(0);
   const t12 = {
     placeholder: translations.placeholder || "Search resources, entities...",
     searching: translations.searching || "Searching...",
@@ -53016,7 +53061,7 @@ function SearchModal({
     enter: translations.enter || "Enter",
     esc: translations.esc || "ESC"
   };
-  useEffect40(() => {
+  useEffect41(() => {
     const timer = setTimeout(() => {
       setDebouncedQuery(query);
     }, 300);
@@ -53024,7 +53069,7 @@ function SearchModal({
   }, [query]);
   const searchData = { resources: [], entities: [] };
   const loading = false;
-  useEffect40(() => {
+  useEffect41(() => {
     if (isOpen) {
       setQuery("");
       setDebouncedQuery("");
@@ -53032,7 +53077,7 @@ function SearchModal({
       setSelectedIndex(0);
     }
   }, [isOpen]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (!debouncedQuery.trim()) {
       setResults([]);
       return;
@@ -53163,7 +53208,7 @@ function SearchModal({
 }
 
 // src/components/modals/ResourceSearchModal.tsx
-import { useState as useState33, useEffect as useEffect41, Fragment as Fragment14 } from "react";
+import { useState as useState34, useEffect as useEffect42, Fragment as Fragment14 } from "react";
 import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 function ResourceSearchModal({
   isOpen,
@@ -53173,8 +53218,8 @@ function ResourceSearchModal({
   translations = {}
 }) {
   const { announceSearchResults, announceSearching, announceNavigation } = useSearchAnnouncements2();
-  const [search2, setSearch] = useState33(searchTerm);
-  const [debouncedSearch, setDebouncedSearch] = useState33(searchTerm);
+  const [search2, setSearch] = useState34(searchTerm);
+  const [debouncedSearch, setDebouncedSearch] = useState34(searchTerm);
   const t12 = {
     title: translations.title || "Search Resources",
     placeholder: translations.placeholder || "Search for resources...",
@@ -53182,7 +53227,7 @@ function ResourceSearchModal({
     noResults: translations.noResults || "No documents found",
     close: translations.close || "\u2715"
   };
-  useEffect41(() => {
+  useEffect42(() => {
     const timer = setTimeout(() => {
       setDebouncedSearch(search2);
     }, 300);
@@ -53204,17 +53249,17 @@ function ResourceSearchModal({
       mediaType
     };
   }) || [];
-  useEffect41(() => {
+  useEffect42(() => {
     if (!loading && debouncedSearch) {
       announceSearchResults(results.length, debouncedSearch);
     }
   }, [loading, results.length, debouncedSearch]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (loading && debouncedSearch) {
       announceSearching();
     }
   }, [loading, debouncedSearch]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (isOpen && searchTerm) {
       setSearch(searchTerm);
       setDebouncedSearch(searchTerm);
@@ -53418,11 +53463,11 @@ function SessionTimer() {
 }
 
 // src/components/SessionExpiryBanner.tsx
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
 function SessionExpiryBanner() {
   const { timeRemaining, isExpiringSoon } = useSessionExpiry();
-  const [dismissed, setDismissed] = useState34(false);
+  const [dismissed, setDismissed] = useState35(false);
   const formattedTime = formatTime(timeRemaining);
   if (!isExpiringSoon || dismissed || !formattedTime) {
     return null;
@@ -53643,7 +53688,7 @@ function UnifiedHeader({
 }
 
 // src/components/layout/LeftSidebar.tsx
-import { useState as useState35, useEffect as useEffect42 } from "react";
+import { useState as useState36, useEffect as useEffect43 } from "react";
 import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
 function LeftSidebar({
   Link,
@@ -53658,7 +53703,7 @@ function LeftSidebar({
   isModerator = false,
   currentPath
 }) {
-  const [isCollapsed, setIsCollapsed] = useState35(false);
+  const [isCollapsed, setIsCollapsed] = useState36(false);
   const { width, setWidth, minWidth, maxWidth } = usePanelWidth({
     defaultWidth: 256,
     // 16rem
@@ -53668,7 +53713,7 @@ function LeftSidebar({
     // 25rem
     storageKey: "semiont-left-sidebar-width"
   });
-  useEffect42(() => {
+  useEffect43(() => {
     if (collapsible) {
       const saved = localStorage.getItem(storageKey);
       if (saved === "true") {
@@ -54715,21 +54760,21 @@ var ForwardRef17 = /* @__PURE__ */ React44.forwardRef(UserCircleIcon);
 var UserCircleIcon_default = ForwardRef17;
 
 // src/hooks/usePanelBrowse.ts
-import { useState as useState36, useCallback as useCallback31, useEffect as useEffect43 } from "react";
+import { useState as useState37, useCallback as useCallback32, useEffect as useEffect44 } from "react";
 var COMMON_PANELS = ["user", "settings"];
 var RESOURCE_PANELS = ["history", "info", "annotations", "collaboration", "jsonld"];
 var tabGenerationCounter = 0;
 function usePanelBrowse() {
-  const [activePanel, setActivePanel] = useState36(() => {
+  const [activePanel, setActivePanel] = useState37(() => {
     if (typeof window !== "undefined") {
       const saved = localStorage.getItem("activeToolbarPanel");
       return saved || null;
     }
     return null;
   });
-  const [scrollToAnnotationId, setScrollToAnnotationId] = useState36(null);
-  const [panelInitialTab, setPanelInitialTab] = useState36(null);
-  useEffect43(() => {
+  const [scrollToAnnotationId, setScrollToAnnotationId] = useState37(null);
+  const [panelInitialTab, setPanelInitialTab] = useState37(null);
+  useEffect44(() => {
     if (typeof window === "undefined") return;
     if (activePanel) {
       localStorage.setItem("activeToolbarPanel", activePanel);
@@ -54737,13 +54782,13 @@ function usePanelBrowse() {
       localStorage.removeItem("activeToolbarPanel");
     }
   }, [activePanel]);
-  const handleScrollCompleted = useCallback31(() => {
+  const handleScrollCompleted = useCallback32(() => {
     setScrollToAnnotationId(null);
   }, []);
-  const handlePanelToggle = useCallback31(({ panel }) => {
+  const handlePanelToggle = useCallback32(({ panel }) => {
     setActivePanel((current) => current === panel ? null : panel);
   }, []);
-  const handlePanelOpen = useCallback31(({ panel, scrollToAnnotationId: scrollTarget, motivation }) => {
+  const handlePanelOpen = useCallback32(({ panel, scrollToAnnotationId: scrollTarget, motivation }) => {
     if (scrollTarget) {
       setScrollToAnnotationId(scrollTarget);
     }
@@ -54760,7 +54805,7 @@ function usePanelBrowse() {
     }
     setActivePanel(panel);
   }, []);
-  const handlePanelClose = useCallback31(() => {
+  const handlePanelClose = useCallback32(() => {
     setActivePanel(null);
   }, []);
   useEventSubscriptions({
@@ -54944,7 +54989,7 @@ function AdminSecurityPage({
 }
 
 // src/features/admin-users/components/AdminUsersPage.tsx
-import { useState as useState37 } from "react";
+import { useState as useState38 } from "react";
 import { Fragment as Fragment15, jsx as jsx68, jsxs as jsxs56 } from "react/jsx-runtime";
 function UserTableRow({
   user,
@@ -55026,9 +55071,9 @@ function AdminUsersPage({
   Toolbar: Toolbar2,
   buttonStyles: buttonStyles2
 }) {
-  const [searchTerm, setSearchTerm] = useState37("");
-  const [selectedRole, setSelectedRole] = useState37("all");
-  const [selectedStatus, setSelectedStatus] = useState37("all");
+  const [searchTerm, setSearchTerm] = useState38("");
+  const [selectedRole, setSelectedRole] = useState38("all");
+  const [selectedStatus, setSelectedStatus] = useState38("all");
   const filteredUsers = users.filter((user) => {
     const matchesSearch = (user.name || "").toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase());
     const userRole = user.isAdmin ? "admin" : "user";
@@ -55343,7 +55388,7 @@ function SignInForm({
 }
 
 // src/features/auth/components/SignUpForm.tsx
-import { useState as useState38 } from "react";
+import { useState as useState39 } from "react";
 import { jsx as jsx70, jsxs as jsxs58 } from "react/jsx-runtime";
 function GoogleIcon2() {
   return /* @__PURE__ */ jsxs58("svg", { className: "semiont-icon semiont-icon--small semiont-icon--inline", viewBox: "0 0 24 24", children: [
@@ -55378,7 +55423,7 @@ function GoogleIcon2() {
   ] });
 }
 function SignUpForm({ onSignUp, Link, translations: t12 }) {
-  const [isLoading, setIsLoading] = useState38(false);
+  const [isLoading, setIsLoading] = useState39(false);
   const handleSignUp = async () => {
     setIsLoading(true);
     try {
@@ -55835,7 +55880,7 @@ function TagSchemasPage({
 }
 
 // src/features/resource-compose/components/ResourceComposePage.tsx
-import { useState as useState39, useEffect as useEffect44 } from "react";
+import { useState as useState40, useEffect as useEffect45 } from "react";
 import { isImageMimeType, isPdfMimeType as isPdfMimeType4, LOCALES as LOCALES2 } from "@semiont/api-client";
 import { jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
 function ResourceComposePage({
@@ -55855,19 +55900,19 @@ function ResourceComposePage({
   Toolbar: Toolbar2
 }) {
   const { announceFormSubmitting, announceFormSuccess, announceFormError } = useFormAnnouncements();
-  const [newResourceName, setNewResourceName] = useState39("");
-  const [newResourceContent, setNewResourceContent] = useState39("");
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState39([]);
-  const [isCreating, setIsCreating] = useState39(false);
-  const [inputMethod, setInputMethod] = useState39("write");
-  const [uploadedFile, setUploadedFile] = useState39(null);
-  const [fileMimeType, setFileMimeType] = useState39("text/markdown");
-  const [filePreviewUrl, setFilePreviewUrl] = useState39(null);
-  const [selectedFormat, setSelectedFormat] = useState39("text/markdown");
-  const [selectedLanguage, setSelectedLanguage] = useState39(initialLocale);
-  const [selectedCharset, setSelectedCharset] = useState39("");
-  const [archiveOriginal, setArchiveOriginal] = useState39(true);
-  useEffect44(() => {
+  const [newResourceName, setNewResourceName] = useState40("");
+  const [newResourceContent, setNewResourceContent] = useState40("");
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState40([]);
+  const [isCreating, setIsCreating] = useState40(false);
+  const [inputMethod, setInputMethod] = useState40("write");
+  const [uploadedFile, setUploadedFile] = useState40(null);
+  const [fileMimeType, setFileMimeType] = useState40("text/markdown");
+  const [filePreviewUrl, setFilePreviewUrl] = useState40(null);
+  const [selectedFormat, setSelectedFormat] = useState40("text/markdown");
+  const [selectedLanguage, setSelectedLanguage] = useState40(initialLocale);
+  const [selectedCharset, setSelectedCharset] = useState40("");
+  const [archiveOriginal, setArchiveOriginal] = useState40(true);
+  useEffect45(() => {
     if (mode === "clone" && cloneData) {
       setNewResourceName(cloneData.sourceResource.name);
       setNewResourceContent(cloneData.sourceContent);
@@ -55900,7 +55945,7 @@ function ResourceComposePage({
       reader.readAsText(file);
     }
   };
-  useEffect44(() => {
+  useEffect45(() => {
     return () => {
       if (filePreviewUrl) {
         URL.revokeObjectURL(filePreviewUrl);
@@ -56249,7 +56294,7 @@ function ResourceComposePage({
 }
 
 // src/features/resource-discovery/components/ResourceDiscoveryPage.tsx
-import { useState as useState40, useCallback as useCallback32, useRef as useRef31 } from "react";
+import { useState as useState41, useCallback as useCallback33, useRef as useRef32 } from "react";
 import { getResourceId as getResourceId2 } from "@semiont/api-client";
 
 // src/features/resource-discovery/components/ResourceCard.tsx
@@ -56322,8 +56367,8 @@ function ResourceDiscoveryPage({
   translations: t12,
   ToolbarPanels
 }) {
-  const [searchQuery2, setSearchQuery] = useState40("");
-  const [selectedEntityType, setSelectedEntityType] = useState40("");
+  const [searchQuery2, setSearchQuery] = useState41("");
+  const [selectedEntityType, setSelectedEntityType] = useState41("");
   const hasSearchQuery = searchQuery2.trim() !== "";
   const hasSearchResults = searchDocuments.length > 0;
   const baseDocuments = hasSearchResults ? searchDocuments : recentDocuments;
@@ -56340,18 +56385,18 @@ function ResourceDiscoveryPage({
     { orientation: "grid", cols: 2 }
     // 2 columns on medium+ screens
   );
-  const onNavigateToResourceRef = useRef31(onNavigateToResource);
+  const onNavigateToResourceRef = useRef32(onNavigateToResource);
   onNavigateToResourceRef.current = onNavigateToResource;
-  const handleEntityTypeFilter = useCallback32((entityType3) => {
+  const handleEntityTypeFilter = useCallback33((entityType3) => {
     setSelectedEntityType(entityType3);
   }, []);
-  const openResource = useCallback32((resource) => {
+  const openResource = useCallback33((resource) => {
     const resourceId = getResourceId2(resource);
     if (resourceId) {
       onNavigateToResourceRef.current(resourceId);
     }
   }, []);
-  const handleSearchSubmit = useCallback32((e6) => {
+  const handleSearchSubmit = useCallback33((e6) => {
     e6.preventDefault();
   }, []);
   if (isLoadingRecent) {
@@ -56483,42 +56528,42 @@ function ResourceDiscoveryPage({
 }
 
 // src/features/resource-viewer/components/ResourceViewerPage.tsx
-import { useState as useState45, useEffect as useEffect49, useCallback as useCallback36, useMemo as useMemo14 } from "react";
-import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useState as useState46, useEffect as useEffect50, useCallback as useCallback37, useMemo as useMemo14 } from "react";
+import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
 import { resourceAnnotationUri as resourceAnnotationUri3 } from "@semiont/core";
 import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType as getPrimaryMediaType2 } from "@semiont/api-client";
 import { uriToAnnotationId as uriToAnnotationId2 } from "@semiont/core";
 
 // src/hooks/useBindFlow.ts
-import { useCallback as useCallback33, useEffect as useEffect45, useRef as useRef32, useState as useState41 } from "react";
-import { resourceAnnotationUri, accessToken as accessToken3 } from "@semiont/core";
+import { useCallback as useCallback34, useEffect as useEffect46, useRef as useRef33, useState as useState42 } from "react";
+import { resourceAnnotationUri, accessToken as accessToken4 } from "@semiont/core";
 import { uriToAnnotationIdOrPassthrough } from "@semiont/core";
 function toAccessToken2(token) {
-  return token ? accessToken3(token) : void 0;
+  return token ? accessToken4(token) : void 0;
 }
 function useBindFlow(rUri) {
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
   const { showError } = useToast();
-  const [searchModalOpen, setSearchModalOpen] = useState41(false);
-  const [pendingReferenceId, setPendingReferenceId] = useState41(null);
-  const onCloseSearchModal = useCallback33(() => {
+  const [searchModalOpen, setSearchModalOpen] = useState42(false);
+  const [pendingReferenceId, setPendingReferenceId] = useState42(null);
+  const onCloseSearchModal = useCallback34(() => {
     setSearchModalOpen(false);
   }, []);
-  const rUriRef = useRef32(rUri);
-  useEffect45(() => {
+  const rUriRef = useRef33(rUri);
+  useEffect46(() => {
     rUriRef.current = rUri;
   });
-  const clientRef = useRef32(client);
-  useEffect45(() => {
+  const clientRef = useRef33(client);
+  useEffect46(() => {
     clientRef.current = client;
   });
-  const tokenRef = useRef32(token);
-  useEffect45(() => {
+  const tokenRef = useRef33(token);
+  useEffect46(() => {
     tokenRef.current = token;
   });
-  useEffect45(() => {
+  useEffect46(() => {
     const handleAnnotationUpdateBody = async (event) => {
       try {
         const annotationIdSegment = uriToAnnotationIdOrPassthrough(event.annotationUri);
@@ -56546,7 +56591,7 @@ function useBindFlow(rUri) {
       subscription2.unsubscribe();
     };
   }, [eventBus]);
-  useEffect45(() => {
+  useEffect46(() => {
     const handleResolutionSearchRequested = (event) => {
       setPendingReferenceId(event.referenceId);
       setSearchModalOpen(true);
@@ -56561,31 +56606,31 @@ function useBindFlow(rUri) {
 }
 
 // src/hooks/useMarkFlow.ts
-import { useState as useState42, useRef as useRef33, useEffect as useEffect46, useCallback as useCallback34 } from "react";
-import { resourceAnnotationUri as resourceAnnotationUri2, accessToken as accessToken4, entityType as entityType2 } from "@semiont/core";
+import { useState as useState43, useRef as useRef34, useEffect as useEffect47, useCallback as useCallback35 } from "react";
+import { resourceAnnotationUri as resourceAnnotationUri2, accessToken as accessToken5, entityType as entityType2, annotationId } from "@semiont/core";
 import { uriToAnnotationIdOrPassthrough as uriToAnnotationIdOrPassthrough2 } from "@semiont/core";
 function toAccessToken3(token) {
-  return token ? accessToken4(token) : void 0;
+  return token ? accessToken5(token) : void 0;
 }
 function useMarkFlow(rUri) {
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
   const { showSuccess, showError, showInfo } = useToast();
-  const clientRef = useRef33(client);
-  const rUriRef = useRef33(rUri);
-  const tokenRef = useRef33(token);
-  useEffect46(() => {
+  const clientRef = useRef34(client);
+  const rUriRef = useRef34(rUri);
+  const tokenRef = useRef34(token);
+  useEffect47(() => {
     clientRef.current = client;
   });
-  useEffect46(() => {
+  useEffect47(() => {
     rUriRef.current = rUri;
   });
-  useEffect46(() => {
+  useEffect47(() => {
     tokenRef.current = token;
   });
-  const [pendingAnnotation, setPendingAnnotation] = useState42(null);
-  const handleAnnotationRequested = useCallback34((pending) => {
+  const [pendingAnnotation, setPendingAnnotation] = useState43(null);
+  const handleAnnotationRequested = useCallback35((pending) => {
     const MOTIVATION_TO_TAB = {
       highlighting: "annotations",
       commenting: "annotations",
@@ -56604,7 +56649,7 @@ function useMarkFlow(rUri) {
     eventBus.get("browse:panel-open").next({ panel: MOTIVATION_TO_TAB[pending.motivation] || "annotations" });
     setPendingAnnotation(pending);
   }, []);
-  const selectionToSelector = useCallback34((selection2) => {
+  const selectionToSelector = useCallback35((selection2) => {
     if (selection2.svgSelector) {
       return {
         type: "SvgSelector",
@@ -56636,29 +56681,29 @@ function useMarkFlow(rUri) {
       ...selection2.suffix && { suffix: selection2.suffix }
     };
   }, []);
-  const handleCommentRequested = useCallback34((selection2) => {
+  const handleCommentRequested = useCallback35((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "commenting" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleTagRequested = useCallback34((selection2) => {
+  const handleTagRequested = useCallback35((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "tagging" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleAssessmentRequested = useCallback34((selection2) => {
+  const handleAssessmentRequested = useCallback35((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "assessing" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleReferenceRequested = useCallback34((selection2) => {
+  const handleReferenceRequested = useCallback35((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "linking" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleAnnotationCancelPending = useCallback34(() => {
+  const handleAnnotationCancelPending = useCallback35(() => {
     setPendingAnnotation(null);
   }, []);
-  const [assistingMotivation, setAssistingMotivation] = useState42(null);
-  const [progress, setProgress] = useState42(null);
-  const assistStreamRef = useRef33(null);
-  const progressDismissTimeoutRef = useRef33(null);
-  const handleMarkProgress = useCallback34((chunk) => {
+  const [assistingMotivation, setAssistingMotivation] = useState43(null);
+  const [progress, setProgress] = useState43(null);
+  const assistStreamRef = useRef34(null);
+  const progressDismissTimeoutRef = useRef34(null);
+  const handleMarkProgress = useCallback35((chunk) => {
     setProgress(chunk);
   }, []);
-  const handleAnnotationComplete = useCallback34((event) => {
+  const handleAnnotationComplete = useCallback35((event) => {
     setAssistingMotivation((prev) => {
       if (!event.motivation || event.motivation !== prev) return prev;
       return null;
@@ -56672,7 +56717,7 @@ function useMarkFlow(rUri) {
       progressDismissTimeoutRef.current = null;
     }, 5e3);
   }, [showSuccess]);
-  const handleAnnotationFailed = useCallback34((event) => {
+  const handleAnnotationFailed = useCallback35((event) => {
     if (progressDismissTimeoutRef.current) {
       clearTimeout(progressDismissTimeoutRef.current);
       progressDismissTimeoutRef.current = null;
@@ -56682,15 +56727,15 @@ function useMarkFlow(rUri) {
     const errorMessage = event.payload.error || "Annotation failed";
     showError(errorMessage);
   }, [showError]);
-  const handleProgressDismiss = useCallback34(() => {
+  const handleProgressDismiss = useCallback35(() => {
     if (progressDismissTimeoutRef.current) {
       clearTimeout(progressDismissTimeoutRef.current);
       progressDismissTimeoutRef.current = null;
     }
     setProgress(null);
   }, []);
-  useEffect46(() => {
-    const handleAnnotationCreate = async (event) => {
+  useEffect47(() => {
+    const handleAnnotationSubmit = async (event) => {
       const currentClient = clientRef.current;
       const currentRUri = rUriRef.current;
       if (!currentClient || !currentRUri) return;
@@ -56703,10 +56748,9 @@ function useMarkFlow(rUri) {
           },
           body: event.body
         }, { auth: toAccessToken3(tokenRef.current) });
-        if (result.annotation) {
-          setPendingAnnotation(null);
-          eventBus.get("mark:created").next({ annotation: result.annotation });
-        }
+        setPendingAnnotation(null);
+        const idSegment = uriToAnnotationIdOrPassthrough2(result.annotationId);
+        eventBus.get("mark:created").next({ annotationId: annotationId(idSegment) });
       } catch (error) {
         console.error("Failed to create annotation:", error);
         eventBus.get("mark:create-failed").next({ error });
@@ -56789,7 +56833,7 @@ function useMarkFlow(rUri) {
         assistStreamRef.current = null;
       }
     };
-    const subscription1 = eventBus.get("mark:create").subscribe(handleAnnotationCreate);
+    const subscription1 = eventBus.get("mark:submit").subscribe(handleAnnotationSubmit);
     const subscription2 = eventBus.get("mark:delete").subscribe(handleAnnotationDelete);
     const subscription3 = eventBus.get("mark:assist-request").subscribe(handleAssistStart);
     const subscription4 = eventBus.get("job:cancel-requested").subscribe(handleJobCancelRequested);
@@ -56819,7 +56863,7 @@ function useMarkFlow(rUri) {
     "mark:create-failed": ({ error }) => showError(`Failed to create annotation: ${error.message}`),
     "mark:delete-failed": ({ error }) => showError(`Failed to delete annotation: ${error.message}`)
   });
-  useEffect46(() => {
+  useEffect47(() => {
     return () => {
       if (progressDismissTimeoutRef.current) {
         clearTimeout(progressDismissTimeoutRef.current);
@@ -56835,38 +56879,38 @@ function useMarkFlow(rUri) {
 }
 
 // src/hooks/useYieldFlow.ts
-import { useState as useState43, useCallback as useCallback35, useEffect as useEffect47, useRef as useRef34 } from "react";
-import { annotationUri, accessToken as accessToken5 } from "@semiont/core";
+import { useState as useState44, useCallback as useCallback36, useEffect as useEffect48, useRef as useRef35 } from "react";
+import { annotationUri, accessToken as accessToken6 } from "@semiont/core";
 function toAccessToken4(token) {
-  return token ? accessToken5(token) : void 0;
+  return token ? accessToken6(token) : void 0;
 }
 function useYieldFlow(locale, resourceId, clearNewAnnotationId) {
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
   const { showSuccess, showError } = useToast();
-  const clientRef = useRef34(client);
-  const tokenRef = useRef34(token);
-  useEffect47(() => {
+  const clientRef = useRef35(client);
+  const tokenRef = useRef35(token);
+  useEffect48(() => {
     clientRef.current = client;
   });
-  useEffect47(() => {
+  useEffect48(() => {
     tokenRef.current = token;
   });
-  const generationStreamRef = useRef34(null);
-  const [isGenerating, setIsGenerating] = useState43(false);
-  const [generationProgress, setYieldProgress] = useState43(null);
-  const handleProgressEvent = useCallback35((chunk) => {
+  const generationStreamRef = useRef35(null);
+  const [isGenerating, setIsGenerating] = useState44(false);
+  const [generationProgress, setYieldProgress] = useState44(null);
+  const handleProgressEvent = useCallback36((chunk) => {
     setYieldProgress(chunk);
     setIsGenerating(true);
   }, []);
-  const clearProgress = useCallback35(() => {
+  const clearProgress = useCallback36(() => {
     setYieldProgress(null);
   }, []);
-  const [generationModalOpen, setGenerationModalOpen] = useState43(false);
-  const [generationReferenceId, setGenerationReferenceId] = useState43(null);
-  const [generationDefaultTitle, setGenerationDefaultTitle] = useState43("");
-  const handleGenerateDocument = useCallback35((referenceId, options) => {
+  const [generationModalOpen, setGenerationModalOpen] = useState44(false);
+  const [generationReferenceId, setGenerationReferenceId] = useState44(null);
+  const [generationDefaultTitle, setGenerationDefaultTitle] = useState44("");
+  const handleGenerateDocument = useCallback36((referenceId, options) => {
     if (!options.context) {
       setGenerationReferenceId(referenceId);
       setGenerationDefaultTitle(options.title);
@@ -56887,16 +56931,16 @@ function useYieldFlow(locale, resourceId, clearNewAnnotationId) {
       }
     });
   }, [resourceId, clearNewAnnotationId, locale]);
-  const handleCloseGenerationModal = useCallback35(() => {
+  const handleCloseGenerationModal = useCallback36(() => {
     setGenerationModalOpen(false);
   }, []);
-  const handleGenerationModalOpen = useCallback35(({ annotationUri: annUri, resourceUri: resourceUri2, defaultTitle }) => {
+  const handleGenerationModalOpen = useCallback36(({ annotationUri: annUri, resourceUri: resourceUri2, defaultTitle }) => {
     setGenerationReferenceId(annUri);
     setGenerationDefaultTitle(defaultTitle);
     setGenerationModalOpen(true);
     eventBus.get("gather:requested").next({ annotationUri: annUri, resourceUri: resourceUri2 });
   }, []);
-  const handleGenerationComplete = useCallback35((progress) => {
+  const handleGenerationComplete = useCallback36((progress) => {
     setYieldProgress(progress);
     setIsGenerating(false);
     if (progress.resourceName) {
@@ -56906,12 +56950,12 @@ function useYieldFlow(locale, resourceId, clearNewAnnotationId) {
     }
     setTimeout(() => clearProgress(), 2e3);
   }, [showSuccess, clearProgress]);
-  const handleGenerationFailed = useCallback35(({ error }) => {
+  const handleGenerationFailed = useCallback36(({ error }) => {
     setYieldProgress(null);
     setIsGenerating(false);
     showError(`Resource generation failed: ${error.message}`);
   }, [showError]);
-  useEffect47(() => {
+  useEffect48(() => {
     const handleGenerationStart = async (event) => {
       try {
         generationStreamRef.current?.abort();
@@ -56974,26 +57018,26 @@ function useYieldFlow(locale, resourceId, clearNewAnnotationId) {
 }
 
 // src/hooks/useContextGatherFlow.ts
-import { useState as useState44, useEffect as useEffect48, useRef as useRef35 } from "react";
-import { accessToken as accessToken6 } from "@semiont/core";
+import { useState as useState45, useEffect as useEffect49, useRef as useRef36 } from "react";
+import { accessToken as accessToken7 } from "@semiont/core";
 function toAccessToken5(token) {
-  return token ? accessToken6(token) : void 0;
+  return token ? accessToken7(token) : void 0;
 }
 function useContextGatherFlow(eventBus, config) {
   const token = useAuthToken();
-  const [gatherContext, setCorrelationContext] = useState44(null);
-  const [gatherLoading, setCorrelationLoading] = useState44(false);
-  const [gatherError, setCorrelationError] = useState44(null);
-  const [gatherAnnotationUri, setCorrelationAnnotationUri] = useState44(null);
-  const configRef = useRef35(config);
-  const tokenRef = useRef35(token);
-  useEffect48(() => {
+  const [gatherContext, setCorrelationContext] = useState45(null);
+  const [gatherLoading, setCorrelationLoading] = useState45(false);
+  const [gatherError, setCorrelationError] = useState45(null);
+  const [gatherAnnotationUri, setCorrelationAnnotationUri] = useState45(null);
+  const configRef = useRef36(config);
+  const tokenRef = useRef36(token);
+  useEffect49(() => {
     configRef.current = config;
   });
-  useEffect48(() => {
+  useEffect49(() => {
     tokenRef.current = token;
   });
-  useEffect48(() => {
+  useEffect49(() => {
     const handleGatherRequested = async (event) => {
       setCorrelationLoading(true);
       setCorrelationError(null);
@@ -57001,21 +57045,19 @@ function useContextGatherFlow(eventBus, config) {
       setCorrelationAnnotationUri(event.annotationUri);
       try {
         const { client } = configRef.current;
-        const annotationId = event.annotationUri.split("/").pop() || "";
+        const annotationId2 = event.annotationUri.split("/").pop() || "";
         const response = await client.getAnnotationLLMContext(
           event.resourceUri,
-          annotationId,
+          annotationId2,
           { contextWindow: 2e3, auth: toAccessToken5(tokenRef.current) }
         );
         const context = response.context ?? null;
         setCorrelationContext(context);
         setCorrelationLoading(false);
-        if (context) {
-          eventBus.get("gather:complete").next({
-            annotationUri: event.annotationUri,
-            context
-          });
-        }
+        eventBus.get("gather:complete").next({
+          annotationUri: event.annotationUri,
+          response
+        });
       } catch (error) {
         const err = error;
         setCorrelationError(err);
@@ -57047,7 +57089,7 @@ function ResourceViewerPage({
 }) {
   const eventBus = useEventBus();
   const client = useApiClient();
-  const queryClient = useQueryClient2();
+  const queryClient = useQueryClient3();
   const { showError, showSuccess } = useToast();
   const { theme: theme2, setTheme } = useTheme();
   const { showLineNumbers, toggleLineNumbers } = useLineNumbers();
@@ -57086,7 +57128,7 @@ function ResourceViewerPage({
     },
     500
   );
-  useEffect49(() => {
+  useEffect50(() => {
     if (resource && rUri) {
       const resourceIdSegment = rUri.split("/").pop() || "";
       const mediaType = getPrimaryMediaType2(resource);
@@ -57100,13 +57142,13 @@ function ResourceViewerPage({
     rUri,
     autoConnect: true,
     // Annotation events - use debounced invalidation to batch rapid updates
-    onAnnotationAdded: useCallback36((_event) => {
+    onAnnotationAdded: useCallback37((_event) => {
       debouncedInvalidateAnnotations();
     }, [debouncedInvalidateAnnotations]),
-    onAnnotationRemoved: useCallback36((_event) => {
+    onAnnotationRemoved: useCallback37((_event) => {
       debouncedInvalidateAnnotations();
     }, [debouncedInvalidateAnnotations]),
-    onAnnotationBodyUpdated: useCallback36((event) => {
+    onAnnotationBodyUpdated: useCallback37((event) => {
       queryClient.setQueryData(QUERY_KEYS.resources.annotations(rUri), (old) => {
         if (!old) return old;
         return {
@@ -57143,32 +57185,32 @@ function ResourceViewerPage({
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
     }, [queryClient, rUri]),
     // Document status events
-    onDocumentArchived: useCallback36((_event) => {
+    onDocumentArchived: useCallback37((_event) => {
       refetchDocument();
       showSuccess("This document has been archived");
       debouncedInvalidateAnnotations();
     }, [refetchDocument, showSuccess, debouncedInvalidateAnnotations]),
-    onDocumentUnarchived: useCallback36((_event) => {
+    onDocumentUnarchived: useCallback37((_event) => {
       refetchDocument();
       showSuccess("This document has been unarchived");
       debouncedInvalidateAnnotations();
     }, [refetchDocument, showSuccess, debouncedInvalidateAnnotations]),
     // Entity tag events
-    onEntityTagAdded: useCallback36((_event) => {
+    onEntityTagAdded: useCallback37((_event) => {
       refetchDocument();
       debouncedInvalidateAnnotations();
     }, [refetchDocument, debouncedInvalidateAnnotations]),
-    onEntityTagRemoved: useCallback36((_event) => {
+    onEntityTagRemoved: useCallback37((_event) => {
       refetchDocument();
       debouncedInvalidateAnnotations();
     }, [refetchDocument, debouncedInvalidateAnnotations]),
-    onError: useCallback36((error) => {
+    onError: useCallback37((error) => {
       console.error("[RealTime] Event stream error:", error);
     }, [])
   });
   const updateMutation = resources.update.useMutation();
   const generateCloneTokenMutation = resources.generateCloneToken.useMutation();
-  const handleResourceArchive = useCallback36(async () => {
+  const handleResourceArchive = useCallback37(async () => {
     try {
       await updateMutation.mutateAsync({ rUri, data: { archived: true } });
       await refetchDocument();
@@ -57177,7 +57219,7 @@ function ResourceViewerPage({
       showError("Failed to archive document");
     }
   }, [updateMutation, rUri, refetchDocument, showError]);
-  const handleResourceUnarchive = useCallback36(async () => {
+  const handleResourceUnarchive = useCallback37(async () => {
     try {
       await updateMutation.mutateAsync({ rUri, data: { archived: false } });
       await refetchDocument();
@@ -57186,7 +57228,7 @@ function ResourceViewerPage({
       showError("Failed to unarchive document");
     }
   }, [updateMutation, rUri, refetchDocument, showError]);
-  const handleResourceClone = useCallback36(async () => {
+  const handleResourceClone = useCallback37(async () => {
     try {
       const result = await generateCloneTokenMutation.mutateAsync(rUri);
       const token = result.token;
@@ -57196,44 +57238,48 @@ function ResourceViewerPage({
       showError("Failed to generate clone link");
     }
   }, [generateCloneTokenMutation, rUri, showError]);
-  const handleAnnotationSparkle = useCallback36(({ annotationId }) => {
-    triggerSparkleAnimation(annotationId);
+  const handleAnnotationSparkle = useCallback37(({ annotationId: annotationId2 }) => {
+    triggerSparkleAnimation(annotationId2);
   }, [triggerSparkleAnimation]);
-  const handleAnnotationAdded = useCallback36((event) => {
+  const handleAnnotationAdded = useCallback37((event) => {
     triggerSparkleAnimation(event.payload.annotation.id);
     debouncedInvalidateAnnotations();
   }, [triggerSparkleAnimation, debouncedInvalidateAnnotations]);
-  const handleAnnotationCreateFailed = useCallback36(() => showError("Failed to create annotation"), [showError]);
-  const handleAnnotationDeleteFailed = useCallback36(() => showError("Failed to delete annotation"), [showError]);
-  const handleAnnotateBodyUpdated = useCallback36(() => {
+  const handleAnnotationCreateFailed = useCallback37(() => showError("Failed to create annotation"), [showError]);
+  const handleAnnotationDeleteFailed = useCallback37(() => showError("Failed to delete annotation"), [showError]);
+  const handleAnnotateBodyUpdated = useCallback37(() => {
   }, []);
-  const handleAnnotateBodyUpdateFailed = useCallback36(() => showError("Failed to update annotation"), [showError]);
-  const handleSettingsThemeChanged = useCallback36(({ theme: theme3 }) => setTheme(theme3), [setTheme]);
-  const handleDetectionComplete = useCallback36(() => {
+  const handleAnnotateBodyUpdateFailed = useCallback37(() => showError("Failed to update annotation"), [showError]);
+  const handleSettingsThemeChanged = useCallback37(({ theme: theme3 }) => setTheme(theme3), [setTheme]);
+  const handleDetectionComplete = useCallback37(() => {
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
   }, [queryClient, rUri]);
-  const handleDetectionFailed = useCallback36(() => {
+  const handleDetectionFailed = useCallback37(() => {
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
   }, [queryClient, rUri]);
-  const handleGenerationComplete = useCallback36(() => {
+  const handleGenerationComplete = useCallback37(() => {
   }, []);
-  const handleGenerationFailed = useCallback36(() => {
+  const handleGenerationFailed = useCallback37(() => {
   }, []);
-  const handleReferenceNavigate = useCallback36(({ documentId }) => {
+  const handleReferenceNavigate = useCallback37(({ documentId }) => {
     if (routes.resource) {
       const path2 = routes.resource.replace("[resourceId]", encodeURIComponent(documentId));
       eventBus.get("browse:router-push").next({ path: path2, reason: "reference-link" });
     }
   }, [routes.resource]);
-  const handleEntityTypeClicked = useCallback36(({ entityType: entityType3 }) => {
+  const handleEntityTypeClicked = useCallback37(({ entityType: entityType3 }) => {
     if (routes.know) {
       const path2 = `${routes.know}?entityType=${encodeURIComponent(entityType3)}`;
       eventBus.get("browse:router-push").next({ path: path2, reason: "entity-type-filter" });
     }
   }, [routes.know]);
+  const handleModeToggled = useCallback37(() => {
+    setAnnotateMode((prev) => !prev);
+  }, []);
   useEventSubscriptions({
+    "mark:mode-toggled": handleModeToggled,
     "mark:archive": handleResourceArchive,
     "mark:unarchive": handleResourceUnarchive,
     "yield:clone": handleResourceClone,
@@ -57257,7 +57303,7 @@ function ResourceViewerPage({
     announceResourceLoading,
     announceResourceLoaded
   } = useResourceLoadingAnnouncements();
-  useEffect49(() => {
+  useEffect50(() => {
     if (contentLoading) {
       announceResourceLoading(resource.name);
     } else if (content4) {
@@ -57268,7 +57314,7 @@ function ResourceViewerPage({
   const primaryRep = getPrimaryRepresentation(resource);
   const primaryMediaType = primaryRep?.mediaType;
   const primaryByteSize = primaryRep?.byteSize;
-  const [annotateMode, _setAnnotateMode] = useState45(() => {
+  const [annotateMode, setAnnotateMode] = useState46(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("annotateMode") === "true";
     }
@@ -57294,12 +57340,12 @@ function ResourceViewerPage({
     return result;
   }, [annotations]);
   const resourceWithContent = { ...resource, content: content4 };
-  const handleEventHover = useCallback36((annotationId) => {
-    if (annotationId) {
-      eventBus.get("beckon:sparkle").next({ annotationId });
+  const handleEventHover = useCallback37((annotationId2) => {
+    if (annotationId2) {
+      eventBus.get("beckon:sparkle").next({ annotationId: annotationId2 });
     }
   }, []);
-  const handleEventClick = useCallback36((_annotationId) => {
+  const handleEventClick = useCallback37((_annotationId) => {
   }, []);
   return /* @__PURE__ */ jsxs67("div", { className: `semiont-document-viewer${activePanel ? " semiont-document-viewer--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs67("div", { className: "semiont-document-viewer__main", children: [
@@ -57622,6 +57668,7 @@ export {
   useEventSubscription,
   useEventSubscriptions,
   useFormAnnouncements,
+  useGlobalEvents,
   useHealth,
   useHoverDelay,
   useHoverEmitter,