@manifest-editor/creators 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -36,49 +36,63 @@ __export(iiif_browser_form_lazy_exports, {
   default: () => IIIFBrowserCreatorForm
 });
 function IIIFBrowserCreatorForm(props) {
-  const vault = (0, import_shell3.usePreviewVault)();
-  const output = (0, import_react7.useMemo)(() => {
+  const vault = (0, import_react8.useMemo)(() => new import_helpers4.Vault(), []);
+  const output = (0, import_react8.useMemo)(() => {
     return [
       {
         type: "callback",
         label: "Select",
-        supportedTypes: [
-          "Canvas",
-          "CanvasList",
-          "CanvasRegion",
-          "ImageService",
-          "ImageServiceRegion"
-        ],
+        supportedTypes: ["Canvas", "CanvasList", "CanvasRegion", "ImageService", "ImageServiceRegion"],
         cb: (resource) => props.runCreate({ output: resource }),
-        format: { type: "content-state" }
+        format: {
+          type: "custom",
+          format: (resource, parent, vault2) => {
+            const resourcesAsArray = Array.isArray(resource) ? resource : [{ ...resource, parent }];
+            const resources = [];
+            for (const resource2 of resourcesAsArray) {
+              resources.push({ resource: vault2.get(resource2), parent: resource2.parent, selector: resource2.selector });
+            }
+            return resources;
+          }
+        }
       }
     ];
   }, [props.runCreate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_shell3.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const navigationOptions = (0, import_react8.useMemo)(() => {
+    return {
+      canCropImage: true,
+      canSelectCanvas: true,
+      canSelectManifest: false,
+      canSelectCollection: false,
+      // @todo fix the output so this one works.
+      multiSelect: true
+    };
+  }, []);
+  const uiOptions = (0, import_react8.useMemo)(() => {
+    return {
+      buttonClassName: "bg-me-primary-500 text-white hover:bg-me-primary-600"
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_shell3.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_iiif_browser2.IIIFBrowser,
     {
+      ui: uiOptions,
       vault,
       className: "iiif-browser border-none border-t rounded-none h-[70vh] min-h-[60vh] max-h-full max-w-full",
       output,
-      navigation: {
-        canCropImage: true,
-        canSelectCanvas: true,
-        canSelectManifest: false,
-        canSelectCollection: false,
-        // @todo fix the output so this one works.
-        multiSelect: false
-      }
+      navigation: navigationOptions
     }
   ) });
 }
-var import_shell3, import_iiif_browser2, import_react7, import_jsx_runtime27;
+var import_helpers4, import_shell3, import_iiif_browser2, import_react8, import_jsx_runtime29;
 var init_iiif_browser_form_lazy = __esm({
   "src/ContentResource/IIIFBrowserCreator/iiif-browser-form.lazy.tsx"() {
     "use strict";
+    import_helpers4 = require("@iiif/helpers");
     import_shell3 = require("@manifest-editor/shell");
     import_iiif_browser2 = require("iiif-browser");
-    import_react7 = require("react");
-    import_jsx_runtime27 = require("react/jsx-runtime");
+    import_react8 = require("react");
+    import_jsx_runtime29 = require("react/jsx-runtime");
   }
 });
 
@@ -88,48 +102,100 @@ __export(manifest_browser_form_lazy_exports, {
   default: () => ManifestBrowserCreatorForm
 });
 function ManifestBrowserCreatorForm(props) {
-  const vault = (0, import_shell4.usePreviewVault)();
-  const { addHistory, clearHistory } = (0, import_shell4.usePreviewHistory)();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_shell4.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_iiif_browser3.IIIFExplorer,
+  const vault = (0, import_react13.useMemo)(() => new import_helpers6.Vault(), []);
+  const output = (0, import_react13.useMemo)(() => {
+    return [
+      {
+        type: "callback",
+        label: "Select",
+        supportedTypes: ["Manifest", "Collection"],
+        cb: (resource) => props.runCreate({ output: resource }),
+        format: { type: "content-state" }
+      }
+    ];
+  }, [props.runCreate]);
+  const navigationOptions = (0, import_react13.useMemo)(() => {
+    return {
+      canCropImage: false,
+      canSelectCanvas: false,
+      canSelectManifest: true,
+      canSelectCollection: true,
+      // @todo fix the output so this one works.
+      multiSelect: false
+    };
+  }, []);
+  const uiOptions = (0, import_react13.useMemo)(() => {
+    return {
+      buttonClassName: "bg-me-primary-500 text-white hover:bg-me-primary-600"
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_shell4.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_iiif_browser3.IIIFBrowser,
     {
-      window: false,
-      hideHeader: true,
-      outputTypes: ["Manifest", "Collection"],
+      debug: true,
+      ui: uiOptions,
       vault,
-      output: { type: "content-state" },
-      homepageCollection: import_shell4.HOMEPAGE_COLLECTION,
-      clearHomepageCollection: clearHistory,
-      onHistory: addHistory,
-      outputTargets: [
-        {
-          type: "callback",
-          label: "Select",
-          cb: (resource) => props.runCreate({ output: resource })
-        }
-      ],
-      allowRemoveEntry: true
+      className: "iiif-browser border-none border-t rounded-none h-[70vh] min-h-[60vh] max-h-full max-w-full",
+      output,
+      navigation: navigationOptions
     }
-  ) }) });
+  ) });
 }
-var import_iiif_browser3, import_shell4, import_jsx_runtime38;
+var import_helpers6, import_shell4, import_iiif_browser3, import_react13, import_jsx_runtime43;
 var init_manifest_browser_form_lazy = __esm({
   "src/Manifest/ManifestBrowserCreator/manifest-browser-form.lazy.tsx"() {
     "use strict";
-    import_iiif_browser3 = require("@manifest-editor/iiif-browser");
+    import_helpers6 = require("@iiif/helpers");
     import_shell4 = require("@manifest-editor/shell");
-    import_jsx_runtime38 = require("react/jsx-runtime");
+    import_iiif_browser3 = require("iiif-browser");
+    import_react13 = require("react");
+    import_jsx_runtime43 = require("react/jsx-runtime");
   }
 });
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CreateAudioAnnotationForm: () => CreateAudioAnnotationForm,
+  CreateCaptionedImageAnnotation: () => CreateCaptionedImageAnnotation,
+  CreateHTMLAnnotation: () => CreateHTMLAnnotation,
+  CreateHTMLBodyForm: () => CreateHTMLBodyForm,
+  CreateImageServerForm: () => CreateImageServerForm,
+  CreateImageServiceAnnotationForm: () => CreateImageServiceAnnotationForm,
+  CreateImageUrlAnnotationForm: () => CreateImageUrlAnnotationForm,
+  CreateImageUrlForm: () => CreateImageUrlForm,
+  CreateImageUrlListForm: () => CreateImageUrlListForm,
+  CreatePlaintextForm: () => CreatePlaintextForm,
+  CreateThumbnailForm: () => CreateThumbnailForm,
+  CreateVideoAnnotationForm: () => CreateVideoAnnotationForm,
+  CreateWebPageForm: () => CreateWebPageForm,
+  IIIFBrowserCreatorForm: () => IIIFBrowserCreatorForm2,
+  ManifestBrowserCreatorForm: () => ManifestBrowserCreatorForm2,
+  YouTubeForm: () => YouTubeForm,
   allCreators: () => allCreators,
   audioAnnotation: () => audioAnnotation,
   captionedImageAnnotation: () => captionedImageAnnotation,
+  createAudioAnnotation: () => createAudioAnnotation,
+  createCaptionedImageAnnotation: () => createCaptionedImageAnnotation,
+  createFromIIIFBrowserOutput: () => createFromIIIFBrowserOutput,
+  createFromManifestBrowserOutput: () => createFromManifestBrowserOutput,
+  createHtmlAnnotation: () => createHtmlAnnotation,
+  createHtmlBody: () => createHtmlBody,
+  createImageServer: () => createImageServer,
+  createImageServiceAnnotation: () => createImageServiceAnnotation,
+  createImageUrl: () => createImageUrl,
+  createImageUrlAnnotation: () => createImageUrlAnnotation,
+  createImageUrlList: () => createImageUrlList,
+  createImageUrlListAnnotation: () => createImageUrlListAnnotation,
+  createNoBodyAnnotation: () => createNoBodyAnnotation,
+  createPlaintext: () => createPlaintext,
+  createThumbnail: () => createThumbnail,
+  createVideoAnnotation: () => createVideoAnnotation,
+  createWebPage: () => createWebPage,
+  createYoutubeBody: () => createYoutubeBody,
   emptyAnnotationPage: () => emptyAnnotationPage,
   emptyCanvas: () => emptyCanvas,
+  getYouTubeId: () => getYouTubeId,
   htmlAnnotation: () => htmlAnnotation,
   htmlBodyCreator: () => htmlBodyCreator,
   iiifBrowserCreator: () => iiifBrowserCreator,
@@ -137,30 +203,27 @@ __export(src_exports, {
   imageServiceCreator: () => imageServiceCreator,
   imageUrlAnnotation: () => imageUrlAnnotation,
   imageUrlCreator: () => imageUrlCreator,
+  imageUrlListAnnotation: () => imageUrlListAnnotation,
+  imageUrlListCreator: () => imageUrlListCreator,
   internalCanvas: () => internalCanvas,
   manifestBrowserCreator: () => manifestBrowserCreator,
   noBodyAnnotation: () => noBodyAnnotation,
   plaintextCreator: () => plaintextCreator,
+  validateYouTube: () => validateYouTube,
   videoAnnotation: () => videoAnnotation,
   webPageCreator: () => webPageCreator,
   youTubeBodyCreator: () => youTubeBodyCreator
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-var import_react2 = require("react");
-
-// ../ui/atoms/PaddedSidebarContainer.tsx
-var import_styled_components = __toESM(require("styled-components"), 1);
-var PaddedSidebarContainer = import_styled_components.default.div`
-  padding: 0 0.7em;
-  margin: 0.7em 0;
-  flex: 1;
-  overflow: visible;
-`;
+// src/Annotation/AudioAnnotation/index.tsx
+var import_components2 = require("@manifest-editor/components");
+var import_creator_api = require("@manifest-editor/creator-api");
 
 // src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_helpers = require("@iiif/helpers");
 var import_components = require("@manifest-editor/components");
+var import_editors = require("@manifest-editor/editors");
 
 // ../ui/ui/MediaControls/MediaControls.tsx
 var import_react_iiif_vault = require("react-iiif-vault");
@@ -213,14 +276,14 @@ var VolumeOffIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runt
 ] });
 
 // ../ui/ui/MediaControls/MediaControls.styles.ts
-var import_styled_components2 = __toESM(require("styled-components"), 1);
-var AudioPlayerContainer = import_styled_components2.default.div`
+var import_styled_components = __toESM(require("styled-components"), 1);
+var AudioPlayerContainer = import_styled_components.default.div`
   background: #ededed; // Not in variable.
   display: flex;
   padding: 0.5em;
   align-items: center;
 `;
-var BaseButton = import_styled_components2.default.button`
+var BaseButton = import_styled_components.default.button`
   cursor: pointer;
   padding: 0.75em 1.5em;
   font-size: 0.938em;
@@ -232,7 +295,7 @@ var BaseButton = import_styled_components2.default.button`
   vertical-align: top;
   white-space: nowrap;
 `;
-var PlayButton = (0, import_styled_components2.default)(BaseButton)`
+var PlayButton = (0, import_styled_components.default)(BaseButton)`
   width: 2em;
   height: 2em;
   overflow: hidden;
@@ -247,19 +310,19 @@ var PlayButton = (0, import_styled_components2.default)(BaseButton)`
     color: #999;
   }
 `;
-var TimeDisplay = import_styled_components2.default.div`
+var TimeDisplay = import_styled_components.default.div`
   margin: 0 1em;
   font-size: 0.85em;
   color: #000;
 `;
-var ProgressContainer = import_styled_components2.default.div`
+var ProgressContainer = import_styled_components.default.div`
   flex: 1 1 0px;
   height: 6px;
   display: flex;
   position: relative;
   padding: 15px 0;
 `;
-var ProgressCurrent = import_styled_components2.default.div`
+var ProgressCurrent = import_styled_components.default.div`
   background: #d85680;
   height: 6px;
   pointer-events: none;
@@ -269,7 +332,7 @@ var ProgressCurrent = import_styled_components2.default.div`
   border-radius: 3px;
   transition: width 200ms;
 `;
-var ProgressBackground = import_styled_components2.default.div`
+var ProgressBackground = import_styled_components.default.div`
   position: absolute;
   top: 13px;
   left: 0;
@@ -279,7 +342,7 @@ var ProgressBackground = import_styled_components2.default.div`
   pointer-events: none;
   background: #fff;
 `;
-var SoundButton = (0, import_styled_components2.default)(BaseButton)`
+var SoundButton = (0, import_styled_components.default)(BaseButton)`
   width: 2em;
   height: 2em;
   overflow: hidden;
@@ -289,21 +352,21 @@ var SoundButton = (0, import_styled_components2.default)(BaseButton)`
   padding: 0;
   margin: 0;
 `;
-var SoundContainer = import_styled_components2.default.div`
+var SoundContainer = import_styled_components.default.div`
   display: flex;
   align-items: center;
 `;
-var VolumeContainer = import_styled_components2.default.div`
+var VolumeContainer = import_styled_components.default.div`
   width: 0;
   overflow: hidden;
   transition: width 500ms;
   color: #4a473f; // Not in colours
 
-  ${(props) => props.$isOpen && import_styled_components2.css`
+  ${(props) => props.$isOpen && import_styled_components.css`
       width: 150px;
     `}
 `;
-var VolumeSlider = import_styled_components2.default.input.attrs({ type: "range" })`
+var VolumeSlider = import_styled_components.default.input.attrs({ type: "range" })`
   width: 120px;
   margin: 0 15px;
 `;
@@ -311,25 +374,36 @@ var VolumeSlider = import_styled_components2.default.input.attrs({ type: "range"
 // ../ui/madoc/components/icons/Spinner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 18 18",
-        to: "360 18 18",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 42 42",
+      xmlns: "http://www.w3.org/2000/svg",
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 18 18",
+            to: "360 18 18",
+            dur: "1s",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ] })
+    }
+  );
 }
 
 // ../ui/atoms/VisuallHidden/VisuallHidden.tsx
-var import_styled_components3 = __toESM(require("styled-components"), 1);
-var visuallyHidden = import_styled_components3.css`
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+var visuallyHidden = import_styled_components2.css`
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
   height: 1px;
@@ -339,7 +413,7 @@ var visuallyHidden = import_styled_components3.css`
   padding: 0;
   position: absolute;
 `;
-var VisuallyHiddenLabel = import_styled_components3.default.label`
+var VisuallyHiddenLabel = import_styled_components2.default.label`
   ${visuallyHidden}
 `;
 
@@ -431,93 +505,18 @@ function MediaControls(props) {
   ] });
 }
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-var import_react_iiif_vault2 = require("react-iiif-vault");
-var import_helpers = require("@iiif/helpers");
-var import_editors = require("@manifest-editor/editors");
-
-// ../ui/atoms/Button.tsx
-var import_styled_components4 = __toESM(require("styled-components"), 1);
-var ButtonReset = import_styled_components4.default.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  cursor: pointer;
-  &:hover {
-    color: inherit;
-  }
-`;
-var Button = import_styled_components4.default.button`
-  padding: 0.5rem 1rem;
-  color: ${(props) => props.theme.color.main || "none"};
-  background-color: ${(props) => props.theme.color.white || "white"};
-  border-radius: inherit;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 0.85em;
-  :disabled {
-    opacity: 0.65;
-    cursor: not-allowed;
-  }
-
-  &:hover {
-    background: #eee;
-  }
-`;
-var SmallButton = (0, import_styled_components4.default)(Button)`
-  padding: 0.25em ${(props) => props.theme.padding.xs || "0.4em"};
-  height: unset;
-  background: none;
-`;
-var SecondaryButton = (0, import_styled_components4.default)(Button)`
-   {
-    padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
-    color: ${(props) => props.theme.color.main || "#B84C74;"};
-    background-color: ${(props) => props.theme.color.white || "white"};
-    border: 1px solid ${(props) => props.theme.color.main || "#B84C74;"};
-    border-radius: 0.25rem;
-    cursor: pointer;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    font-size: 0.75rem;
-
-    :disabled {
-      opacity: 0.65;
-      cursor: not-allowed;
-    }
-  }
-`;
-var CalltoButton = (0, import_styled_components4.default)(Button)`
-  padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
-  color: ${(props) => props.theme.color.white || "white"};
-  background-color: ${(props) => props.theme.color.main || "#B84C74;"};
-  border: 1px solid #eee;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  justify-content: center;
-  display: flex;
-  align-items: center;
-  &:hover {
-    background-color: ${(props) => props.theme.color.mainHover || "#B84C74;"};
-  }
-`;
-var ButtonGroup = import_styled_components4.default.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: ${(props) => props.$right ? "flex-end" : "flex-start"};
+// ../ui/atoms/PaddedSidebarContainer.tsx
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var PaddedSidebarContainer = import_styled_components3.default.div`
+  padding: 0 0.7em;
+  margin: 0.7em 0;
+  flex: 1;
+  overflow: visible;
 `;
 
 // src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_react2 = require("react");
+var import_react_iiif_vault2 = require("react-iiif-vault");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 async function createAudioAnnotation(data, ctx) {
   const annotation = {
@@ -525,7 +524,7 @@ async function createAudioAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const body = await ctx.embed({
+  const body = ctx.embed({
     id: data.url,
     type: "Sound",
     format: "audio/mp4",
@@ -542,12 +541,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,
@@ -585,7 +590,7 @@ function CreateAudioAnnotationForm(props) {
   }, [url]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PaddedSidebarContainer, { children: [
     error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components.ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_editors.InputContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_editors.InputContainer, { $wide: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors.InputLabel, { htmlFor: "audio-url", children: "URL" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors.Input, { type: "text", id: "audio-url", value: url, onChange: (e) => setUrl(e.target.value) })
     ] }),
@@ -598,28 +603,27 @@ function CreateAudioAnnotationForm(props) {
         fields: label,
         onSave: (e) => setLabel(e.toInternationalString())
       },
-      url + "__" + duration
+      `${url}__${duration}`
     ) }) : null,
     url && !error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_iiif_vault2.CanvasPanel.AudioHTML, { media: { url, duration, type: "Sound" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       MediaControls,
       {
         onError: (error2) => setError(error2),
-        onDuration: (duration2) => setDuration(duration2)
+        onDuration: (duration2) => setDuration(~~duration2)
       },
-      url + "__" + duration
-    ) }, url + "__" + duration) : null,
+      `${url}__${duration}`
+    ) }, `${url}__${duration}`) : null,
     duration && !error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_editors.FormFieldWrapper, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors.InputLabel, { htmlFor: "duration", children: "Duration" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors.Input, { type: "number", id: "duration", value: duration, onChange: (e) => setDuration(e.target.valueAsNumber) })
     ] }) : null,
-    url && !error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { onClick: onSubmit, children: "Add audio" })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components.ActionButton, { primary: true, large: true, type: "button", onPress: onSubmit, isDisabled: !url || !!error, children: "Add audio" })
   ] });
 }
 
 // src/Annotation/AudioAnnotation/index.tsx
-var import_components2 = require("@manifest-editor/components");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var audioAnnotation = {
+var audioAnnotation = (0, import_creator_api.defineCreator)({
   id: "@manifest-editor/audio-annotation",
   create: createAudioAnnotation,
   label: "Audio",
@@ -639,12 +643,14 @@ var audioAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 
 // src/Annotation/CaptionedImageAnnotation/index.tsx
-var import_components3 = require("@manifest-editor/components");
+var import_components4 = require("@manifest-editor/components");
+var import_creator_api2 = require("@manifest-editor/creator-api");
 
 // src/Annotation/CaptionedImageAnnotation/create-captioned-image-annotation.tsx
+var import_components3 = require("@manifest-editor/components");
 var import_editors2 = require("@manifest-editor/editors");
 var import_react3 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -747,18 +753,18 @@ function CreateCaptionedImageAnnotation(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components3.ActionButton, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
 // src/Annotation/CaptionedImageAnnotation/index.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var captionedImageAnnotation = {
+var captionedImageAnnotation = (0, import_creator_api2.defineCreator)({
   id: "@manifest-editor/captioned-image-annotation",
   create: createCaptionedImageAnnotation,
   label: "Captioned image",
   summary: "Add an image from a URL with caption",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components3.AddImageIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components4.AddImageIcon, {}),
   render(ctx) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CreateCaptionedImageAnnotation, { ...ctx });
   },
@@ -773,11 +779,17 @@ var captionedImageAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
+
+// src/Annotation/HTMLAnnotation/index.tsx
+var import_components6 = require("@manifest-editor/components");
+var import_creator_api3 = require("@manifest-editor/creator-api");
 
 // src/Annotation/HTMLAnnotation/create-html-annotation.tsx
-var import_react4 = require("react");
+var import_helpers2 = require("@iiif/helpers");
+var import_components5 = require("@manifest-editor/components");
 var import_editors3 = require("@manifest-editor/editors");
+var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 async function createHtmlAnnotation(data, ctx) {
   const annotation = {
@@ -842,37 +854,34 @@ async function createHtmlAnnotation(data, ctx) {
 }
 function CreateHTMLAnnotation(props) {
   const [body, setBody] = (0, import_react4.useState)({ en: [""] });
+  const isEmpty = (0, import_helpers2.getValue)(body).trim() === "";
   const onSubmit = () => {
     props.runCreate({
       body
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_editors3.InputContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_editors3.InputLabel, { children: "HTML Body" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_editors3.LanguageFieldEditor,
-        {
-          focusId: "html-content",
-          label: "HTML Content",
-          fields: body,
-          onSave: (e) => setBody(e.toInternationalString())
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_editors3.LanguageFieldEditor,
+      {
+        focusId: "html-content",
+        label: "HTML Content",
+        fields: body,
+        onSave: (e) => setBody(e.toInternationalString())
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components5.ActionButton, { primary: true, large: true, type: "button", onPress: onSubmit, isDisabled: isEmpty, children: "Create" })
   ] });
 }
 
 // src/Annotation/HTMLAnnotation/index.tsx
-var import_components4 = require("@manifest-editor/components");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var htmlAnnotation = {
+var htmlAnnotation = (0, import_creator_api3.defineCreator)({
   id: "@manifest-editor/html-annotation",
   create: createHtmlAnnotation,
   label: "HTML",
   summary: "HTML annotation",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components4.HTMLIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components6.HTMLIcon, {}),
   render(ctx) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreateHTMLAnnotation, { ...ctx });
   },
@@ -887,7 +896,11 @@ var htmlAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
+
+// src/Annotation/ImageServiceAnnotation/index.tsx
+var import_components8 = require("@manifest-editor/components");
+var import_creator_api5 = require("@manifest-editor/creator-api");
 
 // src/side-effects/reposition-multiple-images.ts
 var import_image_3 = require("@iiif/parser/image-3");
@@ -912,7 +925,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);
@@ -923,10 +936,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
+            );
           }
         }
       }
@@ -970,6 +991,9 @@ var resizeResourceToEmptyCanvas = {
       if (!canvas.items) {
         return;
       }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
       const annoPage = vault.get(canvas.items[0]);
       if (!annoPage) {
         return;
@@ -1027,6 +1051,9 @@ var resizeToFitService = {
       if (!canvas.items) {
         return;
       }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
       const annoPage = vault.get(canvas.items[0]);
       if (!annoPage) {
         return;
@@ -1042,10 +1069,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
+            );
           }
         }
       }
@@ -1053,12 +1088,26 @@ var resizeToFitService = {
   }
 };
 
+// src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
+var import_creator_api4 = require("@manifest-editor/creator-api");
+
 // src/ContentResource/ImageServiceCreator/create-image-service.tsx
 var import_image_32 = require("@iiif/parser/image-3");
+var import_components7 = require("@manifest-editor/components");
 var import_editors5 = require("@manifest-editor/editors");
+var import_react5 = require("react");
+var import_react_error_boundary = require("react-error-boundary");
+var import_react_iiif_vault3 = require("react-iiif-vault");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 async function createImageServer(data, ctx) {
-  const request = (0, import_image_32.createImageServiceRequest)(data.service);
+  const service = { ...data.service };
+  if (service["@id"]) {
+    service.id = service["@id"];
+  }
+  if (service["@type"]) {
+    service.type = service["@type"];
+  }
+  const request = (0, import_image_32.createImageServiceRequest)(service);
   const imageId = (0, import_image_32.imageServiceRequestToString)({
     identifier: request.identifier,
     server: request.server,
@@ -1083,37 +1132,64 @@ async function createImageServer(data, ctx) {
     id: imageId,
     type: "Image",
     format: data.format || "image/jpeg",
-    height: data.height || data.service.height,
-    width: data.width || data.service.width,
+    height: data.height || service.height,
+    width: data.width || service.width,
     service: data.embedService === false ? void 0 : [data.service]
   });
   return resource;
 }
+function getCanonicalUrl(url) {
+  return url.endsWith("default.jpg") ? (0, import_image_32.imageServiceRequestToString)({
+    ...(0, import_image_32.parseImageServiceRequest)(url),
+    type: "info"
+  }) : (0, import_image_32.canonicalServiceUrl)(url);
+}
 function CreateImageServerForm(props) {
+  const [url, setUrl] = (0, import_react5.useState)("");
   const onSubmit = (e) => {
     e.preventDefault();
     const data = new FormData(e.target);
     const formData = Object.fromEntries(data.entries());
-    const url = formData.url;
-    if (url) {
-      const canon = (0, import_image_32.canonicalServiceUrl)(url);
-      fetch(canon).then((r) => r.json()).then((service) => {
-        if (service["@id"]) {
-          service.id = service["@id"];
-        }
-        if (service["@type"]) {
-          service.type = service["@type"];
-        }
+    const url2 = formData.url;
+    if (url2) {
+      const info = getCanonicalUrl(url2);
+      if (!info) {
+        throw new Error("Invalid image service request");
+      }
+      fetch(info).then((r) => r.json()).then((service) => {
         props.runCreate({ url: formData.url, service });
       });
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_editors5.InputContainer, { $wide: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_editors5.InputContainer, { $wide: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_editors5.InputLabel, { htmlFor: "id", children: "Link to image service" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_editors5.Input, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { type: "submit", children: "Create" })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_editors5.Input,
+        {
+          id: "url",
+          name: "url",
+          defaultValue: "",
+          onPaste: (e) => {
+            const text = e.clipboardData.getData("text/plain");
+            setUrl(text ? getCanonicalUrl(text) : "");
+          },
+          onBlur: (e) => setUrl(e.currentTarget.value ? getCanonicalUrl(e.currentTarget.value) : "")
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative flex z-0 my-5 h-96 min-h-0 min-w-0 overflow-hidden bg-gray-200 rounded items-center justify-center", children: url.trim() ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_error_boundary.ErrorBoundary, { fallbackRender: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Invalid service" }), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_iiif_vault3.ImageService,
+      {
+        src: url,
+        fluid: true,
+        errorFallback: () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Invalid service" }),
+        background: "rgb(229,231,235)",
+        className: "h-full w-full",
+        containerProps: { className: "w-full h-full z-10" }
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-grey-600", children: "Preview" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components7.ActionButton, { primary: true, large: true, type: "submit", isDisabled: !url, children: "Create" }) })
   ] }) });
 }
 
@@ -1125,7 +1201,8 @@ async function createImageServiceAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const resource = await ctx.create("@manifest-editor/image-service-creator", data, {
+  const createImage = (0, import_creator_api4.creatorHelper)(ctx, "Annotation", "body", "@manifest-editor/image-service-creator");
+  const resource = await createImage(data, {
     parent: { resource: annotation, property: "body" }
   });
   if (targetType === "Annotation") {
@@ -1138,24 +1215,39 @@ 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,
       type: "AnnotationPage",
       items: [annotationResource]
     });
+    let thumbnail = void 0;
+    if (data.service?.sizes) {
+      const createThumbnail2 = (0, import_creator_api4.creatorHelper)(ctx, "Canvas", "thumbnail", "@manifest-editor/thumbnail-image");
+      thumbnail = await createThumbnail2({
+        service: data.service,
+        width: data.thumbnailSize || 400
+      });
+    }
     return ctx.embed({
       id: canvasId,
       type: "Canvas",
       label: data.label || { en: ["Untitled canvas"] },
       height: resource.resource.height || 1e3,
       width: resource.resource.width || 1e3,
+      thumbnail: thumbnail ? [thumbnail] : void 0,
       items: [page]
     });
   }
@@ -1165,16 +1257,15 @@ function CreateImageServiceAnnotationForm(props) {
 }
 
 // src/Annotation/ImageServiceAnnotation/index.tsx
-var import_components5 = require("@manifest-editor/components");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var imageServiceAnnotation = {
+var imageServiceAnnotation = (0, import_creator_api5.defineCreator)({
   id: "@manifest-editor/image-service-annotation",
   create: createImageServiceAnnotation,
   label: "IIIF Image",
   dependencies: ["@manifest-editor/image-service-creator"],
   summary: "IIIF Image service",
   tags: ["image", "image-service"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.IIIFLogo, { style: { padding: 10 } }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components8.IIIFLogo, { style: { padding: 10 } }),
   render(ctx) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CreateImageServiceAnnotationForm, { ...ctx });
   },
@@ -1189,9 +1280,17 @@ var imageServiceAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
+
+// src/Annotation/ImageUrlAnnotation/index.tsx
+var import_components10 = require("@manifest-editor/components");
+var import_creator_api7 = require("@manifest-editor/creator-api");
+
+// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
+var import_creator_api6 = require("@manifest-editor/creator-api");
 
 // src/ContentResource/ImageUrlCreator/create-image-url.tsx
+var import_components9 = require("@manifest-editor/components");
 var import_editors6 = require("@manifest-editor/editors");
 var import_shell = require("@manifest-editor/shell");
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -1226,7 +1325,7 @@ function CreateImageUrlForm(props) {
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_editors6.InputLabel, { htmlFor: "id", children: "Link to Image" }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_editors6.Input, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components9.ActionButton, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
@@ -1238,25 +1337,32 @@ async function createImageUrlAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const resource = await ctx.create("@manifest-editor/image-url-creator", data, {
+  const createImage = (0, import_creator_api6.creatorHelper)(ctx, "Annotation", "body", "@manifest-editor/image-url-creator");
+  const resource = await createImage(data, {
     parent: { resource: annotation, property: "body" }
   });
   if (targetType === "Annotation") {
-    return {
+    return ctx.embed({
       ...annotation,
       body: [resource],
       motivation: data.motivation || "painting",
       target: ctx.getTarget()
-    };
+    });
   }
   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,
@@ -1272,22 +1378,22 @@ async function createImageUrlAnnotation(data, ctx) {
       items: [page]
     });
   }
+  throw new Error("Unsupported target type");
 }
 function CreateImageUrlAnnotationForm(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreateImageUrlForm, { ...props });
 }
 
 // src/Annotation/ImageUrlAnnotation/index.tsx
-var import_components6 = require("@manifest-editor/components");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var imageUrlAnnotation = {
+var imageUrlAnnotation = (0, import_creator_api7.defineCreator)({
   id: "@manifest-editor/image-url-annotation",
   create: createImageUrlAnnotation,
   label: "Image",
   dependencies: ["@manifest-editor/image-url-creator"],
   summary: "Image from URL",
   tags: ["image"],
-  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components6.AddImageIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components10.AddImageIcon, {}),
   render(ctx) {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreateImageUrlAnnotationForm, { ...ctx });
   },
@@ -1302,17 +1408,89 @@ var imageUrlAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 
-// src/Annotation/NoBodyAnnotation/index.tsx
-var import_components7 = require("@manifest-editor/components");
+// src/Annotation/ImageUrlListAnnotation/index.tsx
+var import_components12 = require("@manifest-editor/components");
+var import_creator_api10 = require("@manifest-editor/creator-api");
+
+// src/ContentResource/ImageUrlListCreator/create-image-url-list.tsx
+var import_components11 = require("@manifest-editor/components");
+var import_creator_api8 = require("@manifest-editor/creator-api");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var noBodyAnnotation = {
+async function createImageUrlList(payload, ctx) {
+  const items = [];
+  const createImage = (0, import_creator_api8.creatorHelper)(ctx, "Annotation", "body", "@manifest-editor/image-url-creator");
+  for (const image of payload.images) {
+    items.push(await createImage(image, ctx.options));
+  }
+  return items;
+}
+function CreateImageUrlListForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.urls) {
+      props.runCreate({ images: formData.urls.split("\n").map((url) => ({ url })) });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_components11.Form.Form, { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_components11.Form.InputContainer, { className: "mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Form.Label, { children: "Enter a list of URLs (one per line)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.Form.TextArea, { name: "urls", rows: "10" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components11.ActionButton, { primary: true, large: true, type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/Annotation/ImageUrlListAnnotation/create-image-url-list-annotation.tsx
+var import_creator_api9 = require("@manifest-editor/creator-api");
+async function createImageUrlListAnnotation(payload, ctx) {
+  const items = [];
+  const createAnnotation = (0, import_creator_api9.creatorHelper)(ctx, "AnnotationPage", "items", "@manifest-editor/image-url-annotation");
+  for (const image of payload.images) {
+    items.push(await createAnnotation(image, ctx.options));
+  }
+  return items;
+}
+
+// src/Annotation/ImageUrlListAnnotation/index.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var imageUrlListAnnotation = (0, import_creator_api10.defineCreator)({
+  id: "@manifest-editor/image-url-list-annotation",
+  create: createImageUrlListAnnotation,
+  label: "List of Images",
+  dependencies: ["@manifest-editor/image-url-annotation"],
+  summary: "List of Images from URLs",
+  tags: ["image"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components12.ImageListIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreateImageUrlListForm, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
+  staticFields: {
+    type: "Annotation"
+  }
+});
+
+// src/Annotation/NoBodyAnnotation/index.tsx
+var import_components13 = require("@manifest-editor/components");
+var import_creator_api11 = require("@manifest-editor/creator-api");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var noBodyAnnotation = (0, import_creator_api11.defineCreator)({
   id: "@manifest-editor/no-body-annotation",
   create: createNoBodyAnnotation,
   label: "Annotation without body",
   summary: "Add an annotation that only has motivation and target",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components7.EmptyCanvasIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components13.EmptyCanvasIcon, {}),
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "target"],
   supports: {
@@ -1325,7 +1503,7 @@ var noBodyAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 function createNoBodyAnnotation(data, ctx) {
   return ctx.embed({
     id: ctx.generateId("annotation"),
@@ -1336,15 +1514,18 @@ function createNoBodyAnnotation(data, ctx) {
   });
 }
 
+// src/Annotation/VideoAnnotation/index.tsx
+var import_components15 = require("@manifest-editor/components");
+var import_creator_api12 = require("@manifest-editor/creator-api");
+
 // src/Annotation/VideoAnnotation/create-video-annotation.tsx
-var import_helpers2 = require("@iiif/helpers");
+var import_helpers3 = require("@iiif/helpers");
+var import_components14 = require("@manifest-editor/components");
 var import_editors7 = require("@manifest-editor/editors");
-var import_components8 = require("@manifest-editor/components");
-var import_react5 = require("react");
 
 // ../ui/ui/VideoPlayer/VideoPlayer.tsx
-var import_react_iiif_vault3 = require("react-iiif-vault");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_iiif_vault4 = require("react-iiif-vault");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function VideoPlayer({
   media,
   onError,
@@ -1352,9 +1533,9 @@ function VideoPlayer({
   onDuration,
   onDimensions
 }) {
-  const [{ element, currentTime, progress }, state, actions] = (0, import_react_iiif_vault3.useSimpleMediaPlayer)({ duration });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react_iiif_vault3.MediaPlayerProvider,
+  const [{ element, currentTime, progress }, state, actions] = (0, import_react_iiif_vault4.useSimpleMediaPlayer)({ duration });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react_iiif_vault4.MediaPlayerProvider,
     {
       element,
       state,
@@ -1362,7 +1543,7 @@ function VideoPlayer({
       currentTime,
       progress,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             style: {
@@ -1370,24 +1551,25 @@ function VideoPlayer({
               aspectRatio: `${media.width}/${media.height}`,
               position: "relative"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_iiif_vault3.CanvasPanel.VideoHTML, { element, media, playPause: actions.playPause })
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_iiif_vault4.CanvasPanel.VideoHTML, { element, media, playPause: actions.playPause })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MediaControls, { onError, onDuration, onDimensions })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MediaControls, { onError, onDuration, onDimensions })
       ]
     }
   );
 }
 
 // src/Annotation/VideoAnnotation/create-video-annotation.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 async function createVideoAnnotation(data, ctx) {
   const annotation = {
     id: ctx.generateId("annotation"),
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const body = await ctx.embed({
+  const body = ctx.embed({
     id: data.url,
     type: "Video",
     format: "video/mp4",
@@ -1398,7 +1580,7 @@ async function createVideoAnnotation(data, ctx) {
   if (targetType === "Annotation") {
     return ctx.embed({
       ...annotation,
-      label: (0, import_helpers2.getValue)(data.label) && data.label,
+      label: (0, import_helpers3.getValue)(data.label) && data.label,
       motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
       body,
       target: ctx.getTarget()
@@ -1406,12 +1588,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,
@@ -1430,12 +1618,12 @@ async function createVideoAnnotation(data, ctx) {
   }
 }
 function CreateVideoAnnotationForm(props) {
-  const [url, setUrl] = (0, import_react5.useState)("");
-  const [duration, setDuration] = (0, import_react5.useState)(0);
-  const [width, setWidth] = (0, import_react5.useState)(0);
-  const [height, setHeight] = (0, import_react5.useState)(0);
-  const [error, setError] = (0, import_react5.useState)("");
-  const [label, setLabel] = (0, import_react5.useState)({ en: [""] });
+  const [url, setUrl] = (0, import_react6.useState)("");
+  const [duration, setDuration] = (0, import_react6.useState)(0);
+  const [width, setWidth] = (0, import_react6.useState)(0);
+  const [height, setHeight] = (0, import_react6.useState)(0);
+  const [error, setError] = (0, import_react6.useState)("");
+  const [label, setLabel] = (0, import_react6.useState)({ en: [""] });
   const onSubmit = () => {
     props.runCreate({
       url,
@@ -1445,7 +1633,7 @@ function CreateVideoAnnotationForm(props) {
       height
     });
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setError("");
     setDuration(0);
     if (url) {
@@ -1453,13 +1641,13 @@ function CreateVideoAnnotationForm(props) {
       setLabel({ en: [labelFromUrl || ""] });
     }
   }, [url]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PaddedSidebarContainer, { children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components8.ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_editors7.InputContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.InputLabel, { htmlFor: "video-url", children: "URL" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.Input, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PaddedSidebarContainer, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_components14.ErrorMessage, { children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_editors7.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_editors7.InputLabel, { htmlFor: "video-url", children: "URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_editors7.Input, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
     ] }),
-    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_editors7.LanguageFieldEditor,
       {
         containerId: "label",
@@ -1468,9 +1656,9 @@ function CreateVideoAnnotationForm(props) {
         fields: label,
         onSave: (e) => setLabel(e.toInternationalString())
       },
-      url + "__" + duration
+      `${url}__${duration}`
     ) }) : null,
-    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-4 bg-black", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       VideoPlayer,
       {
         duration,
@@ -1488,8 +1676,8 @@ function CreateVideoAnnotationForm(props) {
           setHeight(h || 0);
         }
       }
-    ) : null,
-    !error && (duration || width || height) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.InputContainer, { $wide: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    ) }) : null,
+    !error && (duration || width || height) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_editors7.InputContainer, { $wide: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_editors7.DimensionsTriplet,
       {
         widthId: "width",
@@ -1503,21 +1691,20 @@ function CreateVideoAnnotationForm(props) {
         changeDuration: (v) => setDuration(v)
       }
     ) }) : null,
-    url && !error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { onClick: onSubmit, children: "Add video" })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_components14.ActionButton, { primary: true, large: true, type: "button", onPress: onSubmit, isDisabled: !url || !!error, children: "Add video" })
   ] });
 }
 
 // src/Annotation/VideoAnnotation/index.tsx
-var import_components9 = require("@manifest-editor/components");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var videoAnnotation = {
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var videoAnnotation = (0, import_creator_api12.defineCreator)({
   id: "@manifest-editor/video-annotation",
   create: createVideoAnnotation,
   label: "Video",
   summary: "Video annotation",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components9.VideoIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components15.VideoIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CreateVideoAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CreateVideoAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
@@ -1530,11 +1717,14 @@ var videoAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
+
+// src/AnnotationPage/EmptyAnnotationPage/index.tsx
+var import_creator_api13 = require("@manifest-editor/creator-api");
 
 // ../ui/icons/ThumbnailStripIcon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ThumbnailStripIcon = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ThumbnailStripIcon = () => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1543,21 +1733,28 @@ var ThumbnailStripIcon = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     width: "24px",
     fill: "#000000",
     transform: "scale(-1, 1)",
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { fill: "none", height: "24", width: "24" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { fill: "none", height: "24", width: "24" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
     ] })
   }
 );
 
 // src/AnnotationPage/EmptyAnnotationPage/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var emptyAnnotationPage = {
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var emptyAnnotationPage = (0, import_creator_api13.defineCreator)({
   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__ */ (0, import_jsx_runtime21.jsx)(ThumbnailStripIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ThumbnailStripIcon, {}),
   resourceType: "AnnotationPage",
   resourceFields: ["id", "type", "items"],
   supports: {
@@ -1568,51 +1765,45 @@ var emptyAnnotationPage = {
       Range: ["annotations"]
     }
   }
-};
-async function createEmptyAnnotationPage(data, ctx) {
-  return ctx.embed({
-    id: ctx.generateId("annotations"),
-    label: data.label,
-    type: "AnnotationPage",
-    items: []
-  });
-}
+});
 
 // src/Canvas/EmptyCanvas/index.tsx
-var import_components10 = require("@manifest-editor/components");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var emptyCanvas = {
+var import_components16 = require("@manifest-editor/components");
+var import_creator_api14 = require("@manifest-editor/creator-api");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var emptyCanvas = (0, import_creator_api14.defineCreator)({
   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__ */ (0, import_jsx_runtime22.jsx)(import_components10.EmptyCanvasIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components16.EmptyCanvasIcon, {}),
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label", "height", "width", "items"],
   supports: {
     parentTypes: ["Manifest"],
     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
-var import_react_iiif_vault4 = require("react-iiif-vault");
+var import_creator_api15 = require("@manifest-editor/creator-api");
+var import_iiif_browser = require("@manifest-editor/iiif-browser");
+var import_react_iiif_vault5 = require("react-iiif-vault");
 
 // ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
 var isProduction = false;
@@ -1630,27 +1821,26 @@ function invariant(condition, message) {
 }
 
 // src/Canvas/InternalCanvas/index.tsx
-var import_iiif_browser = require("@manifest-editor/iiif-browser");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var internalCanvas = {
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var internalCanvas = (0, import_creator_api15.defineCreator)({
   id: "@manifest-editor/internal-canvas",
   create: createInternalCanvas,
   label: "Internal canvas link",
   summary: "Canvas from the same manifest",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ThumbnailStripIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ThumbnailStripIcon, {}),
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label"],
   supports: {
     parentTypes: ["Manifest"],
     parentFields: ["start"]
   },
-  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InternalCanvas, { ...ctx })
-};
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InternalCanvas, { ...ctx })
+});
 function InternalCanvas(props) {
-  const manifest = (0, import_react_iiif_vault4.useManifest)();
-  const vault = (0, import_react_iiif_vault4.useVault)();
+  const manifest = (0, import_react_iiif_vault5.useManifest)();
+  const vault = (0, import_react_iiif_vault5.useVault)();
   invariant(manifest, "Manifest is not loaded");
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_iiif_browser.IIIFExplorer,
     {
       vault,
@@ -1676,11 +1866,22 @@ async function createInternalCanvas(data, ctx) {
   return ctx.embed({ id: data.id, type: "Canvas" });
 }
 
+// src/ContentResource/HTMLBodyCreator/index.tsx
+var import_creator_api16 = require("@manifest-editor/creator-api");
+
+// ../ui/icons/TextFormatIcon.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TextFormatIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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
+var import_components17 = require("@manifest-editor/components");
 var import_editors8 = require("@manifest-editor/editors");
 var import_shell2 = require("@manifest-editor/shell");
-var import_react6 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 async function createHtmlBody(data, ctx) {
   return ctx.embed({
     id: ctx.generateId(`html/${data.language}`),
@@ -1692,18 +1893,18 @@ async function createHtmlBody(data, ctx) {
 }
 function CreateHTMLBodyForm(props) {
   const { i18n } = (0, import_shell2.useConfig)();
-  const [body, setBodyValue] = (0, import_react6.useState)("<p></p>");
-  const [language, setLang] = (0, import_react6.useState)(i18n.defaultLanguage);
+  const [body, setBodyValue] = (0, import_react7.useState)("<p></p>");
+  const [language, setLang] = (0, import_react7.useState)(i18n.defaultLanguage);
   const onSubmit = () => {
     props.runCreate({
       language,
       body
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_editors8.InputContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_editors8.InputLabel, { children: "HTML Body" }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_editors8.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_editors8.InputLabel, { children: "HTML Body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         import_editors8.RichTextLanguageField,
         {
           value: body,
@@ -1714,27 +1915,20 @@ function CreateHTMLBodyForm(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components17.ActionButton, { primary: true, large: true, type: "button", onPress: onSubmit, children: "Create" })
   ] });
 }
 
-// ../ui/icons/TextFormatIcon.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var TextFormatIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var htmlBodyCreator = {
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var htmlBodyCreator = (0, import_creator_api16.defineCreator)({
   id: "@manifest-editor/html-body-creator",
   create: createHtmlBody,
   label: "HTML Body",
   summary: "Add HTML annotation body",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextFormatIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TextFormatIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreateHTMLBodyForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CreateHTMLBodyForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["id", "language", "type", "format", "value"],
@@ -1746,118 +1940,165 @@ var htmlBodyCreator = {
     type: "TextualBody",
     format: "text/html"
   }
-};
+});
 
 // src/ContentResource/IIIFBrowserCreator/index.tsx
-var import_components11 = require("@manifest-editor/components");
+var import_components18 = require("@manifest-editor/components");
+var import_creator_api17 = require("@manifest-editor/creator-api");
 
 // src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-var import_helpers3 = require("@iiif/helpers");
-var import_react8 = require("react");
+var import_helpers5 = require("@iiif/helpers");
+var import_image_33 = require("@iiif/parser/image-3");
+var import_react9 = require("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)) {
-    throw new Error("Multiple items not yet supported");
-  }
-  const contentState = (0, import_helpers3.normaliseContentState)(
-    typeof data.output === "string" ? (0, import_helpers3.parseContentState)(data.output) : data.output
-  );
-  if (!contentState.target || contentState.target.length === 0) {
-    throw new Error("No target found in content state");
-  }
-  const target = contentState.target[0];
-  const type = target.source.type;
-  const previewVault = ctx.getPreviewVault();
-  if (targetType === "Canvas" || targetType === "Annotation") {
-    if (type === "Canvas") {
-      const canvasId = target.source.id;
-      const manifestId = target.source.partOf?.find(
-        (t) => t.type === "Manifest"
-      );
-      invariant(manifestId, "Could not load external resource without partOf");
-      const manifest = await previewVault.loadManifest(manifestId);
-      invariant(manifest, "Manifest not found");
-      const canvasRef = manifest.items.find((item) => item.id === canvasId);
-      invariant(canvasRef, "Canvas not found");
-      const canvas = previewVault.get(canvasRef);
-      if (targetType === "Canvas" && target.selector?.type !== "BoxSelector") {
-        return ctx.embed(previewVault.toPresentation3(canvas));
-      }
-      const annotationPage = previewVault.get(canvas.items[0]);
-      const annotation = previewVault.get(annotationPage.items[0]);
-      if (targetType === "Annotation" || targetType === "Canvas") {
-        const fullAnnotation = previewVault.toPresentation3(annotation);
-        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.width = width;
-            service.height = height;
+  const resources = data.output;
+  const returnResources = [];
+  for (const { resource, selector, parent } of resources) {
+    const type = resource.type;
+    const previewVault = new import_helpers5.Vault();
+    if (targetType === "Canvas" || targetType === "Annotation" || targetType === "ContentResource") {
+      if (type === "Canvas") {
+        const canvasId = resource.id;
+        const manifestId = parent?.type === "Manifest" ? parent.id : void 0;
+        invariant(manifestId, "Could not find Manifest");
+        const manifest = await previewVault.loadManifest(manifestId);
+        invariant(manifest, "Manifest not found");
+        const canvasRef = manifest.items.find((item) => item.id === canvasId);
+        invariant(canvasRef, "Canvas not found");
+        const canvas = previewVault.get(canvasRef);
+        if (targetType === "Canvas" && selector?.type !== "BoxSelector") {
+          const fullCanvas = previewVault.toPresentation3(canvas);
+          if (!fullCanvas.label) {
+            fullCanvas.label = { en: ["Untitled canvas"] };
           }
+          returnResources.push(ctx.embed(fullCanvas));
+          continue;
         }
-        if (target.selector && target.selector.type === "BoxSelector") {
-          const selector = {
-            "@context": "http://iiif.io/api/annex/openannotation/context.json",
-            type: "iiif:ImageApiSelector",
-            region: [
-              ~~target.selector.spatial.x,
-              ~~target.selector.spatial.y,
-              ~~target.selector.spatial.width,
-              ~~target.selector.spatial.height
-            ].join(",")
-          };
-          fullAnnotation.body = {
-            id: ctx.generateId("SpecificResource", annotation),
-            type: "SpecificResource",
-            source: fullAnnotation.body,
-            selector
-          };
-          if (targetType === "Canvas") {
-            const canvasId2 = ctx.generateId("Canvas", annotation);
-            fullAnnotation.target = canvasId2;
-            const pageId = ctx.generateId("Page", annotation);
-            const annotationPage2 = ctx.embed({
-              id: pageId,
-              type: "AnnotationPage",
-              items: [fullAnnotation]
-            });
-            return ctx.embed({
-              id: canvasId2,
-              type: "Canvas",
-              width: ~~target.selector.spatial.width,
-              height: ~~target.selector.spatial.height,
-              items: [annotationPage2]
-            });
+        const annotationPage = previewVault.get(canvas.items[0]);
+        const annotation = previewVault.get(annotationPage.items[0]);
+        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;
+            service = (0, import_image_33.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);
+            }
           }
-          return ctx.embed({
-            ...fullAnnotation,
-            target: ctx.getTarget()
-          });
+          if (selector?.type === "BoxSelector") {
+            const imageApiSelector = {
+              "@context": "http://iiif.io/api/annex/openannotation/context.json",
+              type: "iiif:ImageApiSelector",
+              region: [
+                ~~selector.spatial.x,
+                ~~selector.spatial.y,
+                ~~selector.spatial.width,
+                ~~selector.spatial.height
+              ].join(",")
+            };
+            const newBody = { ...fullAnnotation.body };
+            let thumbnailId = "";
+            if (service) {
+              const id = service.id || service["@id"] || "";
+              if (id) {
+                newBody.id = croppedRegion(id, selector.spatial, "max");
+                thumbnailId = croppedRegion(id, selector.spatial, "512,");
+              }
+            }
+            fullAnnotation.body = {
+              id: ctx.generateId("SpecificResource", annotation),
+              type: "SpecificResource",
+              source: newBody,
+              selector: imageApiSelector
+            };
+            if (data.trackSize) {
+              data.trackSize({
+                width: ~~selector.spatial.width,
+                height: ~~selector.spatial.height
+              });
+            }
+            if (targetType === "ContentResource") {
+              returnResources.push(fullAnnotation.body);
+              continue;
+            }
+            if (targetType === "Canvas") {
+              const canvasId2 = ctx.generateId("Canvas", annotation);
+              fullAnnotation.target = canvasId2;
+              const pageId = ctx.generateId("Page", annotation);
+              const annotationPage2 = ctx.embed({
+                id: pageId,
+                type: "AnnotationPage",
+                items: [fullAnnotation]
+              });
+              returnResources.push(
+                ctx.embed({
+                  id: canvasId2,
+                  type: "Canvas",
+                  label: { en: ["Untitled canvas"] },
+                  width: ~~selector.spatial.width,
+                  height: ~~selector.spatial.height,
+                  thumbnail: thumbnailId ? [
+                    ctx.embed({
+                      id: thumbnailId,
+                      type: "Image",
+                      format: "image/jpeg",
+                      width: 512,
+                      height: Math.round(selector.spatial.height / selector.spatial.width * 512)
+                    })
+                  ] : void 0,
+                  items: [annotationPage2]
+                })
+              );
+              continue;
+            }
+            returnResources.push(
+              ctx.embed({
+                ...fullAnnotation,
+                target: ctx.getTarget()
+              })
+            );
+            continue;
+          }
+          returnResources.push(
+            ctx.embed({
+              ...previewVault.toPresentation3(annotation),
+              target: ctx.getTarget()
+            })
+          );
         }
-        return ctx.embed({
-          ...previewVault.toPresentation3(annotation),
-          target: ctx.getTarget()
-        });
       }
     }
   }
-  throw new Error("Not yet supported.");
+  return returnResources;
 }
-var IIIFBrowserCreatorForm2 = (0, import_react8.lazy)(
-  () => Promise.resolve().then(() => (init_iiif_browser_form_lazy(), iiif_browser_form_lazy_exports))
-);
+var IIIFBrowserCreatorForm2 = (0, import_react9.lazy)(() => Promise.resolve().then(() => (init_iiif_browser_form_lazy(), iiif_browser_form_lazy_exports)));
 
 // src/ContentResource/IIIFBrowserCreator/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var iiifBrowserCreator = {
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var iiifBrowserCreator = (0, import_creator_api17.defineCreator)({
   id: "@manifest-editor/iiif-browser-creator",
   create: createFromIIIFBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components11.IIIFBrowserIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components18.IIIFBrowserIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IIIFBrowserCreatorForm2, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IIIFBrowserCreatorForm2, { ...ctx });
   },
   hiddenModal: true,
   tags: ["image", "image-service"],
@@ -1866,52 +2107,49 @@ var iiifBrowserCreator = {
   additionalTypes: ["Annotation", "Canvas"],
   supports: {
     parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
+    parentFields: ["body", "items"],
     parentFieldMap: {
       Annotation: ["body"],
       Manifest: ["items"],
       AnnotationPage: ["items"]
     }
   },
-  sideEffects: [
-    resizeToFitService,
-    resizeResourceToEmptyCanvas,
-    repositionMultipleImages
-  ],
+  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
   staticFields: {}
-};
+});
 
 // src/ContentResource/ImageServiceCreator/index.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var imageServiceCreator = {
+var import_components19 = require("@manifest-editor/components");
+var import_creator_api18 = require("@manifest-editor/creator-api");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var imageServiceCreator = (0, import_creator_api18.defineCreator)({
   id: "@manifest-editor/image-service-creator",
   create: createImageServer,
   label: "Image Service",
   summary: "Add an image from Image Service",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TextFormatIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_components19.IIIFLogo, { style: { padding: 10 } }),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CreateImageServerForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CreateImageServerForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["id", "type", "height", "width", "format", "service"],
   supports: {
     parentFields: ["logo", "body", "thumbnail"]
-  },
-  staticFields: {
-    type: "Image"
   }
-};
+});
 
 // src/ContentResource/ImageUrlCreator/index.tsx
-var import_components12 = require("@manifest-editor/components");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var imageUrlCreator = {
+var import_components20 = require("@manifest-editor/components");
+var import_creator_api19 = require("@manifest-editor/creator-api");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var imageUrlCreator = (0, import_creator_api19.defineCreator)({
   id: "@manifest-editor/image-url-creator",
   create: createImageUrl,
   label: "Image",
   summary: "Image from a URL",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components12.AddImageIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components20.AddImageIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CreateImageUrlForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CreateImageUrlForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["format"],
@@ -1921,12 +2159,39 @@ var imageUrlCreator = {
   staticFields: {
     type: "Image"
   }
-};
+});
+
+// src/ContentResource/ImageUrlListCreator/index.tsx
+var import_components21 = require("@manifest-editor/components");
+var import_creator_api20 = require("@manifest-editor/creator-api");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var imageUrlListCreator = (0, import_creator_api20.defineCreator)({
+  id: "@manifest-editor/image-url-list",
+  label: "Image URL List",
+  summary: "Image from a list of URLs",
+  create: createImageUrlList,
+  icon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_components21.ImageListIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CreateImageUrlListForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["format"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+});
+
+// src/ContentResource/PlaintextCreator/index.tsx
+var import_creator_api21 = require("@manifest-editor/creator-api");
 
 // src/ContentResource/PlaintextCreator/create-plaintext.tsx
+var import_components22 = require("@manifest-editor/components");
 var import_editors9 = require("@manifest-editor/editors");
-var import_react9 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 async function createPlaintext(data, ctx) {
   return ctx.embed({
     id: data.url,
@@ -1936,7 +2201,9 @@ async function createPlaintext(data, ctx) {
   });
 }
 function CreatePlaintextForm(props) {
-  const [label, setLabel] = (0, import_react9.useState)({ en: ["View as text"] });
+  const [label, setLabel] = (0, import_react10.useState)({
+    en: ["View as text"]
+  });
   const onSubmit = (e) => {
     e.preventDefault();
     const data = new FormData(e.target);
@@ -1945,8 +2212,8 @@ function CreatePlaintextForm(props) {
       props.runCreate({ url: formData.url, label });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       import_editors9.LanguageFieldEditor,
       {
         focusId: "label",
@@ -1955,24 +2222,24 @@ function CreatePlaintextForm(props) {
         onSave: (e) => setLabel(e.toInternationalString())
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_editors9.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.InputLabel, { htmlFor: "id", children: "Link to plaintext" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.Input, { id: "url", name: "url", defaultValue: "" })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_editors9.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors9.InputLabel, { htmlFor: "id", children: "Link to plaintext" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors9.Input, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_components22.ActionButton, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
 // src/ContentResource/PlaintextCreator/index.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var plaintextCreator = {
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var plaintextCreator = (0, import_creator_api21.defineCreator)({
   id: "@manifest-editor/plaintext-creator",
   create: createPlaintext,
   label: "Plaintext",
   summary: "Add link to an plaintext",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextFormatIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TextFormatIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CreatePlaintextForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreatePlaintextForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["label", "format"],
@@ -1982,12 +2249,223 @@ var plaintextCreator = {
   staticFields: {
     format: "text/plain"
   }
-};
+});
 
-// src/ContentResource/WebPageCreator/create-web-page.tsx
+// src/ContentResource/ThumbnailCreator/index.tsx
+var import_components24 = require("@manifest-editor/components");
+var import_creator_api22 = require("@manifest-editor/creator-api");
+
+// src/ContentResource/ThumbnailCreator/create-thumbnail.tsx
+var import_components23 = require("@manifest-editor/components");
 var import_editors10 = require("@manifest-editor/editors");
-var import_react10 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react11 = require("react");
+
+// src/ContentResource/ThumbnailCreator/thumbnail-helpers.ts
+var import_image_34 = require("@iiif/parser/image-3");
+function serviceImageAtSize(service, size) {
+  if (service["@id"]) {
+    service.id = service["@id"];
+  }
+  if (service["@type"]) {
+    service.type = service["@type"];
+  }
+  const request = (0, import_image_34.createImageServiceRequest)(service);
+  return (0, import_image_34.imageServiceRequestToString)({
+    identifier: request.identifier,
+    server: request.server,
+    scheme: request.scheme,
+    type: "image",
+    size: {
+      max: false,
+      confined: false,
+      upscaled: false,
+      width: size.width,
+      height: size.height
+    },
+    format: "jpg",
+    // This isn't how it should be modelled, always full,
+    // region: data.selector ? data.selector : { full: true },
+    region: { full: true },
+    rotation: { angle: 0 },
+    quality: "default",
+    prefix: request.prefix,
+    originalPath: request.originalPath
+  });
+}
+function getCanonicalUrl2(url) {
+  return url.endsWith("default.jpg") ? (0, import_image_34.imageServiceRequestToString)({
+    ...(0, import_image_34.parseImageServiceRequest)(url),
+    type: "info"
+  }) : (0, import_image_34.canonicalServiceUrl)(url);
+}
+
+// src/ContentResource/ThumbnailCreator/create-thumbnail.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+async function createThumbnail(data, ctx) {
+  const service = { ...data.service };
+  const sizes = service.sizes;
+  if (service["@id"]) {
+    service.id = service["@id"];
+  }
+  if (service["@type"]) {
+    service.type = service["@type"];
+  }
+  if (data.thumbnailUrl) {
+    return ctx.embed({
+      id: data.thumbnailUrl,
+      type: "Image",
+      format: "image/jpeg",
+      width: data.width,
+      height: data.height
+    });
+  }
+  if (sizes) {
+    const thumbnailSize = data.width || 400;
+    let bestMatch = null;
+    for (const size of sizes) {
+      if (!bestMatch || Math.abs(size.width - thumbnailSize) < Math.abs(bestMatch.width - thumbnailSize)) {
+        bestMatch = { width: size.width, height: size.height };
+      }
+    }
+    if (bestMatch) {
+      const imageId = serviceImageAtSize(service, bestMatch);
+      return ctx.embed({
+        id: imageId,
+        type: "Image",
+        format: "image/jpeg",
+        width: bestMatch.width,
+        height: bestMatch.height
+      });
+    }
+  }
+  return null;
+}
+function CreateThumbnailForm(props) {
+  const [url, setUrl] = (0, import_react11.useState)("");
+  const [service, setService] = (0, import_react11.useState)(null);
+  const [selectedSize, setSelectedSize] = (0, import_react11.useState)({ width: 0, height: 0 });
+  const previewUrl = (0, import_react11.useMemo)(() => {
+    if (!service)
+      return null;
+    if (!selectedSize.width || !selectedSize.height)
+      return null;
+    return serviceImageAtSize(service, selectedSize);
+  }, [selectedSize, service]);
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    const url2 = formData.url;
+    if (url2) {
+      const info = getCanonicalUrl2(url2);
+      if (!info) {
+        throw new Error("Invalid image service request");
+      }
+      fetch(info).then((r) => r.json()).then((service2) => {
+        setService(service2);
+        const size0 = service2.sizes?.[0];
+        if (size0) {
+          setSelectedSize(size0);
+        }
+      });
+    }
+  };
+  if (service) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(PaddedSidebarContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mb-2", children: service["@id"] || service.id }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex gap-2 mb-4", children: service.sizes?.map((size) => {
+          const isSelected = size.width === selectedSize.width;
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            import_components23.ActionButton,
+            {
+              primary: isSelected,
+              isDisabled: isSelected,
+              large: true,
+              onPress: () => setSelectedSize(size),
+              children: [
+                size.width,
+                "x",
+                size.height
+              ]
+            },
+            size.width
+          );
+        }) }),
+        previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src: previewUrl, alt: "preview of selected resource" }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        import_components23.ActionButton,
+        {
+          primary: true,
+          large: true,
+          isDisabled: !previewUrl,
+          onPress: () => {
+            if (!service)
+              return;
+            props.runCreate({ service, width: selectedSize.width, height: selectedSize.height });
+          },
+          children: "Add thumbnail"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_editors10.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_editors10.InputLabel, { htmlFor: "id", children: "Link to image service" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        import_editors10.Input,
+        {
+          id: "url",
+          name: "url",
+          defaultValue: "",
+          onPaste: (e) => {
+            const text = e.clipboardData.getData("text/plain");
+            setUrl(text ? getCanonicalUrl2(text) : "");
+          },
+          onBlur: (e) => setUrl(e.currentTarget.value ? getCanonicalUrl2(e.currentTarget.value) : "")
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_components23.ActionButton, { primary: true, large: true, type: "submit", isDisabled: !url, children: "Select size" }) })
+  ] }) });
+}
+
+// src/ContentResource/ThumbnailCreator/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var thumbnailCreator = (0, import_creator_api22.defineCreator)({
+  id: "@manifest-editor/thumbnail-image",
+  create: createThumbnail,
+  label: "Thumbnail from service",
+  summary: "Add thumbnail from an image service",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components24.ScaledImageIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CreateThumbnailForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "type", "format"],
+  supports: {
+    parentFields: ["thumbnail"]
+  }
+});
+
+// src/ContentResource/WebPageCreator/index.tsx
+var import_creator_api23 = require("@manifest-editor/creator-api");
+
+// ../ui/icons/LinkIcon.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function LinkIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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
+var import_components25 = require("@manifest-editor/components");
+var import_editors11 = require("@manifest-editor/editors");
+var import_react12 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 async function createWebPage(data, ctx) {
   return ctx.embed({
     id: data.url,
@@ -1997,7 +2475,7 @@ async function createWebPage(data, ctx) {
   });
 }
 function CreateWebPageForm(props) {
-  const [label, setLabel] = (0, import_react10.useState)({ en: [""] });
+  const [label, setLabel] = (0, import_react12.useState)({ en: [""] });
   const onSubmit = (e) => {
     e.preventDefault();
     const data = new FormData(e.target);
@@ -2006,9 +2484,9 @@ function CreateWebPageForm(props) {
       props.runCreate({ url: formData.url, label });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_editors10.LanguageFieldEditor,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      import_editors11.LanguageFieldEditor,
       {
         focusId: "label",
         label: "Label",
@@ -2016,52 +2494,48 @@ function CreateWebPageForm(props) {
         onSave: (e) => setLabel(e.toInternationalString())
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_editors10.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_editors10.InputLabel, { htmlFor: "id", children: "Link" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_editors10.Input, { id: "url", name: "url", defaultValue: "" })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_editors11.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editors11.InputLabel, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_editors11.Input, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { type: "submit", children: "Create link" })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components25.ActionButton, { primary: true, large: true, type: "submit", children: "Create link" })
   ] }) });
 }
 
-// ../ui/icons/LinkIcon.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function LinkIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var webPageCreator = {
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var webPageCreator = (0, import_creator_api23.defineCreator)({
   id: "@manifest-editor/web-page-creator",
   create: createWebPage,
   label: "Web page",
   summary: "Add link to an external web page",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LinkIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LinkIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreateWebPageForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CreateWebPageForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["label", "format"],
   supports: {
     parentFields: ["seeAlso", "rendering", "homepage"]
   }
-};
+});
 
 // src/ContentResource/YouTubeCreator/index.tsx
-var import_components13 = require("@manifest-editor/components");
+var import_components27 = require("@manifest-editor/components");
+var import_creator_api24 = require("@manifest-editor/creator-api");
 
 // src/ContentResource/YouTubeCreator/create-youtube-body.tsx
-var import_editors11 = require("@manifest-editor/editors");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_components26 = require("@manifest-editor/components");
+var import_editors12 = require("@manifest-editor/editors");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var ytRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
 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({
@@ -2131,27 +2605,27 @@ function YouTubeForm(props) {
       props.runCreate({ youtubeUrl: formData.youtubeUrl });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_editors11.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_editors11.InputLabel, { htmlFor: "id", children: "Link to YouTube" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_editors11.Input, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_editors12.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_editors12.InputLabel, { htmlFor: "id", children: "Link to YouTube" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_editors12.Input, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_components26.ActionButton, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
 // src/ContentResource/YouTubeCreator/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var youTubeBodyCreator = {
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var youTubeBodyCreator = (0, import_creator_api24.defineCreator)({
   id: "@manifest-editor/youtube",
   create: createYoutubeBody,
   label: "YouTube",
   summary: "Embed YouTube",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components13.YouTubeIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_components27.YouTubeIcon, {}),
   resourceType: "ContentResource",
   additionalTypes: ["Canvas", "Annotation"],
   resourceFields: ["id", "type", "service"],
-  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(YouTubeForm, { ...ctx }),
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(YouTubeForm, { ...ctx }),
   supports: {
     parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
     parentFieldMap: {
@@ -2163,38 +2637,53 @@ var youTubeBodyCreator = {
   staticFields: {
     type: "Video"
   }
-};
+});
+
+// src/Manifest/ManifestBrowserCreator/index.tsx
+var import_components28 = require("@manifest-editor/components");
+var import_creator_api25 = require("@manifest-editor/creator-api");
 
 // src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
-var import_helpers4 = require("@iiif/helpers");
-var import_react11 = require("react");
+var import_helpers7 = require("@iiif/helpers");
+var import_react14 = require("react");
 async function createFromManifestBrowserOutput(data, ctx) {
   const targetType = ctx.options.targetType;
   if (Array.isArray(data.output)) {
     throw new Error("Multiple items not yet supported");
   }
-  const contentState = (0, import_helpers4.normaliseContentState)(
-    typeof data.output === "string" ? (0, import_helpers4.parseContentState)(data.output) : data.output
+  const contentState = (0, import_helpers7.normaliseContentState)(
+    typeof data.output === "string" ? (0, import_helpers7.parseContentState)(data.output) : data.output
   );
   const target = contentState.target[0];
   const previewVault = ctx.getPreviewVault();
+  const thumbnails = (0, import_helpers7.createThumbnailHelper)(previewVault);
   if (!target) {
     throw new Error("No target found in content state");
   }
   if (targetType === "Manifest") {
     const manifestId = target.source.id;
     invariant(manifestId, "Could not find Manifest ID");
-    const manifest = await previewVault.get(manifestId);
+    const manifest = await previewVault.loadManifest(manifestId);
+    const thumbnail = await thumbnails.getBestThumbnailAtSize(manifest, { width: 256, height: 256 }, false);
+    invariant(manifest, "Manifest not found");
     return ctx.embed({
       id: target.source.id,
       type: "Manifest",
-      label: manifest.label
+      label: manifest.label,
+      summary: manifest.summary,
+      thumbnail: thumbnail?.best ? [
+        {
+          id: thumbnail.best.id,
+          type: "Image"
+        }
+      ] : void 0
     });
   }
   if (targetType === "Collection") {
     const collectionId = target.source.id;
     invariant(collectionId, "Could not find Manifest ID");
-    const collection = await previewVault.get(collectionId);
+    const collection = await previewVault.loadManifest(collectionId);
+    invariant(collection, "Collection not found");
     return ctx.embed({
       id: target.source.id,
       type: "Collection",
@@ -2203,20 +2692,19 @@ async function createFromManifestBrowserOutput(data, ctx) {
   }
   throw new Error("Not yet supported.");
 }
-var ManifestBrowserCreatorForm2 = (0, import_react11.lazy)(() => Promise.resolve().then(() => (init_manifest_browser_form_lazy(), manifest_browser_form_lazy_exports)));
+var ManifestBrowserCreatorForm2 = (0, import_react14.lazy)(() => Promise.resolve().then(() => (init_manifest_browser_form_lazy(), manifest_browser_form_lazy_exports)));
 
 // src/Manifest/ManifestBrowserCreator/index.tsx
 init_manifest_browser_form_lazy();
-var import_components14 = require("@manifest-editor/components");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var manifestBrowserCreator = {
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var manifestBrowserCreator = (0, import_creator_api25.defineCreator)({
   id: "@manifest-editor/manifest-browser-creator",
   create: createFromManifestBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components14.IIIFBrowserIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_components28.IIIFBrowserIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ManifestBrowserCreatorForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ManifestBrowserCreatorForm, { ...ctx });
   },
   resourceType: "Manifest",
   resourceFields: ["id", "label"],
@@ -2229,7 +2717,7 @@ var manifestBrowserCreator = {
   },
   sideEffects: [],
   staticFields: {}
-};
+});
 
 // src/index.ts
 var allCreators = [
@@ -2250,5 +2738,8 @@ var allCreators = [
   emptyAnnotationPage,
   noBodyAnnotation,
   internalCanvas,
-  captionedImageAnnotation
+  captionedImageAnnotation,
+  imageUrlListCreator,
+  imageUrlListAnnotation,
+  thumbnailCreator
 ];