@semiont/react-ui 0.5.6 → 0.5.7

package/dist/index.js

@@ -124,7 +124,7 @@ import {
   useSemiont,
   useToast,
   useTranslations
-} from "./chunk-3Q3TUKWP.js";
+} from "./chunk-Y2EEAOMZ.js";
 import "./chunk-GERSK2DY.js";
 import {
   __commonJS,
@@ -17518,12 +17518,12 @@ function hideWidgetPreview(container) {
 }
 
 // src/lib/media-shapes.ts
-import { isPdfMimeType } from "@semiont/core";
+import { capabilitiesOf } from "@semiont/core";
 function getSupportedShapes(mediaType) {
   if (!mediaType) {
     return ["rectangle", "circle", "polygon"];
   }
-  if (isPdfMimeType(mediaType)) {
+  if (capabilitiesOf(mediaType)?.render === "pdf") {
     return ["rectangle"];
   }
   if (mediaType.startsWith("image/")) {
@@ -17538,7 +17538,7 @@ function getSelectorType(mediaType) {
   if (!mediaType) {
     return "text";
   }
-  if (isPdfMimeType(mediaType)) {
+  if (capabilitiesOf(mediaType)?.render === "pdf") {
     return "fragment";
   }
   if (mediaType.startsWith("image/")) {
@@ -17721,27 +17721,23 @@ function toOverlayAnnotations(annotations) {
 }
 
 // src/lib/resource-utils.ts
+import { baseMediaType, capabilitiesOf as capabilitiesOf2 } from "@semiont/core";
 function getResourceIcon(mediaType) {
   if (!mediaType) return "\u{1F4C4}";
-  const baseType = mediaType.split(";")[0]?.trim().toLowerCase() || "";
-  if (baseType.startsWith("image/")) {
-    return "\u{1F5BC}\uFE0F";
-  }
-  switch (baseType) {
+  const base2 = baseMediaType(mediaType);
+  if (base2.startsWith("image/")) return "\u{1F5BC}\uFE0F";
+  switch (base2) {
     case "text/markdown":
       return "\u{1F4DD}";
     case "text/html":
       return "\u{1F310}";
-    case "text/plain":
-      return "\u{1F4C4}";
     default:
       return "\u{1F4C4}";
   }
 }
 function supportsDetection(mediaType) {
   if (!mediaType) return false;
-  const baseType = mediaType.split(";")[0]?.trim().toLowerCase() || "";
-  return baseType.startsWith("text/");
+  return capabilitiesOf2(mediaType)?.anchoring === "text-selector";
 }
 
 // src/lib/validation.ts
@@ -18497,11 +18493,9 @@ function useResourceContent(rUri, resource, enabled = true) {
     if (!semiont || !enabled || !mediaType) return;
     let cancelled = false;
     setLoading(true);
-    semiont.browse.resourceRepresentation(rUri, {
-      accept: mediaType
-    }).then(({ data: data2 }) => {
+    semiont.browse.resourceRepresentation(rUri).then(({ data: data2, contentType }) => {
       if (cancelled) return;
-      setContent(decodeWithCharset(data2, mediaType));
+      setContent(decodeWithCharset(data2, contentType));
       setLoading(false);
     }).catch((error) => {
       if (cancelled) return;
@@ -26887,25 +26881,27 @@ function ProtectedErrorBoundary({
 function ProtectedErrorFallback({ error, resetErrorBoundary }) {
   const message = error instanceof Error ? error.message : String(error);
   const stack = error instanceof Error ? error.stack : void 0;
-  return /* @__PURE__ */ jsx9("div", { className: "min-h-[400px] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs4("div", { className: "max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3 mb-4", children: [
-      /* @__PURE__ */ jsx9("div", { className: "flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx9("svg", { className: "w-6 h-6 text-red-600 dark:text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
-      /* @__PURE__ */ jsx9("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Something went wrong" })
+  return /* @__PURE__ */ jsx9("div", { className: "semiont-protected-error-boundary-container", children: /* @__PURE__ */ jsxs4("div", { className: "semiont-protected-error-boundary-card", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "semiont-protected-error-boundary-header", children: [
+      /* @__PURE__ */ jsx9("div", { className: "semiont-protected-error-boundary-icon-wrapper", children: /* @__PURE__ */ jsx9("svg", { className: "semiont-protected-error-boundary-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
+      /* @__PURE__ */ jsx9("h2", { className: "semiont-protected-error-boundary-title", children: "Something went wrong" })
     ] }),
-    /* @__PURE__ */ jsx9("p", { className: "text-gray-600 dark:text-gray-300 mb-6", children: "An unexpected error occurred. Try again, or refresh the page." }),
-    process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs4("details", { className: "mb-4", children: [
-      /* @__PURE__ */ jsx9("summary", { className: "text-sm text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300", children: "Error details (development only)" }),
-      /* @__PURE__ */ jsxs4("pre", { className: "mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded-sm overflow-auto", children: [
+    /* @__PURE__ */ jsx9("p", { className: "semiont-protected-error-boundary-message", children: "An unexpected error occurred. Try again, or refresh the page." }),
+    process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs4("details", { className: "semiont-protected-error-boundary-details", children: [
+      /* @__PURE__ */ jsx9("summary", { className: "semiont-protected-error-boundary-summary", children: "Error details (development only)" }),
+      /* @__PURE__ */ jsxs4("pre", { className: "semiont-protected-error-boundary-stack", children: [
         message,
         stack
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "semiont-protected-error-boundary-actions", children: [
       /* @__PURE__ */ jsx9(
         "button",
         {
           onClick: resetErrorBoundary,
-          className: "flex-1 px-4 py-2 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+          className: "semiont-button",
+          "data-variant": "secondary",
+          "data-size": "md",
           children: "Try Again"
         }
       ),
@@ -26913,7 +26909,9 @@ function ProtectedErrorFallback({ error, resetErrorBoundary }) {
         "button",
         {
           onClick: () => window.location.reload(),
-          className: "flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
+          className: "semiont-button",
+          "data-variant": "primary",
+          "data-size": "md",
           children: "Refresh Page"
         }
       )
@@ -30354,7 +30352,7 @@ function SessionExpiredModal() {
 
 // src/components/resource/AnnotateView.tsx
 import { useRef as useRef13, useEffect as useEffect20, useCallback as useCallback13, lazy, Suspense } from "react";
-import { getMimeCategory, isPdfMimeType as isPdfMimeType2 } from "@semiont/core";
+import { capabilitiesOf as capabilitiesOf3 } from "@semiont/core";
 
 // src/lib/text-segmentation.ts
 import { getTextPositionSelector as getTextPositionSelector2, getTextQuoteSelector, getTargetSelector as getTargetSelector2 } from "@semiont/core";
@@ -30482,7 +30480,7 @@ function AnnotateView({
   const { newAnnotationIds } = useResourceAnnotations();
   const containerRef = useRef13(null);
   const session = useObservable(useSemiont().activeSession$);
-  const category = getMimeCategory(mimeType);
+  const render = capabilitiesOf3(mimeType)?.render ?? "none";
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
   const segments = segmentTextWithAnnotations(content4, allAnnotations);
@@ -30561,7 +30559,7 @@ function AnnotateView({
       container.removeEventListener("mousedown", handleMouseDown);
     };
   }, [selectedMotivation, content4]);
-  switch (category) {
+  switch (render) {
     case "text":
       return /* @__PURE__ */ jsxs15("div", { className: "semiont-annotate-view", "data-mime-type": "text", ref: containerRef, children: [
         /* @__PURE__ */ jsx22(
@@ -30593,35 +30591,34 @@ function AnnotateView({
           }
         ) })
       ] });
+    case "pdf":
+      return /* @__PURE__ */ jsxs15("div", { className: "semiont-annotate-view", "data-mime-type": "pdf", ref: containerRef, children: [
+        /* @__PURE__ */ jsx22(
+          AnnotateToolbar,
+          {
+            selectedMotivation,
+            selectedClick,
+            showShapeGroup: true,
+            selectedShape,
+            mediaType: mimeType,
+            annotateMode,
+            annotators: ANNOTATORS
+          }
+        ),
+        /* @__PURE__ */ jsx22("div", { className: "semiont-annotate-view__content", children: content4 && /* @__PURE__ */ jsx22(Suspense, { fallback: /* @__PURE__ */ jsx22("div", { className: "semiont-annotate-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx22(
+          PdfAnnotationCanvas,
+          {
+            pdfUrl: content4,
+            existingAnnotations: allAnnotations,
+            drawingMode: selectedMotivation ? selectedShape : null,
+            selectedMotivation,
+            session,
+            hoveredAnnotationId: hoveredAnnotationId || null,
+            hoverDelayMs
+          }
+        ) }) })
+      ] });
     case "image":
-      if (isPdfMimeType2(mimeType)) {
-        return /* @__PURE__ */ jsxs15("div", { className: "semiont-annotate-view", "data-mime-type": "pdf", ref: containerRef, children: [
-          /* @__PURE__ */ jsx22(
-            AnnotateToolbar,
-            {
-              selectedMotivation,
-              selectedClick,
-              showShapeGroup: true,
-              selectedShape,
-              mediaType: mimeType,
-              annotateMode,
-              annotators: ANNOTATORS
-            }
-          ),
-          /* @__PURE__ */ jsx22("div", { className: "semiont-annotate-view__content", children: content4 && /* @__PURE__ */ jsx22(Suspense, { fallback: /* @__PURE__ */ jsx22("div", { className: "semiont-annotate-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx22(
-            PdfAnnotationCanvas,
-            {
-              pdfUrl: content4,
-              existingAnnotations: allAnnotations,
-              drawingMode: selectedMotivation ? selectedShape : null,
-              selectedMotivation,
-              session,
-              hoveredAnnotationId: hoveredAnnotationId || null,
-              hoverDelayMs
-            }
-          ) }) })
-        ] });
-      }
       return /* @__PURE__ */ jsxs15("div", { className: "semiont-annotate-view", "data-mime-type": "image", ref: containerRef, children: [
         /* @__PURE__ */ jsx22(
           AnnotateToolbar,
@@ -30648,7 +30645,7 @@ function AnnotateView({
           }
         ) })
       ] });
-    case "unsupported":
+    case "none":
     default:
       return /* @__PURE__ */ jsx22("div", { ref: containerRef, className: "semiont-annotate-view semiont-annotate-view--unsupported", "data-mime-type": "unsupported", children: /* @__PURE__ */ jsxs15("div", { className: "semiont-annotate-view__empty", children: [
         /* @__PURE__ */ jsxs15("p", { className: "semiont-annotate-view__empty-message", children: [
@@ -45643,7 +45640,7 @@ function remarkGfm(options) {
 
 // src/components/resource/BrowseView.tsx
 import { annotationId as toAnnotationId3 } from "@semiont/core";
-import { getMimeCategory as getMimeCategory2, isPdfMimeType as isPdfMimeType3 } from "@semiont/core";
+import { capabilitiesOf as capabilitiesOf4 } from "@semiont/core";
 import { createHoverHandlers as createHoverHandlers3 } from "@semiont/sdk";
 
 // src/components/viewers/ImageViewer.tsx
@@ -45686,7 +45683,7 @@ var BrowseView = memo(function BrowseView2({
   const { newAnnotationIds } = useResourceAnnotations();
   const session = useObservable(useSemiont().activeSession$);
   const containerRef = useRef16(null);
-  const category = getMimeCategory2(mimeType);
+  const render = capabilitiesOf4(mimeType)?.render ?? "none";
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = useMemo4(
     () => [...highlights, ...references, ...assessments, ...comments, ...tags3],
@@ -45774,7 +45771,7 @@ var BrowseView = memo(function BrowseView2({
     "beckon:hover": handleAnnotationHover,
     "beckon:focus": handleAnnotationFocus
   });
-  switch (category) {
+  switch (render) {
     case "text":
       return /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view", "data-mime-type": "text", children: [
         /* @__PURE__ */ jsx27(
@@ -45790,31 +45787,30 @@ var BrowseView = memo(function BrowseView2({
         ),
         /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx27(MemoizedMarkdown, { content: content4 }) })
       ] });
+    case "pdf":
+      return /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view", "data-mime-type": "pdf", children: [
+        /* @__PURE__ */ jsx27(
+          AnnotateToolbar,
+          {
+            selectedMotivation: null,
+            selectedClick,
+            showSelectionGroup: false,
+            showDeleteButton: false,
+            annotateMode,
+            annotators: ANNOTATORS
+          }
+        ),
+        /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx27(Suspense2, { fallback: /* @__PURE__ */ jsx27("div", { className: "semiont-browse-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx27(
+          PdfAnnotationCanvas2,
+          {
+            pdfUrl: content4,
+            existingAnnotations: allAnnotations,
+            drawingMode: null,
+            selectedMotivation: null
+          }
+        ) }) })
+      ] });
     case "image":
-      if (isPdfMimeType3(mimeType)) {
-        return /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view", "data-mime-type": "pdf", children: [
-          /* @__PURE__ */ jsx27(
-            AnnotateToolbar,
-            {
-              selectedMotivation: null,
-              selectedClick,
-              showSelectionGroup: false,
-              showDeleteButton: false,
-              annotateMode,
-              annotators: ANNOTATORS
-            }
-          ),
-          /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx27(Suspense2, { fallback: /* @__PURE__ */ jsx27("div", { className: "semiont-browse-view__loading", children: "Loading PDF viewer..." }), children: /* @__PURE__ */ jsx27(
-            PdfAnnotationCanvas2,
-            {
-              pdfUrl: content4,
-              existingAnnotations: allAnnotations,
-              drawingMode: null,
-              selectedMotivation: null
-            }
-          ) }) })
-        ] });
-      }
       return /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view", "data-mime-type": "image", children: [
         /* @__PURE__ */ jsx27(
           AnnotateToolbar,
@@ -45836,7 +45832,7 @@ var BrowseView = memo(function BrowseView2({
           }
         ) })
       ] });
-    case "unsupported":
+    case "none":
       return /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view semiont-browse-view--unsupported", "data-mime-type": "unsupported", children: /* @__PURE__ */ jsxs19("div", { className: "semiont-browse-view__empty", children: [
         /* @__PURE__ */ jsxs19("p", { className: "semiont-browse-view__empty-message", children: [
           "Preview not available for ",
@@ -47240,16 +47236,50 @@ function HighlightPanel({
 }
 
 // src/components/resource/panels/JsonLdPanel.tsx
-import { useEffect as useEffect31, useRef as useRef22 } from "react";
+import { useEffect as useEffect32, useRef as useRef22 } from "react";
+
+// src/hooks/useResourceGraph.ts
+import { useEffect as useEffect31, useState as useState24 } from "react";
+function useResourceGraph(id2) {
+  const semiont = useObservable(useSemiont().activeSession$)?.client;
+  const [graph, setGraph] = useState24(null);
+  const [loading, setLoading] = useState24(true);
+  const [error, setError] = useState24(null);
+  useEffect31(() => {
+    if (!semiont || !id2) {
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    semiont.browse.resourceGraph(id2).then((g2) => {
+      if (cancelled) return;
+      setGraph(g2);
+      setLoading(false);
+    }).catch((err) => {
+      if (cancelled) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [semiont, id2]);
+  return { graph, loading, error };
+}
+
+// src/components/resource/panels/JsonLdPanel.tsx
 import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
-function JsonLdPanel({ resource: semiontResource }) {
+function JsonLdPanel({ resourceId: resourceId2 }) {
   const editorRef = useRef22(null);
   const viewRef = useRef22(null);
   const { showLineNumbers } = useLineNumbers();
-  useEffect31(() => {
-    if (!editorRef.current) return;
+  const { graph, loading, error } = useResourceGraph(resourceId2);
+  const documentText = graph ? JSON.stringify(graph, null, 2) : "";
+  useEffect32(() => {
+    if (!editorRef.current || !documentText) return;
     const isDarkMode = document.documentElement?.classList.contains("dark") ?? false;
-    const jsonLdContent = JSON.stringify(semiontResource, null, 2);
     const extensions = [
       json(),
       EditorView.editable.of(false),
@@ -47265,7 +47295,7 @@ function JsonLdPanel({ resource: semiontResource }) {
       extensions.push(syntaxHighlighting(jsonLightHighlightStyle));
     }
     const state = EditorState.create({
-      doc: jsonLdContent,
+      doc: documentText,
       extensions
     });
     const view = new EditorView({
@@ -47277,10 +47307,11 @@ function JsonLdPanel({ resource: semiontResource }) {
       view.destroy();
       viewRef.current = null;
     };
-  }, [semiontResource, showLineNumbers]);
+  }, [documentText, showLineNumbers]);
   const handleCopyToClipboard = async () => {
+    if (!documentText) return;
     try {
-      await navigator.clipboard.writeText(JSON.stringify(semiontResource, null, 2));
+      await navigator.clipboard.writeText(documentText);
     } catch (err) {
       console.error("Failed to copy JSON-LD:", err);
     }
@@ -47294,10 +47325,13 @@ function JsonLdPanel({ resource: semiontResource }) {
           onClick: handleCopyToClipboard,
           className: "semiont-button semiont-button--icon",
           title: "Copy to clipboard",
+          disabled: !graph,
           children: "\u{1F4CB} Copy"
         }
       )
     ] }),
+    loading && /* @__PURE__ */ jsx37("p", { className: "semiont-jsonld-panel__status", role: "status", children: "Loading JSON-LD\u2026" }),
+    error && !loading && /* @__PURE__ */ jsx37("p", { className: "semiont-jsonld-panel__status semiont-jsonld-panel__status--error", role: "alert", children: "Failed to load JSON-LD." }),
     /* @__PURE__ */ jsx37(
       "div",
       {
@@ -47490,7 +47524,7 @@ function ReferenceEntry({
 }
 
 // src/components/resource/panels/ReferencesPanel.tsx
-import { useState as useState24, useRef as useRef23, useEffect as useEffect32, useCallback as useCallback21, useMemo as useMemo9 } from "react";
+import { useState as useState25, useRef as useRef23, useEffect as useEffect33, useCallback as useCallback21, useMemo as useMemo9 } from "react";
 import { getTextPositionSelector as getTextPositionSelector6, getTargetSelector as getTargetSelector9 } from "@semiont/core";
 import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 function getSelectorDisplayText3(selector) {
@@ -47526,18 +47560,18 @@ function ReferencesPanel({
 }) {
   const t12 = useTranslations("ReferencesPanel");
   const session = useObservable(useSemiont().activeSession$);
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState24([]);
-  const [lastAnnotationLog, setLastDetectionLog] = useState24(null);
-  const [pendingEntityTypes, setPendingEntityTypes] = useState24([]);
-  const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState24(false);
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState24(null);
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState25([]);
+  const [lastAnnotationLog, setLastDetectionLog] = useState25(null);
+  const [pendingEntityTypes, setPendingEntityTypes] = useState25([]);
+  const [includeDescriptiveReferences, setIncludeDescriptiveReferences] = useState25(false);
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState25(null);
   const containerRef = useRef23(null);
-  const [isAssistExpanded, setIsDetectExpanded] = useState24(() => {
+  const [isAssistExpanded, setIsDetectExpanded] = useState25(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem("assist-section-expanded-reference");
     return stored ? stored === "true" : true;
   });
-  useEffect32(() => {
+  useEffect33(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem("assist-section-expanded-reference", String(isAssistExpanded));
   }, [isAssistExpanded]);
@@ -47557,7 +47591,7 @@ function ReferencesPanel({
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -47576,7 +47610,7 @@ function ReferencesPanel({
       console.warn("[ReferencesPanel] Element not found for scrollToAnnotationId:", scrollToAnnotationId);
     }
   }, [scrollToAnnotationId]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -47611,7 +47645,7 @@ function ReferencesPanel({
     });
   };
   const hasSavedLogRef = useRef23(false);
-  useEffect32(() => {
+  useEffect33(() => {
     if (isAssisting) {
       hasSavedLogRef.current = false;
       return;
@@ -47638,7 +47672,7 @@ function ReferencesPanel({
       setPendingEntityTypes([]);
     }
   };
-  useEffect32(() => {
+  useEffect33(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -48104,7 +48138,7 @@ function TagEntry({
 }
 
 // src/components/resource/panels/TaggingPanel.tsx
-import { useState as useState25, useEffect as useEffect33, useRef as useRef24, useCallback as useCallback22, useMemo as useMemo11 } from "react";
+import { useState as useState26, useEffect as useEffect34, useRef as useRef24, useCallback as useCallback22, useMemo as useMemo11 } from "react";
 import { getTextPositionSelector as getTextPositionSelector7, getTargetSelector as getTargetSelector10 } from "@semiont/core";
 import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 function getSelectorDisplayText4(selector) {
@@ -48141,21 +48175,21 @@ function TaggingPanel({
   const schemasObserved = useObservable(tagSchemas$);
   const schemas = schemasObserved ?? [];
   const noSchemasRegistered = schemasObserved !== void 0 && schemasObserved.length === 0;
-  const [selectedSchemaId, setSelectedSchemaId] = useState25("");
-  const [selectedCategories, setSelectedCategories] = useState25(/* @__PURE__ */ new Set());
-  useEffect33(() => {
+  const [selectedSchemaId, setSelectedSchemaId] = useState26("");
+  const [selectedCategories, setSelectedCategories] = useState26(/* @__PURE__ */ new Set());
+  useEffect34(() => {
     if (!selectedSchemaId && schemas.length > 0) {
       setSelectedSchemaId(schemas[0].id);
     }
   }, [schemas, selectedSchemaId]);
-  const [focusedAnnotationId, setFocusedAnnotationId] = useState25(null);
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState26(null);
   const containerRef = useRef24(null);
-  const [isAssistExpanded, setIsDetectExpanded] = useState25(() => {
+  const [isAssistExpanded, setIsDetectExpanded] = useState26(() => {
     if (typeof window === "undefined") return true;
     const stored = localStorage.getItem("assist-section-expanded-tag");
     return stored ? stored === "true" : true;
   });
-  useEffect33(() => {
+  useEffect34(() => {
     if (typeof window === "undefined") return;
     localStorage.setItem("assist-section-expanded-tag", String(isAssistExpanded));
   }, [isAssistExpanded]);
@@ -48182,7 +48216,7 @@ function TaggingPanel({
       entryRefs.current.delete(id2);
     }
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!scrollToAnnotationId) return;
     const element2 = entryRefs.current.get(scrollToAnnotationId);
     if (element2 && containerRef.current) {
@@ -48197,7 +48231,7 @@ function TaggingPanel({
       if (onScrollCompleted) onScrollCompleted();
     }
   }, [scrollToAnnotationId]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (!hoveredAnnotationId) return;
     const element2 = entryRefs.current.get(hoveredAnnotationId);
     if (!element2 || !containerRef.current) return;
@@ -48248,7 +48282,7 @@ function TaggingPanel({
       setSelectedCategories(/* @__PURE__ */ new Set());
     }
   };
-  useEffect33(() => {
+  useEffect34(() => {
     if (!pendingAnnotation) return;
     const handleEscape = (e6) => {
       if (e6.key === "Escape") {
@@ -48477,7 +48511,7 @@ function TaggingPanel({
 }
 
 // src/components/resource/panels/UnifiedAnnotationsPanel.tsx
-import { useState as useState26, useEffect as useEffect34 } from "react";
+import { useState as useState27, useEffect as useEffect35 } from "react";
 import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
 var TAB_ORDER = ["statistics", "reference", "highlight", "assessment", "comment", "tag"];
 function UnifiedAnnotationsPanel(props) {
@@ -48499,7 +48533,7 @@ function UnifiedAnnotationsPanel(props) {
     }
   }
   const grouped = groups;
-  const [activeTab, setActiveTab] = useState26(() => {
+  const [activeTab, setActiveTab] = useState27(() => {
     if (typeof window === "undefined") return props.initialTab || "statistics";
     const storageKey = props.resourceId ? `annotations-tab-${props.resourceId}` : "annotations-tab-global";
     const stored = localStorage.getItem(storageKey);
@@ -48508,17 +48542,17 @@ function UnifiedAnnotationsPanel(props) {
     }
     return props.initialTab || "statistics";
   });
-  useEffect34(() => {
+  useEffect35(() => {
     if (typeof window === "undefined") return;
     const storageKey = props.resourceId ? `annotations-tab-${props.resourceId}` : "annotations-tab-global";
     localStorage.setItem(storageKey, activeTab);
   }, [activeTab, props.resourceId]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (props.initialTab && props.initialTabGeneration !== void 0) {
       setActiveTab(props.initialTab);
     }
   }, [props.initialTabGeneration]);
-  useEffect34(() => {
+  useEffect35(() => {
     if (props.pendingAnnotation) {
       const motivationToTab = {
         "linking": "reference",
@@ -48661,7 +48695,7 @@ function UnifiedAnnotationsPanel(props) {
 }
 
 // src/components/navigation/Footer.tsx
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 import { Fragment as Fragment9, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 function Footer({
   Link,
@@ -48672,7 +48706,7 @@ function Footer({
   sourceCodeUrl = "https://github.com/The-AI-Alliance/semiont",
   showPolicyLinks = true
 }) {
-  const [showCookiePreferences, setShowCookiePreferences] = useState27(false);
+  const [showCookiePreferences, setShowCookiePreferences] = useState28(false);
   return /* @__PURE__ */ jsxs38(Fragment9, { children: [
     /* @__PURE__ */ jsx45("footer", { role: "contentinfo", className: "semiont-footer", children: /* @__PURE__ */ jsx45("div", { className: "semiont-footer__container", children: /* @__PURE__ */ jsxs38("div", { className: "semiont-footer__content", children: [
       /* @__PURE__ */ jsx45("div", { className: "semiont-footer__copyright", children: t12("copyright", { year: (/* @__PURE__ */ new Date()).getFullYear() }) }),
@@ -48802,7 +48836,7 @@ function NavigationMenu({
 }
 
 // src/components/navigation/ObservableLink.tsx
-import { useCallback as useCallback23, useRef as useRef25, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback23, useRef as useRef25, useEffect as useEffect36 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function ObservableLink({
   href,
@@ -48813,7 +48847,7 @@ function ObservableLink({
 }) {
   const semiont = useSemiont();
   const onClickRef = useRef25(onClick);
-  useEffect35(() => {
+  useEffect36(() => {
     onClickRef.current = onClick;
   });
   const handleClick = useCallback23((e6) => {
@@ -48835,7 +48869,7 @@ function ObservableLink({
 }
 
 // src/components/navigation/SimpleNavigation.tsx
-import { useState as useState28, useRef as useRef26, useEffect as useEffect36 } from "react";
+import { useState as useState29, useRef as useRef26, useEffect as useEffect37 } from "react";
 import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 function SimpleNavigation({
   title,
@@ -48850,12 +48884,12 @@ function SimpleNavigation({
 }) {
   const ChevronLeftIcon = icons.chevronLeft;
   const BarsIcon = icons.bars;
-  const [isDropdownOpen, setIsDropdownOpen] = useState28(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState29(false);
   const dropdownRef = useRef26(null);
   const semiont = useSemiont();
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
-  useEffect36(() => {
+  useEffect37(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         closeDropdown();
@@ -48931,14 +48965,14 @@ function SimpleNavigation({
 }
 
 // src/components/navigation/CollapsibleResourceNavigation.tsx
-import { useCallback as useCallback29, useState as useState32, useRef as useRef31, useEffect as useEffect41 } from "react";
+import { useCallback as useCallback29, useState as useState33, useRef as useRef31, useEffect as useEffect42 } from "react";
 
 // ../../node_modules/@dnd-kit/core/dist/core.esm.js
-import React18, { createContext as createContext5, useContext as useContext5, useEffect as useEffect38, useState as useState30, useCallback as useCallback26, useMemo as useMemo13, useRef as useRef28, memo as memo2, useReducer, cloneElement, forwardRef } from "react";
+import React18, { createContext as createContext5, useContext as useContext5, useEffect as useEffect39, useState as useState31, useCallback as useCallback26, useMemo as useMemo13, 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 useMemo12, useLayoutEffect, useEffect as useEffect37, useRef as useRef27, useCallback as useCallback24 } from "react";
+import { useMemo as useMemo12, useLayoutEffect, useEffect as useEffect38, useRef as useRef27, useCallback as useCallback24 } from "react";
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
@@ -49006,7 +49040,7 @@ function getOwnerDocument(target) {
   }
   return document;
 }
-var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect37;
+var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect38;
 function useEvent(handler) {
   const handlerRef = useRef27(handler);
   useIsomorphicLayoutEffect(() => {
@@ -49073,7 +49107,7 @@ function useNodeRef(onChange) {
 }
 function usePrevious(value) {
   const ref = useRef27();
-  useEffect37(() => {
+  useEffect38(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
@@ -49214,7 +49248,7 @@ function findFirstFocusableNode(element2) {
 }
 
 // ../../node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js
-import React17, { useState as useState29, useCallback as useCallback25 } from "react";
+import React17, { useState as useState30, useCallback as useCallback25 } from "react";
 var hiddenStyles = {
   display: "none"
 };
@@ -49257,7 +49291,7 @@ function LiveRegion(_ref) {
   }, announcement);
 }
 function useAnnouncement() {
-  const [announcement, setAnnouncement] = useState29("");
+  const [announcement, setAnnouncement] = useState30("");
   const announce = useCallback25((value) => {
     if (value != null) {
       setAnnouncement(value);
@@ -49273,7 +49307,7 @@ function useAnnouncement() {
 var DndMonitorContext = /* @__PURE__ */ createContext5(null);
 function useDndMonitor(listener) {
   const registerListener = useContext5(DndMonitorContext);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!registerListener) {
       throw new Error("useDndMonitor must be used within a children of <DndContext>");
     }
@@ -49282,7 +49316,7 @@ function useDndMonitor(listener) {
   }, [listener, registerListener]);
 }
 function useDndMonitorProvider() {
-  const [listeners] = useState30(() => /* @__PURE__ */ new Set());
+  const [listeners] = useState31(() => /* @__PURE__ */ new Set());
   const registerListener = useCallback26((listener) => {
     listeners.add(listener);
     return () => listeners.delete(listener);
@@ -49348,8 +49382,8 @@ function Accessibility(_ref) {
     announcement
   } = useAnnouncement();
   const liveRegionId = useUniqueId("DndLiveRegion");
-  const [mounted, setMounted] = useState30(false);
-  useEffect38(() => {
+  const [mounted, setMounted] = useState31(false);
+  useEffect39(() => {
     setMounted(true);
   }, []);
   useDndMonitor(useMemo13(() => ({
@@ -50717,7 +50751,7 @@ function useAutoScroller(_ref) {
     scrollContainer.scrollBy(scrollLeft, scrollTop);
   }, []);
   const sortedScrollableAncestors = useMemo13(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
-  useEffect38(
+  useEffect39(
     () => {
       if (!enabled || !scrollableAncestors.length || !rect) {
         clearAutoScrollInterval();
@@ -50858,7 +50892,7 @@ function useDroppableMeasuring(containers, _ref) {
     dependencies,
     config
   } = _ref;
-  const [queue, setQueue] = useState30(null);
+  const [queue, setQueue] = useState31(null);
   const {
     frequency,
     measure,
@@ -50907,10 +50941,10 @@ function useDroppableMeasuring(containers, _ref) {
     }
     return previousValue;
   }, [containers, queue, dragging, disabled, measure]);
-  useEffect38(() => {
+  useEffect39(() => {
     containersRef.current = containers;
   }, [containers]);
-  useEffect38(
+  useEffect39(
     () => {
       if (disabled) {
         return;
@@ -50920,7 +50954,7 @@ function useDroppableMeasuring(containers, _ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [dragging, disabled]
   );
-  useEffect38(
+  useEffect39(
     () => {
       if (queue && queue.length > 0) {
         setQueue(null);
@@ -50929,7 +50963,7 @@ function useDroppableMeasuring(containers, _ref) {
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(queue)]
   );
-  useEffect38(
+  useEffect39(
     () => {
       if (disabled || typeof frequency !== "number" || timeoutId.current !== null) {
         return;
@@ -50987,7 +51021,7 @@ function useMutationObserver(_ref) {
     } = window;
     return new MutationObserver2(handleMutations);
   }, [handleMutations, disabled]);
-  useEffect38(() => {
+  useEffect39(() => {
     return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
   }, [mutationObserver]);
   return mutationObserver;
@@ -51011,7 +51045,7 @@ function useResizeObserver(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled]
   );
-  useEffect38(() => {
+  useEffect39(() => {
     return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
   }, [resizeObserver]);
   return resizeObserver;
@@ -51023,7 +51057,7 @@ function useRect(element2, measure, fallbackRect2) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, setRect] = useState30(null);
+  const [rect, setRect] = useState31(null);
   function measureRect() {
     setRect((currentRect) => {
       if (!element2) {
@@ -51091,13 +51125,13 @@ function useScrollableAncestors(node2) {
     }
     return getScrollableAncestors(node2);
   }, [node2]);
-  useEffect38(() => {
+  useEffect39(() => {
     previousNode.current = node2;
   }, [node2]);
   return ancestors;
 }
 function useScrollOffsets(elements) {
-  const [scrollCoordinates, setScrollCoordinates] = useState30(null);
+  const [scrollCoordinates, setScrollCoordinates] = useState31(null);
   const prevElements = useRef28(elements);
   const handleScroll = useCallback26((event) => {
     const scrollingElement = getScrollableElement(event.target);
@@ -51112,7 +51146,7 @@ function useScrollOffsets(elements) {
       return new Map(scrollCoordinates2);
     });
   }, []);
-  useEffect38(() => {
+  useEffect39(() => {
     const previousElements = prevElements.current;
     if (elements !== previousElements) {
       cleanup(previousElements);
@@ -51152,14 +51186,14 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
     dependencies = [];
   }
   const initialScrollOffsets = useRef28(null);
-  useEffect38(
+  useEffect39(
     () => {
       initialScrollOffsets.current = null;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     dependencies
   );
-  useEffect38(() => {
+  useEffect39(() => {
     const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
     if (hasScrollOffsets && !initialScrollOffsets.current) {
       initialScrollOffsets.current = scrollOffsets;
@@ -51171,7 +51205,7 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
   return initialScrollOffsets.current ? subtract(scrollOffsets, initialScrollOffsets.current) : defaultCoordinates;
 }
 function useSensorSetup(sensors) {
-  useEffect38(
+  useEffect39(
     () => {
       if (!canUseDOM) {
         return;
@@ -51222,7 +51256,7 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect2 = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, setRects] = useState30(defaultValue$2);
+  const [rects, setRects] = useState31(defaultValue$2);
   function measureRects() {
     setRects(() => {
       if (!elements.length) {
@@ -51255,7 +51289,7 @@ function useDragOverlayMeasuring(_ref) {
   let {
     measure
   } = _ref;
-  const [rect, setRect] = useState30(null);
+  const [rect, setRect] = useState31(null);
   const handleResize = useCallback26((entries) => {
     for (const {
       target
@@ -51511,7 +51545,7 @@ function RestoreFocus(_ref) {
   } = useContext5(InternalContext);
   const previousActivatorEvent = usePrevious(activatorEvent);
   const previousActiveId = usePrevious(active == null ? void 0 : active.id);
-  useEffect38(() => {
+  useEffect39(() => {
     if (disabled) {
       return;
     }
@@ -51656,7 +51690,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
   const store = useReducer(reducer, void 0, getInitialState);
   const [state, dispatch] = store;
   const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
-  const [status, setStatus] = useState30(Status.Uninitialized);
+  const [status, setStatus] = useState31(Status.Uninitialized);
   const isInitialized = status === Status.Initialized;
   const {
     draggable: {
@@ -51683,8 +51717,8 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     } : null;
   }, [activeId, node2]);
   const activeRef = useRef28(null);
-  const [activeSensor, setActiveSensor] = useState30(null);
-  const [activatorEvent, setActivatorEvent] = useState30(null);
+  const [activeSensor, setActiveSensor] = useState31(null);
+  const [activatorEvent, setActivatorEvent] = useState31(null);
   const latestProps = useLatestValue(props, Object.values(props));
   const draggableDescribedById = useUniqueId("DndDescribedBy", id2);
   const enabledDroppableContainers = useMemo13(() => droppableContainers.getEnabled(), [droppableContainers]);
@@ -51768,7 +51802,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     pointerCoordinates
   }) : null;
   const overId = getFirstCollision(collisions, "id");
-  const [over, setOver] = useState30(null);
+  const [over, setOver] = useState31(null);
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
   const activeSensorRef = useRef28(null);
@@ -51962,7 +51996,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
       setStatus(Status.Initialized);
     }
   }, [activeNodeRect, status]);
-  useEffect38(
+  useEffect39(
     () => {
       const {
         onDragMove
@@ -51997,7 +52031,7 @@ var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]
   );
-  useEffect38(
+  useEffect39(
     () => {
       const {
         active: active2,
@@ -52280,7 +52314,7 @@ function useDroppable(_ref) {
   }, [resizeObserver]);
   const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
   const dataRef = useLatestValue(data2);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!resizeObserver || !nodeRef.current) {
       return;
     }
@@ -52288,7 +52322,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useEffect38(
+  useEffect39(
     () => {
       dispatch({
         type: Action.RegisterDroppable,
@@ -52310,7 +52344,7 @@ function useDroppable(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [id2]
   );
-  useEffect38(() => {
+  useEffect39(() => {
     if (disabled !== previous3.current.disabled) {
       dispatch({
         type: Action.SetDroppableDisabled,
@@ -52332,7 +52366,7 @@ function useDroppable(_ref) {
 }
 
 // ../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js
-import React19, { useMemo as useMemo14, useRef as useRef29, useEffect as useEffect39, useState as useState31, useContext as useContext6 } from "react";
+import React19, { useMemo as useMemo14, useRef as useRef29, useEffect as useEffect40, useState as useState32, useContext as useContext6 } 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]);
@@ -52499,7 +52533,7 @@ function SortableContext(_ref) {
       measureDroppableContainers(items);
     }
   }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
-  useEffect39(() => {
+  useEffect40(() => {
     previousItemsRef.current = items;
   }, [items]);
   const contextValue = useMemo14(
@@ -52573,7 +52607,7 @@ function useDerivedTransform(_ref) {
     node: node2,
     rect
   } = _ref;
-  const [derivedTransform, setDerivedtransform] = useState31(null);
+  const [derivedTransform, setDerivedtransform] = useState32(null);
   const previousIndex = useRef29(index2);
   useIsomorphicLayoutEffect(() => {
     if (!disabled && index2 !== previousIndex.current && node2.current) {
@@ -52597,7 +52631,7 @@ function useDerivedTransform(_ref) {
       previousIndex.current = index2;
     }
   }, [disabled, index2, node2, rect]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (derivedTransform) {
       setDerivedtransform(null);
     }
@@ -52719,7 +52753,7 @@ function useSortable(_ref) {
     node: node2,
     rect
   });
-  useEffect39(() => {
+  useEffect40(() => {
     if (isSorting && previous3.current.newIndex !== newIndex) {
       previous3.current.newIndex = newIndex;
     }
@@ -52730,7 +52764,7 @@ function useSortable(_ref) {
       previous3.current.items = items;
     }
   }, [isSorting, newIndex, containerId, items]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (activeId === previous3.current.activeId) {
       return;
     }
@@ -52915,7 +52949,7 @@ function isAfter(a15, b8) {
 }
 
 // src/components/navigation/SortableResourceTab.tsx
-import { useCallback as useCallback27, useRef as useRef30, useEffect as useEffect40 } from "react";
+import { useCallback as useCallback27, useRef as useRef30, useEffect as useEffect41 } from "react";
 import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 function SortableResourceTab({
   resource,
@@ -52939,7 +52973,7 @@ function SortableResourceTab({
     isDragging: isSortableDragging
   } = useSortable({ id: resource.id });
   const onReorderRef = useRef30(onReorder);
-  useEffect40(() => {
+  useEffect41(() => {
     onReorderRef.current = onReorder;
   });
   const style = {
@@ -53066,7 +53100,7 @@ function CollapsibleResourceNavigation({
 }) {
   const ChevronLeftIcon = icons.chevronLeft;
   const BarsIcon = icons.bars;
-  const [isDropdownOpen, setIsDropdownOpen] = useState32(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState33(false);
   const dropdownRef = useRef31(null);
   const { announcePickup, announceDrop, announceKeyboardReorder, announceCannotMove } = useDragAnnouncements();
   const t12 = useTranslations("CollapsibleResourceNavigation");
@@ -53082,7 +53116,7 @@ function CollapsibleResourceNavigation({
   };
   const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
   const closeDropdown = () => setIsDropdownOpen(false);
-  useEffect41(() => {
+  useEffect42(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         closeDropdown();
@@ -53280,10 +53314,10 @@ function CollapsibleResourceNavigation({
 }
 
 // src/components/modals/ReferenceWizardModal.tsx
-import { useState as useState36, useEffect as useEffect43, useCallback as useCallback30 } from "react";
+import { useState as useState37, useEffect as useEffect44, useCallback as useCallback30 } from "react";
 
 // src/components/modals/GatherContextStep.tsx
-import { useState as useState33, useEffect as useEffect42, useRef as useRef32 } from "react";
+import { useState as useState34, useEffect as useEffect43, useRef as useRef32 } from "react";
 
 // src/components/modals/ContextSummary.tsx
 import { Fragment as Fragment11, jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
@@ -53346,11 +53380,11 @@ function GatherContextStep({
   onCompose,
   translations: t12
 }) {
-  const [sourceExpanded, setSourceExpanded] = useState33(false);
+  const [sourceExpanded, setSourceExpanded] = useState34(false);
   const contextReady = !contextLoading && !contextError && !!context;
   const sourceContext = context?.sourceContext;
   const highlightRef = useRef32(null);
-  useEffect42(() => {
+  useEffect43(() => {
     if (highlightRef.current) {
       highlightRef.current.scrollIntoView({ block: "center", behavior: "instant" });
     }
@@ -53469,7 +53503,7 @@ function GatherContextStep({
 }
 
 // src/components/modals/ConfigureGenerationStep.tsx
-import { useState as useState34 } from "react";
+import { useState as useState35 } from "react";
 import { LOCALES as LOCALES2 } from "@semiont/core";
 import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
 function ConfigureGenerationStep({
@@ -53481,12 +53515,12 @@ function ConfigureGenerationStep({
   onGenerate,
   translations: t12
 }) {
-  const [title, setTitle] = useState34(defaultTitle);
-  const [storagePath, setStoragePath] = useState34("");
-  const [prompt, setPrompt] = useState34("");
-  const [language2, setLanguage] = useState34(locale);
-  const [temperature, setTemperature] = useState34(0.7);
-  const [maxTokens, setMaxTokens] = useState34(500);
+  const [title, setTitle] = useState35(defaultTitle);
+  const [storagePath, setStoragePath] = useState35("");
+  const [prompt, setPrompt] = useState35("");
+  const [language2, setLanguage] = useState35(locale);
+  const [temperature, setTemperature] = useState35(0.7);
+  const [maxTokens, setMaxTokens] = useState35(500);
   const handleSubmit = (e6) => {
     e6.preventDefault();
     const trimmedPrompt = prompt.trim();
@@ -53645,7 +53679,7 @@ function ConfigureGenerationStep({
 }
 
 // src/components/modals/ConfigureSearchStep.tsx
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 import { jsx as jsx54, jsxs as jsxs46 } from "react/jsx-runtime";
 function ConfigureSearchStep({
   isSearching = false,
@@ -53654,8 +53688,8 @@ function ConfigureSearchStep({
   onSearch,
   translations: t12
 }) {
-  const [limit, setLimit] = useState35(10);
-  const [useSemanticScoring, setUseSemanticScoring] = useState35(true);
+  const [limit, setLimit] = useState36(10);
+  const [useSemanticScoring, setUseSemanticScoring] = useState36(true);
   const handleSubmit = (e6) => {
     e6.preventDefault();
     onSearch({ limit, useSemanticScoring });
@@ -53847,10 +53881,10 @@ function ReferenceWizardModal({
   translations: t12
 }) {
   const session = useObservable(useSemiont().activeSession$);
-  const [wizardStep, setWizardStep] = useState36({ step: "gather" });
-  const [isSearching, setIsSearching] = useState36(false);
-  const [userHint, setUserHint] = useState36("");
-  useEffect43(() => {
+  const [wizardStep, setWizardStep] = useState37({ step: "gather" });
+  const [isSearching, setIsSearching] = useState37(false);
+  const [userHint, setUserHint] = useState37("");
+  useEffect44(() => {
     if (isOpen) {
       setWizardStep({ step: "gather" });
       setIsSearching(false);
@@ -54039,7 +54073,7 @@ function ReferenceWizardModal({
 }
 
 // src/components/modals/SearchModal.tsx
-import { useState as useState37, useEffect as useEffect44, useRef as useRef33 } from "react";
+import { useState as useState38, useEffect as useEffect45, useRef as useRef33 } from "react";
 var import_operators = __toESM(require_operators(), 1);
 import { getResourceId } from "@semiont/core";
 import { createSearchPipeline } from "@semiont/sdk";
@@ -54088,7 +54122,7 @@ function SearchModal({
   const semiont = useObservable(useSemiont().activeSession$)?.client;
   const semiontRef = useRef33(semiont);
   semiontRef.current = semiont;
-  const [selectedIndex, setSelectedIndex] = useState37(0);
+  const [selectedIndex, setSelectedIndex] = useState38(0);
   const t12 = {
     placeholder: translations.placeholder || "Search resources, entities...",
     searching: translations.searching || "Searching...",
@@ -54100,7 +54134,7 @@ function SearchModal({
     enter: translations.enter || "Enter",
     esc: translations.esc || "ESC"
   };
-  const [pipeline] = useState37(
+  const [pipeline] = useState38(
     () => createSearchPipeline(
       (q2) => semiontRef.current.browse.resources({ search: q2, limit: SEARCH_LIMIT }).pipe(
         (0, import_operators.map)((resources) => {
@@ -54120,21 +54154,21 @@ function SearchModal({
       { debounceMs: SEARCH_DEBOUNCE_MS }
     )
   );
-  useEffect44(() => () => pipeline.dispose(), [pipeline]);
+  useEffect45(() => () => pipeline.dispose(), [pipeline]);
   const query = useObservable(pipeline.query$) ?? "";
   const searchState = useObservable(pipeline.state$);
   const results = searchState?.results ?? [];
   const loading = searchState?.isSearching ?? false;
-  useEffect44(() => {
+  useEffect45(() => {
     if (isOpen) {
       pipeline.setQuery("");
       setSelectedIndex(0);
     }
   }, [isOpen, pipeline]);
-  useEffect44(() => {
+  useEffect45(() => {
     setSelectedIndex(0);
   }, [results.length]);
-  useEffect44(() => {
+  useEffect45(() => {
     if (!query.trim()) return;
     if (loading) {
       announceSearching();
@@ -54250,7 +54284,7 @@ function SearchModal({
 }
 
 // src/components/modals/ResourceSearchModal.tsx
-import { useState as useState38, useEffect as useEffect45, useRef as useRef34 } from "react";
+import { useState as useState39, useEffect as useEffect46, useRef as useRef34 } from "react";
 var import_operators2 = __toESM(require_operators(), 1);
 import { getResourceId as getResourceId2, getPrimaryRepresentation } from "@semiont/core";
 import { createSearchPipeline as createSearchPipeline2 } from "@semiont/sdk";
@@ -54286,7 +54320,7 @@ function ResourceSearchModal({
     noResults: translations.noResults || "No documents found",
     close: translations.close || "\u2715"
   };
-  const [pipeline] = useState38(
+  const [pipeline] = useState39(
     () => createSearchPipeline2(
       (q2) => semiontRef.current.browse.resources({ search: q2, limit: SEARCH_LIMIT2 }).pipe(
         (0, import_operators2.map)((resources) => {
@@ -54297,17 +54331,17 @@ function ResourceSearchModal({
       { debounceMs: SEARCH_DEBOUNCE_MS2, initialQuery: searchTerm }
     )
   );
-  useEffect45(() => () => pipeline.dispose(), [pipeline]);
+  useEffect46(() => () => pipeline.dispose(), [pipeline]);
   const search2 = useObservable(pipeline.query$) ?? "";
   const searchState = useObservable(pipeline.state$);
   const results = searchState?.results ?? [];
   const loading = searchState?.isSearching ?? false;
-  useEffect45(() => {
+  useEffect46(() => {
     if (isOpen && searchTerm) {
       pipeline.setQuery(searchTerm);
     }
   }, [isOpen, searchTerm, pipeline]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!search2.trim()) return;
     if (loading) {
       announceSearching();
@@ -54427,7 +54461,7 @@ function SkipLinks() {
 }
 
 // src/components/StatusDisplay.tsx
-import { useEffect as useEffect46, useState as useState39 } from "react";
+import { useEffect as useEffect47, useState as useState40 } from "react";
 import { jsx as jsx60, jsxs as jsxs52 } from "react/jsx-runtime";
 function StatusDisplay({
   isFullyAuthenticated = false,
@@ -54435,10 +54469,10 @@ function StatusDisplay({
   hasValidBackendToken = false
 }) {
   const semiont = useObservable(useSemiont().activeSession$)?.client;
-  const [data2, setData] = useState39(null);
-  const [loading, setLoading] = useState39(true);
-  const [error, setError] = useState39(null);
-  useEffect46(() => {
+  const [data2, setData] = useState40(null);
+  const [loading, setLoading] = useState40(true);
+  const [error, setError] = useState40(null);
+  useEffect47(() => {
     if (!semiont) {
       setLoading(false);
       return;
@@ -54530,11 +54564,11 @@ function SessionTimer() {
 }
 
 // src/components/SessionExpiryBanner.tsx
-import { useState as useState40 } from "react";
+import { useState as useState41 } from "react";
 import { jsx as jsx61, jsxs as jsxs54 } from "react/jsx-runtime";
 function SessionExpiryBanner() {
   const { timeRemaining, isExpiringSoon } = useSessionExpiry();
-  const [dismissed, setDismissed] = useState40(false);
+  const [dismissed, setDismissed] = useState41(false);
   const formattedTime = formatTime(timeRemaining);
   if (!isExpiringSoon || dismissed || !formattedTime) {
     return null;
@@ -54755,7 +54789,7 @@ function UnifiedHeader({
 }
 
 // src/components/layout/LeftSidebar.tsx
-import { useState as useState41, useEffect as useEffect47 } from "react";
+import { useState as useState42, useEffect as useEffect48 } from "react";
 import { jsx as jsx65, jsxs as jsxs57 } from "react/jsx-runtime";
 function LeftSidebar({
   Link,
@@ -54770,7 +54804,7 @@ function LeftSidebar({
   isModerator = false,
   currentPath
 }) {
-  const [isCollapsed, setIsCollapsed] = useState41(false);
+  const [isCollapsed, setIsCollapsed] = useState42(false);
   const { width, setWidth, minWidth, maxWidth } = usePanelWidth({
     defaultWidth: 256,
     // 16rem
@@ -54780,7 +54814,7 @@ function LeftSidebar({
     // 25rem
     storageKey: "semiont-left-sidebar-width"
   });
-  useEffect47(() => {
+  useEffect48(() => {
     if (collapsible) {
       const saved = localStorage.getItem(storageKey);
       if (saved === "true") {
@@ -55969,7 +56003,7 @@ function ExportCard({ onExport, isExporting, translations: t12 }) {
 }
 
 // src/features/admin-exchange/components/ImportCard.tsx
-import { useRef as useRef35, useState as useState42, useCallback as useCallback32 } from "react";
+import { useRef as useRef35, useState as useState43, useCallback as useCallback32 } from "react";
 import { jsx as jsx74, jsxs as jsxs64 } from "react/jsx-runtime";
 function ImportCard({
   onFileSelected,
@@ -55981,8 +56015,8 @@ function ImportCard({
   translations: t12
 }) {
   const fileInputRef = useRef35(null);
-  const [isDragActive, setIsDragActive] = useState42(false);
-  const [showConfirm, setShowConfirm] = useState42(false);
+  const [isDragActive, setIsDragActive] = useState43(false);
+  const [showConfirm, setShowConfirm] = useState43(false);
   const handleDragOver = useCallback32((e6) => {
     e6.preventDefault();
     setIsDragActive(true);
@@ -56108,33 +56142,35 @@ function ImportCard({
 }
 
 // src/features/admin-exchange/components/ImportProgress.tsx
-import { Fragment as Fragment14, jsx as jsx75, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs65 } from "react/jsx-runtime";
 var PHASE_LABELS = {
   started: "phaseStarted",
-  "entity-types": "phaseEntityTypes",
-  resources: "phaseResources",
-  annotations: "phaseAnnotations",
   complete: "phaseComplete",
   error: "phaseError"
 };
+var STAT_LABELS = {
+  eventsReplayed: "statsEventsReplayed",
+  resourcesCreated: "statsResourcesCreated",
+  annotationsCreated: "statsAnnotationsCreated",
+  entityTypesAdded: "statsEntityTypesAdded"
+};
 function ImportProgress({ phase, message, result, translations: t12 }) {
   const labelKey = PHASE_LABELS[phase];
   const phaseLabel = labelKey ? t12[labelKey] : phase;
   const isComplete = phase === "complete";
   const isError = phase === "error";
+  const stats = result?.stats != null && typeof result.stats === "object" ? result.stats : void 0;
+  const statEntries = stats ? Object.entries(stats).filter((entry) => typeof entry[1] === "number") : [];
   return /* @__PURE__ */ jsxs65("div", { className: "semiont-exchange__progress", children: [
     /* @__PURE__ */ jsx75("div", { className: `semiont-exchange__phase-label${isError ? " semiont-exchange__phase-label--error" : isComplete ? " semiont-exchange__phase-label--complete" : ""}`, children: phaseLabel }),
     message && !isComplete && !isError && /* @__PURE__ */ jsx75("p", { className: "semiont-exchange__progress-message", children: message }),
-    isComplete && result && /* @__PURE__ */ jsxs65("div", { className: "semiont-exchange__result", children: [
-      result.stats != null && typeof result.stats === "object" && /* @__PURE__ */ jsx75(Fragment14, { children: Object.entries(result.stats).map(([key, value]) => {
-        const label = key === "streams" ? t12.streams : key === "events" ? t12.events : key === "blobs" ? t12.blobs : key;
-        return /* @__PURE__ */ jsxs65("div", { className: "semiont-exchange__result-stat", children: [
-          /* @__PURE__ */ jsx75("span", { className: "semiont-exchange__result-value", children: value }),
-          /* @__PURE__ */ jsx75("span", { className: "semiont-exchange__result-label", children: label })
-        ] }, key);
-      }) }),
-      result.hashChainValid !== void 0 && /* @__PURE__ */ jsx75("div", { className: `semiont-exchange__hash-badge${result.hashChainValid ? " semiont-exchange__hash-badge--valid" : " semiont-exchange__hash-badge--invalid"}`, children: result.hashChainValid ? t12.hashChainValid : t12.hashChainInvalid })
-    ] }),
+    isComplete && statEntries.length > 0 && /* @__PURE__ */ jsx75("div", { className: "semiont-exchange__result", children: statEntries.map(([key, value]) => {
+      const statKey = STAT_LABELS[key];
+      return /* @__PURE__ */ jsxs65("div", { className: "semiont-exchange__result-stat", children: [
+        /* @__PURE__ */ jsx75("span", { className: "semiont-exchange__result-value", children: value }),
+        /* @__PURE__ */ jsx75("span", { className: "semiont-exchange__result-label", children: statKey ? t12[statKey] : key })
+      ] }, key);
+    }) }),
     isError && message && /* @__PURE__ */ jsx75("p", { className: "semiont-exchange__error-message", children: message })
   ] });
 }
@@ -56393,8 +56429,8 @@ function LinkedDataPage({
 }
 
 // src/features/admin-users/components/AdminUsersPage.tsx
-import { useState as useState43 } from "react";
-import { Fragment as Fragment15, jsx as jsx79, jsxs as jsxs69 } from "react/jsx-runtime";
+import { useState as useState44 } from "react";
+import { Fragment as Fragment14, jsx as jsx79, jsxs as jsxs69 } from "react/jsx-runtime";
 function UserTableRow({
   user,
   onUpdate,
@@ -56475,9 +56511,9 @@ function AdminUsersPage({
   Toolbar: Toolbar2,
   buttonStyles: buttonStyles2
 }) {
-  const [searchTerm, setSearchTerm] = useState43("");
-  const [selectedRole, setSelectedRole] = useState43("all");
-  const [selectedStatus, setSelectedStatus] = useState43("all");
+  const [searchTerm, setSearchTerm] = useState44("");
+  const [selectedRole, setSelectedRole] = useState44("all");
+  const [selectedStatus, setSelectedStatus] = useState44("all");
   const filteredUsers = users.filter((user) => {
     const matchesSearch = (user.name || "").toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase());
     const userRole = user.isAdmin ? "admin" : "user";
@@ -56504,7 +56540,7 @@ function AdminUsersPage({
           /* @__PURE__ */ jsx79("div", { className: "semiont-skeleton semiont-skeleton--text" }),
           /* @__PURE__ */ jsx79("div", { className: "semiont-skeleton semiont-skeleton--number" })
         ] })
-      ] }) }, i12)) : /* @__PURE__ */ jsxs69(Fragment15, { children: [
+      ] }) }, i12)) : /* @__PURE__ */ jsxs69(Fragment14, { children: [
         /* @__PURE__ */ jsx79("div", { className: "semiont-stat-card", children: /* @__PURE__ */ jsxs69("div", { className: "semiont-stat-card__content", children: [
           /* @__PURE__ */ jsx79("div", { className: "semiont-stat-card__icon-wrapper", children: /* @__PURE__ */ jsx79(UserCircleIcon_default, { className: "semiont-stat-card__icon semiont-stat-card__icon--primary" }) }),
           /* @__PURE__ */ jsxs69("div", { className: "semiont-stat-card__text", children: [
@@ -56642,7 +56678,7 @@ function AdminUsersPage({
 
 // src/features/auth/components/SignInForm.tsx
 import React45 from "react";
-import { Fragment as Fragment16, jsx as jsx80, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs70 } from "react/jsx-runtime";
 function GoogleIcon() {
   return /* @__PURE__ */ jsxs70("svg", { className: "semiont-icon semiont-icon--small semiont-icon--inline", viewBox: "0 0 24 24", children: [
     /* @__PURE__ */ jsx80(
@@ -56741,7 +56777,7 @@ function CredentialsAuthForm({
       ]
     }
   ) : null;
-  return /* @__PURE__ */ jsxs70(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs70(Fragment15, { children: [
     validationError && /* @__PURE__ */ jsx80("div", { className: "semiont-auth__error", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ jsx80("div", { className: "semiont-auth__error-text", children: validationError }) }),
     /* @__PURE__ */ jsxs70("form", { onSubmit: handleSubmit, className: "semiont-auth__form", noValidate: true, children: [
       /* @__PURE__ */ jsxs70("div", { className: "semiont-form__field", children: [
@@ -56846,7 +56882,7 @@ function SignInForm({
       /* @__PURE__ */ jsx80("p", { className: "semiont-auth__subtitle", children: t12.signInPrompt })
     ] }),
     error && /* @__PURE__ */ jsx80("div", { className: "semiont-auth__error-container", children: /* @__PURE__ */ jsx80("div", { className: "semiont-auth__error", children: /* @__PURE__ */ jsx80("div", { className: "semiont-auth__error-text", children: error }) }) }),
-    /* @__PURE__ */ jsx80("div", { className: "semiont-auth__forms", children: !isLoading ? /* @__PURE__ */ jsxs70(Fragment16, { children: [
+    /* @__PURE__ */ jsx80("div", { className: "semiont-auth__forms", children: !isLoading ? /* @__PURE__ */ jsxs70(Fragment15, { children: [
       showCredentialsAuth && onCredentialsSignIn && /* @__PURE__ */ jsx80(
         CredentialsAuthForm,
         {
@@ -56865,7 +56901,7 @@ function SignInForm({
 }
 
 // src/features/auth/components/SignUpForm.tsx
-import { useState as useState44 } from "react";
+import { useState as useState45 } from "react";
 import { jsx as jsx81, jsxs as jsxs71 } from "react/jsx-runtime";
 function GoogleIcon2() {
   return /* @__PURE__ */ jsxs71("svg", { className: "semiont-icon semiont-icon--small semiont-icon--inline", viewBox: "0 0 24 24", children: [
@@ -56900,7 +56936,7 @@ function GoogleIcon2() {
   ] });
 }
 function SignUpForm({ onSignUp, Link, translations: t12 }) {
-  const [isLoading, setIsLoading] = useState44(false);
+  const [isLoading, setIsLoading] = useState45(false);
   const handleSignUp = async () => {
     setIsLoading(true);
     try {
@@ -57105,7 +57141,7 @@ function WelcomePage({
 }
 
 // src/features/moderate-entity-tags/components/EntityTagsPage.tsx
-import { Fragment as Fragment17, jsx as jsx84, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx84, jsxs as jsxs74 } from "react/jsx-runtime";
 function EntityTagsPage({
   entityTypes,
   error,
@@ -57166,7 +57202,7 @@ function EntityTagsPage({
               onClick: onAddTag,
               disabled: isAddingTag || !newTag.trim(),
               className: "semiont-button semiont-button--primary",
-              children: isAddingTag ? t12.adding : /* @__PURE__ */ jsxs74(Fragment17, { children: [
+              children: isAddingTag ? t12.adding : /* @__PURE__ */ jsxs74(Fragment16, { children: [
                 /* @__PURE__ */ jsx84(PlusIcon_default, { className: "semiont-icon semiont-icon--small semiont-icon--inline" }),
                 t12.addTag
               ] })
@@ -57357,11 +57393,11 @@ function TagSchemasPage({
 }
 
 // src/features/resource-compose/components/ResourceComposePage.tsx
-import { useState as useState45, useEffect as useEffect48 } from "react";
-import { isImageMimeType, isPdfMimeType as isPdfMimeType4, LOCALES as LOCALES3 } from "@semiont/core";
+import { useState as useState46, useEffect as useEffect49 } from "react";
+import { capabilitiesOf as capabilitiesOf5, AUTHORABLE_MEDIA_TYPES, MEDIA_TYPES, mediaTypeForExtension, isSupportedMediaType, LOCALES as LOCALES3 } from "@semiont/core";
 
 // src/features/resource-compose/components/UploadProgressBar.tsx
-import { Fragment as Fragment18, jsx as jsx87, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx87, jsxs as jsxs77 } from "react/jsx-runtime";
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -57388,7 +57424,7 @@ function UploadProgressBar({ progress, label = "Upload" }) {
         ": ",
         formatBytes(progress.bytesUploaded),
         "\u2026"
-      ] }) : /* @__PURE__ */ jsxs77(Fragment18, { children: [
+      ] }) : /* @__PURE__ */ jsxs77(Fragment17, { children: [
         /* @__PURE__ */ jsxs77("span", { children: [
           label,
           ": ",
@@ -57431,6 +57467,15 @@ function UploadProgressBar({ progress, label = "Upload" }) {
 
 // src/features/resource-compose/components/ResourceComposePage.tsx
 import { jsx as jsx88, jsxs as jsxs78 } from "react/jsx-runtime";
+var UPLOAD_ACCEPT = Object.values(MEDIA_TYPES).map((c12) => c12.extension).join(",");
+function detectUploadMediaType(file) {
+  if (file.type && isSupportedMediaType(file.type)) return file.type;
+  if (file.name.includes(".")) {
+    const byExt = mediaTypeForExtension(file.name.slice(file.name.lastIndexOf(".")));
+    if (byExt) return byExt;
+  }
+  return "application/octet-stream";
+}
 function ResourceComposePage({
   mode,
   cloneData,
@@ -57450,20 +57495,20 @@ function ResourceComposePage({
   Toolbar: Toolbar2
 }) {
   const { announceFormSubmitting, announceFormSuccess, announceFormError } = useFormAnnouncements();
-  const [newResourceName, setNewResourceName] = useState45("");
-  const [newResourceContent, setNewResourceContent] = useState45("");
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState45([]);
-  const [isCreating, setIsCreating] = useState45(false);
-  const [inputMethod, setInputMethod] = useState45("write");
-  const [uploadedFile, setUploadedFile] = useState45(null);
-  const [fileMimeType, setFileMimeType] = useState45("text/markdown");
-  const [filePreviewUrl, setFilePreviewUrl] = useState45(null);
-  const [selectedFormat, setSelectedFormat] = useState45("text/markdown");
-  const [selectedLanguage, setSelectedLanguage] = useState45(initialLocale);
-  const [selectedCharset, setSelectedCharset] = useState45("");
-  const [storagePath, setStoragePath] = useState45("");
-  const [archiveOriginal, setArchiveOriginal] = useState45(true);
-  useEffect48(() => {
+  const [newResourceName, setNewResourceName] = useState46("");
+  const [newResourceContent, setNewResourceContent] = useState46("");
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState46([]);
+  const [isCreating, setIsCreating] = useState46(false);
+  const [inputMethod, setInputMethod] = useState46("write");
+  const [uploadedFile, setUploadedFile] = useState46(null);
+  const [fileMimeType, setFileMimeType] = useState46("text/markdown");
+  const [filePreviewUrl, setFilePreviewUrl] = useState46(null);
+  const [selectedFormat, setSelectedFormat] = useState46("text/markdown");
+  const [selectedLanguage, setSelectedLanguage] = useState46(initialLocale);
+  const [selectedCharset, setSelectedCharset] = useState46("");
+  const [storagePath, setStoragePath] = useState46("");
+  const [archiveOriginal, setArchiveOriginal] = useState46(true);
+  useEffect49(() => {
     if (mode === "clone" && cloneData) {
       setNewResourceName(cloneData.sourceResource.name);
       setNewResourceContent(cloneData.sourceContent);
@@ -57477,14 +57522,16 @@ function ResourceComposePage({
   const handleFileUpload = (e6) => {
     const file = e6.target.files?.[0];
     if (!file) return;
+    const detectedMediaType = detectUploadMediaType(file);
     setUploadedFile(file);
-    setFileMimeType(file.type);
+    setFileMimeType(detectedMediaType);
     setInputMethod("upload");
     if (!newResourceName) {
       const nameWithoutExt = file.name.replace(/\.[^/.]+$/, "");
       setNewResourceName(nameWithoutExt);
     }
-    if (isImageMimeType(file.type) || isPdfMimeType4(file.type)) {
+    const detectedRender = capabilitiesOf5(detectedMediaType)?.render;
+    if (detectedRender === "image" || detectedRender === "pdf") {
       const previewUrl = URL.createObjectURL(file);
       setFilePreviewUrl(previewUrl);
     } else {
@@ -57496,7 +57543,7 @@ function ResourceComposePage({
       reader.readAsText(file);
     }
   };
-  useEffect48(() => {
+  useEffect49(() => {
     return () => {
       if (filePreviewUrl) {
         URL.revokeObjectURL(filePreviewUrl);
@@ -57747,7 +57794,7 @@ function ResourceComposePage({
                   "input",
                   {
                     type: "file",
-                    accept: "text/plain,text/markdown,image/png,image/jpeg,application/pdf",
+                    accept: UPLOAD_ACCEPT,
                     onChange: handleFileUpload,
                     className: "semiont-form__upload-input",
                     disabled: isCreating
@@ -57779,7 +57826,7 @@ function ResourceComposePage({
               /* @__PURE__ */ jsx88("code", { className: "semiont-form__media-type-value", children: fileMimeType }),
               /* @__PURE__ */ jsx88("span", { className: "semiont-form__media-type-lock", title: t12.autoDetected, children: "\u{1F512}" })
             ] }),
-            uploadedFile && filePreviewUrl && isImageMimeType(fileMimeType) && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__image-preview", children: [
+            uploadedFile && filePreviewUrl && capabilitiesOf5(fileMimeType)?.render === "image" && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__image-preview", children: [
               /* @__PURE__ */ jsx88("p", { className: "semiont-form__image-preview-label", children: "Preview:" }),
               /* @__PURE__ */ jsx88("div", { className: "semiont-form__image-preview-container", children: /* @__PURE__ */ jsx88(
                 "img",
@@ -57794,7 +57841,7 @@ function ResourceComposePage({
           (isClone || isReferenceCompletion || inputMethod === "write") && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__write-section", children: [
             !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
               /* @__PURE__ */ jsx88("label", { htmlFor: "format-select", className: "semiont-form__label", children: t12.format }),
-              /* @__PURE__ */ jsxs78(
+              /* @__PURE__ */ jsx88(
                 "select",
                 {
                   id: "format-select",
@@ -57802,11 +57849,12 @@ function ResourceComposePage({
                   onChange: (e6) => setSelectedFormat(e6.target.value),
                   disabled: isCreating,
                   className: "semiont-select",
-                  children: [
-                    /* @__PURE__ */ jsx88("option", { value: "text/markdown", children: "Markdown (text/markdown)" }),
-                    /* @__PURE__ */ jsx88("option", { value: "text/plain", children: "Plain Text (text/plain)" }),
-                    /* @__PURE__ */ jsx88("option", { value: "text/html", children: "HTML (text/html)" })
-                  ]
+                  children: AUTHORABLE_MEDIA_TYPES.map((mt) => /* @__PURE__ */ jsxs78("option", { value: mt, children: [
+                    capabilitiesOf5(mt)?.label ?? mt,
+                    " (",
+                    mt,
+                    ")"
+                  ] }, mt))
                 }
               )
             ] }),
@@ -58126,18 +58174,17 @@ function ResourceDiscoveryPage({
 }
 
 // src/features/resource-viewer/components/ResourceViewerPage.tsx
-import { useState as useState47, useEffect as useEffect50, useCallback as useCallback34 } from "react";
+import { useState as useState48, useEffect as useEffect51, useCallback as useCallback34 } from "react";
 import { annotationId } from "@semiont/core";
-import { getLanguage, getPrimaryRepresentation as getPrimaryRepresentation2, getPrimaryMediaType as getPrimaryMediaType2 } from "@semiont/core";
-import { getMimeCategory as getMimeCategory3 } from "@semiont/core";
+import { getLanguage, getPrimaryRepresentation as getPrimaryRepresentation2, getPrimaryMediaType as getPrimaryMediaType2, capabilitiesOf as capabilitiesOf6 } from "@semiont/core";
 
 // src/hooks/useMediaToken.ts
-import { useEffect as useEffect49, useState as useState46 } from "react";
+import { useEffect as useEffect50, useState as useState47 } from "react";
 function useMediaToken(id2) {
   const semiont = useObservable(useSemiont().activeSession$)?.client;
-  const [token, setToken] = useState46(void 0);
-  const [loading, setLoading] = useState46(true);
-  useEffect49(() => {
+  const [token, setToken] = useState47(void 0);
+  const [loading, setLoading] = useState47(true);
+  useEffect50(() => {
     if (!semiont || !id2) {
       setLoading(false);
       return;
@@ -58174,7 +58221,7 @@ import { createMarkStateUnit } from "@semiont/sdk";
 import { createGatherStateUnit } from "@semiont/sdk";
 import { createMatchStateUnit } from "@semiont/sdk";
 import { createYieldStateUnit } from "@semiont/sdk";
-import { decodeWithCharset as decodeWithCharset2 } from "@semiont/core";
+import { decodeWithCharset as decodeWithCharset2, textExtractionOf } from "@semiont/core";
 import { isHighlight as isHighlight5, isComment as isComment5, isAssessment as isAssessment4, isReference as isReference6, isTag as isTag6 } from "@semiont/core";
 var WIZARD_CLOSED = {
   open: false,
@@ -58225,11 +58272,11 @@ function createResourceViewerPageStateUnit(client, resourceId2, locale, browse,
   const contentLoading$ = new import_rxjs2.BehaviorSubject(false);
   const mediaToken$ = new import_rxjs2.BehaviorSubject(null);
   const mediaType = options?.mediaType || "text/plain";
-  const isBinaryType = mediaType.startsWith("image/") || mediaType === "application/pdf";
+  const isBinaryType = textExtractionOf(mediaType) !== "decode";
   if (!isBinaryType && mediaType) {
     contentLoading$.next(true);
-    client.browse.resourceRepresentation(resourceId2, { accept: mediaType }).then(({ data: data2 }) => {
-      content$.next(decodeWithCharset2(data2, mediaType));
+    client.browse.resourceRepresentation(resourceId2).then(({ data: data2, contentType }) => {
+      content$.next(decodeWithCharset2(data2, contentType));
       contentLoading$.next(false);
     }).catch(() => {
       contentLoading$.next(false);
@@ -58324,7 +58371,8 @@ function ResourceViewerPage({
   const { hoverDelayMs } = useHoverDelay();
   const { triggerSparkleAnimation, clearNewAnnotationId } = useResourceAnnotations();
   const resourceMediaType = getPrimaryMediaType2(resource) || "text/plain";
-  const isBinary = getMimeCategory3(resourceMediaType) === "image";
+  const renderMode = capabilitiesOf6(resourceMediaType)?.render;
+  const isBinary = renderMode === "image" || renderMode === "pdf";
   const { content: textContent, loading: textLoading } = useResourceContent(rUri, resource, !isBinary);
   const { token: mediaToken, loading: mediaTokenLoading } = useMediaToken(rUri);
   const binaryContent = isBinary && mediaToken && semiont ? `${semiont.baseUrl}/api/resources/${rUri}?token=${mediaToken}` : "";
@@ -58401,7 +58449,7 @@ function ResourceViewerPage({
       reason: "compose-from-wizard"
     });
   }, [session]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (resource && rUri) {
       const mediaType = getPrimaryMediaType2(resource);
       browser2.addOpenResource(rUri, resource.name, mediaType || void 0, resource.storageUri);
@@ -58410,7 +58458,7 @@ function ResourceViewerPage({
       }
     }
   }, [resource, rUri, browser2]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (pendingAnnotation) {
       browser2.emit("panel:open", { panel: "annotations" });
     }
@@ -58514,7 +58562,7 @@ function ResourceViewerPage({
     announceResourceLoading,
     announceResourceLoaded
   } = useResourceLoadingAnnouncements();
-  useEffect50(() => {
+  useEffect51(() => {
     if (contentLoading) {
       announceResourceLoading(resource.name);
     } else if (content4) {
@@ -58525,7 +58573,7 @@ function ResourceViewerPage({
   const primaryRep = getPrimaryRepresentation2(resource);
   const primaryMediaType = primaryRep?.mediaType;
   const primaryByteSize = primaryRep?.byteSize;
-  const [annotateMode, setAnnotateMode] = useState47(() => {
+  const [annotateMode, setAnnotateMode] = useState48(() => {
     if (typeof window !== "undefined") {
       return localStorage.getItem("annotateMode") === "true";
     }
@@ -58643,7 +58691,7 @@ function ResourceViewerPage({
                   knowledgeBaseName
                 }
               ),
-              activePanel === "jsonld" && /* @__PURE__ */ jsx91(JsonLdPanel, { resource })
+              activePanel === "jsonld" && /* @__PURE__ */ jsx91(JsonLdPanel, { resourceId: rUri })
             ]
           }
         ),
@@ -58748,7 +58796,7 @@ function createSessionStateUnit(client) {
 var import_rxjs4 = __toESM(require_cjs(), 1);
 import { resourceId as makeResourceId2, annotationId as makeAnnotationId } from "@semiont/core";
 import { createDisposer as createDisposer2 } from "@semiont/sdk";
-import { getPrimaryMediaType as getPrimaryMediaType3, decodeWithCharset as decodeWithCharset3 } from "@semiont/core";
+import { decodeWithCharset as decodeWithCharset3, extensionForMediaType } from "@semiont/core";
 function createComposePageStateUnit(client, browse, params, auth) {
   const disposer = createDisposer2();
   disposer.add(browse);
@@ -58785,11 +58833,8 @@ function createComposePageStateUnit(client, browse, params, auth) {
         const tokenResult = await client.yield.fromToken(params.token);
         if (tokenResult && auth) {
           const rId = makeResourceId2(tokenResult["@id"]);
-          const mediaType = getPrimaryMediaType3(tokenResult) || "text/plain";
-          const { data: data2 } = await client.browse.resourceRepresentation(rId, {
-            accept: mediaType
-          });
-          const content4 = decodeWithCharset3(data2, mediaType);
+          const { data: data2, contentType } = await client.browse.resourceRepresentation(rId);
+          const content4 = decodeWithCharset3(data2, contentType);
           cloneData$.next({ sourceResource: tokenResult, sourceContent: content4 });
         }
       } catch {
@@ -58816,7 +58861,7 @@ function createComposePageStateUnit(client, browse, params, auth) {
       mimeType = saveParams.format ?? "application/octet-stream";
     } else {
       const blob = new Blob([saveParams.content || ""], { type: saveParams.format ?? "application/octet-stream" });
-      const extension2 = saveParams.format === "text/plain" ? ".txt" : saveParams.format === "text/html" ? ".html" : ".md";
+      const extension2 = extensionForMediaType(saveParams.format ?? "application/octet-stream");
       fileToUpload = new File([blob], saveParams.name + extension2, { type: saveParams.format ?? "application/octet-stream" });
       mimeType = saveParams.format ?? "application/octet-stream";
     }