@semiont/react-ui 0.4.15 → 0.4.16

package/dist/index.mjs

@@ -28,14 +28,14 @@ import {
   usePreloadTranslations,
   useToast,
   useTranslations
-} from "./chunk-R2U7P4TK.mjs";
+} from "./chunk-FAI3S4BM.mjs";
 import {
   ApiClientProvider,
   EventBusProvider,
   useApiClient,
   useEventBus
 } from "./chunk-OZICDVH7.mjs";
-import "./chunk-HVMAGUFA.mjs";
+import "./chunk-NOD3NCXE.mjs";
 import {
   __commonJS,
   __export,
@@ -30948,6 +30948,19 @@ import { getAnnotationUriFromEvent } from "@semiont/core";
 
 // src/components/resource/event-formatting.ts
 import { getExactText as getExactText2, getTargetSelector as getTargetSelector3 } from "@semiont/api-client";
+function formatUserId(userId) {
+  if (!userId.startsWith("did:")) return userId;
+  const systemMatch = userId.match(/^did:web:system:(.+)$/);
+  if (systemMatch) {
+    const name3 = systemMatch[1];
+    return name3.charAt(0).toUpperCase() + name3.slice(1);
+  }
+  const userMatch = userId.match(/^did:web:[^:]+:users:(.+)$/);
+  if (userMatch) {
+    return decodeURIComponent(userMatch[1]);
+  }
+  return userId;
+}
 function formatEventType(type, t12, payload) {
   switch (type) {
     case "yield:created":
@@ -30983,6 +30996,8 @@ function formatEventType(type, t12, payload) {
     case "yield:representation-added":
     case "yield:representation-removed":
       return t12("representationEvent");
+    case "embedding:computed":
+      return t12("embeddingComputed");
     default:
       return type;
   }
@@ -31023,6 +31038,8 @@ function getEventEmoji(type, payload) {
     case "yield:representation-added":
     case "yield:representation-removed":
       return "\u{1F4C4}";
+    case "embedding:computed":
+      return "\u{1F9EE}";
     default:
       return "\u{1F4DD}";
   }
@@ -31246,7 +31263,7 @@ function HistoryEvent({
             displayContent.exact,
             "\u201D"
           ] }) : /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__text", children: displayContent.exact }) : /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__text", children: formatEventType(event.type, t12, event.payload) }),
-          event.userId && /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__user", children: event.userId }),
+          event.userId && /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__user", children: formatUserId(event.userId) }),
           /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__timestamp", children: formatRelativeTime(event.timestamp, t12) })
         ] }),
         entityTypes.length > 0 && /* @__PURE__ */ jsx25("div", { className: "semiont-history-event__entity-types", children: entityTypes.map((type) => /* @__PURE__ */ jsx25(
@@ -31262,7 +31279,7 @@ function HistoryEvent({
           /* @__PURE__ */ jsxs17("span", { className: "semiont-history-event__detail", children: [
             t12("user"),
             ": ",
-            /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__detail-value", children: creationDetails.userId })
+            /* @__PURE__ */ jsx25("span", { className: "semiont-history-event__detail-value", children: creationDetails.userId ? formatUserId(creationDetails.userId) : "" })
           ] }),
           /* @__PURE__ */ jsxs17("span", { className: "semiont-history-event__detail", children: [
             t12("method"),
@@ -48022,6 +48039,7 @@ function ResourceInfoPanel({
   documentLocale,
   primaryMediaType,
   primaryByteSize,
+  storageUri,
   isArchived = false,
   dateCreated,
   dateModified,
@@ -48051,6 +48069,10 @@ function ResourceInfoPanel({
             primaryByteSize.toLocaleString(),
             " bytes"
           ] })
+        ] }),
+        storageUri && /* @__PURE__ */ jsxs34("div", { children: [
+          /* @__PURE__ */ jsx42("span", { className: "semiont-resource-info-panel__label", children: t12("storageUri") }),
+          /* @__PURE__ */ jsx42("span", { className: "semiont-resource-info-panel__value", children: storageUri })
         ] })
       ] })
     ] }),
@@ -57636,274 +57658,278 @@ function ResourceComposePage({
           gatheredContext.graphContext.connections.map((conn) => /* @__PURE__ */ jsx89("span", { className: "semiont-chip", style: { fontSize: "var(--semiont-text-xs)", padding: "0.125rem 0.5rem", marginRight: "0.25rem" }, children: conn.resourceName }, conn.resourceId))
         ] })
       ] }),
-      /* @__PURE__ */ jsx89("div", { className: "semiont-form", children: /* @__PURE__ */ jsxs78("form", { onSubmit: handleSaveResource, className: "semiont-form__fields", children: [
-        /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
-          /* @__PURE__ */ jsx89("label", { htmlFor: "docName", className: "semiont-form__label", children: t12.resourceName }),
-          /* @__PURE__ */ jsx89(
-            "input",
-            {
-              id: "docName",
-              type: "text",
-              value: newResourceName,
-              onChange: (e6) => setNewResourceName(e6.target.value),
-              placeholder: t12.resourceNamePlaceholder,
-              className: "semiont-input",
-              required: true,
-              disabled: isCreating
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
-          /* @__PURE__ */ jsx89("label", { htmlFor: "storagePath", className: "semiont-form__label", children: "Save location" }),
-          /* @__PURE__ */ jsxs78("div", { className: "semiont-input-addon", children: [
-            /* @__PURE__ */ jsx89("span", { className: "semiont-input-addon__prefix", children: "file://" }),
+      /* @__PURE__ */ jsx89("div", { className: "semiont-form", children: /* @__PURE__ */ jsxs78("form", { onSubmit: handleSaveResource, className: "semiont-form__fields semiont-compose-grid", children: [
+        /* @__PURE__ */ jsxs78("div", { className: "semiont-compose-grid__meta", children: [
+          /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
+            /* @__PURE__ */ jsx89("label", { htmlFor: "docName", className: "semiont-form__label", children: t12.resourceName }),
             /* @__PURE__ */ jsx89(
               "input",
               {
-                id: "storagePath",
+                id: "docName",
                 type: "text",
-                value: storagePath,
-                onChange: (e6) => setStoragePath(e6.target.value),
-                placeholder: "docs/my-resource.md",
+                value: newResourceName,
+                onChange: (e6) => setNewResourceName(e6.target.value),
+                placeholder: t12.resourceNamePlaceholder,
+                className: "semiont-input",
                 required: true,
-                className: "semiont-input semiont-input--addon",
                 disabled: isCreating
               }
             )
-          ] })
-        ] }),
-        (!isReferenceCompletion || selectedEntityTypes.length === 0) && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field semiont-form__entity-types", children: [
-          /* @__PURE__ */ jsx89("div", { className: "semiont-form__label", children: t12.entityTypes }),
-          /* @__PURE__ */ jsx89(
-            "div",
-            {
-              className: "semiont-form__entity-type-buttons",
-              role: "group",
-              "aria-describedby": "entity-types-description",
-              children: availableEntityTypes.map((type) => {
-                const isSelected = selectedEntityTypes.includes(type);
-                return /* @__PURE__ */ jsx89(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setSelectedEntityTypes(
-                        (prev) => prev.includes(type) ? prev.filter((t13) => t13 !== type) : [...prev, type]
-                      );
-                    },
-                    className: "semiont-form__entity-type-button",
-                    "data-selected": isSelected,
-                    disabled: isCreating,
-                    "aria-pressed": isSelected,
-                    "aria-label": `${type} entity type, ${isSelected ? "selected" : "not selected"}`,
-                    children: type
-                  },
-                  type
-                );
-              })
-            }
-          ),
-          selectedEntityTypes.length > 0 && /* @__PURE__ */ jsxs78(
-            "div",
-            {
-              className: "sr-only",
-              "aria-live": "polite",
-              "aria-atomic": "true",
-              children: [
-                selectedEntityTypes.length,
-                " entity type",
-                selectedEntityTypes.length !== 1 ? "s" : "",
-                " selected: ",
-                selectedEntityTypes.join(", ")
-              ]
-            }
-          )
-        ] }),
-        isReferenceCompletion && selectedEntityTypes.length > 0 && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field semiont-form__entity-types-display", role: "region", "aria-labelledby": "selected-entity-types-label", children: [
-          /* @__PURE__ */ jsx89("h3", { id: "selected-entity-types-label", className: "semiont-form__label", children: t12.entityTypes }),
-          /* @__PURE__ */ jsx89("div", { className: "semiont-form__entity-type-tags", role: "list", children: selectedEntityTypes.map((type) => /* @__PURE__ */ jsx89(
-            "span",
-            {
-              role: "listitem",
-              className: "semiont-form__entity-type-tag",
-              "aria-label": `Entity type: ${type}`,
-              children: type
-            },
-            type
-          )) }),
-          /* @__PURE__ */ jsx89("p", { className: "semiont-form__helper-text", id: "reference-entity-types-description", children: "These entity types were selected when creating the reference" })
-        ] }),
-        /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
-          /* @__PURE__ */ jsx89("label", { htmlFor: "language-select", className: "semiont-form__label", children: t12.language }),
-          /* @__PURE__ */ jsx89(
-            "select",
-            {
-              id: "language-select",
-              value: selectedLanguage,
-              onChange: (e6) => setSelectedLanguage(e6.target.value),
-              disabled: isCreating,
-              className: "semiont-select",
-              children: LOCALES3.map((lang) => /* @__PURE__ */ jsx89("option", { value: lang.code, children: lang.nativeName }, lang.code))
-            }
-          )
-        ] }),
-        !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
-          /* @__PURE__ */ jsx89("label", { className: "semiont-form__label", children: t12.contentSource }),
-          /* @__PURE__ */ jsxs78("div", { className: "semiont-form__content-source-toggle", children: [
-            /* @__PURE__ */ jsxs78(
-              "button",
-              {
-                type: "button",
-                onClick: () => setInputMethod("upload"),
-                disabled: isCreating,
-                className: "semiont-form__content-source-button",
-                "data-active": inputMethod === "upload",
-                children: [
-                  /* @__PURE__ */ jsxs78("div", { className: "semiont-form__content-source-icon-wrapper", children: [
-                    /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-icon", children: "\u{1F4CE}" }),
-                    /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-label", children: t12.uploadFile })
-                  ] }),
-                  /* @__PURE__ */ jsx89("div", { className: "semiont-form__content-source-description", children: t12.uploadFileDescription })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs78(
-              "button",
-              {
-                type: "button",
-                onClick: () => setInputMethod("write"),
-                disabled: isCreating,
-                className: "semiont-form__content-source-button",
-                "data-active": inputMethod === "write",
-                children: [
-                  /* @__PURE__ */ jsxs78("div", { className: "semiont-form__content-source-icon-wrapper", children: [
-                    /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-icon", children: "\u270D\uFE0F" }),
-                    /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-label", children: t12.writeContent })
-                  ] }),
-                  /* @__PURE__ */ jsx89("div", { className: "semiont-form__content-source-description", children: t12.writeContentDescription })
-                ]
-              }
-            )
-          ] })
-        ] }),
-        !isClone && !isReferenceCompletion && inputMethod === "upload" && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__upload-section", children: [
-          /* @__PURE__ */ jsx89("div", { children: /* @__PURE__ */ jsxs78("div", { className: "semiont-form__upload-container", children: [
-            /* @__PURE__ */ jsx89("label", { className: "semiont-form__upload-dropzone", children: /* @__PURE__ */ jsxs78("div", { className: "semiont-form__upload-area", children: [
+          ] }),
+          /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
+            /* @__PURE__ */ jsx89("label", { htmlFor: "storagePath", className: "semiont-form__label", children: "Save location" }),
+            /* @__PURE__ */ jsxs78("div", { className: "semiont-input-addon", children: [
+              /* @__PURE__ */ jsx89("span", { className: "semiont-input-addon__prefix", children: "file://" }),
               /* @__PURE__ */ jsx89(
                 "input",
                 {
-                  type: "file",
-                  accept: "text/plain,text/markdown,image/png,image/jpeg,application/pdf",
-                  onChange: handleFileUpload,
-                  className: "semiont-form__upload-input",
+                  id: "storagePath",
+                  type: "text",
+                  value: storagePath,
+                  onChange: (e6) => setStoragePath(e6.target.value),
+                  placeholder: "docs/my-resource.md",
+                  required: true,
+                  className: "semiont-input semiont-input--addon",
                   disabled: isCreating
                 }
-              ),
-              /* @__PURE__ */ jsx89("p", { className: "semiont-form__upload-text", children: uploadedFile ? uploadedFile.name : t12.dropFileOrClick }),
-              /* @__PURE__ */ jsx89("p", { className: "semiont-form__upload-hint", children: t12.supportedFormats })
-            ] }) }),
-            uploadedFile && /* @__PURE__ */ jsx89(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setUploadedFile(null);
-                  setFilePreviewUrl(null);
-                  setFileMimeType("text/markdown");
-                },
-                className: "semiont-button semiont-button--danger semiont-button--small",
-                disabled: isCreating,
-                children: "Clear"
-              }
-            )
-          ] }) }),
-          uploadedFile && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__media-type", children: [
-            /* @__PURE__ */ jsxs78("span", { className: "semiont-form__media-type-label", children: [
-              t12.mediaType,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsx89("code", { className: "semiont-form__media-type-value", children: fileMimeType }),
-            /* @__PURE__ */ jsx89("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: [
-            /* @__PURE__ */ jsx89("p", { className: "semiont-form__image-preview-label", children: "Preview:" }),
-            /* @__PURE__ */ jsx89("div", { className: "semiont-form__image-preview-container", children: /* @__PURE__ */ jsx89(
-              "img",
+          (!isReferenceCompletion || selectedEntityTypes.length === 0) && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field semiont-form__entity-types", children: [
+            /* @__PURE__ */ jsx89("div", { className: "semiont-form__label", children: t12.entityTypes }),
+            /* @__PURE__ */ jsx89(
+              "div",
               {
-                src: filePreviewUrl,
-                alt: "Upload preview",
-                className: "semiont-form__image-preview-img"
+                className: "semiont-form__entity-type-buttons",
+                role: "group",
+                "aria-describedby": "entity-types-description",
+                children: availableEntityTypes.map((type) => {
+                  const isSelected = selectedEntityTypes.includes(type);
+                  return /* @__PURE__ */ jsx89(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setSelectedEntityTypes(
+                          (prev) => prev.includes(type) ? prev.filter((t13) => t13 !== type) : [...prev, type]
+                        );
+                      },
+                      className: "semiont-form__entity-type-button",
+                      "data-selected": isSelected,
+                      disabled: isCreating,
+                      "aria-pressed": isSelected,
+                      "aria-label": `${type} entity type, ${isSelected ? "selected" : "not selected"}`,
+                      children: type
+                    },
+                    type
+                  );
+                })
               }
-            ) })
-          ] })
-        ] }),
-        (isClone || isReferenceCompletion || inputMethod === "write") && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__write-section", children: [
-          !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
-            /* @__PURE__ */ jsx89("label", { htmlFor: "format-select", className: "semiont-form__label", children: t12.format }),
-            /* @__PURE__ */ jsxs78(
-              "select",
+            ),
+            selectedEntityTypes.length > 0 && /* @__PURE__ */ jsxs78(
+              "div",
               {
-                id: "format-select",
-                value: selectedFormat,
-                onChange: (e6) => setSelectedFormat(e6.target.value),
-                disabled: isCreating,
-                className: "semiont-select",
+                className: "sr-only",
+                "aria-live": "polite",
+                "aria-atomic": "true",
                 children: [
-                  /* @__PURE__ */ jsx89("option", { value: "text/markdown", children: "Markdown (text/markdown)" }),
-                  /* @__PURE__ */ jsx89("option", { value: "text/plain", children: "Plain Text (text/plain)" }),
-                  /* @__PURE__ */ jsx89("option", { value: "text/html", children: "HTML (text/html)" })
+                  selectedEntityTypes.length,
+                  " entity type",
+                  selectedEntityTypes.length !== 1 ? "s" : "",
+                  " selected: ",
+                  selectedEntityTypes.join(", ")
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field semiont-form__editor", children: [
-            /* @__PURE__ */ jsx89("label", { className: "semiont-form__label", children: isClone ? t12.resourceContent : t12.content }),
-            /* @__PURE__ */ jsx89("div", { className: "semiont-form__editor-wrapper", lang: selectedLanguage, children: /* @__PURE__ */ jsx89(
-              CodeMirrorRenderer,
+          isReferenceCompletion && selectedEntityTypes.length > 0 && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field semiont-form__entity-types-display", role: "region", "aria-labelledby": "selected-entity-types-label", children: [
+            /* @__PURE__ */ jsx89("h3", { id: "selected-entity-types-label", className: "semiont-form__label", children: t12.entityTypes }),
+            /* @__PURE__ */ jsx89("div", { className: "semiont-form__entity-type-tags", role: "list", children: selectedEntityTypes.map((type) => /* @__PURE__ */ jsx89(
+              "span",
               {
-                content: newResourceContent,
-                editable: !isCreating,
-                sourceView: true,
-                showLineNumbers,
-                hoverDelayMs,
-                onChange: (newContent) => setNewResourceContent(newContent)
-              }
-            ) })
+                role: "listitem",
+                className: "semiont-form__entity-type-tag",
+                "aria-label": `Entity type: ${type}`,
+                children: type
+              },
+              type
+            )) }),
+            /* @__PURE__ */ jsx89("p", { className: "semiont-form__helper-text", id: "reference-entity-types-description", children: "These entity types were selected when creating the reference" })
           ] }),
-          !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
-            /* @__PURE__ */ jsx89("label", { htmlFor: "charset-select", className: "semiont-form__label", children: t12.encoding }),
-            /* @__PURE__ */ jsxs78(
+          /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
+            /* @__PURE__ */ jsx89("label", { htmlFor: "language-select", className: "semiont-form__label", children: t12.language }),
+            /* @__PURE__ */ jsx89(
               "select",
               {
-                id: "charset-select",
-                value: selectedCharset,
-                onChange: (e6) => setSelectedCharset(e6.target.value),
+                id: "language-select",
+                value: selectedLanguage,
+                onChange: (e6) => setSelectedLanguage(e6.target.value),
                 disabled: isCreating,
                 className: "semiont-select",
-                children: [
-                  /* @__PURE__ */ jsx89("option", { value: "", children: "UTF-8 (default)" }),
-                  /* @__PURE__ */ jsx89("option", { value: "iso-8859-1", children: "ISO-8859-1 (Latin-1)" }),
-                  /* @__PURE__ */ jsx89("option", { value: "windows-1252", children: "Windows-1252" }),
-                  /* @__PURE__ */ jsx89("option", { value: "ascii", children: "ASCII" }),
-                  /* @__PURE__ */ jsx89("option", { value: "utf-16le", children: "UTF-16LE" })
-                ]
+                children: LOCALES3.map((lang) => /* @__PURE__ */ jsx89("option", { value: lang.code, children: lang.nativeName }, lang.code))
               }
             )
           ] })
         ] }),
-        isClone && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__checkbox-field", children: [
-          /* @__PURE__ */ jsx89(
-            "input",
-            {
-              id: "archiveOriginal",
-              type: "checkbox",
-              checked: archiveOriginal,
-              onChange: (e6) => setArchiveOriginal(e6.target.checked),
-              className: "semiont-checkbox",
-              disabled: isCreating
-            }
-          ),
-          /* @__PURE__ */ jsx89("label", { htmlFor: "archiveOriginal", className: "semiont-form__checkbox-label", children: t12.archiveOriginal })
+        /* @__PURE__ */ jsxs78("div", { className: "semiont-compose-grid__content", children: [
+          !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
+            /* @__PURE__ */ jsx89("label", { className: "semiont-form__label", children: t12.contentSource }),
+            /* @__PURE__ */ jsxs78("div", { className: "semiont-form__content-source-toggle", children: [
+              /* @__PURE__ */ jsxs78(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setInputMethod("upload"),
+                  disabled: isCreating,
+                  className: "semiont-form__content-source-button",
+                  "data-active": inputMethod === "upload",
+                  children: [
+                    /* @__PURE__ */ jsxs78("div", { className: "semiont-form__content-source-icon-wrapper", children: [
+                      /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-icon", children: "\u{1F4CE}" }),
+                      /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-label", children: t12.uploadFile })
+                    ] }),
+                    /* @__PURE__ */ jsx89("div", { className: "semiont-form__content-source-description", children: t12.uploadFileDescription })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs78(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setInputMethod("write"),
+                  disabled: isCreating,
+                  className: "semiont-form__content-source-button",
+                  "data-active": inputMethod === "write",
+                  children: [
+                    /* @__PURE__ */ jsxs78("div", { className: "semiont-form__content-source-icon-wrapper", children: [
+                      /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-icon", children: "\u270D\uFE0F" }),
+                      /* @__PURE__ */ jsx89("span", { className: "semiont-form__content-source-label", children: t12.writeContent })
+                    ] }),
+                    /* @__PURE__ */ jsx89("div", { className: "semiont-form__content-source-description", children: t12.writeContentDescription })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          !isClone && !isReferenceCompletion && inputMethod === "upload" && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__upload-section", children: [
+            /* @__PURE__ */ jsx89("div", { children: /* @__PURE__ */ jsxs78("div", { className: "semiont-form__upload-container", children: [
+              /* @__PURE__ */ jsx89("label", { className: "semiont-form__upload-dropzone", children: /* @__PURE__ */ jsxs78("div", { className: "semiont-form__upload-area", children: [
+                /* @__PURE__ */ jsx89(
+                  "input",
+                  {
+                    type: "file",
+                    accept: "text/plain,text/markdown,image/png,image/jpeg,application/pdf",
+                    onChange: handleFileUpload,
+                    className: "semiont-form__upload-input",
+                    disabled: isCreating
+                  }
+                ),
+                /* @__PURE__ */ jsx89("p", { className: "semiont-form__upload-text", children: uploadedFile ? uploadedFile.name : t12.dropFileOrClick }),
+                /* @__PURE__ */ jsx89("p", { className: "semiont-form__upload-hint", children: t12.supportedFormats })
+              ] }) }),
+              uploadedFile && /* @__PURE__ */ jsx89(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setUploadedFile(null);
+                    setFilePreviewUrl(null);
+                    setFileMimeType("text/markdown");
+                  },
+                  className: "semiont-button semiont-button--danger semiont-button--small",
+                  disabled: isCreating,
+                  children: "Clear"
+                }
+              )
+            ] }) }),
+            uploadedFile && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__media-type", children: [
+              /* @__PURE__ */ jsxs78("span", { className: "semiont-form__media-type-label", children: [
+                t12.mediaType,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx89("code", { className: "semiont-form__media-type-value", children: fileMimeType }),
+              /* @__PURE__ */ jsx89("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: [
+              /* @__PURE__ */ jsx89("p", { className: "semiont-form__image-preview-label", children: "Preview:" }),
+              /* @__PURE__ */ jsx89("div", { className: "semiont-form__image-preview-container", children: /* @__PURE__ */ jsx89(
+                "img",
+                {
+                  src: filePreviewUrl,
+                  alt: "Upload preview",
+                  className: "semiont-form__image-preview-img"
+                }
+              ) })
+            ] })
+          ] }),
+          (isClone || isReferenceCompletion || inputMethod === "write") && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__write-section", children: [
+            !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
+              /* @__PURE__ */ jsx89("label", { htmlFor: "format-select", className: "semiont-form__label", children: t12.format }),
+              /* @__PURE__ */ jsxs78(
+                "select",
+                {
+                  id: "format-select",
+                  value: selectedFormat,
+                  onChange: (e6) => setSelectedFormat(e6.target.value),
+                  disabled: isCreating,
+                  className: "semiont-select",
+                  children: [
+                    /* @__PURE__ */ jsx89("option", { value: "text/markdown", children: "Markdown (text/markdown)" }),
+                    /* @__PURE__ */ jsx89("option", { value: "text/plain", children: "Plain Text (text/plain)" }),
+                    /* @__PURE__ */ jsx89("option", { value: "text/html", children: "HTML (text/html)" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field semiont-form__editor", children: [
+              /* @__PURE__ */ jsx89("label", { className: "semiont-form__label", children: isClone ? t12.resourceContent : t12.content }),
+              /* @__PURE__ */ jsx89("div", { className: "semiont-form__editor-wrapper", lang: selectedLanguage, children: /* @__PURE__ */ jsx89(
+                CodeMirrorRenderer,
+                {
+                  content: newResourceContent,
+                  editable: !isCreating,
+                  sourceView: true,
+                  showLineNumbers,
+                  hoverDelayMs,
+                  onChange: (newContent) => setNewResourceContent(newContent)
+                }
+              ) })
+            ] }),
+            !isClone && !isReferenceCompletion && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__field", children: [
+              /* @__PURE__ */ jsx89("label", { htmlFor: "charset-select", className: "semiont-form__label", children: t12.encoding }),
+              /* @__PURE__ */ jsxs78(
+                "select",
+                {
+                  id: "charset-select",
+                  value: selectedCharset,
+                  onChange: (e6) => setSelectedCharset(e6.target.value),
+                  disabled: isCreating,
+                  className: "semiont-select",
+                  children: [
+                    /* @__PURE__ */ jsx89("option", { value: "", children: "UTF-8 (default)" }),
+                    /* @__PURE__ */ jsx89("option", { value: "iso-8859-1", children: "ISO-8859-1 (Latin-1)" }),
+                    /* @__PURE__ */ jsx89("option", { value: "windows-1252", children: "Windows-1252" }),
+                    /* @__PURE__ */ jsx89("option", { value: "ascii", children: "ASCII" }),
+                    /* @__PURE__ */ jsx89("option", { value: "utf-16le", children: "UTF-16LE" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          isClone && /* @__PURE__ */ jsxs78("div", { className: "semiont-form__checkbox-field", children: [
+            /* @__PURE__ */ jsx89(
+              "input",
+              {
+                id: "archiveOriginal",
+                type: "checkbox",
+                checked: archiveOriginal,
+                onChange: (e6) => setArchiveOriginal(e6.target.checked),
+                className: "semiont-checkbox",
+                disabled: isCreating
+              }
+            ),
+            /* @__PURE__ */ jsx89("label", { htmlFor: "archiveOriginal", className: "semiont-form__checkbox-label", children: t12.archiveOriginal })
+          ] })
         ] }),
         /* @__PURE__ */ jsxs78("div", { className: "semiont-form__actions", children: [
           /* @__PURE__ */ jsx89(
@@ -58760,6 +58786,7 @@ function ResourceViewerPage({
             activePanel,
             theme: theme2,
             showLineNumbers,
+            hoverDelayMs,
             width: activePanel === "jsonld" ? "w-[600px]" : activePanel === "annotations" ? "w-[400px]" : "w-64",
             children: [
               annotateMode && resource.archived && /* @__PURE__ */ jsx92("div", { className: "semiont-document-viewer__archived-status", children: /* @__PURE__ */ jsx92("div", { className: "semiont-document-viewer__archived-text", children: "\u{1F4E6} Archived" }) }),
@@ -58806,6 +58833,7 @@ function ResourceViewerPage({
                   documentLocale: getLanguage(resource),
                   primaryMediaType,
                   primaryByteSize,
+                  storageUri: resource.storageUri,
                   isArchived: resource.archived ?? false,
                   dateCreated: resource.dateCreated,
                   dateModified: resource.dateModified,