@semiont/react-ui 0.4.7 → 0.4.9

package/dist/index.mjs

@@ -9,7 +9,7 @@ import {
   useEventSubscription,
   useEventSubscriptions,
   useHoverEmitter
-} from "./chunk-XMCUHQ2Y.mjs";
+} from "./chunk-BQJWOK4C.mjs";
 import {
   AVAILABLE_LOCALES,
   OpenResourcesProvider,
@@ -22,15 +22,14 @@ import {
   useSessionContext,
   useToast,
   useTranslations
-} from "./chunk-4RMWYJUJ.mjs";
+} from "./chunk-OL5UST25.mjs";
 import {
   ApiClientProvider,
   EventBusProvider,
-  resetEventBusForTesting,
   useApiClient,
   useEventBus
-} from "./chunk-5JZFKRLW.mjs";
-import "./chunk-PWIVZQ4X.mjs";
+} from "./chunk-HNZOXH4L.mjs";
+import "./chunk-HVMAGUFA.mjs";
 import {
   __commonJS,
   __export,
@@ -541,7 +540,9 @@ import {
   cloneToken,
   entityType,
   userDID,
-  accessToken
+  accessToken,
+  resourceId as resourceIdBrand,
+  annotationId as annotationIdBrand
 } from "@semiont/core";
 import { decodeWithCharset } from "@semiont/api-client";
 
@@ -560,11 +561,12 @@ var QUERY_KEYS = {
     events: (id2) => ["resources", id2, "events"],
     annotations: (id2) => ["resources", id2, "annotations"],
     referencedBy: (id2) => ["resources", id2, "referenced-by"],
-    representation: (id2) => ["resources", id2, "representation"]
+    representation: (id2) => ["resources", id2, "representation"],
+    mediaToken: (id2) => ["resources", id2, "media-token"]
   },
   annotations: {
     detail: (id2) => ["annotations", id2],
-    history: (resourceId2, annotationId4) => ["annotations", resourceId2, annotationId4, "history"]
+    history: (resourceId2, annotationId3) => ["annotations", resourceId2, annotationId3, "history"]
   },
   entityTypes: {
     all: () => ["entity-types"]
@@ -586,8 +588,8 @@ function toAccessToken(token) {
 }
 function useResources() {
   const client = useApiClient();
-  const queryClient = useQueryClient();
   const token = useAuthToken();
+  const eventBus = useEventBus();
   return {
     list: {
       useQuery: (options) => useQuery({
@@ -638,6 +640,14 @@ function useResources() {
         enabled: !!client && !!id2 && !!mediaType
       })
     },
+    mediaToken: {
+      useQuery: (id2) => useQuery({
+        queryKey: QUERY_KEYS.resources.mediaToken(id2),
+        queryFn: () => client.getMediaToken(id2, { auth: toAccessToken(token) }),
+        enabled: !!client && !!id2,
+        staleTime: 4 * 60 * 1e3
+      })
+    },
     search: {
       useQuery: (query, limit) => useQuery({
         queryKey: QUERY_KEYS.resources.search(query, limit),
@@ -655,8 +665,9 @@ function useResources() {
             }
             return client.yieldResource(data2, { auth: toAccessToken(token2) });
           },
-          onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: ["documents"] });
+          onSuccess: (result) => {
+            client.stores.resources.invalidateDetail(resourceIdBrand(result.resourceId));
+            client.stores.resources.invalidateLists();
           }
         });
       }
@@ -670,8 +681,7 @@ function useResources() {
             return client.updateResource(id2, data2, { auth: toAccessToken(token2) });
           },
           onSuccess: (_data, variables) => {
-            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.detail(variables.id) });
-            queryClient.invalidateQueries({ queryKey: ["documents"] });
+            eventBus.get("yield:updated").next({ resourceId: variables.id });
           }
         });
       }
@@ -705,8 +715,9 @@ function useResources() {
             if (!client) throw new Error("Not authenticated");
             return client.createResourceFromToken(data2, { auth: toAccessToken(token2) });
           },
-          onSuccess: () => {
-            queryClient.invalidateQueries({ queryKey: ["documents"] });
+          onSuccess: (result) => {
+            client.stores.resources.invalidateDetail(resourceIdBrand(result.resourceId));
+            client.stores.resources.invalidateLists();
           }
         });
       }
@@ -726,17 +737,17 @@ function useAnnotations() {
       })
     },
     browseAnnotation: {
-      useQuery: (resourceId2, annotationId4) => useQuery({
-        queryKey: ["annotations", resourceId2, annotationId4],
-        queryFn: () => client.browseAnnotation(resourceId2, annotationId4, { auth: toAccessToken(token) }),
-        enabled: !!client && !!resourceId2 && !!annotationId4
+      useQuery: (resourceId2, annotationId3) => useQuery({
+        queryKey: ["annotations", resourceId2, annotationId3],
+        queryFn: () => client.browseAnnotation(resourceId2, annotationId3, { auth: toAccessToken(token) }),
+        enabled: !!client && !!resourceId2 && !!annotationId3
       })
     },
     history: {
-      useQuery: (resourceId2, annotationId4) => useQuery({
-        queryKey: QUERY_KEYS.annotations.history(resourceId2, annotationId4),
-        queryFn: () => client.getAnnotationHistory(resourceId2, annotationId4, { auth: toAccessToken(token) }),
-        enabled: !!client && !!resourceId2 && !!annotationId4
+      useQuery: (resourceId2, annotationId3) => useQuery({
+        queryKey: QUERY_KEYS.annotations.history(resourceId2, annotationId3),
+        queryFn: () => client.getAnnotationHistory(resourceId2, annotationId3, { auth: toAccessToken(token) }),
+        enabled: !!client && !!resourceId2 && !!annotationId3
       })
     },
     create: {
@@ -750,8 +761,8 @@ function useAnnotations() {
             if (!client) throw new Error("Not authenticated");
             return client.markAnnotation(resourceId2, data2, { auth: toAccessToken(token2) });
           },
-          onSuccess: (_4, variables) => {
-            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(variables.resourceId) });
+          onSuccess: (result, variables) => {
+            client.stores.annotations.invalidateDetail(annotationIdBrand(result.annotationId));
             queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(variables.resourceId) });
           }
         });
@@ -766,18 +777,8 @@ function useAnnotations() {
             return client.deleteAnnotation(variables.resourceId, variables.annotationId, { auth: toAccessToken(token2) });
           },
           onSuccess: (_4, variables) => {
-            const queryKey = QUERY_KEYS.resources.annotations(variables.resourceId);
-            const currentData = queryClient.getQueryData(queryKey);
-            if (currentData) {
-              queryClient.setQueryData(queryKey, {
-                ...currentData,
-                annotations: currentData.annotations.filter((ann) => ann.id !== variables.annotationId)
-              });
-            } else {
-              queryClient.invalidateQueries({ queryKey });
-            }
+            client.stores.annotations.invalidateDetail(variables.annotationId);
             queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(variables.resourceId) });
-            queryClient.invalidateQueries({ queryKey: ["annotations", variables.annotationId] });
           }
         });
       }
@@ -788,15 +789,15 @@ function useAnnotations() {
         return useMutation({
           mutationFn: ({
             resourceId: resourceId2,
-            annotationId: annotationId4,
+            annotationId: annotationId3,
             data: data2
           }) => {
             if (!client) throw new Error("Not authenticated");
-            return client.bindAnnotation(resourceId2, annotationId4, data2, { auth: toAccessToken(token2) });
+            return client.bindAnnotation(resourceId2, annotationId3, data2, { auth: toAccessToken(token2) });
           },
           onSuccess: (_4, variables) => {
-            queryClient.invalidateQueries({ queryKey: ["annotations", variables.annotationId] });
-            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(variables.resourceId) });
+            client.stores.annotations.invalidateDetail(variables.annotationId);
+            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(variables.resourceId) });
             if (variables.data.operations) {
               for (const op of variables.data.operations) {
                 if (op.op === "add" && op.item && typeof op.item === "object") {
@@ -809,7 +810,6 @@ function useAnnotations() {
                 }
               }
             }
-            queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(variables.resourceId) });
           }
         });
       }
@@ -18274,10 +18274,7 @@ function useResourceEvents({
   const [status, setStatus] = useState5("disconnected");
   const [lastEvent, setLastEvent] = useState5(null);
   const [eventCount, setEventCount] = useState5(0);
-  const streamRef = useRef4(null);
-  const reconnectTimeoutRef = useRef4(null);
-  const reconnectAttemptsRef = useRef4(0);
-  const connectingRef = useRef4(false);
+  const tokenRef = useRef4(token);
   const onEventRef = useRef4(onEvent);
   const onAnnotationAddedRef = useRef4(onAnnotationAdded);
   const onAnnotationRemovedRef = useRef4(onAnnotationRemoved);
@@ -18288,6 +18285,7 @@ function useResourceEvents({
   const onDocumentUnarchivedRef = useRef4(onDocumentUnarchived);
   const onErrorRef = useRef4(onError);
   useEffect4(() => {
+    tokenRef.current = token;
     onEventRef.current = onEvent;
     onAnnotationAddedRef.current = onAnnotationAdded;
     onAnnotationRemovedRef.current = onAnnotationRemoved;
@@ -18332,62 +18330,36 @@ function useResourceEvents({
     });
     return () => subscription.unsubscribe();
   }, [eventBus, handleEvent]);
-  const connect = useCallback6(async () => {
-    if (connectingRef.current || streamRef.current) {
-      return;
-    }
-    connectingRef.current = true;
-    if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-    if (!client) {
-      console.error(`[ResourceEvents] Cannot connect to ${rUri}: No API client available`);
-      onErrorRef.current?.("Authentication required");
-      setStatus("error");
-      connectingRef.current = false;
-      return;
-    }
+  const subRef = useRef4(null);
+  const connect = useCallback6(() => {
+    if (subRef.current) return;
     setStatus("connecting");
     try {
-      const sseOptions = {
-        ...token ? { auth: accessToken2(token) } : {},
-        eventBus
-        // ← Stream auto-emits to EventBus
-      };
-      const stream = client.sse.resourceEvents(rUri, sseOptions);
-      streamRef.current = stream;
+      const sub = client.flows.resourceEvents(
+        rUri,
+        () => tokenRef.current ? accessToken2(tokenRef.current) : void 0
+      );
+      subRef.current = sub;
       setStatus("connected");
-      reconnectAttemptsRef.current = 0;
-      connectingRef.current = false;
     } catch (error) {
       console.error("[ResourceEvents] Failed to connect:", error);
       setStatus("error");
       onErrorRef.current?.("Failed to connect to event stream");
-      connectingRef.current = false;
     }
-  }, [rUri, client, token, eventBus]);
+  }, [rUri, client]);
   const disconnect = useCallback6(() => {
-    if (streamRef.current) {
-      streamRef.current.close();
-      streamRef.current = null;
-    }
-    if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
+    if (subRef.current) {
+      subRef.current.unsubscribe();
+      subRef.current = null;
     }
     setStatus("disconnected");
-    reconnectAttemptsRef.current = 0;
-    connectingRef.current = false;
   }, []);
   useEffect4(() => {
-    if (autoConnect && client) {
+    if (autoConnect) {
       connect();
     }
-    return () => {
-      disconnect();
-    };
-  }, [autoConnect, client]);
+    return () => disconnect();
+  }, [autoConnect, rUri, client]);
   return {
     status,
     lastEvent,
@@ -18757,10 +18729,10 @@ function useLocalStorage(key, initialValue) {
 // src/hooks/useResourceContent.ts
 import { useEffect as useEffect10 } from "react";
 import { getPrimaryMediaType } from "@semiont/api-client";
-function useResourceContent(rUri, resource) {
+function useResourceContent(rUri, resource, enabled = true) {
   const { showError } = useToast();
   const resources = useResources();
-  const mediaType = getPrimaryMediaType(resource) || "text/plain";
+  const mediaType = enabled ? getPrimaryMediaType(resource) || "text/plain" : "";
   const { data: data2, isLoading, error } = resources.representation.useQuery(rUri, mediaType);
   useEffect10(() => {
     if (error) {
@@ -19011,12 +18983,12 @@ function ResourceAnnotationsProvider({ children }) {
       return next;
     });
   }, []);
-  const triggerSparkleAnimation = useCallback11((annotationId4) => {
-    setNewAnnotationIds((prev) => new Set(prev).add(annotationId4));
+  const triggerSparkleAnimation = useCallback11((annotationId3) => {
+    setNewAnnotationIds((prev) => new Set(prev).add(annotationId3));
     setTimeout(() => {
       setNewAnnotationIds((prev) => {
         const next = new Set(prev);
-        next.delete(annotationId4);
+        next.delete(annotationId3);
         return next;
       });
     }, 6e3);
@@ -26376,11 +26348,11 @@ var pasteURLAsLink = /* @__PURE__ */ EditorView.domEventHandlers({
 });
 
 // src/lib/scroll-utils.ts
-function scrollAnnotationIntoView(annotationId4, rootElement, options = {}) {
-  if (!annotationId4) return false;
+function scrollAnnotationIntoView(annotationId3, rootElement, options = {}) {
+  if (!annotationId3) return false;
   const { pulse = false, behavior = "smooth" } = options;
   const element2 = rootElement.querySelector(
-    `[data-annotation-id="${CSS.escape(annotationId4)}"]`
+    `[data-annotation-id="${CSS.escape(annotationId3)}"]`
   );
   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");
@@ -26509,12 +26481,12 @@ function computeWidgetDecorations(segments, generatingReferenceId, getTargetReso
 // src/lib/codemirror-handlers.ts
 function handleAnnotationClick(target, segmentsById, eventBus) {
   const annotationElement = target.closest("[data-annotation-id]");
-  const annotationId4 = annotationElement?.getAttribute("data-annotation-id");
-  if (!annotationId4) return false;
-  const segment = segmentsById.get(annotationId4);
+  const annotationId3 = annotationElement?.getAttribute("data-annotation-id");
+  if (!annotationId3) return false;
+  const segment = segmentsById.get(annotationId3);
   if (!segment?.annotation) return false;
   eventBus.get("browse:click").next({
-    annotationId: annotationId4,
+    annotationId: annotationId3,
     motivation: segment.annotation.motivation
   });
   return true;
@@ -26524,22 +26496,22 @@ function handleWidgetClick(target) {
   if (!widget || widget.dataset.widgetGenerating === "true") {
     return { handled: false };
   }
-  const annotationId4 = widget.dataset.widgetAnnotationId;
+  const annotationId3 = widget.dataset.widgetAnnotationId;
   const bodySource = widget.dataset.widgetBodySource;
   const isResolved = widget.dataset.widgetResolved === "true";
-  if (!annotationId4) return { handled: false };
+  if (!annotationId3) return { handled: false };
   if (isResolved && bodySource) {
     return {
       handled: true,
       action: "navigate",
       resourceId: bodySource,
-      annotationId: annotationId4
+      annotationId: annotationId3
     };
   }
   return {
     handled: true,
     action: "browse-click",
-    annotationId: annotationId4,
+    annotationId: annotationId3,
     motivation: widget.dataset.widgetMotivation || "linking"
   };
 }
@@ -26775,14 +26747,14 @@ function CodeMirrorRenderer({
     containerRef.current.__cmView = view;
     const container = view.dom;
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId4) => eventBusRef.current?.get("beckon:hover").next({ annotationId: annotationId4 }),
+      (annotationId3) => eventBusRef.current?.get("beckon:hover").next({ annotationId: annotationId3 }),
       hoverDelayMs
     );
     const handleMouseOver = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
-      const annotationId4 = annotationElement?.getAttribute("data-annotation-id");
-      if (annotationId4) handleMouseEnter(annotationId4);
+      const annotationId3 = annotationElement?.getAttribute("data-annotation-id");
+      if (annotationId3) handleMouseEnter(annotationId3);
     };
     const handleMouseOut = (e6) => {
       const target = e6.target;
@@ -27275,6 +27247,19 @@ function Toolbar({
         }
       )
     ] }),
+    /* @__PURE__ */ jsx12(
+      "button",
+      {
+        onClick: () => handlePanelToggle("knowledge-base"),
+        className: "semiont-toolbar-button",
+        "data-active": activePanel === "knowledge-base",
+        "data-panel": "knowledge-base",
+        "aria-label": t12("knowledgeBase"),
+        "aria-pressed": activePanel === "knowledge-base",
+        title: t12("knowledgeBase"),
+        children: /* @__PURE__ */ jsx12("svg", { className: "semiont-toolbar-icon", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 5.625c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" }) })
+      }
+    ),
     /* @__PURE__ */ jsx12(
       "button",
       {
@@ -29666,7 +29651,7 @@ function AnnotationOverlay({
   const scaleX = displayWidth / imageWidth;
   const scaleY = displayHeight / imageHeight;
   const { handleMouseEnter, handleMouseLeave } = useMemo2(
-    () => createHoverHandlers((annotationId4) => eventBus?.get("beckon:hover").next({ annotationId: annotationId4 }), hoverDelayMs),
+    () => createHoverHandlers((annotationId3) => eventBus?.get("beckon:hover").next({ annotationId: annotationId3 }), hoverDelayMs),
     [eventBus, hoverDelayMs]
   );
   return /* @__PURE__ */ jsx17(
@@ -29834,7 +29819,7 @@ function AnnotationOverlay({
 }
 
 // src/components/image-annotation/SvgDrawingCanvas.tsx
-import { useRef as useRef12, useState as useState15, useEffect as useEffect17, useCallback as useCallback13, useMemo as useMemo3 } from "react";
+import { useRef as useRef12, useState as useState15, useEffect as useEffect17, useCallback as useCallback13 } from "react";
 import { createRectangleSvg, createCircleSvg, createPolygonSvg, scaleSvgToNative, parseSvgSelector as parseSvgSelector2 } from "@semiont/api-client";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function getMotivationColor(motivation) {
@@ -29859,7 +29844,7 @@ function getMotivationColor(motivation) {
   }
 }
 function SvgDrawingCanvas({
-  resourceUri,
+  imageUrl,
   existingAnnotations = [],
   drawingMode,
   selectedMotivation,
@@ -29868,9 +29853,6 @@ function SvgDrawingCanvas({
   selectedAnnotationId
 }) {
   const { hoverDelayMs } = useHoverDelay();
-  const imageUrl = useMemo3(() => {
-    return `/api/resources/${resourceUri}`;
-  }, [resourceUri]);
   const containerRef = useRef12(null);
   const imageRef = useRef12(null);
   const [imageDimensions, setImageDimensions] = useState15(null);
@@ -30444,7 +30426,6 @@ function ProposeEntitiesModal({
 
 // src/components/resource/AnnotateView.tsx
 import { useRef as useRef13, useEffect as useEffect19, useCallback as useCallback14, lazy, Suspense } from "react";
-import { resourceId as toResourceId } from "@semiont/core";
 import { getMimeCategory, isPdfMimeType as isPdfMimeType2 } from "@semiont/api-client";
 
 // src/lib/text-segmentation.ts
@@ -30538,7 +30519,7 @@ function fallbackTextPosition(content4, selectedText) {
 
 // src/components/resource/AnnotateView.tsx
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
-var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-LF6DDTCV.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
+var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-CW6SKH2U.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 function AnnotateView({
   content: content4,
   mimeType = "text/plain",
@@ -30572,8 +30553,8 @@ function AnnotateView({
   const handleToolbarShapeChanged = useCallback14(({ shape }) => {
     onUIStateChangeRef.current?.({ selectedShape: shape });
   }, []);
-  const handleAnnotationHover = useCallback14(({ annotationId: annotationId4 }) => {
-    onUIStateChangeRef.current?.({ hoveredAnnotationId: annotationId4 });
+  const handleAnnotationHover = useCallback14(({ annotationId: annotationId3 }) => {
+    onUIStateChangeRef.current?.({ hoveredAnnotationId: annotationId3 });
   }, []);
   useEventSubscriptions({
     "mark:selection-changed": handleToolbarSelectionChanged,
@@ -30685,10 +30666,10 @@ function AnnotateView({
               annotators: ANNOTATORS
             }
           ),
-          /* @__PURE__ */ jsx21("div", { className: "semiont-annotate-view__content", children: resourceUri && /* @__PURE__ */ jsx21(Suspense, { fallback: /* @__PURE__ */ jsx21("div", { className: "semiont-annotate-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx21("div", { className: "semiont-annotate-view__content", children: content4 && /* @__PURE__ */ jsx21(Suspense, { fallback: /* @__PURE__ */ jsx21("div", { className: "semiont-annotate-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx21(
             PdfAnnotationCanvas,
             {
-              resourceUri: toResourceId(resourceUri),
+              pdfUrl: content4,
               existingAnnotations: allAnnotations,
               drawingMode: selectedMotivation ? selectedShape : null,
               selectedMotivation,
@@ -30712,10 +30693,10 @@ function AnnotateView({
             annotators: ANNOTATORS
           }
         ),
-        /* @__PURE__ */ jsx21("div", { className: "semiont-annotate-view__content", children: resourceUri && /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx21("div", { className: "semiont-annotate-view__content", children: content4 && /* @__PURE__ */ jsx21(
           SvgDrawingCanvas,
           {
-            resourceUri: toResourceId(resourceUri),
+            imageUrl: content4,
             existingAnnotations: allAnnotations,
             drawingMode: selectedMotivation ? selectedShape : null,
             selectedMotivation,
@@ -30853,15 +30834,16 @@ function truncateText(text7, maxLength = 50) {
 }
 function getEventDisplayContent(event, annotations, allEvents) {
   const eventData = event.event;
+  const payload = eventData.payload;
   switch (eventData.type) {
     case "resource.created":
     case "resource.cloned": {
-      return { exact: eventData.payload.name, isQuoted: false, isTag: false };
+      return { exact: payload.name, isQuoted: false, isTag: false };
     }
     // Unified annotation events
     case "annotation.body.updated": {
       const annotation = annotations.find(
-        (a15) => a15.id.endsWith(`/annotations/${eventData.payload.annotationId}`)
+        (a15) => a15.id.endsWith(`/annotations/${payload.annotationId}`)
       );
       if (annotation?.target) {
         try {
@@ -30877,7 +30859,7 @@ function getEventDisplayContent(event, annotations, allEvents) {
     }
     case "annotation.removed": {
       const addedEvent = allEvents.find(
-        (e6) => e6.event.type === "annotation.added" && e6.event.payload.annotation.id.endsWith(`/annotations/${eventData.payload.annotationId}`)
+        (e6) => e6.event.type === "annotation.added" && e6.event.payload.annotation.id.endsWith(`/annotations/${payload.annotationId}`)
       );
       if (addedEvent && addedEvent.event.type === "annotation.added") {
         try {
@@ -30895,7 +30877,7 @@ function getEventDisplayContent(event, annotations, allEvents) {
     }
     case "annotation.added": {
       try {
-        const target = eventData.payload.annotation.target;
+        const target = payload.annotation.target;
         if (typeof target !== "string" && target.selector) {
           const exact = getExactText2(target.selector);
           if (exact) {
@@ -30908,12 +30890,12 @@ function getEventDisplayContent(event, annotations, allEvents) {
     }
     case "entitytag.added":
     case "entitytag.removed": {
-      return { exact: eventData.payload.entityType, isQuoted: false, isTag: true };
+      return { exact: payload.entityType, isQuoted: false, isTag: true };
     }
     case "job.completed": {
-      if (eventData.payload.annotationUri) {
+      if (payload.annotationUri) {
         const annotation = annotations.find(
-          (a15) => a15.id === eventData.payload.annotationUri
+          (a15) => a15.id === payload.annotationUri
         );
         if (annotation?.target) {
           try {
@@ -30940,9 +30922,10 @@ function getEventDisplayContent(event, annotations, allEvents) {
 }
 function getEventEntityTypes(event) {
   const eventData = event.event;
+  const payload = eventData.payload;
   if (eventData.type === "annotation.added") {
-    const motivation = eventData.payload.annotation.motivation;
-    const body = eventData.payload.annotation.body;
+    const motivation = payload.annotation.motivation;
+    const body = payload.annotation.body;
     if (motivation === "linking" && body && "entityTypes" in body) {
       return body.entityTypes ?? [];
     }
@@ -30951,10 +30934,11 @@ function getEventEntityTypes(event) {
 }
 function getResourceCreationDetails(event) {
   const eventData = event.event;
+  const payload = eventData.payload;
   if (eventData.type === "resource.created") {
     return {
       type: "created",
-      method: eventData.payload.creationMethod || "unknown",
+      method: payload.creationMethod || "unknown",
       userId: eventData.userId,
       metadata: void 0
     };
@@ -30962,10 +30946,10 @@ function getResourceCreationDetails(event) {
   if (eventData.type === "resource.cloned") {
     return {
       type: "cloned",
-      method: eventData.payload.creationMethod || "clone",
+      method: payload.creationMethod || "clone",
       userId: eventData.userId,
-      sourceDocId: eventData.payload.parentResourceId,
-      parentResourceId: eventData.payload.parentResourceId,
+      sourceDocId: payload.parentResourceId,
+      parentResourceId: payload.parentResourceId,
       metadata: void 0
     };
   }
@@ -31101,9 +31085,7 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
   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
-  );
+  }).sort((a15, b8) => a15.metadata.sequenceNumber - b8.metadata.sequenceNumber);
   useEffect21(() => {
     if (containerRef.current && events2.length > 0) {
       requestAnimationFrame(() => {
@@ -31154,11 +31136,11 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
           t: t12,
           Link,
           routes,
-          onEventRef: (annotationId4, el) => {
-            if (el && annotationId4) {
-              eventRefs.current.set(annotationId4, el);
-            } else if (!el && annotationId4) {
-              eventRefs.current.delete(annotationId4);
+          onEventRef: (annotationId3, el) => {
+            if (el && annotationId3) {
+              eventRefs.current.set(annotationId3, el);
+            } else if (!el && annotationId3) {
+              eventRefs.current.delete(annotationId3);
             }
           },
           ...onEventClick && { onEventClick },
@@ -31171,7 +31153,7 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
 }
 
 // src/components/resource/BrowseView.tsx
-import { useEffect as useEffect23, useRef as useRef16, useCallback as useCallback16, useMemo as useMemo4, memo, lazy as lazy2, Suspense as Suspense2 } from "react";
+import { useEffect as useEffect23, useRef as useRef16, useCallback as useCallback16, useMemo as useMemo3, memo, lazy as lazy2, Suspense as Suspense2 } from "react";
 
 // ../../node_modules/devlop/lib/default.js
 function ok() {
@@ -45687,13 +45669,11 @@ function remarkGfm(options) {
 }
 
 // src/components/resource/BrowseView.tsx
-import { resourceId as toResourceId2 } from "@semiont/core";
 import { getMimeCategory as getMimeCategory2, isPdfMimeType as isPdfMimeType3 } from "@semiont/api-client";
 
 // src/components/viewers/ImageViewer.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
-function ImageViewer({ resourceUri, alt = "Resource image" }) {
-  const imageUrl = `/api/resources/${resourceUri}`;
+function ImageViewer({ imageUrl, alt = "Resource image" }) {
   return /* @__PURE__ */ jsx25("div", { className: "semiont-image-viewer", children: /* @__PURE__ */ jsx25(
     "img",
     {
@@ -45707,7 +45687,7 @@ function ImageViewer({ resourceUri, alt = "Resource image" }) {
 
 // src/components/resource/BrowseView.tsx
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
-var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-LF6DDTCV.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
+var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-CW6SKH2U.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 var MemoizedMarkdown = memo(function MemoizedMarkdown2({
   content: content4
 }) {
@@ -45733,11 +45713,11 @@ var BrowseView = memo(function BrowseView2({
   const containerRef = useRef16(null);
   const category = getMimeCategory2(mimeType);
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
-  const allAnnotations = useMemo4(
+  const allAnnotations = useMemo3(
     () => [...highlights, ...references, ...assessments, ...comments, ...tags3],
     [highlights, references, assessments, comments, tags3]
   );
-  const overlayAnnotations = useMemo4(
+  const overlayAnnotations = useMemo3(
     () => toOverlayAnnotations(allAnnotations),
     [allAnnotations]
   );
@@ -45761,24 +45741,24 @@ var BrowseView = memo(function BrowseView2({
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
       if (!annotationElement) return;
-      const annotationId4 = annotationElement.getAttribute("data-annotation-id");
+      const annotationId3 = annotationElement.getAttribute("data-annotation-id");
       const annotationType = annotationElement.getAttribute("data-annotation-type");
-      if (annotationId4 && annotationType === "reference") {
-        const annotation = allAnnotations.find((a15) => a15.id === annotationId4);
+      if (annotationId3 && annotationType === "reference") {
+        const annotation = allAnnotations.find((a15) => a15.id === annotationId3);
         if (annotation) {
-          eventBus.get("browse:click").next({ annotationId: annotationId4, motivation: annotation.motivation });
+          eventBus.get("browse:click").next({ annotationId: annotationId3, motivation: annotation.motivation });
         }
       }
     };
     const { handleMouseEnter, handleMouseLeave, cleanup: cleanupHover } = createHoverHandlers(
-      (annotationId4) => eventBus.get("beckon:hover").next({ annotationId: annotationId4 }),
+      (annotationId3) => eventBus.get("beckon:hover").next({ annotationId: annotationId3 }),
       hoverDelayMs
     );
     const handleMouseOver = (e6) => {
       const target = e6.target;
       const annotationElement = target.closest("[data-annotation-id]");
-      const annotationId4 = annotationElement?.getAttribute("data-annotation-id");
-      if (annotationId4) handleMouseEnter(annotationId4);
+      const annotationId3 = annotationElement?.getAttribute("data-annotation-id");
+      if (annotationId3) handleMouseEnter(annotationId3);
     };
     const handleMouseOut = (e6) => {
       const target = e6.target;
@@ -45788,8 +45768,8 @@ var BrowseView = memo(function BrowseView2({
     if (newAnnotationIds) {
       const annotationSpans = container.querySelectorAll("[data-annotation-id]");
       annotationSpans.forEach((span) => {
-        const annotationId4 = span.getAttribute("data-annotation-id");
-        if (annotationId4 && newAnnotationIds.has(annotationId4)) {
+        const annotationId3 = span.getAttribute("data-annotation-id");
+        if (annotationId3 && newAnnotationIds.has(annotationId3)) {
           span.classList.add("annotation-sparkle");
         }
       });
@@ -45804,15 +45784,15 @@ var BrowseView = memo(function BrowseView2({
       cleanupHover();
     };
   }, [content4, allAnnotations, newAnnotationIds, hoverDelayMs]);
-  const scrollToAnnotation = useCallback16((annotationId4, removePulse = false) => {
+  const scrollToAnnotation = useCallback16((annotationId3, removePulse = false) => {
     if (!containerRef.current) return;
-    scrollAnnotationIntoView(annotationId4, containerRef.current, { pulse: removePulse });
+    scrollAnnotationIntoView(annotationId3, containerRef.current, { pulse: removePulse });
   }, []);
-  const handleAnnotationHover = useCallback16(({ annotationId: annotationId4 }) => {
-    scrollToAnnotation(annotationId4);
+  const handleAnnotationHover = useCallback16(({ annotationId: annotationId3 }) => {
+    scrollToAnnotation(annotationId3);
   }, [scrollToAnnotation]);
-  const handleAnnotationFocus = useCallback16(({ annotationId: annotationId4 }) => {
-    scrollToAnnotation(annotationId4 ?? null, true);
+  const handleAnnotationFocus = useCallback16(({ annotationId: annotationId3 }) => {
+    scrollToAnnotation(annotationId3 ?? null, true);
   }, [scrollToAnnotation]);
   useEventSubscriptions({
     "beckon:hover": handleAnnotationHover,
@@ -45851,7 +45831,7 @@ var BrowseView = memo(function BrowseView2({
           /* @__PURE__ */ jsx26("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx26(Suspense2, { fallback: /* @__PURE__ */ jsx26("div", { className: "semiont-browse-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx26(
             PdfAnnotationCanvas2,
             {
-              resourceUri: toResourceId2(resourceUri),
+              pdfUrl: content4,
               existingAnnotations: allAnnotations,
               drawingMode: null,
               selectedMotivation: null
@@ -45874,7 +45854,7 @@ var BrowseView = memo(function BrowseView2({
         /* @__PURE__ */ jsx26("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx26(
           ImageViewer,
           {
-            resourceUri: toResourceId2(resourceUri),
+            imageUrl: content4,
             mimeType,
             alt: "Resource content"
           }
@@ -45900,8 +45880,8 @@ var BrowseView = memo(function BrowseView2({
 });
 
 // src/components/resource/ResourceViewer.tsx
-import { useState as useState18, useEffect as useEffect24, useCallback as useCallback17, useRef as useRef17, useMemo as useMemo5 } from "react";
-import { resourceId as toResourceId3, annotationId as toAnnotationId } from "@semiont/core";
+import { useState as useState18, useEffect as useEffect24, useCallback as useCallback17, useRef as useRef17, useMemo as useMemo4 } from "react";
+import { resourceId as toResourceId, 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 jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function ResourceViewer({
@@ -45920,7 +45900,7 @@ function ResourceViewer({
   if (!resource["@id"]) {
     throw new Error("Resource has no @id");
   }
-  const rUri = toResourceId3(resource["@id"]);
+  const rUri = toResourceId(resource["@id"]);
   const getMimeType = () => {
     const reps = resource.representations;
     if (Array.isArray(reps) && reps.length > 0 && reps[0]) {
@@ -46017,9 +45997,9 @@ function ResourceViewer({
   const hoveredAnnotationId = hoveredAnnotationIdProp ?? null;
   const [scrollToAnnotationId, setScrollToAnnotationId] = useState18(null);
   const [_focusedAnnotationId, setFocusedAnnotationId] = useState18(null);
-  const focusAnnotation = useCallback17((annotationId4) => {
-    setFocusedAnnotationId(annotationId4);
-    setScrollToAnnotationId(annotationId4);
+  const focusAnnotation = useCallback17((annotationId3) => {
+    setFocusedAnnotationId(annotationId3);
+    setScrollToAnnotationId(annotationId3);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   const getJsonLdModalPosition = () => {
@@ -46065,11 +46045,11 @@ function ResourceViewer({
       return;
     }
   }, [annotateMode, selectedClick, focusAnnotation]);
-  const handleAnnotationClickEvent = useCallback17(({ annotationId: annotationId4, motivation }) => {
+  const handleAnnotationClickEvent = useCallback17(({ annotationId: annotationId3, 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 === annotationId4);
+      const annotation = allAnnotations.find((a15) => a15.id === annotationId3);
       if (annotation) {
         handleAnnotationClick2(annotation);
       }
@@ -46077,13 +46057,13 @@ function ResourceViewer({
     }
     if (selectedClick !== "detail") {
       const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
-      const annotation = allAnnotations.find((a15) => a15.id === annotationId4);
+      const annotation = allAnnotations.find((a15) => a15.id === annotationId3);
       if (annotation) {
         handleAnnotationClick2(annotation);
       }
       return;
     }
-    eventBus.get("browse:panel-open").next({ panel: "annotations", scrollToAnnotationId: annotationId4, motivation });
+    eventBus.get("browse:panel-open").next({ panel: "annotations", scrollToAnnotationId: annotationId3, motivation });
   }, [highlights, references, assessments, comments, tags3, handleAnnotationClick2, selectedClick]);
   useEventSubscriptions({
     // View mode
@@ -46099,7 +46079,7 @@ function ResourceViewer({
     // Annotation clicks
     "browse:click": handleAnnotationClickEvent
   });
-  const annotationsCollection = useMemo5(
+  const annotationsCollection = useMemo4(
     () => ({ highlights, references, assessments, comments, tags: tags3 }),
     [highlights, references, assessments, comments, tags3]
   );
@@ -46293,7 +46273,7 @@ function AssessmentEntry({
 }
 
 // src/components/resource/panels/AssessmentPanel.tsx
-import { useState as useState20, useEffect as useEffect26, useRef as useRef18, useCallback as useCallback19, useMemo as useMemo6 } from "react";
+import { useState as useState20, useEffect as useEffect26, useRef as useRef18, useCallback as useCallback19, useMemo as useMemo5 } from "react";
 import { getTextPositionSelector as getTextPositionSelector3, getTargetSelector as getTargetSelector5 } from "@semiont/api-client";
 
 // src/components/resource/panels/AssistSection.tsx
@@ -46546,7 +46526,7 @@ function AssessmentPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState20(null);
   const containerRef = useRef18(null);
   const entryRefs = useRef18(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo6(() => {
+  const sortedAnnotations = useMemo5(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector3(getTargetSelector5(a15.target));
       const bSelector = getTextPositionSelector3(getTargetSelector5(b8.target));
@@ -46614,8 +46594,8 @@ function AssessmentPanel({
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [pendingAnnotation]);
-  const handleAnnotationClick2 = useCallback19(({ annotationId: annotationId4 }) => {
-    setFocusedAnnotationId(annotationId4);
+  const handleAnnotationClick2 = useCallback19(({ annotationId: annotationId3 }) => {
+    setFocusedAnnotationId(annotationId3);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -46911,7 +46891,7 @@ function CommentEntry({
 }
 
 // src/components/resource/panels/CommentsPanel.tsx
-import { useState as useState22, useEffect as useEffect28, useRef as useRef20, useCallback as useCallback20, useMemo as useMemo7 } from "react";
+import { useState as useState22, useEffect as useEffect28, useRef as useRef20, useCallback as useCallback20, useMemo as useMemo6 } from "react";
 import { getTextPositionSelector as getTextPositionSelector4, getTargetSelector as getTargetSelector6 } from "@semiont/api-client";
 import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function getSelectorDisplayText2(selector) {
@@ -46944,7 +46924,7 @@ function CommentsPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState22(null);
   const containerRef = useRef20(null);
   const entryRefs = useRef20(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo7(() => {
+  const sortedAnnotations = useMemo6(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector4(getTargetSelector6(a15.target));
       const bSelector = getTextPositionSelector4(getTargetSelector6(b8.target));
@@ -46992,8 +46972,8 @@ function CommentsPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick2 = useCallback20(({ annotationId: annotationId4 }) => {
-    setFocusedAnnotationId(annotationId4);
+  const handleAnnotationClick2 = useCallback20(({ annotationId: annotationId3 }) => {
+    setFocusedAnnotationId(annotationId3);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -47158,7 +47138,7 @@ function HighlightEntry({
 }
 
 // src/components/resource/panels/HighlightPanel.tsx
-import { useEffect as useEffect29, useState as useState23, useRef as useRef21, useCallback as useCallback21, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect29, useState as useState23, useRef as useRef21, useCallback as useCallback21, useMemo as useMemo7 } from "react";
 import { getTextPositionSelector as getTextPositionSelector5, getTargetSelector as getTargetSelector7 } from "@semiont/api-client";
 import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function HighlightPanel({
@@ -47176,7 +47156,7 @@ function HighlightPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState23(null);
   const containerRef = useRef21(null);
   const entryRefs = useRef21(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo8(() => {
+  const sortedAnnotations = useMemo7(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector5(getTargetSelector7(a15.target));
       const bSelector = getTextPositionSelector5(getTargetSelector7(b8.target));
@@ -47222,8 +47202,8 @@ function HighlightPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick2 = useCallback21(({ annotationId: annotationId4 }) => {
-    setFocusedAnnotationId(annotationId4);
+  const handleAnnotationClick2 = useCallback21(({ annotationId: annotationId3 }) => {
+    setFocusedAnnotationId(annotationId3);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -47466,7 +47446,7 @@ function ReferenceEntry({
 }
 
 // src/components/resource/panels/ReferencesPanel.tsx
-import { useState as useState24, useRef as useRef23, useEffect as useEffect31, useCallback as useCallback22, useMemo as useMemo9 } from "react";
+import { useState as useState24, useRef as useRef23, useEffect as useEffect31, useCallback as useCallback22, useMemo as useMemo8 } from "react";
 import { getTextPositionSelector as getTextPositionSelector6, getTargetSelector as getTargetSelector9 } from "@semiont/api-client";
 import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function getSelectorDisplayText3(selector) {
@@ -47516,7 +47496,7 @@ function ReferencesPanel({
     localStorage.setItem("assist-section-expanded-reference", String(isAssistExpanded));
   }, [isAssistExpanded]);
   const entryRefs = useRef23(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo9(() => {
+  const sortedAnnotations = useMemo8(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector6(getTargetSelector9(a15.target));
       const bSelector = getTextPositionSelector6(getTargetSelector9(b8.target));
@@ -47566,8 +47546,8 @@ function ReferencesPanel({
       container.scrollTo({ top: scrollTo, behavior: "smooth" });
     }
   }, [hoveredAnnotationId]);
-  const handleAnnotationClick2 = useCallback22(({ annotationId: annotationId4 }) => {
-    setFocusedAnnotationId(annotationId4);
+  const handleAnnotationClick2 = useCallback22(({ annotationId: annotationId3 }) => {
+    setFocusedAnnotationId(annotationId3);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
@@ -47602,11 +47582,11 @@ function ReferencesPanel({
   };
   const handleCreateReference = () => {
     if (pendingAnnotation) {
-      const entityType3 = pendingEntityTypes.join(",") || void 0;
+      const entityType2 = pendingEntityTypes.join(",") || void 0;
       eventBus.get("mark:submit").next({
         motivation: "linking",
         selector: pendingAnnotation.selector,
-        body: entityType3 ? [{ type: "TextualBody", value: entityType3, purpose: "tagging" }] : []
+        body: entityType2 ? [{ type: "TextualBody", value: entityType2, purpose: "tagging" }] : []
       });
       setPendingEntityTypes([]);
     }
@@ -48072,7 +48052,7 @@ function TagEntry({
 }
 
 // src/components/resource/panels/TaggingPanel.tsx
-import { useState as useState25, useEffect as useEffect32, useRef as useRef24, useCallback as useCallback23, useMemo as useMemo10 } from "react";
+import { useState as useState25, useEffect as useEffect32, useRef as useRef24, useCallback as useCallback23, useMemo as useMemo9 } from "react";
 import { getTextPositionSelector as getTextPositionSelector7, getTargetSelector as getTargetSelector10 } from "@semiont/api-client";
 import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 function getSelectorDisplayText4(selector) {
@@ -48113,15 +48093,15 @@ function TaggingPanel({
     if (typeof window === "undefined") return;
     localStorage.setItem("assist-section-expanded-tag", String(isAssistExpanded));
   }, [isAssistExpanded]);
-  const handleAnnotationClick2 = useCallback23(({ annotationId: annotationId4 }) => {
-    setFocusedAnnotationId(annotationId4);
+  const handleAnnotationClick2 = useCallback23(({ annotationId: annotationId3 }) => {
+    setFocusedAnnotationId(annotationId3);
     setTimeout(() => setFocusedAnnotationId(null), 3e3);
   }, []);
   useEventSubscriptions({
     "browse:click": handleAnnotationClick2
   });
   const entryRefs = useRef24(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo10(() => {
+  const sortedAnnotations = useMemo9(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector7(getTargetSelector10(a15.target));
       const bSelector = getTextPositionSelector7(getTargetSelector10(b8.target));
@@ -48891,16 +48871,16 @@ function SimpleNavigation({
 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 React19, { createContext as createContext6, useContext as useContext6, useEffect as useEffect37, useState as useState30, useCallback as useCallback27, useMemo as useMemo12, useRef as useRef28, memo as memo2, useReducer, cloneElement, forwardRef } from "react";
+import React19, { createContext as createContext6, useContext as useContext6, useEffect as useEffect37, useState as useState30, useCallback as useCallback27, useMemo as useMemo11, useRef as useRef28, memo as memo2, useReducer, cloneElement, forwardRef } 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 useEffect36, useRef as useRef27, useCallback as useCallback25 } from "react";
+import { useMemo as useMemo10, 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];
   }
-  return useMemo11(
+  return useMemo10(
     () => (node2) => {
       refs.forEach((ref) => ref(node2));
     },
@@ -49003,7 +48983,7 @@ function useLatestValue(value, dependencies) {
 }
 function useLazyMemo(callback, dependencies) {
   const valueRef = useRef27();
-  return useMemo11(
+  return useMemo10(
     () => {
       const newValue = callback(valueRef.current);
       valueRef.current = newValue;
@@ -49037,7 +49017,7 @@ function usePrevious(value) {
 }
 var ids = {};
 function useUniqueId(prefix, value) {
-  return useMemo11(() => {
+  return useMemo10(() => {
     if (value) {
       return value;
     }
@@ -49309,7 +49289,7 @@ function Accessibility(_ref) {
   useEffect37(() => {
     setMounted(true);
   }, []);
-  useDndMonitor(useMemo12(() => ({
+  useDndMonitor(useMemo11(() => ({
     onDragStart(_ref2) {
       let {
         active
@@ -49387,7 +49367,7 @@ var Action;
 function noop() {
 }
 function useSensor(sensor, options) {
-  return useMemo12(
+  return useMemo11(
     () => ({
       sensor,
       options: options != null ? options : {}
@@ -49400,7 +49380,7 @@ function useSensors() {
   for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {
     sensors[_key] = arguments[_key];
   }
-  return useMemo12(
+  return useMemo11(
     () => [...sensors].filter((sensor) => sensor != null),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [...sensors]
@@ -50650,7 +50630,7 @@ function useAutoScroller(_ref) {
     x: 0,
     y: 0
   });
-  const rect = useMemo12(() => {
+  const rect = useMemo11(() => {
     switch (activator) {
       case AutoScrollActivator.Pointer:
         return pointerCoordinates ? {
@@ -50673,7 +50653,7 @@ function useAutoScroller(_ref) {
     const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
     scrollContainer.scrollBy(scrollLeft, scrollTop);
   }, []);
-  const sortedScrollableAncestors = useMemo12(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
+  const sortedScrollableAncestors = useMemo11(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
   useEffect37(
     () => {
       if (!enabled || !scrollableAncestors.length || !rect) {
@@ -50787,7 +50767,7 @@ function useCachedNode(draggableNodes, id2) {
   }, [node2, id2]);
 }
 function useCombineActivators(sensors, getSyntheticHandler) {
-  return useMemo12(() => sensors.reduce((accumulator, sensor) => {
+  return useMemo11(() => sensors.reduce((accumulator, sensor) => {
     const {
       sensor: Sensor
     } = sensor;
@@ -50935,7 +50915,7 @@ function useMutationObserver(_ref) {
     disabled
   } = _ref;
   const handleMutations = useEvent(callback);
-  const mutationObserver = useMemo12(() => {
+  const mutationObserver = useMemo11(() => {
     if (disabled || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
       return void 0;
     }
@@ -50955,7 +50935,7 @@ function useResizeObserver(_ref) {
     disabled
   } = _ref;
   const handleResize = useEvent(callback);
-  const resizeObserver = useMemo12(
+  const resizeObserver = useMemo11(
     () => {
       if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
         return void 0;
@@ -51097,7 +51077,7 @@ function useScrollOffsets(elements) {
       });
     }
   }, [handleScroll, elements]);
-  return useMemo12(() => {
+  return useMemo11(() => {
     if (elements.length) {
       return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
     }
@@ -51156,7 +51136,7 @@ function useSensorSetup(sensors) {
   );
 }
 function useSyntheticListeners(listeners, id2) {
-  return useMemo12(() => {
+  return useMemo11(() => {
     return listeners.reduce((acc, _ref) => {
       let {
         eventName,
@@ -51170,7 +51150,7 @@ function useSyntheticListeners(listeners, id2) {
   }, [listeners, id2]);
 }
 function useWindowRect(element2) {
-  return useMemo12(() => element2 ? getWindowClientRect(element2) : null, [element2]);
+  return useMemo11(() => element2 ? getWindowClientRect(element2) : null, [element2]);
 }
 var defaultValue$2 = [];
 function useRects(elements, measure) {
@@ -51242,7 +51222,7 @@ function useDragOverlayMeasuring(_ref) {
     setRect(node2 ? measure(node2) : null);
   }, [measure, resizeObserver]);
   const [nodeRef, setRef] = useNodeRef(handleNodeChange);
-  return useMemo12(() => ({
+  return useMemo11(() => ({
     nodeRef,
     rect,
     setRef
@@ -51519,7 +51499,7 @@ function applyModifiers(modifiers2, _ref) {
   }, transform) : transform;
 }
 function useMeasuringConfiguration(config) {
-  return useMemo12(
+  return useMemo11(
     () => ({
       draggable: {
         ...defaultMeasuringConfiguration.draggable,
@@ -51630,7 +51610,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     initial: null,
     translated: null
   });
-  const active = useMemo12(() => {
+  const active = useMemo11(() => {
     var _node$data;
     return activeId != null ? {
       id: activeId,
@@ -51644,7 +51624,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
   const [activatorEvent, setActivatorEvent] = useState30(null);
   const latestProps = useLatestValue(props, Object.values(props));
   const draggableDescribedById = useUniqueId("DndDescribedBy", id2);
-  const enabledDroppableContainers = useMemo12(() => droppableContainers.getEnabled(), [droppableContainers]);
+  const enabledDroppableContainers = useMemo11(() => droppableContainers.getEnabled(), [droppableContainers]);
   const measuringConfiguration = useMeasuringConfiguration(measuring);
   const {
     droppableRects,
@@ -51656,7 +51636,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     config: measuringConfiguration.droppable
   });
   const activeNode = useCachedNode(draggableNodes, activeId);
-  const activationCoordinates = useMemo12(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
+  const activationCoordinates = useMemo11(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
@@ -52027,7 +52007,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     scrollableAncestors,
     scrollableAncestorRects
   });
-  const publicContext = useMemo12(() => {
+  const publicContext = useMemo11(() => {
     const context = {
       active,
       activeNode,
@@ -52049,7 +52029,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     };
     return context;
   }, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect2]);
-  const internalContext = useMemo12(() => {
+  const internalContext = useMemo11(() => {
     const context = {
       activatorEvent,
       activators,
@@ -52144,7 +52124,7 @@ function useDraggable(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [draggableNodes, id2]
   );
-  const memoizedAttributes = useMemo12(() => ({
+  const memoizedAttributes = useMemo11(() => ({
     role,
     tabIndex,
     "aria-disabled": disabled,
@@ -52289,7 +52269,7 @@ function useDroppable(_ref) {
 }
 
 // ../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js
-import React20, { useMemo as useMemo13, useRef as useRef29, useEffect as useEffect38, useState as useState31, useContext as useContext7 } from "react";
+import React20, { useMemo as useMemo12, useRef as useRef29, useEffect as useEffect38, useState as useState31, useContext as useContext7 } 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]);
@@ -52443,7 +52423,7 @@ function SortableContext(_ref) {
   } = useDndContext();
   const containerId = useUniqueId(ID_PREFIX2, id2);
   const useDragOverlay = Boolean(dragOverlay.rect !== null);
-  const items = useMemo13(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
+  const items = useMemo12(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
   const isDragging = active != null;
   const activeIndex = active ? items.indexOf(active.id) : -1;
   const overIndex = over ? items.indexOf(over.id) : -1;
@@ -52459,7 +52439,7 @@ function SortableContext(_ref) {
   useEffect38(() => {
     previousItemsRef.current = items;
   }, [items]);
-  const contextValue = useMemo13(
+  const contextValue = useMemo12(
     () => ({
       activeIndex,
       containerId,
@@ -52586,7 +52566,7 @@ function useSortable(_ref) {
   } = useContext7(Context2);
   const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
   const index2 = items.indexOf(id2);
-  const data2 = useMemo13(() => ({
+  const data2 = useMemo12(() => ({
     sortable: {
       containerId,
       index: index2,
@@ -52594,7 +52574,7 @@ function useSortable(_ref) {
     },
     ...customData
   }), [containerId, customData, index2, items]);
-  const itemsAfterCurrentSortable = useMemo13(() => items.slice(items.indexOf(id2)), [items, id2]);
+  const itemsAfterCurrentSortable = useMemo12(() => items.slice(items.indexOf(id2)), [items, id2]);
   const {
     rect,
     node: node2,
@@ -53457,7 +53437,7 @@ function ConfigureGenerationStep({
       context
     });
   };
-  return /* @__PURE__ */ jsxs43("form", { onSubmit: handleSubmit, className: "semiont-form", children: [
+  return /* @__PURE__ */ jsxs43("form", { onSubmit: handleSubmit, className: "semiont-form semiont-form--scrollable", children: [
     /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field", children: [
       /* @__PURE__ */ jsx52("label", { htmlFor: "wizard-title", className: "semiont-form__label", children: t12.resourceTitle }),
       /* @__PURE__ */ jsx52(
@@ -53499,68 +53479,68 @@ function ConfigureGenerationStep({
           id: "wizard-prompt",
           value: prompt,
           onChange: (e6) => setPrompt(e6.target.value),
-          rows: 3,
+          rows: 2,
           className: "semiont-textarea",
           placeholder: t12.additionalInstructionsPlaceholder
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field", children: [
-      /* @__PURE__ */ jsx52("label", { htmlFor: "wizard-language", className: "semiont-form__label", children: t12.language }),
-      /* @__PURE__ */ jsx52(
-        "select",
-        {
-          id: "wizard-language",
-          value: language2,
-          onChange: (e6) => setLanguage(e6.target.value),
-          className: "semiont-select",
-          children: LOCALES2.map((lang) => /* @__PURE__ */ jsx52("option", { value: lang.code, children: lang.nativeName }, lang.code))
-        }
-      ),
-      /* @__PURE__ */ jsx52("p", { className: "semiont-form__help", children: t12.languageHelp })
-    ] }),
-    /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field", children: [
-      /* @__PURE__ */ jsxs43("label", { htmlFor: "wizard-temperature", className: "semiont-form__label", children: [
-        t12.creativity,
-        " (",
-        temperature.toFixed(1),
-        ")"
+    /* @__PURE__ */ jsxs43("div", { className: "semiont-form__inline-row", children: [
+      /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field semiont-form__field--inline", children: [
+        /* @__PURE__ */ jsx52("label", { htmlFor: "wizard-language", className: "semiont-form__label", children: t12.language }),
+        /* @__PURE__ */ jsx52(
+          "select",
+          {
+            id: "wizard-language",
+            value: language2,
+            onChange: (e6) => setLanguage(e6.target.value),
+            className: "semiont-select",
+            children: LOCALES2.map((lang) => /* @__PURE__ */ jsx52("option", { value: lang.code, children: lang.nativeName }, lang.code))
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx52(
-        "input",
-        {
-          id: "wizard-temperature",
-          type: "range",
-          min: "0",
-          max: "1",
-          step: "0.1",
-          value: temperature,
-          onChange: (e6) => setTemperature(parseFloat(e6.target.value)),
-          className: "semiont-slider"
-        }
-      ),
-      /* @__PURE__ */ jsxs43("div", { className: "semiont-slider__labels", children: [
-        /* @__PURE__ */ jsx52("span", { children: t12.creativityFocused }),
-        /* @__PURE__ */ jsx52("span", { children: t12.creativityCreative })
+      /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field semiont-form__field--inline semiont-form__field--grow", children: [
+        /* @__PURE__ */ jsxs43("label", { htmlFor: "wizard-temperature", className: "semiont-form__label", children: [
+          t12.creativity,
+          " (",
+          temperature.toFixed(1),
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx52(
+          "input",
+          {
+            id: "wizard-temperature",
+            type: "range",
+            min: "0",
+            max: "1",
+            step: "0.1",
+            value: temperature,
+            onChange: (e6) => setTemperature(parseFloat(e6.target.value)),
+            className: "semiont-slider"
+          }
+        ),
+        /* @__PURE__ */ jsxs43("div", { className: "semiont-slider__labels semiont-slider__labels--small", children: [
+          /* @__PURE__ */ jsx52("span", { children: t12.creativityFocused }),
+          /* @__PURE__ */ jsx52("span", { children: t12.creativityCreative })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field semiont-form__field--inline semiont-form__field--narrow", children: [
+        /* @__PURE__ */ jsx52("label", { htmlFor: "wizard-maxTokens", className: "semiont-form__label", children: t12.maxLength }),
+        /* @__PURE__ */ jsx52(
+          "input",
+          {
+            id: "wizard-maxTokens",
+            type: "number",
+            min: "100",
+            max: "4000",
+            step: "100",
+            value: maxTokens,
+            onChange: (e6) => setMaxTokens(parseInt(e6.target.value)),
+            className: "semiont-input"
+          }
+        )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs43("div", { className: "semiont-form__field", children: [
-      /* @__PURE__ */ jsx52("label", { htmlFor: "wizard-maxTokens", className: "semiont-form__label", children: t12.maxLength }),
-      /* @__PURE__ */ jsx52(
-        "input",
-        {
-          id: "wizard-maxTokens",
-          type: "number",
-          min: "100",
-          max: "4000",
-          step: "100",
-          value: maxTokens,
-          onChange: (e6) => setMaxTokens(parseInt(e6.target.value)),
-          className: "semiont-input"
-        }
-      ),
-      /* @__PURE__ */ jsx52("p", { className: "semiont-form__help", children: t12.maxLengthHelp })
-    ] }),
     /* @__PURE__ */ jsxs43("div", { className: "semiont-modal__actions", style: { paddingTop: "0.5rem" }, children: [
       /* @__PURE__ */ jsxs43(
         "button",
@@ -53790,7 +53770,7 @@ import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
 function ReferenceWizardModal({
   isOpen,
   onClose,
-  annotationId: annotationId4,
+  annotationId: annotationId3,
   resourceId: resourceId2,
   defaultTitle,
   entityTypes,
@@ -53817,14 +53797,13 @@ function ReferenceWizardModal({
   useEffect42(() => {
     if (!isOpen) return;
     const subscription = eventBus.get("match:search-results").subscribe((event) => {
-      const e6 = event;
-      if (annotationId4 && e6.referenceId === annotationId4) {
+      if (annotationId3 && event.referenceId === annotationId3) {
         setIsSearching(false);
-        setWizardStep({ step: "search-results", results: e6.results });
+        setWizardStep({ step: "search-results", results: event.response });
       }
     });
     return () => subscription.unsubscribe();
-  }, [isOpen, eventBus, annotationId4]);
+  }, [isOpen, eventBus, annotationId3]);
   const handleBind = useCallback31(() => {
     setWizardStep({ step: "configure-search" });
   }, []);
@@ -53832,35 +53811,36 @@ function ReferenceWizardModal({
     setWizardStep({ step: "configure-generation" });
   }, []);
   const handleCompose = useCallback31(() => {
-    if (!context || !annotationId4 || !resourceId2) return;
+    if (!context || !annotationId3 || !resourceId2) return;
     const contextWithHint = userHint ? { ...context, userHint } : context;
-    onComposeNavigate(contextWithHint, annotationId4, resourceId2, defaultTitle, entityTypes);
+    onComposeNavigate(contextWithHint, annotationId3, resourceId2, defaultTitle, entityTypes);
     onClose();
-  }, [context, annotationId4, resourceId2, defaultTitle, entityTypes, onComposeNavigate, onClose, userHint]);
+  }, [context, annotationId3, resourceId2, defaultTitle, entityTypes, onComposeNavigate, onClose, userHint]);
   const handleBackToGather = useCallback31(() => {
     setWizardStep({ step: "gather" });
   }, []);
   const handleSearchSubmit = useCallback31((config) => {
-    if (!annotationId4 || !context) return;
+    if (!annotationId3 || !context) return;
     setIsSearching(true);
     const contextWithHint = userHint ? { ...context, userHint } : context;
     eventBus.get("match:search-requested").next({
-      referenceId: annotationId4,
+      correlationId: crypto.randomUUID(),
+      referenceId: annotationId3,
       context: contextWithHint,
       limit: config.limit,
       useSemanticScoring: config.useSemanticScoring
     });
-  }, [annotationId4, context, eventBus, userHint]);
+  }, [annotationId3, context, eventBus, userHint]);
   const handleGenerateSubmit = useCallback31((config) => {
-    if (!annotationId4) return;
-    onGenerateSubmit(annotationId4, config);
+    if (!annotationId3) return;
+    onGenerateSubmit(annotationId3, config);
     onClose();
-  }, [annotationId4, onGenerateSubmit, onClose]);
+  }, [annotationId3, onGenerateSubmit, onClose]);
   const handleLink = useCallback31((targetResourceId) => {
-    if (!annotationId4) return;
-    onLinkResource(annotationId4, targetResourceId);
+    if (!annotationId3) return;
+    onLinkResource(annotationId3, targetResourceId);
     onClose();
-  }, [annotationId4, onLinkResource, onClose]);
+  }, [annotationId3, onLinkResource, onClose]);
   const stepTitle = wizardStep.step === "gather" ? t12.gatherTitle : wizardStep.step === "configure-generation" ? t12.configureGenerationTitle : wizardStep.step === "configure-search" ? t12.configureSearchTitle : t12.searchResultsTitle;
   return /* @__PURE__ */ jsx55(Ke, { appear: true, show: isOpen, children: /* @__PURE__ */ jsxs46(ht, { as: "div", className: "semiont-search-modal", onClose, children: [
     /* @__PURE__ */ jsx55(
@@ -55748,7 +55728,7 @@ var UserCircleIcon_default = ForwardRef17;
 
 // src/hooks/usePanelBrowse.ts
 import { useState as useState41, useCallback as useCallback33, useEffect as useEffect46 } from "react";
-var COMMON_PANELS = ["user", "settings"];
+var COMMON_PANELS = ["knowledge-base", "user", "settings"];
 var RESOURCE_PANELS = ["history", "info", "annotations", "collaboration", "jsonld"];
 var tabGenerationCounter = 0;
 function usePanelBrowse() {
@@ -56605,23 +56585,51 @@ function GoogleIcon() {
     )
   ] });
 }
+function normalizeUrlForProbe(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+  if (/^https?:\/\//i.test(trimmed)) return trimmed;
+  return `http://${trimmed}`;
+}
 function CredentialsAuthForm({
+  lockedBackendUrl,
   onSubmit,
   translations: t12
 }) {
+  const [backendUrl, setBackendUrl] = React47.useState(lockedBackendUrl ?? "");
   const [email, setEmail] = React47.useState("");
   const [password, setPassword] = React47.useState("");
   const [validationError, setValidationError] = React47.useState(null);
   const [fieldErrors, setFieldErrors] = React47.useState({});
+  const [urlProbeStatus, setUrlProbeStatus] = React47.useState("idle");
+  const probeUrl = async (raw) => {
+    const url = normalizeUrlForProbe(raw);
+    if (!url) return;
+    try {
+      new URL(url);
+    } catch {
+      setFieldErrors((prev) => ({ ...prev, backendUrl: t12.errorBackendUrlInvalid }));
+      setUrlProbeStatus("error");
+      return;
+    }
+    setUrlProbeStatus("checking");
+    try {
+      const res = await fetch(`${url}/api/health`, { signal: AbortSignal.timeout(5e3) });
+      setUrlProbeStatus(res.ok ? "ok" : "error");
+      if (!res.ok) {
+        setFieldErrors((prev) => ({ ...prev, backendUrl: t12.errorBackendUrlUnreachable }));
+      }
+    } catch {
+      setUrlProbeStatus("error");
+      setFieldErrors((prev) => ({ ...prev, backendUrl: t12.errorBackendUrlUnreachable }));
+    }
+  };
   const handleSubmit = async (e6) => {
     e6.preventDefault();
     const errors = {};
-    if (!email) {
-      errors.email = t12.errorEmailRequired;
-    }
-    if (!password) {
-      errors.password = t12.errorPasswordRequired;
-    }
+    if (!backendUrl.trim()) errors.backendUrl = t12.errorBackendUrlRequired;
+    if (!email) errors.email = t12.errorEmailRequired;
+    if (!password) errors.password = t12.errorPasswordRequired;
     if (Object.keys(errors).length > 0) {
       setFieldErrors(errors);
       setValidationError(Object.values(errors)[0]);
@@ -56629,11 +56637,53 @@ function CredentialsAuthForm({
     }
     setFieldErrors({});
     setValidationError(null);
-    await onSubmit(email, password);
+    await onSubmit(backendUrl.trim(), email, password);
   };
+  const probeIndicator = !lockedBackendUrl && urlProbeStatus !== "idle" ? /* @__PURE__ */ jsxs68(
+    "span",
+    {
+      className: `semiont-form__url-status semiont-form__url-status--${urlProbeStatus}`,
+      "aria-live": "polite",
+      children: [
+        urlProbeStatus === "checking" && "\u27F3",
+        urlProbeStatus === "ok" && "\u2713",
+        urlProbeStatus === "error" && "\u2717"
+      ]
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs68(Fragment16, { children: [
     validationError && /* @__PURE__ */ jsx79("div", { className: "semiont-auth__error", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ jsx79("div", { className: "semiont-auth__error-text", children: validationError }) }),
     /* @__PURE__ */ jsxs68("form", { onSubmit: handleSubmit, className: "semiont-auth__form", noValidate: true, children: [
+      /* @__PURE__ */ jsxs68("div", { className: "semiont-form__field", children: [
+        /* @__PURE__ */ jsx79("label", { htmlFor: "backend-url", className: "semiont-form__label", children: t12.backendUrlLabel }),
+        /* @__PURE__ */ jsxs68("div", { className: "semiont-form__input-row", children: [
+          /* @__PURE__ */ jsx79(
+            "input",
+            {
+              id: "backend-url",
+              type: "url",
+              value: backendUrl,
+              onChange: (e6) => {
+                if (lockedBackendUrl) return;
+                setBackendUrl(e6.target.value);
+                setUrlProbeStatus("idle");
+                if (fieldErrors.backendUrl) setFieldErrors({ ...fieldErrors, backendUrl: void 0 });
+              },
+              onBlur: () => {
+                if (!lockedBackendUrl) probeUrl(backendUrl);
+              },
+              readOnly: !!lockedBackendUrl,
+              placeholder: t12.backendUrlPlaceholder,
+              className: `semiont-input${lockedBackendUrl ? " semiont-input--readonly" : ""}`,
+              "aria-invalid": !!fieldErrors.backendUrl,
+              "aria-describedby": fieldErrors.backendUrl ? "backend-url-error" : void 0,
+              required: true
+            }
+          ),
+          probeIndicator
+        ] }),
+        fieldErrors.backendUrl && /* @__PURE__ */ jsx79("span", { id: "backend-url-error", className: "semiont-form__error", role: "alert", children: fieldErrors.backendUrl })
+      ] }),
       /* @__PURE__ */ jsxs68("div", { className: "semiont-form__field", children: [
         /* @__PURE__ */ jsx79("label", { htmlFor: "email", className: "semiont-form__label", children: t12.emailLabel }),
         /* @__PURE__ */ jsx79(
@@ -56644,9 +56694,7 @@ function CredentialsAuthForm({
             value: email,
             onChange: (e6) => {
               setEmail(e6.target.value);
-              if (fieldErrors.email) {
-                setFieldErrors({ ...fieldErrors, email: void 0 });
-              }
+              if (fieldErrors.email) setFieldErrors({ ...fieldErrors, email: void 0 });
             },
             placeholder: t12.emailPlaceholder,
             className: "semiont-input",
@@ -56667,9 +56715,7 @@ function CredentialsAuthForm({
             value: password,
             onChange: (e6) => {
               setPassword(e6.target.value);
-              if (fieldErrors.password) {
-                setFieldErrors({ ...fieldErrors, password: void 0 });
-              }
+              if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: void 0 });
             },
             placeholder: t12.passwordPlaceholder,
             className: "semiont-input",
@@ -56691,12 +56737,18 @@ function CredentialsAuthForm({
 function SignInForm({
   onGoogleSignIn,
   onCredentialsSignIn,
+  backendUrl,
   error,
   showCredentialsAuth = false,
   isLoading = false,
   Link,
   translations: t12
 }) {
+  const handleGoogleClick = () => {
+    if (backendUrl) {
+      onGoogleSignIn(backendUrl);
+    }
+  };
   return /* @__PURE__ */ jsx79("main", { className: "semiont-auth__main", role: "main", children: /* @__PURE__ */ jsx79("div", { className: "semiont-auth__container", children: /* @__PURE__ */ jsxs68("div", { className: "semiont-auth__content", children: [
     /* @__PURE__ */ jsxs68("section", { "aria-labelledby": "signin-heading", className: "semiont-auth__branding", children: [
       /* @__PURE__ */ jsx79("h1", { id: "signin-heading", className: "sr-only", children: t12.pageTitle }),
@@ -56706,8 +56758,15 @@ function SignInForm({
     ] }),
     error && /* @__PURE__ */ jsx79("div", { className: "semiont-auth__error-container", children: /* @__PURE__ */ jsx79("div", { className: "semiont-auth__error", children: /* @__PURE__ */ jsx79("div", { className: "semiont-auth__error-text", children: error }) }) }),
     /* @__PURE__ */ jsx79("div", { className: "semiont-auth__forms", children: !isLoading ? /* @__PURE__ */ jsxs68(Fragment16, { children: [
-      showCredentialsAuth && onCredentialsSignIn && /* @__PURE__ */ jsx79(CredentialsAuthForm, { onSubmit: onCredentialsSignIn, translations: t12 }),
-      /* @__PURE__ */ jsxs68("button", { onClick: onGoogleSignIn, className: `${buttonStyles.primary.base} semiont-button--full-width`, children: [
+      showCredentialsAuth && onCredentialsSignIn && /* @__PURE__ */ jsx79(
+        CredentialsAuthForm,
+        {
+          lockedBackendUrl: backendUrl,
+          onSubmit: onCredentialsSignIn,
+          translations: t12
+        }
+      ),
+      backendUrl && /* @__PURE__ */ jsxs68("button", { onClick: handleGoogleClick, className: `${buttonStyles.primary.base} semiont-button--full-width`, children: [
         /* @__PURE__ */ jsx79(GoogleIcon, {}),
         t12.continueWithGoogle
       ] }),
@@ -57778,8 +57837,8 @@ function ResourceDiscoveryPage({
   );
   const onNavigateToResourceRef = useRef34(onNavigateToResource);
   onNavigateToResourceRef.current = onNavigateToResource;
-  const handleEntityTypeFilter = useCallback35((entityType3) => {
-    setSelectedEntityType(entityType3);
+  const handleEntityTypeFilter = useCallback35((entityType2) => {
+    setSelectedEntityType(entityType2);
   }, []);
   const openResource = useCallback35((resource) => {
     const resourceId2 = getResourceId2(resource);
@@ -57919,71 +57978,39 @@ function ResourceDiscoveryPage({
 }
 
 // src/features/resource-viewer/components/ResourceViewerPage.tsx
-import { useState as useState50, useEffect as useEffect52, useCallback as useCallback38, useMemo as useMemo14 } from "react";
+import { useState as useState50, useEffect as useEffect52, useCallback as useCallback38, useMemo as useMemo13 } from "react";
 import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
-import { annotationId as annotationId3 } from "@semiont/core";
-import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType as getPrimaryMediaType2 } from "@semiont/api-client";
+import { annotationId as annotationId2 } from "@semiont/core";
+import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType as getPrimaryMediaType2, getMimeCategory as getMimeCategory3 } from "@semiont/api-client";
+
+// src/hooks/useMediaToken.ts
+function useMediaToken(id2) {
+  const resources = useResources();
+  const { data: data2, isLoading } = resources.mediaToken.useQuery(id2);
+  return {
+    token: data2?.token,
+    loading: isLoading
+  };
+}
 
 // src/hooks/useBindFlow.ts
 import { useEffect as useEffect48, useRef as useRef35 } from "react";
 import { accessToken as accessToken4 } from "@semiont/core";
-function toAccessToken2(token) {
-  return token ? accessToken4(token) : void 0;
-}
 function useBindFlow(rUri) {
-  const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
   const { showError } = useToast();
-  const rUriRef = useRef35(rUri);
-  useEffect48(() => {
-    rUriRef.current = rUri;
-  });
-  const clientRef = useRef35(client);
-  useEffect48(() => {
-    clientRef.current = client;
-  });
   const tokenRef = useRef35(token);
   useEffect48(() => {
     tokenRef.current = token;
   });
   useEffect48(() => {
-    const handleAnnotationUpdateBody = (event) => {
-      const annotationId4 = event.annotationId;
-      const finishedSub = eventBus.get("bind:finished").subscribe((finishedEvent) => {
-        if (finishedEvent.annotationId !== annotationId4) return;
-        finishedSub.unsubscribe();
-        failedSub.unsubscribe();
-        eventBus.get("bind:body-updated").next({ annotationId: annotationId4 });
-      });
-      const failedSub = eventBus.get("bind:failed").subscribe((failedEvent) => {
-        finishedSub.unsubscribe();
-        failedSub.unsubscribe();
-        console.error("Failed to update annotation body:", failedEvent.error);
-        eventBus.get("bind:body-update-failed").next({ error: failedEvent.error ?? new Error("Bind failed") });
-      });
-      clientRef.current.sse.bindAnnotation(
-        rUriRef.current,
-        annotationId4,
-        { resourceId: event.resourceId, operations: event.operations },
-        { auth: toAccessToken2(tokenRef.current), eventBus }
-      );
-    };
-    const handleSearchRequested = (event) => {
-      clientRef.current.sse.bindSearch(rUriRef.current, {
-        referenceId: event.referenceId,
-        context: event.context,
-        limit: event.limit,
-        useSemanticScoring: event.useSemanticScoring
-      }, { auth: toAccessToken2(tokenRef.current), eventBus });
-    };
-    const updateSub = eventBus.get("bind:update-body").subscribe(handleAnnotationUpdateBody);
-    const searchSub = eventBus.get("match:search-requested").subscribe(handleSearchRequested);
-    return () => {
-      updateSub.unsubscribe();
-      searchSub.unsubscribe();
-    };
-  }, [eventBus]);
+    const sub = client.flows.bind(
+      rUri,
+      () => tokenRef.current ? accessToken4(tokenRef.current) : void 0
+    );
+    return () => sub.unsubscribe();
+  }, [rUri, client]);
   useEventSubscriptions({
     "bind:body-update-failed": ({ error }) => showError(`Failed to update reference: ${error.message}`)
   });
@@ -57991,102 +58018,46 @@ function useBindFlow(rUri) {
 
 // src/hooks/useMarkFlow.ts
 import { useState as useState47, useRef as useRef36, useEffect as useEffect49, useCallback as useCallback36 } from "react";
-import { accessToken as accessToken5, entityType as entityType2, annotationId as annotationId2 } from "@semiont/core";
-function toAccessToken3(token) {
-  return token ? accessToken5(token) : void 0;
-}
+import { accessToken as accessToken5 } from "@semiont/core";
 function useMarkFlow(rUri) {
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
   const { showSuccess, showError, showInfo } = useToast();
-  const clientRef = useRef36(client);
-  const rUriRef = useRef36(rUri);
   const tokenRef = useRef36(token);
-  useEffect49(() => {
-    clientRef.current = client;
-  });
-  useEffect49(() => {
-    rUriRef.current = rUri;
-  });
   useEffect49(() => {
     tokenRef.current = token;
   });
+  useEffect49(() => {
+    const sub = client.flows.mark(
+      rUri,
+      () => tokenRef.current ? accessToken5(tokenRef.current) : void 0
+    );
+    return () => sub.unsubscribe();
+  }, [rUri, client]);
   const [pendingAnnotation, setPendingAnnotation] = useState47(null);
-  const handleAnnotationRequested = useCallback36((pending) => {
-    const MOTIVATION_TO_TAB = {
-      highlighting: "annotations",
-      commenting: "annotations",
-      assessing: "annotations",
-      tagging: "annotations",
-      linking: "annotations"
-    };
-    eventBus.get("browse:panel-open").next({ panel: MOTIVATION_TO_TAB[pending.motivation] || "annotations" });
-    setPendingAnnotation(pending);
-  }, []);
   const selectionToSelector = useCallback36((selection2) => {
-    if (selection2.svgSelector) {
-      return {
-        type: "SvgSelector",
-        value: selection2.svgSelector
-      };
-    }
+    if (selection2.svgSelector) return { type: "SvgSelector", value: selection2.svgSelector };
     if (selection2.fragmentSelector) {
-      const selectors = [
-        {
-          type: "FragmentSelector",
-          value: selection2.fragmentSelector,
-          ...selection2.conformsTo && { conformsTo: selection2.conformsTo }
-        }
-      ];
-      if (selection2.exact) {
-        selectors.push({
-          type: "TextQuoteSelector",
-          exact: selection2.exact,
-          ...selection2.prefix && { prefix: selection2.prefix },
-          ...selection2.suffix && { suffix: selection2.suffix }
-        });
-      }
+      const selectors = [{ type: "FragmentSelector", value: selection2.fragmentSelector, ...selection2.conformsTo && { conformsTo: selection2.conformsTo } }];
+      if (selection2.exact) selectors.push({ type: "TextQuoteSelector", exact: selection2.exact, ...selection2.prefix && { prefix: selection2.prefix }, ...selection2.suffix && { suffix: selection2.suffix } });
       return selectors;
     }
-    return {
-      type: "TextQuoteSelector",
-      exact: selection2.exact,
-      ...selection2.prefix && { prefix: selection2.prefix },
-      ...selection2.suffix && { suffix: selection2.suffix }
-    };
+    return { type: "TextQuoteSelector", exact: selection2.exact, ...selection2.prefix && { prefix: selection2.prefix }, ...selection2.suffix && { suffix: selection2.suffix } };
   }, []);
-  const handleCommentRequested = useCallback36((selection2) => {
-    handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "commenting" });
-  }, [handleAnnotationRequested, selectionToSelector]);
-  const handleTagRequested = useCallback36((selection2) => {
-    handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "tagging" });
-  }, [handleAnnotationRequested, selectionToSelector]);
-  const handleAssessmentRequested = useCallback36((selection2) => {
-    handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "assessing" });
-  }, [handleAnnotationRequested, selectionToSelector]);
-  const handleReferenceRequested = useCallback36((selection2) => {
-    handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "linking" });
-  }, [handleAnnotationRequested, selectionToSelector]);
-  const handleAnnotationCancelPending = useCallback36(() => {
-    setPendingAnnotation(null);
+  const handleAnnotationRequested = useCallback36((pending) => {
+    const MOTIVATION_TO_TAB = { highlighting: "annotations", commenting: "annotations", assessing: "annotations", tagging: "annotations", linking: "annotations" };
+    eventBus.get("browse:panel-open").next({ panel: MOTIVATION_TO_TAB[pending.motivation] || "annotations" });
+    setPendingAnnotation(pending);
   }, []);
   const [assistingMotivation, setAssistingMotivation] = useState47(null);
   const [progress, setProgress] = useState47(null);
   const assistStreamRef = useRef36(null);
   const progressDismissTimeoutRef = useRef36(null);
-  const handleMarkProgress = useCallback36((chunk) => {
-    setProgress(chunk);
-  }, []);
   const handleAnnotationComplete = useCallback36((event) => {
-    setAssistingMotivation((prev) => {
-      if (!event.motivation || event.motivation !== prev) return prev;
-      return null;
-    });
+    setAssistingMotivation((prev) => !event.motivation || event.motivation !== prev ? prev : null);
     showSuccess("Annotation complete");
-    if (progressDismissTimeoutRef.current) {
-      clearTimeout(progressDismissTimeoutRef.current);
-    }
+    if (progressDismissTimeoutRef.current) clearTimeout(progressDismissTimeoutRef.current);
     progressDismissTimeoutRef.current = setTimeout(() => {
       setProgress(null);
       progressDismissTimeoutRef.current = null;
@@ -58099,318 +58070,134 @@ function useMarkFlow(rUri) {
     }
     setAssistingMotivation(null);
     setProgress(null);
-    const errorMessage = event.payload.error || "Annotation failed";
-    showError(errorMessage);
+    showError(event.message || "Annotation failed");
   }, [showError]);
-  const handleProgressDismiss = useCallback36(() => {
-    if (progressDismissTimeoutRef.current) {
-      clearTimeout(progressDismissTimeoutRef.current);
-      progressDismissTimeoutRef.current = null;
-    }
-    setProgress(null);
-  }, []);
-  useEffect49(() => {
-    const handleAnnotationSubmit = async (event) => {
-      const currentClient = clientRef.current;
-      const currentRUri = rUriRef.current;
-      if (!currentClient || !currentRUri) return;
-      try {
-        const result = await currentClient.markAnnotation(currentRUri, {
-          motivation: event.motivation,
-          target: {
-            source: currentRUri,
-            selector: event.selector
-          },
-          body: event.body
-        }, { auth: toAccessToken3(tokenRef.current) });
-        setPendingAnnotation(null);
-        eventBus.get("mark:created").next({ annotationId: annotationId2(result.annotationId) });
-      } catch (error) {
-        console.error("Failed to create annotation:", error);
-        eventBus.get("mark:create-failed").next({ error });
-      }
-    };
-    const handleAnnotationDelete = async (event) => {
-      const currentClient = clientRef.current;
-      const currentRUri = rUriRef.current;
-      try {
-        await currentClient.deleteAnnotation(currentRUri, event.annotationId, { auth: toAccessToken3(tokenRef.current) });
-        eventBus.get("mark:deleted").next({ annotationId: event.annotationId });
-      } catch (error) {
-        console.error("Failed to delete annotation:", error);
-        eventBus.get("mark:delete-failed").next({ error });
-      }
-    };
-    const handleAssistStart = async (event) => {
-      const currentClient = clientRef.current;
-      const currentRUri = rUriRef.current;
-      try {
-        if (assistStreamRef.current) {
-          assistStreamRef.current.abort();
-        }
-        assistStreamRef.current = new AbortController();
-        if (progressDismissTimeoutRef.current) {
-          clearTimeout(progressDismissTimeoutRef.current);
-          progressDismissTimeoutRef.current = null;
-        }
-        setAssistingMotivation(event.motivation);
-        setProgress(null);
-        const sseOptions = { auth: toAccessToken3(tokenRef.current), eventBus };
-        if (event.motivation === "tagging") {
-          const { schemaId, categories } = event.options;
-          if (!schemaId || !categories || categories.length === 0) {
-            throw new Error("Tag assist requires schemaId and categories");
-          }
-          currentClient.sse.markTags(currentRUri, { schemaId, categories }, sseOptions);
-        } else if (event.motivation === "linking") {
-          const { entityTypes, includeDescriptiveReferences } = event.options;
-          if (!entityTypes || entityTypes.length === 0) {
-            throw new Error("Reference assist requires entityTypes");
-          }
-          currentClient.sse.markReferences(currentRUri, {
-            entityTypes: entityTypes.map((et) => entityType2(et)),
-            includeDescriptiveReferences: includeDescriptiveReferences || false
-          }, sseOptions);
-        } else if (event.motivation === "highlighting") {
-          currentClient.sse.markHighlights(currentRUri, {
-            instructions: event.options.instructions,
-            density: event.options.density
-          }, sseOptions);
-        } else if (event.motivation === "assessing") {
-          currentClient.sse.markAssessments(currentRUri, {
-            instructions: event.options.instructions,
-            tone: event.options.tone,
-            density: event.options.density,
-            language: event.options.language
-          }, sseOptions);
-        } else if (event.motivation === "commenting") {
-          currentClient.sse.markComments(currentRUri, {
-            instructions: event.options.instructions,
-            tone: event.options.tone,
-            density: event.options.density,
-            language: event.options.language
-          }, sseOptions);
-        }
-      } catch (error) {
-        if (error instanceof Error && error.name === "AbortError") {
-          eventBus.get("mark:assist-cancelled").next(void 0);
-        } else {
-          console.error("Annotation assist failed:", error);
-          setAssistingMotivation(null);
-          setProgress(null);
-        }
-      }
-    };
-    const handleJobCancelRequested = (event) => {
-      if (event.jobType === "annotation") {
-        assistStreamRef.current?.abort();
-        assistStreamRef.current = null;
-      }
-    };
-    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);
-    return () => {
-      subscription1.unsubscribe();
-      subscription2.unsubscribe();
-      subscription3.unsubscribe();
-      subscription4.unsubscribe();
-      assistStreamRef.current?.abort();
-    };
-  }, [eventBus]);
   useEventSubscriptions({
-    // Manual annotation
     "mark:requested": handleAnnotationRequested,
-    "mark:select-comment": handleCommentRequested,
-    "mark:select-tag": handleTagRequested,
-    "mark:select-assessment": handleAssessmentRequested,
-    "mark:select-reference": handleReferenceRequested,
-    "mark:cancel-pending": handleAnnotationCancelPending,
-    // AI-assisted annotation state updates
-    "mark:progress": handleMarkProgress,
+    "mark:select-comment": (s11) => handleAnnotationRequested({ selector: selectionToSelector(s11), motivation: "commenting" }),
+    "mark:select-tag": (s11) => handleAnnotationRequested({ selector: selectionToSelector(s11), motivation: "tagging" }),
+    "mark:select-assessment": (s11) => handleAnnotationRequested({ selector: selectionToSelector(s11), motivation: "assessing" }),
+    "mark:select-reference": (s11) => handleAnnotationRequested({ selector: selectionToSelector(s11), motivation: "linking" }),
+    "mark:cancel-pending": () => setPendingAnnotation(null),
+    "mark:created": () => setPendingAnnotation(null),
+    "mark:assist-request": (event) => {
+      if (progressDismissTimeoutRef.current) {
+        clearTimeout(progressDismissTimeoutRef.current);
+        progressDismissTimeoutRef.current = null;
+      }
+      setAssistingMotivation(event.motivation);
+      setProgress(null);
+    },
+    "mark:progress": (chunk) => setProgress(chunk),
     "mark:assist-finished": handleAnnotationComplete,
     "mark:assist-failed": handleAnnotationFailed,
-    "mark:progress-dismiss": handleProgressDismiss,
+    "mark:progress-dismiss": () => {
+      if (progressDismissTimeoutRef.current) {
+        clearTimeout(progressDismissTimeoutRef.current);
+        progressDismissTimeoutRef.current = null;
+      }
+      setProgress(null);
+    },
     "mark:assist-cancelled": () => showInfo("Annotation cancelled"),
-    // CRUD error notifications
     "mark:create-failed": ({ error }) => showError(`Failed to create annotation: ${error.message}`),
     "mark:delete-failed": ({ error }) => showError(`Failed to delete annotation: ${error.message}`)
   });
-  useEffect49(() => {
-    return () => {
-      if (progressDismissTimeoutRef.current) {
-        clearTimeout(progressDismissTimeoutRef.current);
-      }
-    };
+  useEffect49(() => () => {
+    if (progressDismissTimeoutRef.current) clearTimeout(progressDismissTimeoutRef.current);
   }, []);
-  return {
-    pendingAnnotation,
-    assistingMotivation,
-    progress,
-    assistStreamRef
-  };
+  return { pendingAnnotation, assistingMotivation, progress, assistStreamRef };
 }
 
 // src/hooks/useYieldFlow.ts
 import { useState as useState48, useCallback as useCallback37, useEffect as useEffect50, useRef as useRef37 } from "react";
 import { annotationId as makeAnnotationId, resourceId as makeResourceId, accessToken as accessToken6 } from "@semiont/core";
-function toAccessToken4(token) {
-  return token ? accessToken6(token) : void 0;
-}
 function useYieldFlow(locale, resourceId2, clearNewAnnotationId) {
   const eventBus = useEventBus();
   const client = useApiClient();
   const token = useAuthToken();
   const { showSuccess, showError } = useToast();
-  const clientRef = useRef37(client);
   const tokenRef = useRef37(token);
-  useEffect50(() => {
-    clientRef.current = client;
-  });
   useEffect50(() => {
     tokenRef.current = token;
   });
-  const generationStreamRef = useRef37(null);
   const [isGenerating, setIsGenerating] = useState48(false);
   const [generationProgress, setYieldProgress] = useState48(null);
-  const handleProgressEvent = useCallback37((chunk) => {
-    setYieldProgress(chunk);
-    setIsGenerating(true);
-  }, []);
-  const clearProgress = useCallback37(() => {
-    setYieldProgress(null);
-  }, []);
+  useEffect50(() => {
+    const sub = client.flows.yield(
+      makeResourceId(resourceId2),
+      () => tokenRef.current ? accessToken6(tokenRef.current) : void 0
+    );
+    return () => sub.unsubscribe();
+  }, [resourceId2, client]);
   const handleGenerateDocument = useCallback37((referenceId, options) => {
     clearNewAnnotationId(makeAnnotationId(referenceId));
     eventBus.get("yield:request").next({
       annotationId: makeAnnotationId(referenceId),
       resourceId: makeResourceId(resourceId2),
-      options: {
-        ...options,
-        language: options.language || locale,
-        context: options.context,
-        storageUri: options.storageUri
-      }
+      options: { ...options, language: options.language || locale }
     });
   }, [resourceId2, clearNewAnnotationId, locale]);
-  const handleGenerationComplete = useCallback37((progress) => {
-    setYieldProgress(progress);
-    setIsGenerating(false);
-    if (progress.resourceName) {
-      showSuccess(`Resource "${progress.resourceName}" created successfully!`);
-    } else {
-      showSuccess("Resource created successfully!");
-    }
-    setTimeout(() => clearProgress(), 2e3);
-  }, [showSuccess, clearProgress]);
-  const handleGenerationFailed = useCallback37(({ error }) => {
+  const clearProgress = useCallback37(() => {
     setYieldProgress(null);
-    setIsGenerating(false);
-    showError(`Resource generation failed: ${error.message}`);
-  }, [showError]);
-  useEffect50(() => {
-    const handleGenerationStart = async (event) => {
-      try {
-        generationStreamRef.current?.abort();
-        generationStreamRef.current = new AbortController();
-        const sseOptions = { auth: toAccessToken4(tokenRef.current), eventBus };
-        clientRef.current.sse.yieldResource(
-          event.resourceId,
-          event.annotationId,
-          event.options,
-          sseOptions
-        );
-      } catch (error) {
-        if (error.name !== "AbortError") {
-          console.error("[useYieldFlow] Generation failed:", error);
-          eventBus.get("yield:failed").next({ error });
-        }
-      }
-    };
-    const handleJobCancelRequested = (event) => {
-      if (event.jobType === "generation") {
-        generationStreamRef.current?.abort();
-        generationStreamRef.current = null;
-      }
-    };
-    const subscription1 = eventBus.get("yield:request").subscribe(handleGenerationStart);
-    const subscription2 = eventBus.get("job:cancel-requested").subscribe(handleJobCancelRequested);
-    return () => {
-      subscription1.unsubscribe();
-      subscription2.unsubscribe();
-      generationStreamRef.current?.abort();
-    };
-  }, [eventBus]);
+  }, []);
   useEventSubscriptions({
-    "yield:progress": handleProgressEvent,
-    "yield:finished": handleGenerationComplete,
-    "yield:failed": handleGenerationFailed
+    "yield:progress": (chunk) => {
+      setYieldProgress(chunk);
+      setIsGenerating(true);
+    },
+    "yield:finished": (progress) => {
+      setYieldProgress(progress);
+      setIsGenerating(false);
+      showSuccess(progress.resourceName ? `Resource "${progress.resourceName}" created successfully!` : "Resource created successfully!");
+      setTimeout(() => clearProgress(), 2e3);
+    },
+    "yield:failed": ({ error, message }) => {
+      setYieldProgress(null);
+      setIsGenerating(false);
+      const msg = message || (error instanceof Error ? error.message : error) || "Generation failed";
+      showError(`Resource generation failed: ${msg}`);
+    }
   });
-  return {
-    isGenerating,
-    generationProgress,
-    onGenerateDocument: handleGenerateDocument
-  };
+  return { isGenerating, generationProgress, onGenerateDocument: handleGenerateDocument };
 }
 
 // src/hooks/useContextGatherFlow.ts
 import { useState as useState49, useEffect as useEffect51, useRef as useRef38 } from "react";
 import { accessToken as accessToken7 } from "@semiont/core";
-function toAccessToken5(token) {
-  return token ? accessToken7(token) : void 0;
-}
-function useContextGatherFlow(eventBus, config) {
+function useContextGatherFlow(config) {
+  const client = useApiClient();
   const token = useAuthToken();
-  const [gatherContext, setCorrelationContext] = useState49(null);
-  const [gatherLoading, setCorrelationLoading] = useState49(false);
-  const [gatherError, setCorrelationError] = useState49(null);
-  const [gatherAnnotationId, setCorrelationAnnotationId] = useState49(null);
-  const configRef = useRef38(config);
   const tokenRef = useRef38(token);
-  useEffect51(() => {
-    configRef.current = config;
-  });
   useEffect51(() => {
     tokenRef.current = token;
   });
+  const [gatherContext, setGatherContext] = useState49(null);
+  const [gatherLoading, setGatherLoading] = useState49(false);
+  const [gatherError, setGatherError] = useState49(null);
+  const [gatherAnnotationId, setGatherAnnotationId] = useState49(null);
   useEffect51(() => {
-    const handleGatherRequested = (event) => {
-      setCorrelationLoading(true);
-      setCorrelationError(null);
-      setCorrelationContext(null);
-      setCorrelationAnnotationId(event.annotationId);
-      const { client, resourceId: resourceId2 } = configRef.current;
-      const contextWindow = event.options?.contextWindow ?? 2e3;
-      const finishedSub = eventBus.get("gather:annotation-finished").subscribe((finishedEvent) => {
-        if (finishedEvent.annotationId !== event.annotationId) return;
-        finishedSub.unsubscribe();
-        failedSub.unsubscribe();
-        const context = finishedEvent.response.context ?? null;
-        setCorrelationContext(context);
-        setCorrelationLoading(false);
-        eventBus.get("gather:complete").next({
-          annotationId: finishedEvent.annotationId,
-          response: finishedEvent.response
-        });
-      });
-      const failedSub = eventBus.get("gather:failed").subscribe((failedEvent) => {
-        if (failedEvent.annotationId !== event.annotationId) return;
-        finishedSub.unsubscribe();
-        failedSub.unsubscribe();
-        setCorrelationError(failedEvent.error);
-        setCorrelationLoading(false);
-      });
-      client.sse.gatherAnnotation(
-        resourceId2,
-        event.annotationId,
-        { contextWindow },
-        { auth: toAccessToken5(tokenRef.current), eventBus }
-      );
-    };
-    const subscription = eventBus.get("gather:requested").subscribe(handleGatherRequested);
-    return () => subscription.unsubscribe();
-  }, [eventBus]);
+    const sub = client.flows.gatherContext(
+      config.resourceId,
+      () => tokenRef.current ? accessToken7(tokenRef.current) : void 0
+    );
+    return () => sub.unsubscribe();
+  }, [config.resourceId, client]);
+  useEventSubscriptions({
+    "gather:requested": (event) => {
+      setGatherLoading(true);
+      setGatherError(null);
+      setGatherContext(null);
+      setGatherAnnotationId(event.annotationId);
+    },
+    "gather:complete": (event) => {
+      setGatherContext(event.response.context ?? null);
+      setGatherLoading(false);
+    },
+    "gather:failed": (event) => {
+      setGatherError(event.error);
+      setGatherLoading(false);
+    }
+  });
   return { gatherContext, gatherLoading, gatherError, gatherAnnotationId };
 }
 
@@ -58423,7 +58210,8 @@ function ResourceViewerPage({
   Link,
   routes,
   ToolbarPanels,
-  refetchDocument
+  refetchDocument,
+  streamStatus
 }) {
   const tw = useTranslations("ReferenceWizard");
   const eventBus = useEventBus();
@@ -58437,9 +58225,15 @@ function ResourceViewerPage({
   const { triggerSparkleAnimation, clearNewAnnotationId } = useResourceAnnotations();
   const resources = useResources();
   const entityTypesAPI = useEntityTypes();
-  const { content: content4, loading: contentLoading } = useResourceContent(rUri, resource);
-  const { data: annotationsData } = resources.annotations.useQuery(rUri);
-  const annotations = useMemo14(
+  const resourceMediaType = getPrimaryMediaType2(resource) || "text/plain";
+  const isBinary = getMimeCategory3(resourceMediaType) === "image";
+  const { content: textContent, loading: textLoading } = useResourceContent(rUri, resource, !isBinary);
+  const { token: mediaToken, loading: mediaTokenLoading } = useMediaToken(rUri);
+  const binaryContent = isBinary && mediaToken && client ? `${client.baseUrl}/api/resources/${rUri}?token=${mediaToken}` : "";
+  const content4 = isBinary ? binaryContent : textContent;
+  const contentLoading = isBinary ? mediaTokenLoading : textLoading;
+  const annotationsData = useObservable(client.stores.annotations.listForResource(rUri));
+  const annotations = useMemo13(
     () => annotationsData?.annotations || [],
     [annotationsData?.annotations]
   );
@@ -58455,7 +58249,7 @@ function ResourceViewerPage({
     generationProgress,
     onGenerateDocument
   } = useYieldFlow(locale, rUri, clearNewAnnotationId);
-  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow(eventBus, { client, resourceId: rUri });
+  const { gatherContext, gatherLoading, gatherError } = useContextGatherFlow({ resourceId: rUri });
   const [wizardOpen, setWizardOpen] = useState50(false);
   const [wizardAnnotationId, setWizardAnnotationId] = useState50(null);
   const [wizardResourceId, setWizardResourceId] = useState50(null);
@@ -58468,7 +58262,7 @@ function ResourceViewerPage({
       setWizardDefaultTitle(event.defaultTitle);
       setWizardEntityTypes(event.entityTypes);
       setWizardOpen(true);
-      eventBus.get("gather:requested").next({ annotationId: event.annotationId, resourceId: event.resourceId });
+      eventBus.get("gather:requested").next({ correlationId: crypto.randomUUID(), annotationId: event.annotationId, resourceId: event.resourceId });
     });
     return () => subscription.unsubscribe();
   }, [eventBus]);
@@ -58488,7 +58282,7 @@ function ResourceViewerPage({
   }, [onGenerateDocument]);
   const handleWizardLinkResource = useCallback38((referenceId, targetResourceId) => {
     eventBus.get("bind:update-body").next({
-      annotationId: annotationId3(referenceId),
+      annotationId: annotationId2(referenceId),
       resourceId: rUri,
       operations: [{
         op: "add",
@@ -58514,13 +58308,6 @@ function ResourceViewerPage({
       reason: "compose-from-wizard"
     });
   }, []);
-  const debouncedInvalidateAnnotations = useDebouncedCallback(
-    () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
-    },
-    500
-  );
   useEffect52(() => {
     if (resource && rUri) {
       const mediaType = getPrimaryMediaType2(resource);
@@ -58533,68 +58320,31 @@ function ResourceViewerPage({
   useResourceEvents({
     rUri,
     autoConnect: true,
-    // Annotation events - use debounced invalidation to batch rapid updates
     onAnnotationAdded: useCallback38((_event) => {
-      debouncedInvalidateAnnotations();
-    }, [debouncedInvalidateAnnotations]),
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
+    }, [queryClient, rUri]),
     onAnnotationRemoved: useCallback38((_event) => {
-      debouncedInvalidateAnnotations();
-    }, [debouncedInvalidateAnnotations]),
-    onAnnotationBodyUpdated: useCallback38((event) => {
-      queryClient.setQueryData(QUERY_KEYS.resources.annotations(rUri), (old) => {
-        if (!old) return old;
-        return {
-          ...old,
-          annotations: old.annotations.map((annotation) => {
-            if (annotation.id === event.payload.annotationId) {
-              let bodyArray = Array.isArray(annotation.body) ? [...annotation.body] : [];
-              for (const op of event.payload.operations || []) {
-                if (op.op === "add") {
-                  bodyArray.push(op.item);
-                } else if (op.op === "remove") {
-                  bodyArray = bodyArray.filter(
-                    (item) => JSON.stringify(item) !== JSON.stringify(op.item)
-                  );
-                } else if (op.op === "replace") {
-                  const index2 = bodyArray.findIndex(
-                    (item) => JSON.stringify(item) === JSON.stringify(op.oldItem)
-                  );
-                  if (index2 !== -1) {
-                    bodyArray[index2] = op.newItem;
-                  }
-                }
-              }
-              return {
-                ...annotation,
-                body: bodyArray
-              };
-            }
-            return annotation;
-          })
-        };
-      });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
+    }, [queryClient, rUri]),
+    onAnnotationBodyUpdated: useCallback38((_event) => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
     }, [queryClient, rUri]),
     // Document status events
     onDocumentArchived: useCallback38((_event) => {
       refetchDocument();
       showSuccess("This document has been archived");
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, showSuccess, debouncedInvalidateAnnotations]),
+    }, [refetchDocument, showSuccess]),
     onDocumentUnarchived: useCallback38((_event) => {
       refetchDocument();
       showSuccess("This document has been unarchived");
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, showSuccess, debouncedInvalidateAnnotations]),
+    }, [refetchDocument, showSuccess]),
     // Entity tag events
     onEntityTagAdded: useCallback38((_event) => {
       refetchDocument();
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, debouncedInvalidateAnnotations]),
+    }, [refetchDocument]),
     onEntityTagRemoved: useCallback38((_event) => {
       refetchDocument();
-      debouncedInvalidateAnnotations();
-    }, [refetchDocument, debouncedInvalidateAnnotations]),
+    }, [refetchDocument]),
     onError: useCallback38((error) => {
       console.error("[RealTime] Event stream error:", error);
     }, [])
@@ -58629,13 +58379,12 @@ function ResourceViewerPage({
       showError("Failed to generate clone link");
     }
   }, [generateCloneTokenMutation, rUri, showError]);
-  const handleAnnotationSparkle = useCallback38(({ annotationId: annotationId4 }) => {
-    triggerSparkleAnimation(annotationId4);
+  const handleAnnotationSparkle = useCallback38(({ annotationId: annotationId3 }) => {
+    triggerSparkleAnimation(annotationId3);
   }, [triggerSparkleAnimation]);
   const handleAnnotationAdded = useCallback38((event) => {
     triggerSparkleAnimation(event.payload.annotation.id);
-    debouncedInvalidateAnnotations();
-  }, [triggerSparkleAnimation, debouncedInvalidateAnnotations]);
+  }, [triggerSparkleAnimation]);
   const handleAnnotationCreateFailed = useCallback38(() => showError("Failed to create annotation"), [showError]);
   const handleAnnotationDeleteFailed = useCallback38(() => showError("Failed to delete annotation"), [showError]);
   const handleAnnotateBodyUpdated = useCallback38(() => {
@@ -58643,11 +58392,9 @@ function ResourceViewerPage({
   const handleAnnotateBodyUpdateFailed = useCallback38(() => showError("Failed to update annotation"), [showError]);
   const handleSettingsThemeChanged = useCallback38(({ theme: theme3 }) => setTheme(theme3), [setTheme]);
   const handleDetectionComplete = useCallback38(() => {
-    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
   }, [queryClient, rUri]);
   const handleDetectionFailed = useCallback38(() => {
-    queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.annotations(rUri) });
     queryClient.invalidateQueries({ queryKey: QUERY_KEYS.resources.events(rUri) });
   }, [queryClient, rUri]);
   const handleGenerationComplete = useCallback38(() => {
@@ -58660,9 +58407,9 @@ function ResourceViewerPage({
       eventBus.get("browse:router-push").next({ path: path2, reason: "reference-link" });
     }
   }, [routes.resourceDetail]);
-  const handleEntityTypeClicked = useCallback38(({ entityType: entityType3 }) => {
+  const handleEntityTypeClicked = useCallback38(({ entityType: entityType2 }) => {
     if (routes.know) {
-      const path2 = `${routes.know}?entityType=${encodeURIComponent(entityType3)}`;
+      const path2 = `${routes.know}?entityType=${encodeURIComponent(entityType2)}`;
       eventBus.get("browse:router-push").next({ path: path2, reason: "entity-type-filter" });
     }
   }, [routes.know]);
@@ -58676,7 +58423,6 @@ function ResourceViewerPage({
     "yield:clone": handleResourceClone,
     "beckon:sparkle": handleAnnotationSparkle,
     "mark:added": handleAnnotationAdded,
-    "mark:removed": debouncedInvalidateAnnotations,
     "mark:create-failed": handleAnnotationCreateFailed,
     "mark:delete-failed": handleAnnotationDeleteFailed,
     "mark:body-updated": handleAnnotateBodyUpdated,
@@ -58711,7 +58457,7 @@ function ResourceViewerPage({
     }
     return false;
   });
-  const groups = useMemo14(() => {
+  const groups = useMemo13(() => {
     const result = {
       highlights: [],
       references: [],
@@ -58731,9 +58477,9 @@ function ResourceViewerPage({
     return result;
   }, [annotations]);
   const resourceWithContent = { ...resource, content: content4 };
-  const handleEventHover = useCallback38((annotationId4) => {
-    if (annotationId4) {
-      eventBus.get("beckon:sparkle").next({ annotationId: annotationId4 });
+  const handleEventHover = useCallback38((annotationId3) => {
+    if (annotationId3) {
+      eventBus.get("beckon:sparkle").next({ annotationId: annotationId3 });
     }
   }, []);
   const handleEventClick = useCallback38((_annotationId) => {
@@ -58835,7 +58581,7 @@ function ResourceViewerPage({
               activePanel === "collaboration" && /* @__PURE__ */ jsx89(
                 CollaborationPanel,
                 {
-                  isConnected: false,
+                  isConnected: streamStatus === "connected",
                   eventCount: 0
                 }
               ),
@@ -58911,6 +58657,34 @@ function ResourceViewerPage({
     )
   ] });
 }
+
+// src/hooks/useObservable.ts
+import { useState as useState51, useEffect as useEffect53 } from "react";
+function useObservable(obs$) {
+  const [value, setValue] = useState51(void 0);
+  useEffect53(() => {
+    const sub = obs$.subscribe(setValue);
+    return () => sub.unsubscribe();
+  }, [obs$]);
+  return value;
+}
+
+// src/hooks/useStoreTokenSync.ts
+import { useEffect as useEffect54, useRef as useRef39 } from "react";
+import { accessToken as accessToken8 } from "@semiont/core";
+function useStoreTokenSync() {
+  const client = useApiClient();
+  const token = useAuthToken();
+  const tokenRef = useRef39(token);
+  useEffect54(() => {
+    tokenRef.current = token;
+  });
+  useEffect54(() => {
+    const getter = () => tokenRef.current ? accessToken8(tokenRef.current) : void 0;
+    client.stores.resources.setTokenGetter(getter);
+    client.stores.annotations.setTokenGetter(getter);
+  }, [client]);
+}
 export {
   ANNOTATORS,
   AUTH_EVENTS,
@@ -59048,7 +58822,6 @@ export {
   jsonLightHighlightStyle,
   jsonLightTheme,
   onAuthEvent,
-  resetEventBusForTesting,
   resolveAnnotationRanges,
   sanitizeImageURL,
   saveSelectedShapeForSelectorType,
@@ -59090,6 +58863,7 @@ export {
   useLocalStorage,
   useMarkFlow,
   useModeration,
+  useObservable,
   useObservableExternalNavigation,
   useObservableRouter,
   useOpenResources,
@@ -59105,6 +58879,7 @@ export {
   useSearchAnnouncements,
   useSessionContext,
   useSessionExpiry,
+  useStoreTokenSync,
   useTheme,
   useToast,
   useTranslations,