@manifest-editor/creators 1.3.1 → 1.4.0

package/dist/index.js

@@ -1,24 +1,15 @@
 import {
   ManifestBrowserCreatorForm
-} from "./chunk-KLSWX2QF.js";
+} from "./chunk-S3JO5Y3Z.js";
 
 // src/Annotation/AudioAnnotation/index.tsx
 import { AudioIcon } from "@manifest-editor/components";
+import { defineCreator } from "@manifest-editor/creator-api";
 
 // src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
-
-// ../ui/atoms/PaddedSidebarContainer.tsx
-import styled from "styled-components";
-var PaddedSidebarContainer = styled.div`
-  padding: 0 0.7em;
-  margin: 0.7em 0;
-  flex: 1;
-  overflow: visible;
-`;
-
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-import { ErrorMessage } from "@manifest-editor/components";
+import { getValue } from "@iiif/helpers";
+import { ActionButton, ErrorMessage } from "@manifest-editor/components";
+import { FormFieldWrapper, Input, InputContainer, InputLabel, LanguageFieldEditor } from "@manifest-editor/editors";
 
 // ../ui/ui/MediaControls/MediaControls.tsx
 import { formatTime, useMediaActions, useMediaElements, useMediaState } from "react-iiif-vault";
@@ -71,14 +62,14 @@ var VolumeOffIcon = ({ title, ...props }) => /* @__PURE__ */ jsxs("svg", { ...pr
 ] });
 
 // ../ui/ui/MediaControls/MediaControls.styles.ts
-import styled2, { css } from "styled-components";
-var AudioPlayerContainer = styled2.div`
+import styled, { css } from "styled-components";
+var AudioPlayerContainer = styled.div`
   background: #ededed; // Not in variable.
   display: flex;
   padding: 0.5em;
   align-items: center;
 `;
-var BaseButton = styled2.button`
+var BaseButton = styled.button`
   cursor: pointer;
   padding: 0.75em 1.5em;
   font-size: 0.938em;
@@ -90,7 +81,7 @@ var BaseButton = styled2.button`
   vertical-align: top;
   white-space: nowrap;
 `;
-var PlayButton = styled2(BaseButton)`
+var PlayButton = styled(BaseButton)`
   width: 2em;
   height: 2em;
   overflow: hidden;
@@ -105,19 +96,19 @@ var PlayButton = styled2(BaseButton)`
     color: #999;
   }
 `;
-var TimeDisplay = styled2.div`
+var TimeDisplay = styled.div`
   margin: 0 1em;
   font-size: 0.85em;
   color: #000;
 `;
-var ProgressContainer = styled2.div`
+var ProgressContainer = styled.div`
   flex: 1 1 0px;
   height: 6px;
   display: flex;
   position: relative;
   padding: 15px 0;
 `;
-var ProgressCurrent = styled2.div`
+var ProgressCurrent = styled.div`
   background: #d85680;
   height: 6px;
   pointer-events: none;
@@ -127,7 +118,7 @@ var ProgressCurrent = styled2.div`
   border-radius: 3px;
   transition: width 200ms;
 `;
-var ProgressBackground = styled2.div`
+var ProgressBackground = styled.div`
   position: absolute;
   top: 13px;
   left: 0;
@@ -137,7 +128,7 @@ var ProgressBackground = styled2.div`
   pointer-events: none;
   background: #fff;
 `;
-var SoundButton = styled2(BaseButton)`
+var SoundButton = styled(BaseButton)`
   width: 2em;
   height: 2em;
   overflow: hidden;
@@ -147,11 +138,11 @@ var SoundButton = styled2(BaseButton)`
   padding: 0;
   margin: 0;
 `;
-var SoundContainer = styled2.div`
+var SoundContainer = styled.div`
   display: flex;
   align-items: center;
 `;
-var VolumeContainer = styled2.div`
+var VolumeContainer = styled.div`
   width: 0;
   overflow: hidden;
   transition: width 500ms;
@@ -161,7 +152,7 @@ var VolumeContainer = styled2.div`
       width: 150px;
     `}
 `;
-var VolumeSlider = styled2.input.attrs({ type: "range" })`
+var VolumeSlider = styled.input.attrs({ type: "range" })`
   width: 120px;
   margin: 0 15px;
 `;
@@ -169,24 +160,35 @@ var VolumeSlider = styled2.input.attrs({ type: "range" })`
 // ../ui/madoc/components/icons/Spinner.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Spinner(props) {
-  return /* @__PURE__ */ jsx2("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ jsxs2("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ jsx2("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ jsx2("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx2(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 18 18",
-        to: "360 18 18",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 42 42",
+      xmlns: "http://www.w3.org/2000/svg",
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsxs2("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+        /* @__PURE__ */ jsx2("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+        /* @__PURE__ */ jsx2("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx2(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 18 18",
+            to: "360 18 18",
+            dur: "1s",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ] })
+    }
+  );
 }
 
 // ../ui/atoms/VisuallHidden/VisuallHidden.tsx
-import styled3, { css as css2 } from "styled-components";
+import styled2, { css as css2 } from "styled-components";
 var visuallyHidden = css2`
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
@@ -197,7 +199,7 @@ var visuallyHidden = css2`
   padding: 0;
   position: absolute;
 `;
-var VisuallyHiddenLabel = styled3.label`
+var VisuallyHiddenLabel = styled2.label`
   ${visuallyHidden}
 `;
 
@@ -289,99 +291,18 @@ function MediaControls(props) {
   ] });
 }
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-import { CanvasPanel } from "react-iiif-vault";
-import { getValue } from "@iiif/helpers";
-import {
-  Input,
-  InputContainer,
-  InputLabel,
-  LanguageFieldEditor,
-  FormFieldWrapper
-} from "@manifest-editor/editors";
-
-// ../ui/atoms/Button.tsx
-import styled4 from "styled-components";
-var ButtonReset = styled4.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  cursor: pointer;
-  &:hover {
-    color: inherit;
-  }
-`;
-var Button = styled4.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 = styled4(Button)`
-  padding: 0.25em ${(props) => props.theme.padding.xs || "0.4em"};
-  height: unset;
-  background: none;
-`;
-var SecondaryButton = styled4(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 = styled4(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 = styled4.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
+import styled3 from "styled-components";
+var PaddedSidebarContainer = styled3.div`
+  padding: 0 0.7em;
+  margin: 0.7em 0;
+  flex: 1;
+  overflow: visible;
 `;
 
 // src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { CanvasPanel } from "react-iiif-vault";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 async function createAudioAnnotation(data, ctx) {
   const annotation = {
@@ -389,7 +310,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",
@@ -455,17 +376,9 @@ function CreateAudioAnnotationForm(props) {
   }, [url]);
   return /* @__PURE__ */ jsxs4(PaddedSidebarContainer, { children: [
     error ? /* @__PURE__ */ jsx4(ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ jsxs4(InputContainer, { children: [
+    /* @__PURE__ */ jsxs4(InputContainer, { $wide: true, children: [
       /* @__PURE__ */ jsx4(InputLabel, { htmlFor: "audio-url", children: "URL" }),
-      /* @__PURE__ */ jsx4(
-        Input,
-        {
-          type: "text",
-          id: "audio-url",
-          value: url,
-          onChange: (e) => setUrl(e.target.value)
-        }
-      )
+      /* @__PURE__ */ jsx4(Input, { type: "text", id: "audio-url", value: url, onChange: (e) => setUrl(e.target.value) })
     ] }),
     url && !error ? /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
       LanguageFieldEditor,
@@ -476,42 +389,27 @@ function CreateAudioAnnotationForm(props) {
         fields: label,
         onSave: (e) => setLabel(e.toInternationalString())
       },
-      url + "__" + duration
+      `${url}__${duration}`
     ) }) : null,
-    url && !error ? /* @__PURE__ */ jsx4(
-      CanvasPanel.AudioHTML,
+    url && !error ? /* @__PURE__ */ jsx4(CanvasPanel.AudioHTML, { media: { url, duration, type: "Sound" }, children: /* @__PURE__ */ jsx4(
+      MediaControls,
       {
-        media: { url, duration, type: "Sound" },
-        children: /* @__PURE__ */ jsx4(
-          MediaControls,
-          {
-            onError: (error2) => setError(error2),
-            onDuration: (duration2) => setDuration(duration2)
-          },
-          url + "__" + duration
-        )
+        onError: (error2) => setError(error2),
+        onDuration: (duration2) => setDuration(~~duration2)
       },
-      url + "__" + duration
-    ) : null,
+      `${url}__${duration}`
+    ) }, `${url}__${duration}`) : null,
     duration && !error ? /* @__PURE__ */ jsxs4(FormFieldWrapper, { children: [
       /* @__PURE__ */ jsx4(InputLabel, { htmlFor: "duration", children: "Duration" }),
-      /* @__PURE__ */ jsx4(
-        Input,
-        {
-          type: "number",
-          id: "duration",
-          value: duration,
-          onChange: (e) => setDuration(e.target.valueAsNumber)
-        }
-      )
+      /* @__PURE__ */ jsx4(Input, { type: "number", id: "duration", value: duration, onChange: (e) => setDuration(e.target.valueAsNumber) })
     ] }) : null,
-    url && !error && /* @__PURE__ */ jsx4(Button, { onClick: onSubmit, children: "Add audio" })
+    /* @__PURE__ */ jsx4(ActionButton, { primary: true, large: true, type: "button", onPress: onSubmit, isDisabled: !url || !!error, children: "Add audio" })
   ] });
 }
 
 // src/Annotation/AudioAnnotation/index.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var audioAnnotation = {
+var audioAnnotation = defineCreator({
   id: "@manifest-editor/audio-annotation",
   create: createAudioAnnotation,
   label: "Audio",
@@ -531,18 +429,15 @@ var audioAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 
 // src/Annotation/CaptionedImageAnnotation/index.tsx
 import { AddImageIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator2 } from "@manifest-editor/creator-api";
 
 // src/Annotation/CaptionedImageAnnotation/create-captioned-image-annotation.tsx
-import {
-  Input as Input2,
-  InputContainer as InputContainer2,
-  InputLabel as InputLabel2,
-  LanguageFieldEditor as LanguageFieldEditor2
-} from "@manifest-editor/editors";
+import { ActionButton as ActionButton2 } from "@manifest-editor/components";
+import { Input as Input2, InputContainer as InputContainer2, InputLabel as InputLabel2, LanguageFieldEditor as LanguageFieldEditor2 } from "@manifest-editor/editors";
 import { useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 async function createCaptionedImageAnnotation(data, ctx) {
@@ -644,13 +539,13 @@ function CreateCaptionedImageAnnotation(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ jsx6(ActionButton2, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
 // src/Annotation/CaptionedImageAnnotation/index.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-var captionedImageAnnotation = {
+var captionedImageAnnotation = defineCreator2({
   id: "@manifest-editor/captioned-image-annotation",
   create: createCaptionedImageAnnotation,
   label: "Captioned image",
@@ -670,18 +565,17 @@ var captionedImageAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 
 // src/Annotation/HTMLAnnotation/index.tsx
-import { HTMLIcon as HTMLIcon2 } from "@manifest-editor/components";
+import { HTMLIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator3 } from "@manifest-editor/creator-api";
 
 // src/Annotation/HTMLAnnotation/create-html-annotation.tsx
+import { getValue as getValue2 } from "@iiif/helpers";
+import { ActionButton as ActionButton3 } from "@manifest-editor/components";
+import { LanguageFieldEditor as LanguageFieldEditor3 } from "@manifest-editor/editors";
 import { useState as useState4 } from "react";
-import {
-  InputContainer as InputContainer3,
-  InputLabel as InputLabel3,
-  LanguageFieldEditor as LanguageFieldEditor3
-} from "@manifest-editor/editors";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 async function createHtmlAnnotation(data, ctx) {
   const annotation = {
@@ -746,36 +640,34 @@ async function createHtmlAnnotation(data, ctx) {
 }
 function CreateHTMLAnnotation(props) {
   const [body, setBody] = useState4({ en: [""] });
+  const isEmpty = getValue2(body).trim() === "";
   const onSubmit = () => {
     props.runCreate({
       body
     });
   };
   return /* @__PURE__ */ jsxs6(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsxs6(InputContainer3, { children: [
-      /* @__PURE__ */ jsx8(InputLabel3, { children: "HTML Body" }),
-      /* @__PURE__ */ jsx8(
-        LanguageFieldEditor3,
-        {
-          focusId: "html-content",
-          label: "HTML Content",
-          fields: body,
-          onSave: (e) => setBody(e.toInternationalString())
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx8(Button, { onClick: () => onSubmit(), children: "Create" })
+    /* @__PURE__ */ jsx8(
+      LanguageFieldEditor3,
+      {
+        focusId: "html-content",
+        label: "HTML Content",
+        fields: body,
+        onSave: (e) => setBody(e.toInternationalString())
+      }
+    ),
+    /* @__PURE__ */ jsx8(ActionButton3, { primary: true, large: true, type: "button", onPress: onSubmit, isDisabled: isEmpty, children: "Create" })
   ] });
 }
 
 // src/Annotation/HTMLAnnotation/index.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var htmlAnnotation = {
+var htmlAnnotation = defineCreator3({
   id: "@manifest-editor/html-annotation",
   create: createHtmlAnnotation,
   label: "HTML",
   summary: "HTML annotation",
-  icon: /* @__PURE__ */ jsx9(HTMLIcon2, {}),
+  icon: /* @__PURE__ */ jsx9(HTMLIcon, {}),
   render(ctx) {
     return /* @__PURE__ */ jsx9(CreateHTMLAnnotation, { ...ctx });
   },
@@ -790,10 +682,11 @@ var htmlAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 
 // src/Annotation/ImageServiceAnnotation/index.tsx
 import { IIIFLogo } from "@manifest-editor/components";
+import { defineCreator as defineCreator4 } from "@manifest-editor/creator-api";
 
 // src/side-effects/reposition-multiple-images.ts
 import { isImageService } from "@iiif/parser/image-3";
@@ -981,16 +874,33 @@ var resizeToFitService = {
   }
 };
 
+// src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
+import {
+  creatorHelper
+} from "@manifest-editor/creator-api";
+
 // src/ContentResource/ImageServiceCreator/create-image-service.tsx
 import {
-  imageServiceRequestToString,
+  canonicalServiceUrl,
   createImageServiceRequest,
-  canonicalServiceUrl
+  imageServiceRequestToString,
+  parseImageServiceRequest
 } from "@iiif/parser/image-3";
-import { InputContainer as InputContainer4, InputLabel as InputLabel4, Input as Input3 } from "@manifest-editor/editors";
+import { ActionButton as ActionButton4 } from "@manifest-editor/components";
+import { Input as Input3, InputContainer as InputContainer3, InputLabel as InputLabel3 } from "@manifest-editor/editors";
+import { useState as useState5 } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { ImageService as ImageServiceComponent } from "react-iiif-vault";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 async function createImageServer(data, ctx) {
-  const request = createImageServiceRequest(data.service);
+  const service = { ...data.service };
+  if (service["@id"]) {
+    service.id = service["@id"];
+  }
+  if (service["@type"]) {
+    service.type = service["@type"];
+  }
+  const request = createImageServiceRequest(service);
   const imageId = imageServiceRequestToString({
     identifier: request.identifier,
     server: request.server,
@@ -1015,37 +925,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") ? imageServiceRequestToString({
+    ...parseImageServiceRequest(url),
+    type: "info"
+  }) : canonicalServiceUrl(url);
+}
 function CreateImageServerForm(props) {
+  const [url, setUrl] = useState5("");
   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 = 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__ */ jsx10(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs7("form", { onSubmit, children: [
-    /* @__PURE__ */ jsxs7(InputContainer4, { $wide: true, children: [
-      /* @__PURE__ */ jsx10(InputLabel4, { htmlFor: "id", children: "Link to image service" }),
-      /* @__PURE__ */ jsx10(Input3, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ jsx10(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ jsx10("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ jsxs7(InputContainer3, { $wide: true, children: [
+      /* @__PURE__ */ jsx10(InputLabel3, { htmlFor: "id", children: "Link to image service" }),
+      /* @__PURE__ */ jsx10(
+        Input3,
+        {
+          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__ */ jsx10("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__ */ jsx10(ErrorBoundary, { fallbackRender: () => /* @__PURE__ */ jsx10("div", { children: "Invalid service" }), children: /* @__PURE__ */ jsx10(
+      ImageServiceComponent,
+      {
+        src: url,
+        fluid: true,
+        errorFallback: () => /* @__PURE__ */ jsx10("div", { children: "Invalid service" }),
+        background: "rgb(229,231,235)",
+        className: "h-full w-full",
+        containerProps: { className: "w-full h-full z-10" }
+      }
+    ) }) : /* @__PURE__ */ jsx10("div", { className: "text-grey-600", children: "Preview" }) }),
+    /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10(ActionButton4, { primary: true, large: true, type: "submit", isDisabled: !url, children: "Create" }) })
   ] }) });
 }
 
@@ -1057,13 +994,10 @@ async function createImageServiceAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const resource = await ctx.create(
-    "@manifest-editor/image-service-creator",
-    data,
-    {
-      parent: { resource: annotation, property: "body" }
-    }
-  );
+  const createImage = creatorHelper(ctx, "Annotation", "body", "@manifest-editor/image-service-creator");
+  const resource = await createImage(data, {
+    parent: { resource: annotation, property: "body" }
+  });
   if (targetType === "Annotation") {
     return {
       ...annotation,
@@ -1092,12 +1026,21 @@ async function createImageServiceAnnotation(data, ctx) {
       type: "AnnotationPage",
       items: [annotationResource]
     });
+    let thumbnail = void 0;
+    if (data.service?.sizes) {
+      const createThumbnail2 = 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]
     });
   }
@@ -1108,7 +1051,7 @@ function CreateImageServiceAnnotationForm(props) {
 
 // src/Annotation/ImageServiceAnnotation/index.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-var imageServiceAnnotation = {
+var imageServiceAnnotation = defineCreator4({
   id: "@manifest-editor/image-service-annotation",
   create: createImageServiceAnnotation,
   label: "IIIF Image",
@@ -1126,22 +1069,25 @@ var imageServiceAnnotation = {
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [
-    resizeToFitService,
-    resizeResourceToEmptyCanvas,
-    repositionMultipleImages
-  ],
+  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
   staticFields: {
     type: "Annotation"
   }
-};
+});
 
 // src/Annotation/ImageUrlAnnotation/index.tsx
 import { AddImageIcon as AddImageIcon2 } from "@manifest-editor/components";
+import { defineCreator as defineCreator5 } from "@manifest-editor/creator-api";
+
+// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
+import {
+  creatorHelper as creatorHelper2
+} from "@manifest-editor/creator-api";
 
 // src/ContentResource/ImageUrlCreator/create-image-url.tsx
-import { InputContainer as InputContainer5, InputLabel as InputLabel5, Input as Input4 } from "@manifest-editor/editors";
-import { getImageDimensions, getFormat } from "@manifest-editor/shell";
+import { ActionButton as ActionButton5 } from "@manifest-editor/components";
+import { Input as Input4, InputContainer as InputContainer4, InputLabel as InputLabel4 } from "@manifest-editor/editors";
+import { getFormat, getImageDimensions } from "@manifest-editor/shell";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 async function createImageUrl(data, ctx) {
   if (!data.height || !data.width) {
@@ -1170,11 +1116,11 @@ function CreateImageUrlForm(props) {
     }
   };
   return /* @__PURE__ */ jsx13(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs8("form", { onSubmit, children: [
-    /* @__PURE__ */ jsxs8(InputContainer5, { $wide: true, children: [
-      /* @__PURE__ */ jsx13(InputLabel5, { htmlFor: "id", children: "Link to Image" }),
+    /* @__PURE__ */ jsxs8(InputContainer4, { $wide: true, children: [
+      /* @__PURE__ */ jsx13(InputLabel4, { htmlFor: "id", children: "Link to Image" }),
       /* @__PURE__ */ jsx13(Input4, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ jsx13(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ jsx13(ActionButton5, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
@@ -1186,20 +1132,17 @@ async function createImageUrlAnnotation(data, ctx) {
     type: "Annotation"
   };
   const targetType = ctx.options.targetType;
-  const resource = await ctx.create(
-    "@manifest-editor/image-url-creator",
-    data,
-    {
-      parent: { resource: annotation, property: "body" }
-    }
-  );
+  const createImage = creatorHelper2(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");
@@ -1230,6 +1173,7 @@ async function createImageUrlAnnotation(data, ctx) {
       items: [page]
     });
   }
+  throw new Error("Unsupported target type");
 }
 function CreateImageUrlAnnotationForm(props) {
   return /* @__PURE__ */ jsx14(CreateImageUrlForm, { ...props });
@@ -1237,7 +1181,7 @@ function CreateImageUrlAnnotationForm(props) {
 
 // src/Annotation/ImageUrlAnnotation/index.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-var imageUrlAnnotation = {
+var imageUrlAnnotation = defineCreator5({
   id: "@manifest-editor/image-url-annotation",
   create: createImageUrlAnnotation,
   label: "Image",
@@ -1255,25 +1199,95 @@ var imageUrlAnnotation = {
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [
-    resizeToFitService,
-    resizeResourceToEmptyCanvas,
-    repositionMultipleImages
-  ],
+  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
   staticFields: {
     type: "Annotation"
   }
-};
+});
+
+// src/Annotation/ImageUrlListAnnotation/index.tsx
+import { ImageListIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator6 } from "@manifest-editor/creator-api";
+
+// src/ContentResource/ImageUrlListCreator/create-image-url-list.tsx
+import { ActionButton as ActionButton6, Form } from "@manifest-editor/components";
+import {
+  creatorHelper as creatorHelper3
+} from "@manifest-editor/creator-api";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+async function createImageUrlList(payload, ctx) {
+  const items = [];
+  const createImage = creatorHelper3(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__ */ jsx16(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs9(Form.Form, { onSubmit, children: [
+    /* @__PURE__ */ jsxs9(Form.InputContainer, { className: "mb-4", children: [
+      /* @__PURE__ */ jsx16(Form.Label, { children: "Enter a list of URLs (one per line)" }),
+      /* @__PURE__ */ jsx16(Form.TextArea, { name: "urls", rows: "10" })
+    ] }),
+    /* @__PURE__ */ jsx16(ActionButton6, { primary: true, large: true, type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/Annotation/ImageUrlListAnnotation/create-image-url-list-annotation.tsx
+import { creatorHelper as creatorHelper4 } from "@manifest-editor/creator-api";
+async function createImageUrlListAnnotation(payload, ctx) {
+  const items = [];
+  const createAnnotation = creatorHelper4(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
+import { jsx as jsx17 } from "react/jsx-runtime";
+var imageUrlListAnnotation = defineCreator6({
+  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__ */ jsx17(ImageListIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx17(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
 import { EmptyCanvasIcon } from "@manifest-editor/components";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var noBodyAnnotation = {
+import { defineCreator as defineCreator7 } from "@manifest-editor/creator-api";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var noBodyAnnotation = defineCreator7({
   id: "@manifest-editor/no-body-annotation",
   create: createNoBodyAnnotation,
   label: "Annotation without body",
   summary: "Add an annotation that only has motivation and target",
-  icon: /* @__PURE__ */ jsx16(EmptyCanvasIcon, {}),
+  icon: /* @__PURE__ */ jsx18(EmptyCanvasIcon, {}),
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "target"],
   supports: {
@@ -1286,7 +1300,7 @@ var noBodyAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
 function createNoBodyAnnotation(data, ctx) {
   return ctx.embed({
     id: ctx.generateId("annotation"),
@@ -1299,21 +1313,16 @@ function createNoBodyAnnotation(data, ctx) {
 
 // src/Annotation/VideoAnnotation/index.tsx
 import { VideoIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator8 } from "@manifest-editor/creator-api";
 
 // src/Annotation/VideoAnnotation/create-video-annotation.tsx
-import { getValue as getValue2 } from "@iiif/helpers";
-import { ErrorMessage as ErrorMessage2 } from "@manifest-editor/components";
-import {
-  DimensionsTriplet,
-  Input as Input5,
-  InputContainer as InputContainer6,
-  InputLabel as InputLabel6,
-  LanguageFieldEditor as LanguageFieldEditor4
-} from "@manifest-editor/editors";
+import { getValue as getValue3 } from "@iiif/helpers";
+import { ActionButton as ActionButton7, ErrorMessage as ErrorMessage2 } from "@manifest-editor/components";
+import { DimensionsTriplet, Input as Input5, InputContainer as InputContainer5, InputLabel as InputLabel5, LanguageFieldEditor as LanguageFieldEditor4 } from "@manifest-editor/editors";
 
 // ../ui/ui/VideoPlayer/VideoPlayer.tsx
 import { CanvasPanel as CanvasPanel2, MediaPlayerProvider, useSimpleMediaPlayer } from "react-iiif-vault";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function VideoPlayer({
   media,
   onError,
@@ -1322,7 +1331,7 @@ function VideoPlayer({
   onDimensions
 }) {
   const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration });
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     MediaPlayerProvider,
     {
       element,
@@ -1331,7 +1340,7 @@ function VideoPlayer({
       currentTime,
       progress,
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19(
           "div",
           {
             style: {
@@ -1339,18 +1348,18 @@ function VideoPlayer({
               aspectRatio: `${media.width}/${media.height}`,
               position: "relative"
             },
-            children: /* @__PURE__ */ jsx17(CanvasPanel2.VideoHTML, { element, media, playPause: actions.playPause })
+            children: /* @__PURE__ */ jsx19(CanvasPanel2.VideoHTML, { element, media, playPause: actions.playPause })
           }
         ),
-        /* @__PURE__ */ jsx17(MediaControls, { onError, onDuration, onDimensions })
+        /* @__PURE__ */ jsx19(MediaControls, { onError, onDuration, onDimensions })
       ]
     }
   );
 }
 
 // src/Annotation/VideoAnnotation/create-video-annotation.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useState as useState6 } from "react";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 async function createVideoAnnotation(data, ctx) {
   const annotation = {
     id: ctx.generateId("annotation"),
@@ -1368,7 +1377,7 @@ async function createVideoAnnotation(data, ctx) {
   if (targetType === "Annotation") {
     return ctx.embed({
       ...annotation,
-      label: getValue2(data.label) && data.label,
+      label: getValue3(data.label) && data.label,
       motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
       body,
       target: ctx.getTarget()
@@ -1406,12 +1415,12 @@ async function createVideoAnnotation(data, ctx) {
   }
 }
 function CreateVideoAnnotationForm(props) {
-  const [url, setUrl] = useState5("");
-  const [duration, setDuration] = useState5(0);
-  const [width, setWidth] = useState5(0);
-  const [height, setHeight] = useState5(0);
-  const [error, setError] = useState5("");
-  const [label, setLabel] = useState5({ en: [""] });
+  const [url, setUrl] = useState6("");
+  const [duration, setDuration] = useState6(0);
+  const [width, setWidth] = useState6(0);
+  const [height, setHeight] = useState6(0);
+  const [error, setError] = useState6("");
+  const [label, setLabel] = useState6({ en: [""] });
   const onSubmit = () => {
     props.runCreate({
       url,
@@ -1429,21 +1438,13 @@ function CreateVideoAnnotationForm(props) {
       setLabel({ en: [labelFromUrl || ""] });
     }
   }, [url]);
-  return /* @__PURE__ */ jsxs10(PaddedSidebarContainer, { children: [
-    error ? /* @__PURE__ */ jsx18(ErrorMessage2, { children: error }) : null,
-    /* @__PURE__ */ jsxs10(InputContainer6, { children: [
-      /* @__PURE__ */ jsx18(InputLabel6, { htmlFor: "video-url", children: "URL" }),
-      /* @__PURE__ */ jsx18(
-        Input5,
-        {
-          type: "text",
-          id: "video-url",
-          value: url,
-          onChange: (e) => setUrl(e.target.value)
-        }
-      )
+  return /* @__PURE__ */ jsxs11(PaddedSidebarContainer, { children: [
+    error ? /* @__PURE__ */ jsx20(ErrorMessage2, { children: error }) : null,
+    /* @__PURE__ */ jsxs11(InputContainer5, { $wide: true, children: [
+      /* @__PURE__ */ jsx20(InputLabel5, { htmlFor: "video-url", children: "URL" }),
+      /* @__PURE__ */ jsx20(Input5, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
     ] }),
-    url && !error ? /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18(
+    url && !error ? /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(
       LanguageFieldEditor4,
       {
         containerId: "label",
@@ -1452,9 +1453,9 @@ function CreateVideoAnnotationForm(props) {
         fields: label,
         onSave: (e) => setLabel(e.toInternationalString())
       },
-      url + "__" + duration
+      `${url}__${duration}`
     ) }) : null,
-    url && !error ? /* @__PURE__ */ jsx18(
+    url && !error ? /* @__PURE__ */ jsx20("div", { className: "mb-4 bg-black", children: /* @__PURE__ */ jsx20(
       VideoPlayer,
       {
         duration,
@@ -1472,8 +1473,8 @@ function CreateVideoAnnotationForm(props) {
           setHeight(h || 0);
         }
       }
-    ) : null,
-    !error && (duration || width || height) ? /* @__PURE__ */ jsx18(InputContainer6, { $wide: true, children: /* @__PURE__ */ jsx18(
+    ) }) : null,
+    !error && (duration || width || height) ? /* @__PURE__ */ jsx20(InputContainer5, { $wide: true, children: /* @__PURE__ */ jsx20(
       DimensionsTriplet,
       {
         widthId: "width",
@@ -1487,20 +1488,20 @@ function CreateVideoAnnotationForm(props) {
         changeDuration: (v) => setDuration(v)
       }
     ) }) : null,
-    url && !error && /* @__PURE__ */ jsx18(Button, { onClick: onSubmit, children: "Add video" })
+    /* @__PURE__ */ jsx20(ActionButton7, { primary: true, large: true, type: "button", onPress: onSubmit, isDisabled: !url || !!error, children: "Add video" })
   ] });
 }
 
 // src/Annotation/VideoAnnotation/index.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var videoAnnotation = {
+import { jsx as jsx21 } from "react/jsx-runtime";
+var videoAnnotation = defineCreator8({
   id: "@manifest-editor/video-annotation",
   create: createVideoAnnotation,
   label: "Video",
   summary: "Video annotation",
-  icon: /* @__PURE__ */ jsx19(VideoIcon, {}),
+  icon: /* @__PURE__ */ jsx21(VideoIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx19(CreateVideoAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ jsx21(CreateVideoAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
@@ -1513,11 +1514,14 @@ var videoAnnotation = {
   staticFields: {
     type: "Annotation"
   }
-};
+});
+
+// src/AnnotationPage/EmptyAnnotationPage/index.tsx
+import { defineCreator as defineCreator9 } from "@manifest-editor/creator-api";
 
 // ../ui/icons/ThumbnailStripIcon.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
-var ThumbnailStripIcon = () => /* @__PURE__ */ jsx20(
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var ThumbnailStripIcon = () => /* @__PURE__ */ jsx22(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1526,16 +1530,16 @@ var ThumbnailStripIcon = () => /* @__PURE__ */ jsx20(
     width: "24px",
     fill: "#000000",
     transform: "scale(-1, 1)",
-    children: /* @__PURE__ */ jsxs11("g", { children: [
-      /* @__PURE__ */ jsx20("rect", { fill: "none", height: "24", width: "24" }),
-      /* @__PURE__ */ jsx20("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
+    children: /* @__PURE__ */ jsxs12("g", { children: [
+      /* @__PURE__ */ jsx22("rect", { fill: "none", height: "24", width: "24" }),
+      /* @__PURE__ */ jsx22("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
     ] })
   }
 );
 
 // src/AnnotationPage/EmptyAnnotationPage/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var emptyAnnotationPage = {
+import { jsx as jsx23 } from "react/jsx-runtime";
+var emptyAnnotationPage = defineCreator9({
   id: "@manifest-editor/empty-annotation-page",
   create: (data, ctx) => {
     return ctx.embed({
@@ -1547,7 +1551,7 @@ var emptyAnnotationPage = {
   },
   label: "Empty annotation page",
   summary: "AnnotationPage with nothing",
-  icon: /* @__PURE__ */ jsx21(ThumbnailStripIcon, {}),
+  icon: /* @__PURE__ */ jsx23(ThumbnailStripIcon, {}),
   resourceType: "AnnotationPage",
   resourceFields: ["id", "type", "items"],
   supports: {
@@ -1558,12 +1562,13 @@ var emptyAnnotationPage = {
       Range: ["annotations"]
     }
   }
-};
+});
 
 // src/Canvas/EmptyCanvas/index.tsx
 import { EmptyCanvasIcon as EmptyCanvasIcon2 } from "@manifest-editor/components";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var emptyCanvas = {
+import { defineCreator as defineCreator10 } from "@manifest-editor/creator-api";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var emptyCanvas = defineCreator10({
   id: "@manifest-editor/empty-canvas",
   create: (data, ctx) => {
     const canvasId = ctx.generateId("canvas");
@@ -1583,16 +1588,17 @@ var emptyCanvas = {
   },
   label: "Empty canvas",
   summary: "No content",
-  icon: /* @__PURE__ */ jsx22(EmptyCanvasIcon2, {}),
+  icon: /* @__PURE__ */ jsx24(EmptyCanvasIcon2, {}),
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label", "height", "width", "items"],
   supports: {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
+});
 
 // src/Canvas/InternalCanvas/index.tsx
+import { defineCreator as defineCreator11 } from "@manifest-editor/creator-api";
 import { IIIFExplorer } from "@manifest-editor/iiif-browser";
 import { useManifest, useVault } from "react-iiif-vault";
 
@@ -1612,26 +1618,26 @@ function invariant(condition, message) {
 }
 
 // src/Canvas/InternalCanvas/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-var internalCanvas = {
+import { jsx as jsx25 } from "react/jsx-runtime";
+var internalCanvas = defineCreator11({
   id: "@manifest-editor/internal-canvas",
   create: createInternalCanvas,
   label: "Internal canvas link",
   summary: "Canvas from the same manifest",
-  icon: /* @__PURE__ */ jsx23(ThumbnailStripIcon, {}),
+  icon: /* @__PURE__ */ jsx25(ThumbnailStripIcon, {}),
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label"],
   supports: {
     parentTypes: ["Manifest"],
     parentFields: ["start"]
   },
-  render: (ctx) => /* @__PURE__ */ jsx23(InternalCanvas, { ...ctx })
-};
+  render: (ctx) => /* @__PURE__ */ jsx25(InternalCanvas, { ...ctx })
+});
 function InternalCanvas(props) {
   const manifest = useManifest();
   const vault = useVault();
   invariant(manifest, "Manifest is not loaded");
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     IIIFExplorer,
     {
       vault,
@@ -1657,22 +1663,22 @@ async function createInternalCanvas(data, ctx) {
   return ctx.embed({ id: data.id, type: "Canvas" });
 }
 
+// src/ContentResource/HTMLBodyCreator/index.tsx
+import { defineCreator as defineCreator12 } from "@manifest-editor/creator-api";
+
 // ../ui/icons/TextFormatIcon.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
-var TextFormatIcon = (props) => /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
-  /* @__PURE__ */ jsx24("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx24("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+var TextFormatIcon = (props) => /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ jsx26("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx26("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
 ] });
 
 // src/ContentResource/HTMLBodyCreator/create-html-body.tsx
-import {
-  InputContainer as InputContainer7,
-  InputLabel as InputLabel7,
-  RichTextLanguageField
-} from "@manifest-editor/editors";
+import { ActionButton as ActionButton8 } from "@manifest-editor/components";
+import { InputContainer as InputContainer6, InputLabel as InputLabel6, RichTextLanguageField } from "@manifest-editor/editors";
 import { useConfig } from "@manifest-editor/shell";
-import { useState as useState6 } from "react";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 async function createHtmlBody(data, ctx) {
   return ctx.embed({
     id: ctx.generateId(`html/${data.language}`),
@@ -1684,18 +1690,18 @@ async function createHtmlBody(data, ctx) {
 }
 function CreateHTMLBodyForm(props) {
   const { i18n } = useConfig();
-  const [body, setBodyValue] = useState6("<p></p>");
-  const [language, setLang] = useState6(i18n.defaultLanguage);
+  const [body, setBodyValue] = useState7("<p></p>");
+  const [language, setLang] = useState7(i18n.defaultLanguage);
   const onSubmit = () => {
     props.runCreate({
       language,
       body
     });
   };
-  return /* @__PURE__ */ jsxs13(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsxs13(InputContainer7, { children: [
-      /* @__PURE__ */ jsx25(InputLabel7, { children: "HTML Body" }),
-      /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs14(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsxs14(InputContainer6, { children: [
+      /* @__PURE__ */ jsx27(InputLabel6, { children: "HTML Body" }),
+      /* @__PURE__ */ jsx27(
         RichTextLanguageField,
         {
           value: body,
@@ -1706,20 +1712,20 @@ function CreateHTMLBodyForm(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx25(Button, { onClick: () => onSubmit(), children: "Create" })
+    /* @__PURE__ */ jsx27(ActionButton8, { primary: true, large: true, type: "button", onPress: onSubmit, children: "Create" })
   ] });
 }
 
 // src/ContentResource/HTMLBodyCreator/index.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-var htmlBodyCreator = {
+import { jsx as jsx28 } from "react/jsx-runtime";
+var htmlBodyCreator = defineCreator12({
   id: "@manifest-editor/html-body-creator",
   create: createHtmlBody,
   label: "HTML Body",
   summary: "Add HTML annotation body",
-  icon: /* @__PURE__ */ jsx26(TextFormatIcon, {}),
+  icon: /* @__PURE__ */ jsx28(TextFormatIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx26(CreateHTMLBodyForm, { ...ctx });
+    return /* @__PURE__ */ jsx28(CreateHTMLBodyForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["id", "language", "type", "format", "value"],
@@ -1731,17 +1737,14 @@ var htmlBodyCreator = {
     type: "TextualBody",
     format: "text/html"
   }
-};
+});
 
 // src/ContentResource/IIIFBrowserCreator/index.tsx
 import { IIIFBrowserIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator13 } from "@manifest-editor/creator-api";
 
 // src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-import {
-  Vault,
-  normaliseContentState,
-  parseContentState
-} from "@iiif/helpers";
+import { Vault } from "@iiif/helpers";
 import { getImageServices } from "@iiif/parser/image-3";
 import { lazy } from "react";
 function croppedRegion(imageServiceId, region, size) {
@@ -1751,145 +1754,148 @@ function croppedRegion(imageServiceId, region, size) {
 }
 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 = normaliseContentState(
-    typeof data.output === "string" ? 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 = new Vault();
-  if (targetType === "Canvas" || targetType === "Annotation" || targetType === "ContentResource") {
-    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" || 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 = 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);
+  const resources = data.output;
+  const returnResources = [];
+  for (const { resource, selector, parent } of resources) {
+    const type = resource.type;
+    const previewVault = new 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(",")
-          };
-          const newBody = { ...fullAnnotation.body };
-          let thumbnailId = "";
-          if (service) {
-            const id = service.id || service["@id"] || "";
-            if (id) {
-              newBody.id = croppedRegion(id, target.selector.spatial, "max");
-              thumbnailId = croppedRegion(id, target.selector.spatial, "512,");
+        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 = 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);
             }
           }
-          fullAnnotation.body = {
-            id: ctx.generateId("SpecificResource", annotation),
-            type: "SpecificResource",
-            source: newBody,
-            selector
-          };
-          if (data.trackSize) {
-            data.trackSize({
-              width: ~~target.selector.spatial.width,
-              height: ~~target.selector.spatial.height
-            });
-          }
-          if (targetType === "ContentResource") {
-            return fullAnnotation.body;
-          }
-          if (targetType === "Canvas") {
-            const canvasId2 = ctx.generateId("Canvas", annotation);
-            fullAnnotation.target = canvasId2;
-            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,
-              thumbnail: thumbnailId ? [
+          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: thumbnailId,
-                  type: "Image",
-                  format: "image/jpeg",
-                  width: 512,
-                  height: Math.round(
-                    target.selector.spatial.height / target.selector.spatial.width * 512
-                  )
+                  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]
                 })
-              ] : void 0,
-              items: [annotationPage2]
-            });
+              );
+              continue;
+            }
+            returnResources.push(
+              ctx.embed({
+                ...fullAnnotation,
+                target: ctx.getTarget()
+              })
+            );
+            continue;
           }
-          return ctx.embed({
-            ...fullAnnotation,
-            target: ctx.getTarget()
-          });
+          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 IIIFBrowserCreatorForm = lazy(
-  () => import("./iiif-browser-form.lazy-HZ3M2DXT.js")
-);
+var IIIFBrowserCreatorForm = lazy(() => import("./iiif-browser-form.lazy-FQDZQ3UW.js"));
 
 // src/ContentResource/IIIFBrowserCreator/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var iiifBrowserCreator = {
+import { jsx as jsx29 } from "react/jsx-runtime";
+var iiifBrowserCreator = defineCreator13({
   id: "@manifest-editor/iiif-browser-creator",
   create: createFromIIIFBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ jsx27(IIIFBrowserIcon, {}),
+  icon: /* @__PURE__ */ jsx29(IIIFBrowserIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx27(IIIFBrowserCreatorForm, { ...ctx });
+    return /* @__PURE__ */ jsx29(IIIFBrowserCreatorForm, { ...ctx });
   },
   hiddenModal: true,
   tags: ["image", "image-service"],
@@ -1898,49 +1904,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
-import { jsx as jsx28 } from "react/jsx-runtime";
-var imageServiceCreator = {
+import { IIIFLogo as IIIFLogo2 } from "@manifest-editor/components";
+import { defineCreator as defineCreator14 } from "@manifest-editor/creator-api";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var imageServiceCreator = defineCreator14({
   id: "@manifest-editor/image-service-creator",
   create: createImageServer,
   label: "Image Service",
   summary: "Add an image from Image Service",
-  icon: /* @__PURE__ */ jsx28(TextFormatIcon, {}),
+  icon: /* @__PURE__ */ jsx30(IIIFLogo2, { style: { padding: 10 } }),
   render(ctx) {
-    return /* @__PURE__ */ jsx28(CreateImageServerForm, { ...ctx });
+    return /* @__PURE__ */ jsx30(CreateImageServerForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["id", "type", "height", "width", "format", "service"],
   supports: {
     parentFields: ["logo", "body", "thumbnail"]
   }
-};
+});
 
 // src/ContentResource/ImageUrlCreator/index.tsx
 import { AddImageIcon as AddImageIcon3 } from "@manifest-editor/components";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var imageUrlCreator = {
+import { defineCreator as defineCreator15 } from "@manifest-editor/creator-api";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var imageUrlCreator = defineCreator15({
   id: "@manifest-editor/image-url-creator",
   create: createImageUrl,
   label: "Image",
   summary: "Image from a URL",
-  icon: /* @__PURE__ */ jsx29(AddImageIcon3, {}),
+  icon: /* @__PURE__ */ jsx31(AddImageIcon3, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx29(CreateImageUrlForm, { ...ctx });
+    return /* @__PURE__ */ jsx31(CreateImageUrlForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["format"],
@@ -1950,17 +1956,39 @@ var imageUrlCreator = {
   staticFields: {
     type: "Image"
   }
-};
+});
+
+// src/ContentResource/ImageUrlListCreator/index.tsx
+import { ImageListIcon as ImageListIcon2 } from "@manifest-editor/components";
+import { defineCreator as defineCreator16 } from "@manifest-editor/creator-api";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var imageUrlListCreator = defineCreator16({
+  id: "@manifest-editor/image-url-list",
+  label: "Image URL List",
+  summary: "Image from a list of URLs",
+  create: createImageUrlList,
+  icon: /* @__PURE__ */ jsx32(ImageListIcon2, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx32(CreateImageUrlListForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["format"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+});
+
+// src/ContentResource/PlaintextCreator/index.tsx
+import { defineCreator as defineCreator17 } from "@manifest-editor/creator-api";
 
 // src/ContentResource/PlaintextCreator/create-plaintext.tsx
-import {
-  LanguageFieldEditor as LanguageFieldEditor5,
-  InputContainer as InputContainer8,
-  InputLabel as InputLabel8,
-  Input as Input6
-} from "@manifest-editor/editors";
-import { useState as useState7 } from "react";
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { ActionButton as ActionButton9 } from "@manifest-editor/components";
+import { Input as Input6, InputContainer as InputContainer7, InputLabel as InputLabel7, LanguageFieldEditor as LanguageFieldEditor5 } from "@manifest-editor/editors";
+import { useState as useState8 } from "react";
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 async function createPlaintext(data, ctx) {
   return ctx.embed({
     id: data.url,
@@ -1970,7 +1998,7 @@ async function createPlaintext(data, ctx) {
   });
 }
 function CreatePlaintextForm(props) {
-  const [label, setLabel] = useState7({
+  const [label, setLabel] = useState8({
     en: ["View as text"]
   });
   const onSubmit = (e) => {
@@ -1981,8 +2009,8 @@ function CreatePlaintextForm(props) {
       props.runCreate({ url: formData.url, label });
     }
   };
-  return /* @__PURE__ */ jsx30(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs14("form", { onSubmit, children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs15("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx33(
       LanguageFieldEditor5,
       {
         focusId: "label",
@@ -1991,24 +2019,24 @@ function CreatePlaintextForm(props) {
         onSave: (e) => setLabel(e.toInternationalString())
       }
     ),
-    /* @__PURE__ */ jsxs14(InputContainer8, { $wide: true, children: [
-      /* @__PURE__ */ jsx30(InputLabel8, { htmlFor: "id", children: "Link to plaintext" }),
-      /* @__PURE__ */ jsx30(Input6, { id: "url", name: "url", defaultValue: "" })
+    /* @__PURE__ */ jsxs15(InputContainer7, { $wide: true, children: [
+      /* @__PURE__ */ jsx33(InputLabel7, { htmlFor: "id", children: "Link to plaintext" }),
+      /* @__PURE__ */ jsx33(Input6, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ jsx30(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ jsx33(ActionButton9, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
 // src/ContentResource/PlaintextCreator/index.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var plaintextCreator = {
+import { jsx as jsx34 } from "react/jsx-runtime";
+var plaintextCreator = defineCreator17({
   id: "@manifest-editor/plaintext-creator",
   create: createPlaintext,
   label: "Plaintext",
   summary: "Add link to an plaintext",
-  icon: /* @__PURE__ */ jsx31(TextFormatIcon, {}),
+  icon: /* @__PURE__ */ jsx34(TextFormatIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx31(CreatePlaintextForm, { ...ctx });
+    return /* @__PURE__ */ jsx34(CreatePlaintextForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["label", "format"],
@@ -2018,26 +2046,228 @@ var plaintextCreator = {
   staticFields: {
     format: "text/plain"
   }
-};
+});
+
+// src/ContentResource/ThumbnailCreator/index.tsx
+import { ScaledImageIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator18 } from "@manifest-editor/creator-api";
+
+// src/ContentResource/ThumbnailCreator/create-thumbnail.tsx
+import { ActionButton as ActionButton10 } from "@manifest-editor/components";
+import { Input as Input7, InputContainer as InputContainer8, InputLabel as InputLabel8 } from "@manifest-editor/editors";
+import { useMemo, useState as useState9 } from "react";
+
+// src/ContentResource/ThumbnailCreator/thumbnail-helpers.ts
+import {
+  canonicalServiceUrl as canonicalServiceUrl3,
+  createImageServiceRequest as createImageServiceRequest2,
+  imageServiceRequestToString as imageServiceRequestToString2,
+  parseImageServiceRequest as parseImageServiceRequest2
+} from "@iiif/parser/image-3";
+function serviceImageAtSize(service, size) {
+  if (service["@id"]) {
+    service.id = service["@id"];
+  }
+  if (service["@type"]) {
+    service.type = service["@type"];
+  }
+  const request = createImageServiceRequest2(service);
+  return imageServiceRequestToString2({
+    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") ? imageServiceRequestToString2({
+    ...parseImageServiceRequest2(url),
+    type: "info"
+  }) : canonicalServiceUrl3(url);
+}
+
+// src/ContentResource/ThumbnailCreator/create-thumbnail.tsx
+import { jsx as jsx35, jsxs as jsxs16 } from "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] = useState9("");
+  const [service, setService] = useState9(null);
+  const [selectedSize, setSelectedSize] = useState9({ width: 0, height: 0 });
+  const previewUrl = 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__ */ jsxs16(PaddedSidebarContainer, { children: [
+      /* @__PURE__ */ jsxs16("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx35("div", { className: "mb-2", children: service["@id"] || service.id }),
+        /* @__PURE__ */ jsx35("div", { className: "flex gap-2 mb-4", children: service.sizes?.map((size) => {
+          const isSelected = size.width === selectedSize.width;
+          return /* @__PURE__ */ jsxs16(
+            ActionButton10,
+            {
+              primary: isSelected,
+              isDisabled: isSelected,
+              large: true,
+              onPress: () => setSelectedSize(size),
+              children: [
+                size.width,
+                "x",
+                size.height
+              ]
+            },
+            size.width
+          );
+        }) }),
+        previewUrl ? /* @__PURE__ */ jsx35("img", { src: previewUrl, alt: "preview of selected resource" }) : null
+      ] }),
+      /* @__PURE__ */ jsx35(
+        ActionButton10,
+        {
+          primary: true,
+          large: true,
+          isDisabled: !previewUrl,
+          onPress: () => {
+            if (!service)
+              return;
+            props.runCreate({ service, width: selectedSize.width, height: selectedSize.height });
+          },
+          children: "Add thumbnail"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx35(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs16("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx35("div", { className: "flex gap-2 items-center", children: /* @__PURE__ */ jsxs16(InputContainer8, { $wide: true, children: [
+      /* @__PURE__ */ jsx35(InputLabel8, { htmlFor: "id", children: "Link to image service" }),
+      /* @__PURE__ */ jsx35(
+        Input7,
+        {
+          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__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(ActionButton10, { primary: true, large: true, type: "submit", isDisabled: !url, children: "Select size" }) })
+  ] }) });
+}
+
+// src/ContentResource/ThumbnailCreator/index.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var thumbnailCreator = defineCreator18({
+  id: "@manifest-editor/thumbnail-image",
+  create: createThumbnail,
+  label: "Thumbnail from service",
+  summary: "Add thumbnail from an image service",
+  icon: /* @__PURE__ */ jsx36(ScaledImageIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx36(CreateThumbnailForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "type", "format"],
+  supports: {
+    parentFields: ["thumbnail"]
+  }
+});
+
+// src/ContentResource/WebPageCreator/index.tsx
+import { defineCreator as defineCreator19 } from "@manifest-editor/creator-api";
 
 // ../ui/icons/LinkIcon.tsx
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 function LinkIcon() {
-  return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
-    /* @__PURE__ */ jsx32("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ jsx32("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
+  return /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+    /* @__PURE__ */ jsx37("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx37("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
   ] });
 }
 
 // src/ContentResource/WebPageCreator/create-web-page.tsx
-import {
-  LanguageFieldEditor as LanguageFieldEditor6,
-  InputContainer as InputContainer9,
-  InputLabel as InputLabel9,
-  Input as Input7
-} from "@manifest-editor/editors";
-import { useState as useState8 } from "react";
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { ActionButton as ActionButton11 } from "@manifest-editor/components";
+import { Input as Input8, InputContainer as InputContainer9, InputLabel as InputLabel9, LanguageFieldEditor as LanguageFieldEditor6 } from "@manifest-editor/editors";
+import { useState as useState10 } from "react";
+import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
 async function createWebPage(data, ctx) {
   return ctx.embed({
     id: data.url,
@@ -2047,7 +2277,7 @@ async function createWebPage(data, ctx) {
   });
 }
 function CreateWebPageForm(props) {
-  const [label, setLabel] = useState8({ en: [""] });
+  const [label, setLabel] = useState10({ en: [""] });
   const onSubmit = (e) => {
     e.preventDefault();
     const data = new FormData(e.target);
@@ -2056,8 +2286,8 @@ function CreateWebPageForm(props) {
       props.runCreate({ url: formData.url, label });
     }
   };
-  return /* @__PURE__ */ jsx33(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs16("form", { onSubmit, children: [
-    /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx38(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs18("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx38(
       LanguageFieldEditor6,
       {
         focusId: "label",
@@ -2066,38 +2296,40 @@ function CreateWebPageForm(props) {
         onSave: (e) => setLabel(e.toInternationalString())
       }
     ),
-    /* @__PURE__ */ jsxs16(InputContainer9, { $wide: true, children: [
-      /* @__PURE__ */ jsx33(InputLabel9, { htmlFor: "id", children: "Link" }),
-      /* @__PURE__ */ jsx33(Input7, { id: "url", name: "url", defaultValue: "" })
+    /* @__PURE__ */ jsxs18(InputContainer9, { $wide: true, children: [
+      /* @__PURE__ */ jsx38(InputLabel9, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ jsx38(Input8, { id: "url", name: "url", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ jsx33(Button, { type: "submit", children: "Create link" })
+    /* @__PURE__ */ jsx38(ActionButton11, { primary: true, large: true, type: "submit", children: "Create link" })
   ] }) });
 }
 
 // src/ContentResource/WebPageCreator/index.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var webPageCreator = {
+import { jsx as jsx39 } from "react/jsx-runtime";
+var webPageCreator = defineCreator19({
   id: "@manifest-editor/web-page-creator",
   create: createWebPage,
   label: "Web page",
   summary: "Add link to an external web page",
-  icon: /* @__PURE__ */ jsx34(LinkIcon, {}),
+  icon: /* @__PURE__ */ jsx39(LinkIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx34(CreateWebPageForm, { ...ctx });
+    return /* @__PURE__ */ jsx39(CreateWebPageForm, { ...ctx });
   },
   resourceType: "ContentResource",
   resourceFields: ["label", "format"],
   supports: {
     parentFields: ["seeAlso", "rendering", "homepage"]
   }
-};
+});
 
 // src/ContentResource/YouTubeCreator/index.tsx
 import { YouTubeIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator20 } from "@manifest-editor/creator-api";
 
 // src/ContentResource/YouTubeCreator/create-youtube-body.tsx
-import { Input as Input8, InputContainer as InputContainer10, InputLabel as InputLabel10 } from "@manifest-editor/editors";
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { ActionButton as ActionButton12 } from "@manifest-editor/components";
+import { Input as Input9, InputContainer as InputContainer10, InputLabel as InputLabel10 } from "@manifest-editor/editors";
+import { jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
 var ytRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
 function getYouTubeId(url) {
   const id = (url || "").match(ytRegex);
@@ -2175,27 +2407,27 @@ function YouTubeForm(props) {
       props.runCreate({ youtubeUrl: formData.youtubeUrl });
     }
   };
-  return /* @__PURE__ */ jsx35(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs17("form", { onSubmit, children: [
-    /* @__PURE__ */ jsxs17(InputContainer10, { $wide: true, children: [
-      /* @__PURE__ */ jsx35(InputLabel10, { htmlFor: "id", children: "Link to YouTube" }),
-      /* @__PURE__ */ jsx35(Input8, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
+  return /* @__PURE__ */ jsx40(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs19("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxs19(InputContainer10, { $wide: true, children: [
+      /* @__PURE__ */ jsx40(InputLabel10, { htmlFor: "id", children: "Link to YouTube" }),
+      /* @__PURE__ */ jsx40(Input9, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
     ] }),
-    /* @__PURE__ */ jsx35(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ jsx40(ActionButton12, { primary: true, large: true, type: "submit", children: "Create" })
   ] }) });
 }
 
 // src/ContentResource/YouTubeCreator/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
-var youTubeBodyCreator = {
+import { jsx as jsx41 } from "react/jsx-runtime";
+var youTubeBodyCreator = defineCreator20({
   id: "@manifest-editor/youtube",
   create: createYoutubeBody,
   label: "YouTube",
   summary: "Embed YouTube",
-  icon: /* @__PURE__ */ jsx36(YouTubeIcon, {}),
+  icon: /* @__PURE__ */ jsx41(YouTubeIcon, {}),
   resourceType: "ContentResource",
   additionalTypes: ["Canvas", "Annotation"],
   resourceFields: ["id", "type", "service"],
-  render: (ctx) => /* @__PURE__ */ jsx36(YouTubeForm, { ...ctx }),
+  render: (ctx) => /* @__PURE__ */ jsx41(YouTubeForm, { ...ctx }),
   supports: {
     parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
     parentFieldMap: {
@@ -2207,16 +2439,14 @@ var youTubeBodyCreator = {
   staticFields: {
     type: "Video"
   }
-};
+});
 
 // src/Manifest/ManifestBrowserCreator/index.tsx
 import { IIIFBrowserIcon as IIIFBrowserIcon2 } from "@manifest-editor/components";
+import { defineCreator as defineCreator21 } from "@manifest-editor/creator-api";
 
 // src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
-import {
-  normaliseContentState as normaliseContentState2,
-  parseContentState as parseContentState2
-} from "@iiif/helpers";
+import { createThumbnailHelper, normaliseContentState as normaliseContentState2, parseContentState as parseContentState2 } from "@iiif/helpers";
 import { lazy as lazy2 } from "react";
 async function createFromManifestBrowserOutput(data, ctx) {
   const targetType = ctx.options.targetType;
@@ -2228,23 +2458,34 @@ async function createFromManifestBrowserOutput(data, ctx) {
   );
   const target = contentState.target[0];
   const previewVault = ctx.getPreviewVault();
+  const thumbnails = 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",
@@ -2253,20 +2494,18 @@ async function createFromManifestBrowserOutput(data, ctx) {
   }
   throw new Error("Not yet supported.");
 }
-var ManifestBrowserCreatorForm2 = lazy2(
-  () => import("./manifest-browser-form.lazy-MYI26AX4.js")
-);
+var ManifestBrowserCreatorForm2 = lazy2(() => import("./manifest-browser-form.lazy-HJJKFMR6.js"));
 
 // src/Manifest/ManifestBrowserCreator/index.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var manifestBrowserCreator = {
+import { jsx as jsx42 } from "react/jsx-runtime";
+var manifestBrowserCreator = defineCreator21({
   id: "@manifest-editor/manifest-browser-creator",
   create: createFromManifestBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ jsx37(IIIFBrowserIcon2, {}),
+  icon: /* @__PURE__ */ jsx42(IIIFBrowserIcon2, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx37(ManifestBrowserCreatorForm, { ...ctx });
+    return /* @__PURE__ */ jsx42(ManifestBrowserCreatorForm, { ...ctx });
   },
   resourceType: "Manifest",
   resourceFields: ["id", "label"],
@@ -2279,7 +2518,7 @@ var manifestBrowserCreator = {
   },
   sideEffects: [],
   staticFields: {}
-};
+});
 
 // src/index.ts
 var allCreators = [
@@ -2300,7 +2539,10 @@ var allCreators = [
   emptyAnnotationPage,
   noBodyAnnotation,
   internalCanvas,
-  captionedImageAnnotation
+  captionedImageAnnotation,
+  imageUrlListCreator,
+  imageUrlListAnnotation,
+  thumbnailCreator
 ];
 export {
   CreateAudioAnnotationForm,
@@ -2311,10 +2553,13 @@ export {
   CreateImageServiceAnnotationForm,
   CreateImageUrlAnnotationForm,
   CreateImageUrlForm,
+  CreateImageUrlListForm,
   CreatePlaintextForm,
+  CreateThumbnailForm,
   CreateVideoAnnotationForm,
   CreateWebPageForm,
   IIIFBrowserCreatorForm,
+  ManifestBrowserCreatorForm2 as ManifestBrowserCreatorForm,
   YouTubeForm,
   allCreators,
   audioAnnotation,
@@ -2322,14 +2567,18 @@ export {
   createAudioAnnotation,
   createCaptionedImageAnnotation,
   createFromIIIFBrowserOutput,
+  createFromManifestBrowserOutput,
   createHtmlAnnotation,
   createHtmlBody,
   createImageServer,
   createImageServiceAnnotation,
   createImageUrl,
   createImageUrlAnnotation,
+  createImageUrlList,
+  createImageUrlListAnnotation,
   createNoBodyAnnotation,
   createPlaintext,
+  createThumbnail,
   createVideoAnnotation,
   createWebPage,
   createYoutubeBody,
@@ -2343,6 +2592,8 @@ export {
   imageServiceCreator,
   imageUrlAnnotation,
   imageUrlCreator,
+  imageUrlListAnnotation,
+  imageUrlListCreator,
   internalCanvas,
   manifestBrowserCreator,
   noBodyAnnotation,