@manifest-editor/creators 1.3.0 → 1.3.1

package/dist/index.js

@@ -1,6 +1,9 @@
 import {
   ManifestBrowserCreatorForm
-} from "./chunk-7FSKLOVQ.js";
+} from "./chunk-KLSWX2QF.js";
+
+// src/Annotation/AudioAnnotation/index.tsx
+import { AudioIcon } from "@manifest-editor/components";
 
 // src/Annotation/AudioAnnotation/create-audio-annotation.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
@@ -289,7 +292,13 @@ function MediaControls(props) {
 // src/Annotation/AudioAnnotation/create-audio-annotation.tsx
 import { CanvasPanel } from "react-iiif-vault";
 import { getValue } from "@iiif/helpers";
-import { Input, InputContainer, InputLabel, LanguageFieldEditor, FormFieldWrapper } from "@manifest-editor/editors";
+import {
+  Input,
+  InputContainer,
+  InputLabel,
+  LanguageFieldEditor,
+  FormFieldWrapper
+} from "@manifest-editor/editors";
 
 // ../ui/atoms/Button.tsx
 import styled4 from "styled-components";
@@ -397,12 +406,18 @@ async function createAudioAnnotation(data, ctx) {
   }
   if (targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
       body,
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -442,7 +457,15 @@ function CreateAudioAnnotationForm(props) {
     error ? /* @__PURE__ */ jsx4(ErrorMessage, { children: error }) : null,
     /* @__PURE__ */ jsxs4(InputContainer, { children: [
       /* @__PURE__ */ jsx4(InputLabel, { htmlFor: "audio-url", children: "URL" }),
-      /* @__PURE__ */ jsx4(Input, { type: "text", id: "audio-url", value: url, onChange: (e) => setUrl(e.target.value) })
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          type: "text",
+          id: "audio-url",
+          value: url,
+          onChange: (e) => setUrl(e.target.value)
+        }
+      )
     ] }),
     url && !error ? /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
       LanguageFieldEditor,
@@ -455,24 +478,38 @@ function CreateAudioAnnotationForm(props) {
       },
       url + "__" + duration
     ) }) : null,
-    url && !error ? /* @__PURE__ */ jsx4(CanvasPanel.AudioHTML, { media: { url, duration, type: "Sound" }, children: /* @__PURE__ */ jsx4(
-      MediaControls,
+    url && !error ? /* @__PURE__ */ jsx4(
+      CanvasPanel.AudioHTML,
       {
-        onError: (error2) => setError(error2),
-        onDuration: (duration2) => setDuration(duration2)
+        media: { url, duration, type: "Sound" },
+        children: /* @__PURE__ */ jsx4(
+          MediaControls,
+          {
+            onError: (error2) => setError(error2),
+            onDuration: (duration2) => setDuration(duration2)
+          },
+          url + "__" + duration
+        )
       },
       url + "__" + duration
-    ) }, url + "__" + duration) : null,
+    ) : null,
     duration && !error ? /* @__PURE__ */ jsxs4(FormFieldWrapper, { children: [
       /* @__PURE__ */ jsx4(InputLabel, { htmlFor: "duration", children: "Duration" }),
-      /* @__PURE__ */ jsx4(Input, { type: "number", id: "duration", value: duration, onChange: (e) => setDuration(e.target.valueAsNumber) })
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          type: "number",
+          id: "duration",
+          value: duration,
+          onChange: (e) => setDuration(e.target.valueAsNumber)
+        }
+      )
     ] }) : null,
     url && !error && /* @__PURE__ */ jsx4(Button, { onClick: onSubmit, children: "Add audio" })
   ] });
 }
 
 // src/Annotation/AudioAnnotation/index.tsx
-import { AudioIcon } from "@manifest-editor/components";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var audioAnnotation = {
   id: "@manifest-editor/audio-annotation",
@@ -500,7 +537,12 @@ var audioAnnotation = {
 import { AddImageIcon } from "@manifest-editor/components";
 
 // src/Annotation/CaptionedImageAnnotation/create-captioned-image-annotation.tsx
-import { Input as Input2, InputContainer as InputContainer2, InputLabel as InputLabel2, LanguageFieldEditor as LanguageFieldEditor2 } from "@manifest-editor/editors";
+import {
+  Input as Input2,
+  InputContainer as InputContainer2,
+  InputLabel as InputLabel2,
+  LanguageFieldEditor as LanguageFieldEditor2
+} from "@manifest-editor/editors";
 import { useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 async function createCaptionedImageAnnotation(data, ctx) {
@@ -630,6 +672,9 @@ var captionedImageAnnotation = {
   }
 };
 
+// src/Annotation/HTMLAnnotation/index.tsx
+import { HTMLIcon as HTMLIcon2 } from "@manifest-editor/components";
+
 // src/Annotation/HTMLAnnotation/create-html-annotation.tsx
 import { useState as useState4 } from "react";
 import {
@@ -724,7 +769,6 @@ function CreateHTMLAnnotation(props) {
 }
 
 // src/Annotation/HTMLAnnotation/index.tsx
-import { HTMLIcon as HTMLIcon2 } from "@manifest-editor/components";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var htmlAnnotation = {
   id: "@manifest-editor/html-annotation",
@@ -748,6 +792,9 @@ var htmlAnnotation = {
   }
 };
 
+// src/Annotation/ImageServiceAnnotation/index.tsx
+import { IIIFLogo } from "@manifest-editor/components";
+
 // src/side-effects/reposition-multiple-images.ts
 import { isImageService } from "@iiif/parser/image-3";
 import { EditorInstance } from "@manifest-editor/editor-api";
@@ -771,7 +818,7 @@ var repositionMultipleImages = {
       if (!annoPage) {
         return;
       }
-      if (annoPage.items.length < 2) {
+      if (annoPage.items.length < 2 && !canvas.behavior.includes("multi-image")) {
         return;
       }
       const bodies = vault.get(fullAnno.body);
@@ -782,10 +829,18 @@ var repositionMultipleImages = {
       if (imageService) {
         if (imageService.width && imageService.height) {
           if (imageService.width !== body.width) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "width",
+              imageService.width
+            );
           }
           if (imageService.height !== body.height) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "height",
+              imageService.height
+            );
           }
         }
       }
@@ -829,6 +884,9 @@ var resizeResourceToEmptyCanvas = {
       if (!canvas.items) {
         return;
       }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
       const annoPage = vault.get(canvas.items[0]);
       if (!annoPage) {
         return;
@@ -886,6 +944,9 @@ var resizeToFitService = {
       if (!canvas.items) {
         return;
       }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
       const annoPage = vault.get(canvas.items[0]);
       if (!annoPage) {
         return;
@@ -901,10 +962,18 @@ var resizeToFitService = {
       if (imageService) {
         if (imageService.width && imageService.height) {
           if (imageService.width !== body.width) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "width",
+              imageService.width
+            );
           }
           if (imageService.height !== body.height) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "height",
+              imageService.height
+            );
           }
         }
       }
@@ -988,9 +1057,13 @@ async function createImageServiceAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const resource = await ctx.create("@manifest-editor/image-service-creator", data, {
-    parent: { resource: annotation, property: "body" }
-  });
+  const resource = await ctx.create(
+    "@manifest-editor/image-service-creator",
+    data,
+    {
+      parent: { resource: annotation, property: "body" }
+    }
+  );
   if (targetType === "Annotation") {
     return {
       ...annotation,
@@ -1001,12 +1074,18 @@ async function createImageServiceAnnotation(data, ctx) {
   }
   if (targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
       body: [resource],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -1028,7 +1107,6 @@ function CreateImageServiceAnnotationForm(props) {
 }
 
 // src/Annotation/ImageServiceAnnotation/index.tsx
-import { IIIFLogo } from "@manifest-editor/components";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var imageServiceAnnotation = {
   id: "@manifest-editor/image-service-annotation",
@@ -1048,12 +1126,19 @@ var imageServiceAnnotation = {
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
+  sideEffects: [
+    resizeToFitService,
+    resizeResourceToEmptyCanvas,
+    repositionMultipleImages
+  ],
   staticFields: {
     type: "Annotation"
   }
 };
 
+// src/Annotation/ImageUrlAnnotation/index.tsx
+import { AddImageIcon as AddImageIcon2 } from "@manifest-editor/components";
+
 // src/ContentResource/ImageUrlCreator/create-image-url.tsx
 import { InputContainer as InputContainer5, InputLabel as InputLabel5, Input as Input4 } from "@manifest-editor/editors";
 import { getImageDimensions, getFormat } from "@manifest-editor/shell";
@@ -1101,9 +1186,13 @@ async function createImageUrlAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const resource = await ctx.create("@manifest-editor/image-url-creator", data, {
-    parent: { resource: annotation, property: "body" }
-  });
+  const resource = await ctx.create(
+    "@manifest-editor/image-url-creator",
+    data,
+    {
+      parent: { resource: annotation, property: "body" }
+    }
+  );
   if (targetType === "Annotation") {
     return {
       ...annotation,
@@ -1114,12 +1203,18 @@ async function createImageUrlAnnotation(data, ctx) {
   }
   if (targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
       body: [resource],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -1141,7 +1236,6 @@ function CreateImageUrlAnnotationForm(props) {
 }
 
 // src/Annotation/ImageUrlAnnotation/index.tsx
-import { AddImageIcon as AddImageIcon2 } from "@manifest-editor/components";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var imageUrlAnnotation = {
   id: "@manifest-editor/image-url-annotation",
@@ -1161,7 +1255,11 @@ var imageUrlAnnotation = {
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
+  sideEffects: [
+    resizeToFitService,
+    resizeResourceToEmptyCanvas,
+    repositionMultipleImages
+  ],
   staticFields: {
     type: "Annotation"
   }
@@ -1199,11 +1297,19 @@ function createNoBodyAnnotation(data, ctx) {
   });
 }
 
+// src/Annotation/VideoAnnotation/index.tsx
+import { VideoIcon } from "@manifest-editor/components";
+
 // src/Annotation/VideoAnnotation/create-video-annotation.tsx
 import { getValue as getValue2 } from "@iiif/helpers";
-import { InputContainer as InputContainer6, InputLabel as InputLabel6, Input as Input5, LanguageFieldEditor as LanguageFieldEditor4, DimensionsTriplet } from "@manifest-editor/editors";
 import { ErrorMessage as ErrorMessage2 } from "@manifest-editor/components";
-import { useState as useState5, useEffect as useEffect3 } from "react";
+import {
+  DimensionsTriplet,
+  Input as Input5,
+  InputContainer as InputContainer6,
+  InputLabel as InputLabel6,
+  LanguageFieldEditor as LanguageFieldEditor4
+} from "@manifest-editor/editors";
 
 // ../ui/ui/VideoPlayer/VideoPlayer.tsx
 import { CanvasPanel as CanvasPanel2, MediaPlayerProvider, useSimpleMediaPlayer } from "react-iiif-vault";
@@ -1243,6 +1349,7 @@ function VideoPlayer({
 }
 
 // src/Annotation/VideoAnnotation/create-video-annotation.tsx
+import { useEffect as useEffect3, useState as useState5 } from "react";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 async function createVideoAnnotation(data, ctx) {
   const annotation = {
@@ -1250,7 +1357,7 @@ async function createVideoAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const body = await ctx.embed({
+  const body = ctx.embed({
     id: data.url,
     type: "Video",
     format: "video/mp4",
@@ -1269,12 +1376,18 @@ async function createVideoAnnotation(data, ctx) {
   }
   if (targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
       body,
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -1320,7 +1433,15 @@ function CreateVideoAnnotationForm(props) {
     error ? /* @__PURE__ */ jsx18(ErrorMessage2, { children: error }) : null,
     /* @__PURE__ */ jsxs10(InputContainer6, { children: [
       /* @__PURE__ */ jsx18(InputLabel6, { htmlFor: "video-url", children: "URL" }),
-      /* @__PURE__ */ jsx18(Input5, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
+      /* @__PURE__ */ jsx18(
+        Input5,
+        {
+          type: "text",
+          id: "video-url",
+          value: url,
+          onChange: (e) => setUrl(e.target.value)
+        }
+      )
     ] }),
     url && !error ? /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18(
       LanguageFieldEditor4,
@@ -1371,7 +1492,6 @@ function CreateVideoAnnotationForm(props) {
 }
 
 // src/Annotation/VideoAnnotation/index.tsx
-import { VideoIcon } from "@manifest-editor/components";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var videoAnnotation = {
   id: "@manifest-editor/video-annotation",
@@ -1417,7 +1537,14 @@ var ThumbnailStripIcon = () => /* @__PURE__ */ jsx20(
 import { jsx as jsx21 } from "react/jsx-runtime";
 var emptyAnnotationPage = {
   id: "@manifest-editor/empty-annotation-page",
-  create: createEmptyAnnotationPage,
+  create: (data, ctx) => {
+    return ctx.embed({
+      id: ctx.generateId("annotations"),
+      label: data.label,
+      type: "AnnotationPage",
+      items: []
+    });
+  },
   label: "Empty annotation page",
   summary: "AnnotationPage with nothing",
   icon: /* @__PURE__ */ jsx21(ThumbnailStripIcon, {}),
@@ -1432,21 +1559,28 @@ var emptyAnnotationPage = {
     }
   }
 };
-async function createEmptyAnnotationPage(data, ctx) {
-  return ctx.embed({
-    id: ctx.generateId("annotations"),
-    label: data.label,
-    type: "AnnotationPage",
-    items: []
-  });
-}
 
 // src/Canvas/EmptyCanvas/index.tsx
 import { EmptyCanvasIcon as EmptyCanvasIcon2 } from "@manifest-editor/components";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var emptyCanvas = {
   id: "@manifest-editor/empty-canvas",
-  create: createEmptyCanvas,
+  create: (data, ctx) => {
+    const canvasId = ctx.generateId("canvas");
+    const page = ctx.embed({
+      id: ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" }),
+      type: "AnnotationPage",
+      items: []
+    });
+    return {
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: [""] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      items: [page]
+    };
+  },
   label: "Empty canvas",
   summary: "No content",
   icon: /* @__PURE__ */ jsx22(EmptyCanvasIcon2, {}),
@@ -1457,24 +1591,9 @@ var emptyCanvas = {
     parentFields: ["items"]
   }
 };
-async function createEmptyCanvas(data, ctx) {
-  const canvasId = ctx.generateId("canvas");
-  const page = ctx.embed({
-    id: ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" }),
-    type: "AnnotationPage",
-    items: []
-  });
-  return {
-    id: canvasId,
-    type: "Canvas",
-    label: data.label || { en: [""] },
-    height: data.height || 1e3,
-    width: data.width || 1e3,
-    items: [page]
-  };
-}
 
 // src/Canvas/InternalCanvas/index.tsx
+import { IIIFExplorer } from "@manifest-editor/iiif-browser";
 import { useManifest, useVault } from "react-iiif-vault";
 
 // ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
@@ -1493,7 +1612,6 @@ function invariant(condition, message) {
 }
 
 // src/Canvas/InternalCanvas/index.tsx
-import { IIIFExplorer } from "@manifest-editor/iiif-browser";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var internalCanvas = {
   id: "@manifest-editor/internal-canvas",
@@ -1539,11 +1657,22 @@ async function createInternalCanvas(data, ctx) {
   return ctx.embed({ id: data.id, type: "Canvas" });
 }
 
+// ../ui/icons/TextFormatIcon.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var TextFormatIcon = (props) => /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ jsx24("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx24("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
+] });
+
 // src/ContentResource/HTMLBodyCreator/create-html-body.tsx
-import { InputContainer as InputContainer7, InputLabel as InputLabel7, RichTextLanguageField } from "@manifest-editor/editors";
+import {
+  InputContainer as InputContainer7,
+  InputLabel as InputLabel7,
+  RichTextLanguageField
+} from "@manifest-editor/editors";
 import { useConfig } from "@manifest-editor/shell";
 import { useState as useState6 } from "react";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 async function createHtmlBody(data, ctx) {
   return ctx.embed({
     id: ctx.generateId(`html/${data.language}`),
@@ -1563,10 +1692,10 @@ function CreateHTMLBodyForm(props) {
       body
     });
   };
-  return /* @__PURE__ */ jsxs12(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsxs12(InputContainer7, { children: [
-      /* @__PURE__ */ jsx24(InputLabel7, { children: "HTML Body" }),
-      /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs13(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsxs13(InputContainer7, { children: [
+      /* @__PURE__ */ jsx25(InputLabel7, { children: "HTML Body" }),
+      /* @__PURE__ */ jsx25(
         RichTextLanguageField,
         {
           value: body,
@@ -1577,17 +1706,10 @@ function CreateHTMLBodyForm(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx24(Button, { onClick: () => onSubmit(), children: "Create" })
+    /* @__PURE__ */ jsx25(Button, { onClick: () => onSubmit(), children: "Create" })
   ] });
 }
 
-// ../ui/icons/TextFormatIcon.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
-var TextFormatIcon = (props) => /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
-  /* @__PURE__ */ jsx25("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx25("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
-] });
-
 // src/ContentResource/HTMLBodyCreator/index.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var htmlBodyCreator = {
@@ -1616,10 +1738,17 @@ import { IIIFBrowserIcon } from "@manifest-editor/components";
 
 // src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
 import {
+  Vault,
   normaliseContentState,
   parseContentState
 } from "@iiif/helpers";
+import { getImageServices } from "@iiif/parser/image-3";
 import { lazy } from "react";
+function croppedRegion(imageServiceId, region, size) {
+  return `${imageServiceId}/${Math.floor(region.x)},${Math.floor(region.y)},${Math.floor(region.width)},${Math.floor(
+    region.height
+  )}/${size}/0/default.jpg`;
+}
 async function createFromIIIFBrowserOutput(data, ctx) {
   const targetType = ctx.options.targetType;
   if (Array.isArray(data.output)) {
@@ -1633,8 +1762,8 @@ async function createFromIIIFBrowserOutput(data, ctx) {
   }
   const target = contentState.target[0];
   const type = target.source.type;
-  const previewVault = ctx.getPreviewVault();
-  if (targetType === "Canvas" || targetType === "Annotation") {
+  const previewVault = new Vault();
+  if (targetType === "Canvas" || targetType === "Annotation" || targetType === "ContentResource") {
     if (type === "Canvas") {
       const canvasId = target.source.id;
       const manifestId = target.source.partOf?.find(
@@ -1651,16 +1780,24 @@ async function createFromIIIFBrowserOutput(data, ctx) {
       }
       const annotationPage = previewVault.get(canvas.items[0]);
       const annotation = previewVault.get(annotationPage.items[0]);
-      if (targetType === "Annotation" || targetType === "Canvas") {
+      if (targetType === "Annotation" || targetType === "Canvas" || targetType === "ContentResource") {
         const fullAnnotation = previewVault.toPresentation3(annotation);
+        fullAnnotation.id = ctx.generateId("Annotation");
+        let service = null;
+        const dimensions = { width: 0, height: 0 };
         if (fullAnnotation?.body?.service) {
           const width = fullAnnotation?.body.width;
           const height = fullAnnotation?.body.height;
-          const service = Array.isArray(fullAnnotation?.body?.service) ? fullAnnotation?.body?.service[0] : fullAnnotation?.body?.service;
-          if (!service.width || !service.height) {
+          service = getImageServices(fullAnnotation?.body)[0];
+          if (service && (!service.width || !service.height)) {
             service.width = width;
             service.height = height;
           }
+          dimensions.width = width;
+          dimensions.height = height;
+          if (data.trackSize) {
+            data.trackSize(dimensions);
+          }
         }
         if (target.selector && target.selector.type === "BoxSelector") {
           const selector = {
@@ -1673,12 +1810,30 @@ async function createFromIIIFBrowserOutput(data, ctx) {
               ~~target.selector.spatial.height
             ].join(",")
           };
+          const newBody = { ...fullAnnotation.body };
+          let thumbnailId = "";
+          if (service) {
+            const id = service.id || service["@id"] || "";
+            if (id) {
+              newBody.id = croppedRegion(id, target.selector.spatial, "max");
+              thumbnailId = croppedRegion(id, target.selector.spatial, "512,");
+            }
+          }
           fullAnnotation.body = {
             id: ctx.generateId("SpecificResource", annotation),
             type: "SpecificResource",
-            source: fullAnnotation.body,
+            source: newBody,
             selector
           };
+          if (data.trackSize) {
+            data.trackSize({
+              width: ~~target.selector.spatial.width,
+              height: ~~target.selector.spatial.height
+            });
+          }
+          if (targetType === "ContentResource") {
+            return fullAnnotation.body;
+          }
           if (targetType === "Canvas") {
             const canvasId2 = ctx.generateId("Canvas", annotation);
             fullAnnotation.target = canvasId2;
@@ -1693,6 +1848,17 @@ async function createFromIIIFBrowserOutput(data, ctx) {
               type: "Canvas",
               width: ~~target.selector.spatial.width,
               height: ~~target.selector.spatial.height,
+              thumbnail: thumbnailId ? [
+                ctx.embed({
+                  id: thumbnailId,
+                  type: "Image",
+                  format: "image/jpeg",
+                  width: 512,
+                  height: Math.round(
+                    target.selector.spatial.height / target.selector.spatial.width * 512
+                  )
+                })
+              ] : void 0,
               items: [annotationPage2]
             });
           }
@@ -1711,7 +1877,7 @@ async function createFromIIIFBrowserOutput(data, ctx) {
   throw new Error("Not yet supported.");
 }
 var IIIFBrowserCreatorForm = lazy(
-  () => import("./iiif-browser-form.lazy-W42LJ6X2.js")
+  () => import("./iiif-browser-form.lazy-HZ3M2DXT.js")
 );
 
 // src/ContentResource/IIIFBrowserCreator/index.tsx
@@ -1761,9 +1927,6 @@ var imageServiceCreator = {
   resourceFields: ["id", "type", "height", "width", "format", "service"],
   supports: {
     parentFields: ["logo", "body", "thumbnail"]
-  },
-  staticFields: {
-    type: "Image"
   }
 };
 
@@ -1790,7 +1953,12 @@ var imageUrlCreator = {
 };
 
 // src/ContentResource/PlaintextCreator/create-plaintext.tsx
-import { LanguageFieldEditor as LanguageFieldEditor5, InputContainer as InputContainer8, InputLabel as InputLabel8, Input as Input6 } from "@manifest-editor/editors";
+import {
+  LanguageFieldEditor as LanguageFieldEditor5,
+  InputContainer as InputContainer8,
+  InputLabel as InputLabel8,
+  Input as Input6
+} from "@manifest-editor/editors";
 import { useState as useState7 } from "react";
 import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 async function createPlaintext(data, ctx) {
@@ -1802,7 +1970,9 @@ async function createPlaintext(data, ctx) {
   });
 }
 function CreatePlaintextForm(props) {
-  const [label, setLabel] = useState7({ en: ["View as text"] });
+  const [label, setLabel] = useState7({
+    en: ["View as text"]
+  });
   const onSubmit = (e) => {
     e.preventDefault();
     const data = new FormData(e.target);
@@ -1850,10 +2020,24 @@ var plaintextCreator = {
   }
 };
 
+// ../ui/icons/LinkIcon.tsx
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+function LinkIcon() {
+  return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+    /* @__PURE__ */ jsx32("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx32("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
+  ] });
+}
+
 // src/ContentResource/WebPageCreator/create-web-page.tsx
-import { LanguageFieldEditor as LanguageFieldEditor6, InputContainer as InputContainer9, InputLabel as InputLabel9, Input as Input7 } from "@manifest-editor/editors";
+import {
+  LanguageFieldEditor as LanguageFieldEditor6,
+  InputContainer as InputContainer9,
+  InputLabel as InputLabel9,
+  Input as Input7
+} from "@manifest-editor/editors";
 import { useState as useState8 } from "react";
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 async function createWebPage(data, ctx) {
   return ctx.embed({
     id: data.url,
@@ -1872,8 +2056,8 @@ function CreateWebPageForm(props) {
       props.runCreate({ url: formData.url, label });
     }
   };
-  return /* @__PURE__ */ jsx32(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs15("form", { onSubmit, children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs16("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx33(
       LanguageFieldEditor6,
       {
         focusId: "label",
@@ -1882,23 +2066,14 @@ function CreateWebPageForm(props) {
         onSave: (e) => setLabel(e.toInternationalString())
       }
     ),
-    /* @__PURE__ */ jsxs15(InputContainer9, { $wide: true, children: [
-      /* @__PURE__ */ jsx32(InputLabel9, { htmlFor: "id", children: "Link" }),
-      /* @__PURE__ */ jsx32(Input7, { id: "url", name: "url", defaultValue: "" })
+    /* @__PURE__ */ jsxs16(InputContainer9, { $wide: true, children: [
+      /* @__PURE__ */ jsx33(InputLabel9, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ jsx33(Input7, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ jsx32(Button, { type: "submit", children: "Create link" })
+    /* @__PURE__ */ jsx33(Button, { type: "submit", children: "Create link" })
   ] }) });
 }
 
-// ../ui/icons/LinkIcon.tsx
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
-function LinkIcon() {
-  return /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
-    /* @__PURE__ */ jsx33("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ jsx33("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
-  ] });
-}
-
 // src/ContentResource/WebPageCreator/index.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
 var webPageCreator = {
@@ -1928,6 +2103,9 @@ function getYouTubeId(url) {
   const id = (url || "").match(ytRegex);
   return id ? id[1] : null;
 }
+function validateYouTube(data) {
+  return !!getYouTubeId(data.youtubeUrl);
+}
 async function createYoutubeBody(data, ctx) {
   const id = getYouTubeId(data.youtubeUrl);
   const body = ctx.embed({
@@ -2031,8 +2209,14 @@ var youTubeBodyCreator = {
   }
 };
 
+// src/Manifest/ManifestBrowserCreator/index.tsx
+import { IIIFBrowserIcon as IIIFBrowserIcon2 } from "@manifest-editor/components";
+
 // src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
-import { normaliseContentState as normaliseContentState2, parseContentState as parseContentState2 } from "@iiif/helpers";
+import {
+  normaliseContentState as normaliseContentState2,
+  parseContentState as parseContentState2
+} from "@iiif/helpers";
 import { lazy as lazy2 } from "react";
 async function createFromManifestBrowserOutput(data, ctx) {
   const targetType = ctx.options.targetType;
@@ -2069,10 +2253,11 @@ async function createFromManifestBrowserOutput(data, ctx) {
   }
   throw new Error("Not yet supported.");
 }
-var ManifestBrowserCreatorForm2 = lazy2(() => import("./manifest-browser-form.lazy-WRWZPVRC.js"));
+var ManifestBrowserCreatorForm2 = lazy2(
+  () => import("./manifest-browser-form.lazy-MYI26AX4.js")
+);
 
 // src/Manifest/ManifestBrowserCreator/index.tsx
-import { IIIFBrowserIcon as IIIFBrowserIcon2 } from "@manifest-editor/components";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var manifestBrowserCreator = {
   id: "@manifest-editor/manifest-browser-creator",
@@ -2118,11 +2303,39 @@ var allCreators = [
   captionedImageAnnotation
 ];
 export {
+  CreateAudioAnnotationForm,
+  CreateCaptionedImageAnnotation,
+  CreateHTMLAnnotation,
+  CreateHTMLBodyForm,
+  CreateImageServerForm,
+  CreateImageServiceAnnotationForm,
+  CreateImageUrlAnnotationForm,
+  CreateImageUrlForm,
+  CreatePlaintextForm,
+  CreateVideoAnnotationForm,
+  CreateWebPageForm,
+  IIIFBrowserCreatorForm,
+  YouTubeForm,
   allCreators,
   audioAnnotation,
   captionedImageAnnotation,
+  createAudioAnnotation,
+  createCaptionedImageAnnotation,
+  createFromIIIFBrowserOutput,
+  createHtmlAnnotation,
+  createHtmlBody,
+  createImageServer,
+  createImageServiceAnnotation,
+  createImageUrl,
+  createImageUrlAnnotation,
+  createNoBodyAnnotation,
+  createPlaintext,
+  createVideoAnnotation,
+  createWebPage,
+  createYoutubeBody,
   emptyAnnotationPage,
   emptyCanvas,
+  getYouTubeId,
   htmlAnnotation,
   htmlBodyCreator,
   iiifBrowserCreator,
@@ -2134,6 +2347,7 @@ export {
   manifestBrowserCreator,
   noBodyAnnotation,
   plaintextCreator,
+  validateYouTube,
   videoAnnotation,
   webPageCreator,
   youTubeBodyCreator