@manifest-editor/creators 1.2.0 → 1.3.1

package/dist/index.cjs

@@ -36,38 +36,60 @@ __export(iiif_browser_form_lazy_exports, {
   default: () => IIIFBrowserCreatorForm
 });
 function IIIFBrowserCreatorForm(props) {
-  const vault = (0, import_shell3.usePreviewVault)();
-  const { addHistory, clearHistory } = (0, import_shell3.usePreviewHistory)();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_shell3.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_iiif_browser.IIIFExplorer,
+  const vault = (0, import_react7.useMemo)(() => new import_helpers3.Vault(), []);
+  const output = (0, import_react7.useMemo)(() => {
+    return [
+      {
+        type: "callback",
+        label: "Select",
+        supportedTypes: [
+          "Canvas",
+          "CanvasList",
+          "CanvasRegion",
+          "ImageService",
+          "ImageServiceRegion"
+        ],
+        cb: (resource) => props.runCreate({ output: resource }),
+        format: { type: "content-state" }
+      }
+    ];
+  }, [props.runCreate]);
+  const navigationOptions = (0, import_react7.useMemo)(() => {
+    return {
+      canCropImage: true,
+      canSelectCanvas: true,
+      canSelectManifest: false,
+      canSelectCollection: false,
+      // @todo fix the output so this one works.
+      multiSelect: false
+    };
+  }, []);
+  const uiOptions = (0, import_react7.useMemo)(() => {
+    return {
+      buttonClassName: "bg-me-primary-500 text-white hover:bg-me-primary-600"
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_shell3.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_iiif_browser2.IIIFBrowser,
     {
-      window: false,
-      hideHeader: true,
-      outputTypes: ["Canvas", "CanvasList", "CanvasRegion", "ImageService", "ImageServiceRegion"],
+      debug: true,
+      ui: uiOptions,
       vault,
-      output: { type: "content-state" },
-      homepageCollection: import_shell3.HOMEPAGE_COLLECTION,
-      clearHomepageCollection: clearHistory,
-      onHistory: addHistory,
-      height: 500,
-      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_browser, import_shell3, import_jsx_runtime23;
+var import_helpers3, import_shell3, import_iiif_browser2, import_react7, import_jsx_runtime27;
 var init_iiif_browser_form_lazy = __esm({
   "src/ContentResource/IIIFBrowserCreator/iiif-browser-form.lazy.tsx"() {
     "use strict";
-    import_iiif_browser = require("@manifest-editor/iiif-browser");
+    import_helpers3 = require("@iiif/helpers");
     import_shell3 = require("@manifest-editor/shell");
-    import_jsx_runtime23 = require("react/jsx-runtime");
+    import_iiif_browser2 = require("iiif-browser");
+    import_react7 = require("react");
+    import_jsx_runtime27 = require("react/jsx-runtime");
   }
 });
 
@@ -79,7 +101,7 @@ __export(manifest_browser_form_lazy_exports, {
 function ManifestBrowserCreatorForm(props) {
   const vault = (0, import_shell4.usePreviewVault)();
   const { addHistory, clearHistory } = (0, import_shell4.usePreviewHistory)();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_shell4.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  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,
     {
       window: false,
@@ -101,23 +123,52 @@ function ManifestBrowserCreatorForm(props) {
     }
   ) }) });
 }
-var import_iiif_browser3, import_shell4, import_jsx_runtime36;
+var import_iiif_browser3, import_shell4, import_jsx_runtime38;
 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_shell4 = require("@manifest-editor/shell");
-    import_jsx_runtime36 = require("react/jsx-runtime");
+    import_jsx_runtime38 = 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,
+  CreatePlaintextForm: () => CreatePlaintextForm,
+  CreateVideoAnnotationForm: () => CreateVideoAnnotationForm,
+  CreateWebPageForm: () => CreateWebPageForm,
+  IIIFBrowserCreatorForm: () => IIIFBrowserCreatorForm2,
+  YouTubeForm: () => YouTubeForm,
   allCreators: () => allCreators,
   audioAnnotation: () => audioAnnotation,
+  captionedImageAnnotation: () => captionedImageAnnotation,
+  createAudioAnnotation: () => createAudioAnnotation,
+  createCaptionedImageAnnotation: () => createCaptionedImageAnnotation,
+  createFromIIIFBrowserOutput: () => createFromIIIFBrowserOutput,
+  createHtmlAnnotation: () => createHtmlAnnotation,
+  createHtmlBody: () => createHtmlBody,
+  createImageServer: () => createImageServer,
+  createImageServiceAnnotation: () => createImageServiceAnnotation,
+  createImageUrl: () => createImageUrl,
+  createImageUrlAnnotation: () => createImageUrlAnnotation,
+  createNoBodyAnnotation: () => createNoBodyAnnotation,
+  createPlaintext: () => createPlaintext,
+  createVideoAnnotation: () => createVideoAnnotation,
+  createWebPage: () => createWebPage,
+  createYoutubeBody: () => createYoutubeBody,
   emptyAnnotationPage: () => emptyAnnotationPage,
   emptyCanvas: () => emptyCanvas,
+  getYouTubeId: () => getYouTubeId,
   htmlAnnotation: () => htmlAnnotation,
   htmlBodyCreator: () => htmlBodyCreator,
   iiifBrowserCreator: () => iiifBrowserCreator,
@@ -129,341 +180,679 @@ __export(src_exports, {
   manifestBrowserCreator: () => manifestBrowserCreator,
   noBodyAnnotation: () => noBodyAnnotation,
   plaintextCreator: () => plaintextCreator,
+  validateYouTube: () => validateYouTube,
   videoAnnotation: () => videoAnnotation,
   webPageCreator: () => webPageCreator,
   youTubeBodyCreator: () => youTubeBodyCreator
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/Canvas/EmptyCanvas/index.tsx
-var import_components = require("@manifest-editor/components");
-var import_jsx_runtime = require("react/jsx-runtime");
-var emptyCanvas = {
-  id: "@manifest-editor/empty-canvas",
-  create: createEmptyCanvas,
-  label: "Empty canvas",
-  summary: "No content",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.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]
-  };
-}
-
-// ../ui/icons/TextFormatIcon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var TextFormatIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.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/Annotation/AudioAnnotation/index.tsx
+var import_components2 = require("@manifest-editor/components");
 
-// src/ContentResource/PlaintextCreator/create-plaintext.tsx
-var import_editors = require("@manifest-editor/editors");
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_react2 = require("react");
 
-// ../ui/atoms/Button.tsx
+// ../ui/atoms/PaddedSidebarContainer.tsx
 var import_styled_components = __toESM(require("styled-components"), 1);
-var ButtonReset = import_styled_components.default.button`
-  border: none;
-  outline: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  cursor: pointer;
-  &:hover {
-    color: inherit;
-  }
+var PaddedSidebarContainer = import_styled_components.default.div`
+  padding: 0 0.7em;
+  margin: 0.7em 0;
+  flex: 1;
+  overflow: visible;
 `;
-var Button = import_styled_components.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;
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_components = require("@manifest-editor/components");
+
+// ../ui/ui/MediaControls/MediaControls.tsx
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_react = require("react");
+
+// ../ui/ui/MediaControls/MediaControls.icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PlayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
+  props.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: props.title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 5v14l11-7z", fill: "currentColor" })
+] });
+var PauseIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
+  props.title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: props.title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+] });
+var VolumeUpIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+    }
+  )
+] });
+var VolumeDownIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"
+    }
+  )
+] });
+var VolumeOffIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"
+    }
+  )
+] });
+
+// ../ui/ui/MediaControls/MediaControls.styles.ts
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+var AudioPlayerContainer = import_styled_components2.default.div`
+  background: #ededed; // Not in variable.
   display: flex;
+  padding: 0.5em;
   align-items: center;
-  font-size: 0.85em;
-  :disabled {
-    opacity: 0.65;
-    cursor: not-allowed;
-  }
-
-  &:hover {
-    background: #eee;
-  }
 `;
-var SmallButton = (0, import_styled_components.default)(Button)`
-  padding: 0.25em ${(props) => props.theme.padding.xs || "0.4em"};
-  height: unset;
+var BaseButton = import_styled_components2.default.button`
+  cursor: pointer;
+  padding: 0.75em 1.5em;
+  font-size: 0.938em;
   background: none;
+  color: inherit;
+  border: none;
+  text-decoration: none;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
 `;
-var SecondaryButton = (0, import_styled_components.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;
+var PlayButton = (0, import_styled_components2.default)(BaseButton)`
+  width: 2em;
+  height: 2em;
+  overflow: hidden;
+  font-size: 1.1em;
+  background: #fff;
+  border-radius: 3px;
+  padding: 0;
+  margin: 0;
+  color: #000; // Not in colours
 
-    :disabled {
-      opacity: 0.65;
-      cursor: not-allowed;
-    }
+  &:disabled {
+    color: #999;
   }
 `;
-var CalltoButton = (0, import_styled_components.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;
+var TimeDisplay = import_styled_components2.default.div`
+  margin: 0 1em;
+  font-size: 0.85em;
+  color: #000;
+`;
+var ProgressContainer = import_styled_components2.default.div`
+  flex: 1 1 0px;
+  height: 6px;
   display: flex;
-  align-items: center;
-  &:hover {
-    background-color: ${(props) => props.theme.color.mainHover || "#B84C74;"};
-  }
+  position: relative;
+  padding: 15px 0;
+`;
+var ProgressCurrent = import_styled_components2.default.div`
+  background: #d85680;
+  height: 6px;
+  pointer-events: none;
+  position: absolute;
+  top: 13px;
+  left: 0;
+  border-radius: 3px;
+  transition: width 200ms;
+`;
+var ProgressBackground = import_styled_components2.default.div`
+  position: absolute;
+  top: 13px;
+  left: 0;
+  height: 6px;
+  border-radius: 3px;
+  width: 100%;
+  pointer-events: none;
+  background: #fff;
+`;
+var SoundButton = (0, import_styled_components2.default)(BaseButton)`
+  width: 2em;
+  height: 2em;
+  overflow: hidden;
+  font-size: 1.1em;
+  background: transparent;
+  border-radius: 3px;
+  padding: 0;
+  margin: 0;
 `;
-var ButtonGroup = import_styled_components.default.div`
+var SoundContainer = import_styled_components2.default.div`
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: ${(props) => props.$right ? "flex-end" : "flex-start"};
+  align-items: center;
 `;
+var VolumeContainer = import_styled_components2.default.div`
+  width: 0;
+  overflow: hidden;
+  transition: width 500ms;
+  color: #4a473f; // Not in colours
 
-// ../ui/atoms/PaddedSidebarContainer.tsx
-var import_styled_components2 = __toESM(require("styled-components"), 1);
-var PaddedSidebarContainer = import_styled_components2.default.div`
-  padding: 0 0.7em;
-  margin: 0.7em 0;
-  flex: 1;
-  overflow: visible;
+  ${(props) => props.$isOpen && import_styled_components2.css`
+      width: 150px;
+    `}
+`;
+var VolumeSlider = import_styled_components2.default.input.attrs({ type: "range" })`
+  width: 120px;
+  margin: 0 15px;
 `;
 
-// src/ContentResource/PlaintextCreator/create-plaintext.tsx
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-async function createPlaintext(data, ctx) {
-  return ctx.embed({
-    id: data.url,
-    type: "Text",
-    label: data.label,
-    format: "text/plain"
-  });
-}
-function CreatePlaintextForm(props) {
-  const [label, setLabel] = (0, import_react.useState)({ en: ["View as text"] });
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.target);
-    const formData = Object.fromEntries(data.entries());
-    if (formData.url) {
-      props.runCreate({ url: formData.url, label });
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_editors.LanguageFieldEditor,
+// ../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",
       {
-        focusId: "label",
-        label: "Label",
-        fields: label,
-        onSave: (e) => setLabel(e.toInternationalString())
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_editors.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_editors.InputLabel, { htmlFor: "id", children: "Link to plaintext" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_editors.Input, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { type: "submit", children: "Create" })
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 18 18",
+        to: "360 18 18",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ) })
   ] }) });
 }
 
-// src/ContentResource/PlaintextCreator/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var plaintextCreator = {
-  id: "@manifest-editor/plaintext-creator",
-  create: createPlaintext,
-  label: "Plaintext",
-  summary: "Add link to an plaintext",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextFormatIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CreatePlaintextForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["label", "format"],
-  supports: {
-    parentFields: ["seeAlso", "rendering", "homepage"]
-  },
-  staticFields: {
-    format: "text/plain"
-  }
-};
+// ../ui/atoms/VisuallHidden/VisuallHidden.tsx
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var visuallyHidden = import_styled_components3.css`
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+`;
+var VisuallyHiddenLabel = import_styled_components3.default.label`
+  ${visuallyHidden}
+`;
 
-// src/ContentResource/WebPageCreator/create-web-page.tsx
-var import_editors2 = require("@manifest-editor/editors");
-var import_react2 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-async function createWebPage(data, ctx) {
-  return ctx.embed({
-    id: data.url,
-    type: "Text",
-    label: data.label,
-    format: "text/html"
-  });
-}
-function CreateWebPageForm(props) {
-  const [label, setLabel] = (0, import_react2.useState)({ en: [""] });
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.target);
-    const formData = Object.fromEntries(data.entries());
-    if (formData.url) {
-      props.runCreate({ url: formData.url, label });
+// ../ui/ui/MediaControls/MediaControls.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MediaControls(props) {
+  const [isVolumeOpen, setIsVolumeOpen] = (0, import_react.useState)(false);
+  const { progress, currentTime, element } = (0, import_react_iiif_vault.useMediaElements)();
+  const { duration, isMuted, volume, isPlaying, playRequested } = (0, import_react_iiif_vault.useMediaState)();
+  const { setVolume, toggleMute, play, pause, setDurationPercent } = (0, import_react_iiif_vault.useMediaActions)();
+  const Volume = isMuted || volume === 0 ? VolumeOffIcon : volume > 50 ? VolumeUpIcon : VolumeDownIcon;
+  (0, import_react.useLayoutEffect)(() => {
+    if (element.current) {
+      const $el = element.current;
+      if ($el.error && props.onError) {
+        props.onError($el.error?.message || "Unknown error");
+        return;
+      }
+      const onError = () => {
+        if (props.onError) {
+          props.onError($el.error?.message || "Unknown error");
+        }
+      };
+      const loadedMetadata = () => {
+        if ($el.duration && props.onDuration) {
+          props.onDuration($el.duration);
+        }
+        if (props.onDimensions && $el instanceof HTMLVideoElement) {
+          props.onDimensions($el.videoWidth, $el.videoHeight);
+        }
+      };
+      $el.addEventListener("loadedmetadata", loadedMetadata);
+      $el.addEventListener("error", onError);
+      return () => {
+        $el.removeEventListener("loadedmetadata", loadedMetadata);
+        $el.removeEventListener("error", onError);
+      };
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_editors2.LanguageFieldEditor,
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(AudioPlayerContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      PlayButton,
       {
-        focusId: "label",
-        label: "Label",
-        fields: label,
-        onSave: (e) => setLabel(e.toInternationalString())
+        disabled: playRequested,
+        onClick: () => {
+          if (isPlaying) {
+            pause();
+          } else {
+            play();
+          }
+        },
+        children: playRequested ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { stroke: "#999" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PauseIcon, { title: "Pause" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlayIcon, { title: "Play" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_editors2.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_editors2.InputLabel, { htmlFor: "id", children: "Link" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_editors2.Input, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { type: "submit", children: "Create link" })
-  ] }) });
-}
-
-// ../ui/icons/LinkIcon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function LinkIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.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" })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TimeDisplay, { ref: currentTime, children: "0:00" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      ProgressContainer,
+      {
+        onClick: (e) => {
+          const { left, width } = e.currentTarget.getBoundingClientRect();
+          const percent = (e.pageX - left) / width;
+          setDurationPercent(percent);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBackground, {}),
+          duration ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressCurrent, { ref: progress }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TimeDisplay, { children: (0, import_react_iiif_vault.formatTime)(duration) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SoundContainer, { onMouseEnter: () => setIsVolumeOpen(true), onMouseLeave: () => setIsVolumeOpen(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VolumeContainer, { $isOpen: isVolumeOpen, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHiddenLabel, { htmlFor: "audio-slider", children: "Change volume" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          VolumeSlider,
+          {
+            id: "audio-slider",
+            role: "slider",
+            disabled: isMuted,
+            min: "0",
+            max: "100",
+            value: volume,
+            onChange: (e) => setVolume(Number(e.currentTarget.value))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Volume, { title: isMuted ? "Mute" : "Unmute" }) })
+    ] })
   ] });
 }
 
-// src/ContentResource/WebPageCreator/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var webPageCreator = {
-  id: "@manifest-editor/web-page-creator",
-  create: createWebPage,
-  label: "Web page",
-  summary: "Add link to an external web page",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CreateWebPageForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["label", "format"],
-  supports: {
-    parentFields: ["seeAlso", "rendering", "homepage"]
-  }
-};
+// 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");
 
-// src/ContentResource/HTMLBodyCreator/create-html-body.tsx
-var import_editors3 = require("@manifest-editor/editors");
-var import_shell = require("@manifest-editor/shell");
-var import_react3 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-async function createHtmlBody(data, ctx) {
-  return ctx.embed({
-    id: ctx.generateId(`html/${data.language}`),
-    language: data.language,
-    type: "TextualBody",
-    format: "text/html",
-    value: data.body || ""
-  });
-}
-function CreateHTMLBodyForm(props) {
-  const { i18n } = (0, import_shell.useConfig)();
-  const [body, setBodyValue] = (0, import_react3.useState)("<p></p>");
-  const [language, setLang] = (0, import_react3.useState)(i18n.defaultLanguage);
-  const onSubmit = () => {
-    props.runCreate({
-      language,
-      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.RichTextLanguageField,
-        {
-          value: body,
-          language,
-          onUpdateLanguage: (lng) => setLang(lng),
-          languages: i18n.availableLanguages,
-          onUpdate: (e) => setBodyValue(e)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
-  ] });
-}
+// ../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;
+  }
 
-// src/ContentResource/HTMLBodyCreator/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var htmlBodyCreator = {
-  id: "@manifest-editor/html-body-creator",
-  create: createHtmlBody,
-  label: "HTML Body",
-  summary: "Add HTML annotation body",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextFormatIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreateHTMLBodyForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["id", "language", "type", "format", "value"],
-  supports: {
-    parentTypes: ["Annotation"],
-    parentFields: ["body"]
-  },
-  staticFields: {
-    type: "TextualBody",
-    format: "text/html"
+  &: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"};
+`;
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+async function createAudioAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const body = await ctx.embed({
+    id: data.url,
+    type: "Sound",
+    format: "audio/mp4",
+    duration: data.duration || 0
+  });
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      label: (0, import_helpers.getValue)(data.label) && data.label,
+      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
+      body,
+      target: ctx.getTarget()
+    });
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("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" }
+      }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      duration: data.duration || 0,
+      items: [page]
+    });
+  }
+}
+function CreateAudioAnnotationForm(props) {
+  const [url, setUrl] = (0, import_react2.useState)("");
+  const [duration, setDuration] = (0, import_react2.useState)(0);
+  const [error, setError] = (0, import_react2.useState)("");
+  const [label, setLabel] = (0, import_react2.useState)({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      url,
+      duration,
+      label
+    });
+  };
+  (0, import_react2.useEffect)(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      setLabel({ en: [labelFromUrl || ""] });
+    }
+  }, [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.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)
+        }
+      )
+    ] }),
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_editors.LanguageFieldEditor,
+      {
+        containerId: "label",
+        focusId: "label_",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      },
+      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)
+          },
+          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" })
+  ] });
+}
+
+// src/Annotation/AudioAnnotation/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var audioAnnotation = {
+  id: "@manifest-editor/audio-annotation",
+  create: createAudioAnnotation,
+  label: "Audio",
+  summary: "Audio annotation",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components2.AudioIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CreateAudioAnnotationForm, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Annotation/CaptionedImageAnnotation/index.tsx
+var import_components3 = require("@manifest-editor/components");
+
+// src/Annotation/CaptionedImageAnnotation/create-captioned-image-annotation.tsx
+var import_editors2 = require("@manifest-editor/editors");
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+async function createCaptionedImageAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const languages = Object.keys(data.body);
+  const bodies = [];
+  for (const language of languages) {
+    const body = data.body[language].join("\n");
+    if (body) {
+      bodies.push(
+        await ctx.create(
+          "@manifest-editor/html-body-creator",
+          {
+            language,
+            body
+          },
+          { parent: { resource: annotation, property: "items" } }
+        )
+      );
+    }
+  }
+  const resource = await ctx.create(
+    "@manifest-editor/image-url-creator",
+    { url: data.imageUrl },
+    {
+      parent: { resource: annotation, property: "body" }
+    }
+  );
+  if (resource) {
+    bodies.push(resource);
+  }
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
+      body: bodies,
+      target: ctx.getTarget()
+    });
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: bodies,
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateCaptionedImageAnnotation(props) {
+  const [body, setBody] = (0, import_react3.useState)({ en: [""] });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    props.runCreate({
+      body,
+      imageUrl: formData.url
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("form", { onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_editors2.InputContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_editors2.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_editors2.InputLabel, { htmlFor: "id", children: "Link to Image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_editors2.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_editors2.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_editors2.InputLabel, { children: "Image Caption" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_editors2.LanguageFieldEditor,
+        {
+          focusId: "html-content",
+          label: "HTML Content",
+          fields: body,
+          onSave: (e) => setBody(e.toInternationalString())
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/Annotation/CaptionedImageAnnotation/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var captionedImageAnnotation = {
+  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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CreateCaptionedImageAnnotation, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Annotation/HTMLAnnotation/index.tsx
+var import_components4 = require("@manifest-editor/components");
 
 // src/Annotation/HTMLAnnotation/create-html-annotation.tsx
 var import_react4 = require("react");
-var import_editors4 = require("@manifest-editor/editors");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_editors3 = require("@manifest-editor/editors");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 async function createHtmlAnnotation(data, ctx) {
   const annotation = {
     id: ctx.generateId("annotation"),
@@ -497,12 +886,18 @@ async function createHtmlAnnotation(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: bodies,
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -526,11 +921,11 @@ function CreateHTMLAnnotation(props) {
       body
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_editors4.InputContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_editors4.InputLabel, { children: "HTML Body" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_editors4.LanguageFieldEditor,
+  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",
@@ -539,21 +934,20 @@ function CreateHTMLAnnotation(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
   ] });
 }
 
 // src/Annotation/HTMLAnnotation/index.tsx
-var import_components2 = require("@manifest-editor/components");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var htmlAnnotation = {
   id: "@manifest-editor/html-annotation",
   create: createHtmlAnnotation,
   label: "HTML",
   summary: "HTML annotation",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components2.HTMLIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components4.HTMLIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CreateHTMLAnnotation, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreateHTMLAnnotation, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
@@ -568,227 +962,202 @@ var htmlAnnotation = {
   }
 };
 
-// ../ui/icons/ThumbnailStripIcon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var ThumbnailStripIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "#000000",
-    transform: "scale(-1, 1)",
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { fill: "none", height: "24", width: "24" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
-    ] })
-  }
-);
+// src/Annotation/ImageServiceAnnotation/index.tsx
+var import_components5 = require("@manifest-editor/components");
 
-// src/AnnotationPage/EmptyAnnotationPage/index.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var emptyAnnotationPage = {
-  id: "@manifest-editor/empty-annotation-page",
-  create: createEmptyAnnotationPage,
-  label: "Empty annotation page",
-  summary: "AnnotationPage with nothing",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThumbnailStripIcon, {}),
-  resourceType: "AnnotationPage",
-  resourceFields: ["id", "type", "items"],
-  supports: {
-    parentTypes: ["Manifest", "Canvas", "Range"],
-    parentFieldMap: {
-      Manifest: ["annotations"],
-      Canvas: ["items", "annotations"],
-      Range: ["annotations"]
+// src/side-effects/reposition-multiple-images.ts
+var import_image_3 = require("@iiif/parser/image-3");
+var import_editor_api = require("@manifest-editor/editor-api");
+var import_editors4 = require("@manifest-editor/editors");
+var repositionMultipleImages = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      if (annoPage.items.length < 2 && !canvas.behavior.includes("multi-image")) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      const body = bodies[0];
+      const selector = fullAnno.body[0]?.selector;
+      const serviceList = body.service || [];
+      const imageService = serviceList.find((s) => (0, import_image_3.isImageService)(s));
+      if (imageService) {
+        if (imageService.width && imageService.height) {
+          if (imageService.width !== body.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
+            );
+          }
+        }
+      }
+      let width = imageService?.width || body.width;
+      let height = imageService?.height || body.height;
+      if (selector) {
+        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
+          const [x, y, width_, height_] = selector.region.split(",");
+          width = Number(width_) || width;
+          height = Number(height_) || height;
+        }
+      }
+      const editor = new import_editor_api.EditorInstance({ vault, reference: result });
+      const imagePosition = (0, import_editors4.centerRectangles)(
+        canvas,
+        {
+          width,
+          height
+        },
+        0.6
+      );
+      editor.annotation.target.setPosition(imagePosition);
     }
   }
 };
-async function createEmptyAnnotationPage(data, ctx) {
-  return ctx.embed({
-    id: ctx.generateId("annotations"),
-    type: "AnnotationPage",
-    items: []
-  });
-}
-
-// src/ContentResource/YouTubeCreator/index.tsx
-var import_components3 = require("@manifest-editor/components");
 
-// src/ContentResource/YouTubeCreator/create-youtube-body.tsx
-var import_editors5 = require("@manifest-editor/editors");
-var import_jsx_runtime14 = 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;
-}
-async function createYoutubeBody(data, ctx) {
-  const id = getYouTubeId(data.youtubeUrl);
-  const body = ctx.embed({
-    id: `https://www.youtube.com/watch?v=${id}`,
-    type: "Video",
-    service: [
-      {
-        profile: "http://digirati.com/objectifier",
-        params: {
-          data: `https://www.youtube.com/embed/${id}`
+// src/side-effects/resize-resource-to-empty-canvas.ts
+var import_editor_api2 = require("@manifest-editor/editor-api");
+var resizeResourceToEmptyCanvas = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      if (annoPage.items.length > 1) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      if (bodies.length !== 1) {
+        return;
+      }
+      const body = bodies[0];
+      const selector = fullAnno.body[0]?.selector;
+      const service = (body.service || [])[0];
+      let width = service?.width || body.width;
+      let height = service?.height || body.height;
+      const duration = body.duration || service?.duration;
+      if (selector) {
+        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
+          const [x, y, width_, height_] = selector.region.split(",");
+          width = Number(width_) || width;
+          height = Number(height_) || height;
         }
-      },
-      {
-        id: `https://www.youtube.com/watch?v=${id}`,
-        profile: "https://www.youtube.com"
       }
-    ]
-  });
-  if (ctx.options.targetType === "Canvas") {
-    const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
-    const annotation = await ctx.embed({
-      id: ctx.generateId("annotation", { id: pageId, type: "AnnotationPage" }),
-      type: "Annotation",
-      motivation: "painting",
-      body: [body],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
-    });
-    const page = ctx.embed({
-      id: pageId,
-      type: "AnnotationPage",
-      items: [annotation]
-    });
-    return ctx.embed({
-      id: canvasId,
-      type: "Canvas",
-      label: data.label || { en: ["Untitled YouTube canvas"] },
-      height: data.height || 1e3,
-      width: data.width || 1e3,
-      duration: data.duration || 1,
-      items: [page]
-    });
-  }
-  if (ctx.options.targetType === "Annotation" || ctx.options.targetType === "Canvas") {
-    return ctx.embed({
-      id: ctx.generateId("annotation"),
-      type: "Annotation",
-      motivation: "painting",
-      body: [body],
-      target: ctx.getTarget()
-    });
-  }
-  return body;
-}
-function YouTubeForm(props) {
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.target);
-    const formData = Object.fromEntries(data.entries());
-    if (formData.youtubeUrl) {
-      props.runCreate({ youtubeUrl: formData.youtubeUrl });
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_editors5.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_editors5.InputLabel, { htmlFor: "id", children: "Link to YouTube" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_editors5.Input, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { type: "submit", children: "Create" })
-  ] }) });
-}
-
-// src/ContentResource/YouTubeCreator/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var youTubeBodyCreator = {
-  id: "@manifest-editor/youtube",
-  create: createYoutubeBody,
-  label: "YouTube",
-  summary: "Embed YouTube",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components3.YouTubeIcon, {}),
-  resourceType: "ContentResource",
-  additionalTypes: ["Canvas", "Annotation"],
-  resourceFields: ["id", "type", "service"],
-  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(YouTubeForm, { ...ctx }),
-  supports: {
-    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
-    parentFieldMap: {
-      Annotation: ["body"],
-      Manifest: ["items"],
-      AnnotationPage: ["items"]
+      const editor = new import_editor_api2.EditorInstance({ vault, reference: canvasRef });
+      vault.batch(() => {
+        if (typeof width !== "undefined") {
+          editor.technical.width.set(width);
+        }
+        if (typeof height !== "undefined") {
+          editor.technical.height.set(height);
+        }
+        if (typeof duration !== "undefined") {
+          editor.technical.duration.set(duration);
+        }
+      });
     }
-  },
-  staticFields: {
-    type: "Video"
   }
 };
 
-// src/ContentResource/ImageUrlCreator/create-image-url.tsx
-var import_editors6 = require("@manifest-editor/editors");
-var import_shell2 = require("@manifest-editor/shell");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-async function createImageUrl(data, ctx) {
-  if (!data.height || !data.width) {
-    const dimensions = await (0, import_shell2.getImageDimensions)(data.url);
-    if (dimensions) {
-      data.height = dimensions.height;
-      data.width = dimensions.width;
-    }
-  }
-  return ctx.embed({
-    id: data.url,
-    type: "Image",
-    format: data.format || await (0, import_shell2.getFormat)(data.url),
-    height: data.height,
-    width: data.width,
-    service: data.service ? Array.isArray(data.service) ? data.service : [data.service] : void 0
-  });
-}
-function CreateImageUrlForm(props) {
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.target);
-    const formData = Object.fromEntries(data.entries());
-    if (formData.url) {
-      props.runCreate({ url: formData.url });
+// src/side-effects/resize-to-fit-service.ts
+var import_iiif_image_api = require("@atlas-viewer/iiif-image-api");
+var resizeToFitService = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      const resourceBody = Array.isArray(fullAnno.body) ? fullAnno.body[0] : fullAnno.body;
+      if (resourceBody.type === "SpecificResource" && resourceBody.selector) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      const body = bodies[0];
+      const serviceList = body.service || [];
+      const imageService = serviceList.find((s) => (0, import_iiif_image_api.isImageService)(s));
+      if (imageService) {
+        if (imageService.width && imageService.height) {
+          if (imageService.width !== body.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
+            );
+          }
+        }
+      }
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_editors6.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_editors6.InputLabel, { htmlFor: "id", children: "Link to Image" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_editors6.Input, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { type: "submit", children: "Create" })
-  ] }) });
-}
-
-// src/ContentResource/ImageUrlCreator/index.tsx
-var import_components4 = require("@manifest-editor/components");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var imageUrlCreator = {
-  id: "@manifest-editor/image-url-creator",
-  create: createImageUrl,
-  label: "Image",
-  summary: "Image from a URL",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components4.AddImageIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreateImageUrlForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["format"],
-  supports: {
-    parentFields: ["logo", "body", "thumbnail"]
-  },
-  staticFields: {
-    type: "Image"
   }
 };
 
 // src/ContentResource/ImageServiceCreator/create-image-service.tsx
-var import_image_3 = require("@iiif/parser/image-3");
-var import_editors7 = require("@manifest-editor/editors");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_image_32 = require("@iiif/parser/image-3");
+var import_editors5 = require("@manifest-editor/editors");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 async function createImageServer(data, ctx) {
-  const request = (0, import_image_3.createImageServiceRequest)(data.service);
-  const imageId = (0, import_image_3.imageServiceRequestToString)({
+  const request = (0, import_image_32.createImageServiceRequest)(data.service);
+  const imageId = (0, import_image_32.imageServiceRequestToString)({
     identifier: request.identifier,
     server: request.server,
     scheme: request.scheme,
@@ -825,7 +1194,7 @@ function CreateImageServerForm(props) {
     const formData = Object.fromEntries(data.entries());
     const url = formData.url;
     if (url) {
-      const canon = (0, import_image_3.canonicalServiceUrl)(url);
+      const canon = (0, import_image_32.canonicalServiceUrl)(url);
       fetch(canon).then((r) => r.json()).then((service) => {
         if (service["@id"]) {
           service.id = service["@id"];
@@ -837,308 +1206,555 @@ function CreateImageServerForm(props) {
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_editors7.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.InputLabel, { htmlFor: "id", children: "Link to image service" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.Input, { id: "url", name: "url", defaultValue: "" })
+  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)(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_runtime18.jsx)(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { type: "submit", children: "Create" })
   ] }) });
 }
 
-// src/ContentResource/ImageServiceCreator/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var imageServiceCreator = {
-  id: "@manifest-editor/image-service-creator",
-  create: createImageServer,
-  label: "Image Service",
-  summary: "Add an image from Image Service",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextFormatIcon, {}),
+// src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+async function createImageServiceAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const resource = await ctx.create(
+    "@manifest-editor/image-service-creator",
+    data,
+    {
+      parent: { resource: annotation, property: "body" }
+    }
+  );
+  if (targetType === "Annotation") {
+    return {
+      ...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 annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: [resource],
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled canvas"] },
+      height: resource.resource.height || 1e3,
+      width: resource.resource.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateImageServiceAnnotationForm(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CreateImageServerForm, { ...props });
+}
+
+// src/Annotation/ImageServiceAnnotation/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var imageServiceAnnotation = {
+  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 } }),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CreateImageServerForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CreateImageServiceAnnotationForm, { ...ctx });
   },
-  resourceType: "ContentResource",
-  resourceFields: ["id", "type", "height", "width", "format", "service"],
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
   supports: {
-    parentFields: ["logo", "body", "thumbnail"]
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
   },
+  sideEffects: [
+    resizeToFitService,
+    resizeResourceToEmptyCanvas,
+    repositionMultipleImages
+  ],
   staticFields: {
-    type: "Image"
+    type: "Annotation"
   }
 };
 
-// src/side-effects/reposition-multiple-images.ts
-var import_image_32 = require("@iiif/parser/image-3");
-var import_editor_api = require("@manifest-editor/editor-api");
-var import_editors8 = require("@manifest-editor/editors");
-var repositionMultipleImages = {
-  canvasInteraction: true,
-  spatial: true,
-  async run(result, { vault, options }) {
-    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
-      const fullAnno = vault.get(result);
-      const target = fullAnno.target;
-      if (!(target && target.source?.type === "Canvas")) {
-        return;
-      }
-      const canvasRef = target.source;
-      const canvas = vault.get(canvasRef);
-      if (!canvas.items) {
-        return;
-      }
-      const annoPage = vault.get(canvas.items[0]);
-      if (!annoPage) {
-        return;
-      }
-      if (annoPage.items.length < 2) {
-        return;
-      }
-      const bodies = vault.get(fullAnno.body);
-      const body = bodies[0];
-      const selector = fullAnno.body[0]?.selector;
-      const serviceList = body.service || [];
-      const imageService = serviceList.find((s) => (0, import_image_32.isImageService)(s));
-      if (imageService) {
-        if (imageService.width && imageService.height) {
-          if (imageService.width !== body.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);
-          }
-        }
-      }
-      let width = imageService?.width || body.width;
-      let height = imageService?.height || body.height;
-      if (selector) {
-        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
-          const [x, y, width_, height_] = selector.region.split(",");
-          width = Number(width_) || width;
-          height = Number(height_) || height;
-        }
-      }
-      const editor = new import_editor_api.EditorInstance({ vault, reference: result });
-      const imagePosition = (0, import_editors8.centerRectangles)(
-        canvas,
-        {
-          width,
-          height
-        },
-        0.6
-      );
-      editor.annotation.target.setPosition(imagePosition);
+// src/Annotation/ImageUrlAnnotation/index.tsx
+var import_components6 = require("@manifest-editor/components");
+
+// src/ContentResource/ImageUrlCreator/create-image-url.tsx
+var import_editors6 = require("@manifest-editor/editors");
+var import_shell = require("@manifest-editor/shell");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+async function createImageUrl(data, ctx) {
+  if (!data.height || !data.width) {
+    const dimensions = await (0, import_shell.getImageDimensions)(data.url);
+    if (dimensions) {
+      data.height = dimensions.height;
+      data.width = dimensions.width;
     }
   }
-};
+  return ctx.embed({
+    id: data.url,
+    type: "Image",
+    format: data.format || await (0, import_shell.getFormat)(data.url),
+    height: data.height,
+    width: data.width,
+    service: data.service ? Array.isArray(data.service) ? data.service : [data.service] : void 0
+  });
+}
+function CreateImageUrlForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.url) {
+      props.runCreate({ url: formData.url });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_editors6.InputContainer, { $wide: true, children: [
+      /* @__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" })
+  ] }) });
+}
 
-// src/side-effects/resize-resource-to-empty-canvas.ts
-var import_editor_api2 = require("@manifest-editor/editor-api");
-var resizeResourceToEmptyCanvas = {
-  canvasInteraction: true,
-  spatial: true,
-  async run(result, { vault, options }) {
-    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
-      const fullAnno = vault.get(result);
-      const target = fullAnno.target;
-      if (!(target && target.source?.type === "Canvas")) {
-        return;
-      }
-      const canvasRef = target.source;
-      const canvas = vault.get(canvasRef);
-      if (!canvas.items) {
-        return;
-      }
-      const annoPage = vault.get(canvas.items[0]);
-      if (!annoPage) {
-        return;
-      }
-      if (annoPage.items.length > 1) {
-        return;
-      }
-      const bodies = vault.get(fullAnno.body);
-      if (bodies.length !== 1) {
-        return;
-      }
-      const body = bodies[0];
-      const selector = fullAnno.body[0]?.selector;
-      const service = (body.service || [])[0];
-      let width = service?.width || body.width;
-      let height = service?.height || body.height;
-      const duration = body.duration || service?.duration;
-      if (selector) {
-        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
-          const [x, y, width_, height_] = selector.region.split(",");
-          width = Number(width_) || width;
-          height = Number(height_) || height;
-        }
-      }
-      const editor = new import_editor_api2.EditorInstance({ vault, reference: canvasRef });
-      vault.batch(() => {
-        if (typeof width !== "undefined") {
-          editor.technical.width.set(width);
-        }
-        if (typeof height !== "undefined") {
-          editor.technical.height.set(height);
-        }
-        if (typeof duration !== "undefined") {
-          editor.technical.duration.set(duration);
-        }
-      });
+// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+async function createImageUrlAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const resource = await ctx.create(
+    "@manifest-editor/image-url-creator",
+    data,
+    {
+      parent: { resource: annotation, property: "body" }
     }
+  );
+  if (targetType === "Annotation") {
+    return {
+      ...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 annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: [resource],
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled canvas"] },
+      height: resource.resource.height || 1e3,
+      width: resource.resource.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateImageUrlAnnotationForm(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CreateImageUrlForm, { ...props });
+}
+
+// src/Annotation/ImageUrlAnnotation/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var imageUrlAnnotation = {
+  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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CreateImageUrlAnnotationForm, { ...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/side-effects/resize-to-fit-service.ts
-var import_iiif_image_api = require("@atlas-viewer/iiif-image-api");
-var resizeToFitService = {
-  canvasInteraction: true,
-  spatial: true,
-  async run(result, { vault, options }) {
-    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
-      const fullAnno = vault.get(result);
-      const target = fullAnno.target;
-      if (!(target && target.source?.type === "Canvas")) {
-        return;
-      }
-      const canvasRef = target.source;
-      const canvas = vault.get(canvasRef);
-      if (!canvas.items) {
-        return;
-      }
-      const annoPage = vault.get(canvas.items[0]);
-      if (!annoPage) {
-        return;
-      }
-      const resourceBody = Array.isArray(fullAnno.body) ? fullAnno.body[0] : fullAnno.body;
-      if (resourceBody.type === "SpecificResource" && resourceBody.selector) {
-        return;
-      }
-      const bodies = vault.get(fullAnno.body);
-      const body = bodies[0];
-      const serviceList = body.service || [];
-      const imageService = serviceList.find((s) => (0, import_iiif_image_api.isImageService)(s));
-      if (imageService) {
-        if (imageService.width && imageService.height) {
-          if (imageService.width !== body.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);
+// src/Annotation/NoBodyAnnotation/index.tsx
+var import_components7 = require("@manifest-editor/components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var noBodyAnnotation = {
+  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, {}),
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "target"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage"],
+    parentFields: ["items"],
+    disallowPainting: true
+  },
+  sideEffects: [],
+  staticFields: {
+    type: "Annotation"
+  }
+};
+function createNoBodyAnnotation(data, ctx) {
+  return ctx.embed({
+    id: ctx.generateId("annotation"),
+    type: "Annotation",
+    label: data?.label,
+    motivation: data.motivation || ctx.options.initialData?.motivation || "highlighting",
+    target: ctx.getTarget()
+  });
+}
+
+// src/Annotation/VideoAnnotation/index.tsx
+var import_components9 = require("@manifest-editor/components");
+
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+var import_helpers2 = require("@iiif/helpers");
+var import_components8 = require("@manifest-editor/components");
+var import_editors7 = require("@manifest-editor/editors");
+
+// ../ui/ui/VideoPlayer/VideoPlayer.tsx
+var import_react_iiif_vault3 = require("react-iiif-vault");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function VideoPlayer({
+  media,
+  onError,
+  duration,
+  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,
+    {
+      element,
+      state,
+      actions,
+      currentTime,
+      progress,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            style: {
+              maxHeight: 400,
+              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 })
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MediaControls, { onError, onDuration, onDimensions })
+      ]
+    }
+  );
+}
+
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+var import_react5 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+async function createVideoAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const body = ctx.embed({
+    id: data.url,
+    type: "Video",
+    format: "video/mp4",
+    width: data.width,
+    height: data.height,
+    duration: data.duration || 0
+  });
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      label: (0, import_helpers2.getValue)(data.label) && data.label,
+      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
+      body,
+      target: ctx.getTarget()
+    });
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("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" }
+      }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      duration: data.duration || 0,
+      width: data.width,
+      height: data.height,
+      items: [page]
+    });
+  }
+}
+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 onSubmit = () => {
+    props.runCreate({
+      url,
+      duration,
+      label,
+      width,
+      height
+    });
+  };
+  (0, import_react5.useEffect)(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      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)
         }
+      )
+    ] }),
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_editors7.LanguageFieldEditor,
+      {
+        containerId: "label",
+        focusId: "label_",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      },
+      url + "__" + duration
+    ) }) : null,
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      VideoPlayer,
+      {
+        duration,
+        onDuration: (d) => setDuration(d),
+        onError: (err) => setError(err),
+        media: {
+          url,
+          duration,
+          height,
+          width,
+          type: "Video"
+        },
+        onDimensions: (w, h) => {
+          setWidth(w || 0);
+          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)(
+      import_editors7.DimensionsTriplet,
+      {
+        widthId: "width",
+        width: width || 0,
+        changeWidth: (v) => setWidth(v),
+        heightId: "height",
+        height: height || 0,
+        changeHeight: (v) => setHeight(v),
+        durationId: "duration",
+        duration: duration || 0,
+        changeDuration: (v) => setDuration(v)
       }
-    }
-  }
-};
-
-// src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-async function createImageServiceAnnotation(data, ctx) {
-  const annotation = {
-    id: ctx.generateId("annotation"),
-    type: "Annotation"
-  };
-  const targetType = ctx.options.targetType;
-  const resource = await ctx.create("@manifest-editor/image-service-creator", data, {
-    parent: { resource: annotation, property: "body" }
-  });
-  if (targetType === "Annotation") {
-    return {
-      ...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 annotationResource = ctx.embed({
-      ...annotation,
-      motivation: "painting",
-      body: [resource],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
-    });
-    const page = ctx.embed({
-      id: pageId,
-      type: "AnnotationPage",
-      items: [annotationResource]
-    });
-    return ctx.embed({
-      id: canvasId,
-      type: "Canvas",
-      label: data.label || { en: ["Untitled canvas"] },
-      height: resource.resource.height || 1e3,
-      width: resource.resource.width || 1e3,
-      items: [page]
-    });
-  }
-}
-function CreateImageServiceAnnotationForm(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CreateImageServerForm, { ...props });
+    ) }) : null,
+    url && !error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { onClick: onSubmit, children: "Add video" })
+  ] });
 }
 
-// src/Annotation/ImageServiceAnnotation/index.tsx
-var import_components5 = require("@manifest-editor/components");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var imageServiceAnnotation = {
-  id: "@manifest-editor/image-service-annotation",
-  create: createImageServiceAnnotation,
-  label: "IIIF Image",
-  dependencies: ["@manifest-editor/image-service-creator"],
-  summary: "IIIF Image service",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components5.IIIFLogo, { style: { padding: 10 } }),
+// src/Annotation/VideoAnnotation/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var videoAnnotation = {
+  id: "@manifest-editor/video-annotation",
+  create: createVideoAnnotation,
+  label: "Video",
+  summary: "Video annotation",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components9.VideoIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CreateImageServiceAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CreateVideoAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
   additionalTypes: ["Canvas"],
   supports: {
+    initialData: true,
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
   staticFields: {
     type: "Annotation"
   }
 };
 
-// src/Annotation/NoBodyAnnotation/index.tsx
-var import_components6 = require("@manifest-editor/components");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var noBodyAnnotation = {
-  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_runtime22.jsx)(import_components6.EmptyCanvasIcon, {}),
-  resourceType: "Annotation",
-  resourceFields: ["id", "type", "motivation", "target"],
+// ../ui/icons/ThumbnailStripIcon.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ThumbnailStripIcon = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    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" })
+    ] })
+  }
+);
+
+// src/AnnotationPage/EmptyAnnotationPage/index.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var emptyAnnotationPage = {
+  id: "@manifest-editor/empty-annotation-page",
+  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, {}),
+  resourceType: "AnnotationPage",
+  resourceFields: ["id", "type", "items"],
   supports: {
-    initialData: true,
-    parentTypes: ["AnnotationPage"],
-    parentFields: ["items"],
-    disallowPainting: true
+    parentTypes: ["Manifest", "Canvas", "Range"],
+    parentFieldMap: {
+      Manifest: ["annotations"],
+      Canvas: ["items", "annotations"],
+      Range: ["annotations"]
+    }
+  }
+};
+
+// src/Canvas/EmptyCanvas/index.tsx
+var import_components10 = require("@manifest-editor/components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var emptyCanvas = {
+  id: "@manifest-editor/empty-canvas",
+  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]
+    };
   },
-  sideEffects: [],
-  staticFields: {
-    type: "Annotation"
+  label: "Empty canvas",
+  summary: "No content",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components10.EmptyCanvasIcon, {}),
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label", "height", "width", "items"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
   }
 };
-function createNoBodyAnnotation(data, ctx) {
-  return ctx.embed({
-    id: ctx.generateId("annotation"),
-    type: "Annotation",
-    label: data?.label,
-    motivation: data.motivation || ctx.options.initialData?.motivation || "highlighting",
-    target: ctx.getTarget()
-  });
-}
 
-// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-var import_helpers = require("@iiif/helpers");
-var import_react5 = require("react");
+// src/Canvas/InternalCanvas/index.tsx
+var import_iiif_browser = require("@manifest-editor/iiif-browser");
+var import_react_iiif_vault4 = require("react-iiif-vault");
 
 // ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
 var isProduction = false;
@@ -1150,51 +1766,190 @@ function invariant(condition, message) {
   if (isProduction) {
     throw new Error(prefix);
   }
-  var provided = typeof message === "function" ? message() : message;
-  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-  throw new Error(value);
-}
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+  throw new Error(value);
+}
+
+// src/Canvas/InternalCanvas/index.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var internalCanvas = {
+  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, {}),
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["start"]
+  },
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InternalCanvas, { ...ctx })
+};
+function InternalCanvas(props) {
+  const manifest = (0, import_react_iiif_vault4.useManifest)();
+  const vault = (0, import_react_iiif_vault4.useVault)();
+  invariant(manifest, "Manifest is not loaded");
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_iiif_browser.IIIFExplorer,
+    {
+      vault,
+      entry: manifest,
+      window: false,
+      hideHeader: true,
+      hideBack: true,
+      output: { type: "url" },
+      outputTargets: [
+        {
+          type: "callback",
+          label: "Select canvas",
+          cb: (url) => {
+            props.runCreate({ id: url });
+          }
+        }
+      ],
+      outputTypes: ["Canvas"]
+    }
+  );
+}
+async function createInternalCanvas(data, ctx) {
+  return ctx.embed({ id: data.id, type: "Canvas" });
+}
+
+// ../ui/icons/TextFormatIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var TextFormatIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime24.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_editors8 = require("@manifest-editor/editors");
+var import_shell2 = require("@manifest-editor/shell");
+var import_react6 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+async function createHtmlBody(data, ctx) {
+  return ctx.embed({
+    id: ctx.generateId(`html/${data.language}`),
+    language: data.language,
+    type: "TextualBody",
+    format: "text/html",
+    value: data.body || ""
+  });
+}
+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 onSubmit = () => {
+    props.runCreate({
+      language,
+      body
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_editors8.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_editors8.InputLabel, { children: "HTML Body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_editors8.RichTextLanguageField,
+        {
+          value: body,
+          language,
+          onUpdateLanguage: (lng) => setLang(lng),
+          languages: i18n.availableLanguages,
+          onUpdate: (e) => setBodyValue(e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
+}
+
+// src/ContentResource/HTMLBodyCreator/index.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var htmlBodyCreator = {
+  id: "@manifest-editor/html-body-creator",
+  create: createHtmlBody,
+  label: "HTML Body",
+  summary: "Add HTML annotation body",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreateHTMLBodyForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "language", "type", "format", "value"],
+  supports: {
+    parentTypes: ["Annotation"],
+    parentFields: ["body"]
+  },
+  staticFields: {
+    type: "TextualBody",
+    format: "text/html"
+  }
+};
+
+// src/ContentResource/IIIFBrowserCreator/index.tsx
+var import_components11 = require("@manifest-editor/components");
 
 // src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
+var import_helpers4 = require("@iiif/helpers");
+var import_image_33 = require("@iiif/parser/image-3");
+var import_react8 = 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_helpers.normaliseContentState)(
-    typeof data.output === "string" ? (0, import_helpers.parseContentState)(data.output) : data.output
+  const contentState = (0, import_helpers4.normaliseContentState)(
+    typeof data.output === "string" ? (0, import_helpers4.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") {
+  const previewVault = new import_helpers4.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");
+      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") {
+      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") {
+      if (targetType === "Annotation" || targetType === "Canvas" || targetType === "ContentResource") {
         const fullAnnotation = previewVault.toPresentation3(annotation);
-        if (fullAnnotation && fullAnnotation?.body?.service) {
+        fullAnnotation.id = ctx.generateId("Annotation");
+        let service = null;
+        const dimensions = { width: 0, height: 0 };
+        if (fullAnnotation?.body?.service) {
           const width = fullAnnotation?.body.width;
           const height = fullAnnotation?.body.height;
-          const service = Array.isArray(fullAnnotation?.body?.service) ? fullAnnotation?.body?.service[0] : fullAnnotation?.body?.service;
-          if (!service.width || !service.height) {
+          service = (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);
+          }
         }
         if (target.selector && target.selector.type === "BoxSelector") {
           const selector = {
@@ -1207,12 +1962,58 @@ async function createFromIIIFBrowserOutput(data, ctx) {
               ~~target.selector.spatial.height
             ].join(",")
           };
+          const newBody = { ...fullAnnotation.body };
+          let thumbnailId = "";
+          if (service) {
+            const id = service.id || service["@id"] || "";
+            if (id) {
+              newBody.id = croppedRegion(id, target.selector.spatial, "max");
+              thumbnailId = croppedRegion(id, target.selector.spatial, "512,");
+            }
+          }
           fullAnnotation.body = {
             id: ctx.generateId("SpecificResource", annotation),
             type: "SpecificResource",
-            source: fullAnnotation.body,
+            source: newBody,
             selector
           };
+          if (data.trackSize) {
+            data.trackSize({
+              width: ~~target.selector.spatial.width,
+              height: ~~target.selector.spatial.height
+            });
+          }
+          if (targetType === "ContentResource") {
+            return fullAnnotation.body;
+          }
+          if (targetType === "Canvas") {
+            const canvasId2 = ctx.generateId("Canvas", annotation);
+            fullAnnotation.target = canvasId2;
+            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 ? [
+                ctx.embed({
+                  id: thumbnailId,
+                  type: "Image",
+                  format: "image/jpeg",
+                  width: 512,
+                  height: Math.round(
+                    target.selector.spatial.height / target.selector.spatial.width * 512
+                  )
+                })
+              ] : void 0,
+              items: [annotationPage2]
+            });
+          }
           return ctx.embed({
             ...fullAnnotation,
             target: ctx.getTarget()
@@ -1227,20 +2028,23 @@ async function createFromIIIFBrowserOutput(data, ctx) {
   }
   throw new Error("Not yet supported.");
 }
-var IIIFBrowserCreatorForm2 = (0, import_react5.lazy)(() => Promise.resolve().then(() => (init_iiif_browser_form_lazy(), iiif_browser_form_lazy_exports)));
+var IIIFBrowserCreatorForm2 = (0, import_react8.lazy)(
+  () => Promise.resolve().then(() => (init_iiif_browser_form_lazy(), iiif_browser_form_lazy_exports))
+);
 
 // src/ContentResource/IIIFBrowserCreator/index.tsx
-var import_components7 = require("@manifest-editor/components");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var iiifBrowserCreator = {
   id: "@manifest-editor/iiif-browser-creator",
   create: createFromIIIFBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components7.IIIFBrowserIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_components11.IIIFBrowserIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IIIFBrowserCreatorForm2, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IIIFBrowserCreatorForm2, { ...ctx });
   },
+  hiddenModal: true,
+  tags: ["image", "image-service"],
   resourceType: "ContentResource",
   resourceFields: ["id", "language", "type", "format", "value"],
   additionalTypes: ["Annotation", "Canvas"],
@@ -1251,759 +2055,315 @@ var iiifBrowserCreator = {
       Manifest: ["items"],
       AnnotationPage: ["items"]
     }
-  },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
-  staticFields: {}
-};
-
-// src/Canvas/InternalCanvas/index.tsx
-var import_react_iiif_vault = require("react-iiif-vault");
-var import_iiif_browser2 = require("@manifest-editor/iiif-browser");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var internalCanvas = {
-  id: "@manifest-editor/internal-canvas",
-  create: createInternalCanvas,
-  label: "Internal canvas link",
-  summary: "Canvas from the same manifest",
-  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_runtime25.jsx)(InternalCanvas, { ...ctx })
-};
-function InternalCanvas(props) {
-  const manifest = (0, import_react_iiif_vault.useManifest)();
-  const vault = (0, import_react_iiif_vault.useVault)();
-  invariant(manifest, "Manifest is not loaded");
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_iiif_browser2.IIIFExplorer,
-    {
-      vault,
-      entry: manifest,
-      window: false,
-      hideHeader: true,
-      hideBack: true,
-      output: { type: "url" },
-      outputTargets: [
-        {
-          type: "callback",
-          label: "Select canvas",
-          cb: (url) => {
-            props.runCreate({ id: url });
-          }
-        }
-      ],
-      outputTypes: ["Canvas"]
-    }
-  );
-}
-async function createInternalCanvas(data, ctx) {
-  return ctx.embed({ id: data.id, type: "Canvas" });
-}
-
-// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-async function createImageUrlAnnotation(data, ctx) {
-  const annotation = {
-    id: ctx.generateId("annotation"),
-    type: "Annotation"
-  };
-  const targetType = ctx.options.targetType;
-  const resource = await ctx.create("@manifest-editor/image-url-creator", data, {
-    parent: { resource: annotation, property: "body" }
-  });
-  if (targetType === "Annotation") {
-    return {
-      ...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 annotationResource = ctx.embed({
-      ...annotation,
-      motivation: "painting",
-      body: [resource],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
-    });
-    const page = ctx.embed({
-      id: pageId,
-      type: "AnnotationPage",
-      items: [annotationResource]
-    });
-    return ctx.embed({
-      id: canvasId,
-      type: "Canvas",
-      label: data.label || { en: ["Untitled canvas"] },
-      height: resource.resource.height || 1e3,
-      width: resource.resource.width || 1e3,
-      items: [page]
-    });
-  }
-}
-function CreateImageUrlAnnotationForm(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreateImageUrlForm, { ...props });
-}
-
-// src/Annotation/ImageUrlAnnotation/index.tsx
-var import_components8 = require("@manifest-editor/components");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var imageUrlAnnotation = {
-  id: "@manifest-editor/image-url-annotation",
-  create: createImageUrlAnnotation,
-  label: "Image",
-  dependencies: ["@manifest-editor/image-url-creator"],
-  summary: "Image from URL",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components8.AddImageIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreateImageUrlAnnotationForm, { ...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/AudioAnnotation/create-audio-annotation.tsx
-var import_react7 = require("react");
-
-// ../ui/atoms/callouts/ErrorMessage.tsx
-var import_styled_components3 = __toESM(require("styled-components"), 1);
-var ErrorMessage = import_styled_components3.default.div`
-  border: 2px solid ${(props) => props.theme.color.danger || "red"};
-  width: 100%;
-  border-radius: 5px;
-  padding: ${(props) => props.theme.padding.small || "0.5rem"}
-    ${(props) => props.theme.padding.medium || "1rem"};
-  line-height: 1.9em;
-  display: flex;
-  align-items: center;
-  a {
-    color: ${(props) => props.theme.color.white || "white"};
-  }
-  ${(props) => props.$small && import_styled_components3.css`
-      font-size: 0.75em;
-      white-space: nowrap;
-      padding: ${props.theme.padding.xs || "0.25rem"} ${props.theme.padding.small || "0.5rem"};
-      line-height: 1.6em;
-      width: fit-content;
-    `}
-`;
-
-// ../ui/ui/MediaControls/MediaControls.tsx
-var import_react_iiif_vault2 = require("react-iiif-vault");
-var import_react6 = require("react");
-
-// ../ui/ui/MediaControls/MediaControls.icons.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var PlayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
-  props.title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: props.title }) : null,
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 5v14l11-7z", fill: "currentColor" })
-] });
-var PauseIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
-  props.title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: props.title }) : null,
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
-] });
-var VolumeUpIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
-  title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: title }) : null,
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
-    }
-  )
-] });
-var VolumeDownIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
-  title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: title }) : null,
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"
-    }
-  )
-] });
-var VolumeOffIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
-  title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: title }) : null,
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"
-    }
-  )
-] });
-
-// ../ui/ui/MediaControls/MediaControls.styles.ts
-var import_styled_components4 = __toESM(require("styled-components"), 1);
-var AudioPlayerContainer = import_styled_components4.default.div`
-  background: #ededed; // Not in variable.
-  display: flex;
-  padding: 0.5em;
-  align-items: center;
-`;
-var BaseButton = import_styled_components4.default.button`
-  cursor: pointer;
-  padding: 0.75em 1.5em;
-  font-size: 0.938em;
-  background: none;
-  color: inherit;
-  border: none;
-  text-decoration: none;
-  display: inline-block;
-  vertical-align: top;
-  white-space: nowrap;
-`;
-var PlayButton = (0, import_styled_components4.default)(BaseButton)`
-  width: 2em;
-  height: 2em;
-  overflow: hidden;
-  font-size: 1.1em;
-  background: #fff;
-  border-radius: 3px;
-  padding: 0;
-  margin: 0;
-  color: #000; // Not in colours
-
-  &:disabled {
-    color: #999;
-  }
-`;
-var TimeDisplay = import_styled_components4.default.div`
-  margin: 0 1em;
-  font-size: 0.85em;
-  color: #000;
-`;
-var ProgressContainer = import_styled_components4.default.div`
-  flex: 1 1 0px;
-  height: 6px;
-  display: flex;
-  position: relative;
-  padding: 15px 0;
-`;
-var ProgressCurrent = import_styled_components4.default.div`
-  background: #d85680;
-  height: 6px;
-  pointer-events: none;
-  position: absolute;
-  top: 13px;
-  left: 0;
-  border-radius: 3px;
-  transition: width 200ms;
-`;
-var ProgressBackground = import_styled_components4.default.div`
-  position: absolute;
-  top: 13px;
-  left: 0;
-  height: 6px;
-  border-radius: 3px;
-  width: 100%;
-  pointer-events: none;
-  background: #fff;
-`;
-var SoundButton = (0, import_styled_components4.default)(BaseButton)`
-  width: 2em;
-  height: 2em;
-  overflow: hidden;
-  font-size: 1.1em;
-  background: transparent;
-  border-radius: 3px;
-  padding: 0;
-  margin: 0;
-`;
-var SoundContainer = import_styled_components4.default.div`
-  display: flex;
-  align-items: center;
-`;
-var VolumeContainer = import_styled_components4.default.div`
-  width: 0;
-  overflow: hidden;
-  transition: width 500ms;
-  color: #4a473f; // Not in colours
-
-  ${(props) => props.$isOpen && import_styled_components4.css`
-      width: 150px;
-    `}
-`;
-var VolumeSlider = import_styled_components4.default.input.attrs({ type: "range" })`
-  width: 120px;
-  margin: 0 15px;
-`;
+  },
+  sideEffects: [
+    resizeToFitService,
+    resizeResourceToEmptyCanvas,
+    repositionMultipleImages
+  ],
+  staticFields: {}
+};
 
-// ../ui/madoc/components/icons/Spinner.tsx
+// src/ContentResource/ImageServiceCreator/index.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime29.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_components5 = __toESM(require("styled-components"), 1);
-var visuallyHidden = import_styled_components5.css`
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-`;
-var VisuallyHiddenLabel = import_styled_components5.default.label`
-  ${visuallyHidden}
-`;
+var imageServiceCreator = {
+  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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CreateImageServerForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "type", "height", "width", "format", "service"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  }
+};
 
-// ../ui/ui/MediaControls/MediaControls.tsx
+// src/ContentResource/ImageUrlCreator/index.tsx
+var import_components12 = require("@manifest-editor/components");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function MediaControls(props) {
-  const [isVolumeOpen, setIsVolumeOpen] = (0, import_react6.useState)(false);
-  const { progress, currentTime, element } = (0, import_react_iiif_vault2.useMediaElements)();
-  const { duration, isMuted, volume, isPlaying, playRequested } = (0, import_react_iiif_vault2.useMediaState)();
-  const { setVolume, toggleMute, play, pause, setDurationPercent } = (0, import_react_iiif_vault2.useMediaActions)();
-  const Volume = isMuted || volume === 0 ? VolumeOffIcon : volume > 50 ? VolumeUpIcon : VolumeDownIcon;
-  (0, import_react6.useLayoutEffect)(() => {
-    if (element.current) {
-      const $el = element.current;
-      if ($el.error && props.onError) {
-        props.onError($el.error?.message || "Unknown error");
-        return;
-      }
-      const onError = () => {
-        if (props.onError) {
-          props.onError($el.error?.message || "Unknown error");
-        }
-      };
-      const loadedMetadata = () => {
-        if ($el.duration && props.onDuration) {
-          props.onDuration($el.duration);
-        }
-        if (props.onDimensions && $el instanceof HTMLVideoElement) {
-          props.onDimensions($el.videoWidth, $el.videoHeight);
-        }
-      };
-      $el.addEventListener("loadedmetadata", loadedMetadata);
-      $el.addEventListener("error", onError);
-      return () => {
-        $el.removeEventListener("loadedmetadata", loadedMetadata);
-        $el.removeEventListener("error", onError);
-      };
+var imageUrlCreator = {
+  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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CreateImageUrlForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["format"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+};
+
+// src/ContentResource/PlaintextCreator/create-plaintext.tsx
+var import_editors9 = require("@manifest-editor/editors");
+var import_react9 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+async function createPlaintext(data, ctx) {
+  return ctx.embed({
+    id: data.url,
+    type: "Text",
+    label: data.label,
+    format: "text/plain"
+  });
+}
+function CreatePlaintextForm(props) {
+  const [label, setLabel] = (0, import_react9.useState)({
+    en: ["View as text"]
+  });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.url) {
+      props.runCreate({ url: formData.url, label });
     }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AudioPlayerContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      PlayButton,
-      {
-        disabled: playRequested,
-        onClick: () => {
-          if (isPlaying) {
-            pause();
-          } else {
-            play();
-          }
-        },
-        children: playRequested ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Spinner, { stroke: "#999" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PauseIcon, { title: "Pause" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PlayIcon, { title: "Play" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TimeDisplay, { ref: currentTime, children: "0:00" }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      ProgressContainer,
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_editors9.LanguageFieldEditor,
       {
-        onClick: (e) => {
-          const { left, width } = e.currentTarget.getBoundingClientRect();
-          const percent = (e.pageX - left) / width;
-          setDurationPercent(percent);
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ProgressBackground, {}),
-          duration ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ProgressCurrent, { ref: progress }) : null
-        ]
+        focusId: "label",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TimeDisplay, { children: (0, import_react_iiif_vault2.formatTime)(duration) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(SoundContainer, { onMouseEnter: () => setIsVolumeOpen(true), onMouseLeave: () => setIsVolumeOpen(false), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VolumeContainer, { $isOpen: isVolumeOpen, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VisuallyHiddenLabel, { htmlFor: "audio-slider", children: "Change volume" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          VolumeSlider,
-          {
-            id: "audio-slider",
-            role: "slider",
-            disabled: isMuted,
-            min: "0",
-            max: "100",
-            value: volume,
-            onChange: (e) => setVolume(Number(e.currentTarget.value))
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Volume, { title: isMuted ? "Mute" : "Unmute" }) })
-    ] })
+    /* @__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_runtime31.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/ContentResource/PlaintextCreator/index.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var plaintextCreator = {
+  id: "@manifest-editor/plaintext-creator",
+  create: createPlaintext,
+  label: "Plaintext",
+  summary: "Add link to an plaintext",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CreatePlaintextForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["label", "format"],
+  supports: {
+    parentFields: ["seeAlso", "rendering", "homepage"]
+  },
+  staticFields: {
+    format: "text/plain"
+  }
+};
+
+// ../ui/icons/LinkIcon.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function LinkIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.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/Annotation/AudioAnnotation/create-audio-annotation.tsx
-var import_react_iiif_vault3 = require("react-iiif-vault");
-var import_helpers2 = require("@iiif/helpers");
-var import_editors9 = require("@manifest-editor/editors");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-async function createAudioAnnotation(data, ctx) {
-  const annotation = {
-    id: ctx.generateId("annotation"),
-    type: "Annotation"
-  };
-  const targetType = ctx.options.targetType;
-  const body = await ctx.embed({
+// src/ContentResource/WebPageCreator/create-web-page.tsx
+var import_editors10 = require("@manifest-editor/editors");
+var import_react10 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+async function createWebPage(data, ctx) {
+  return ctx.embed({
     id: data.url,
-    type: "Sound",
-    format: "audio/mp4",
-    duration: data.duration || 0
+    type: "Text",
+    label: data.label,
+    format: "text/html"
   });
-  if (targetType === "Annotation") {
-    return ctx.embed({
-      ...annotation,
-      label: (0, import_helpers2.getValue)(data.label) && data.label,
-      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
-      body,
-      target: ctx.getTarget()
-    });
-  }
-  if (targetType === "Canvas") {
-    const canvasId = ctx.generateId("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" } }
-    });
-    const page = ctx.embed({
-      id: pageId,
-      type: "AnnotationPage",
-      items: [annotationResource]
-    });
-    return ctx.embed({
-      id: canvasId,
-      type: "Canvas",
-      label: data.label || { en: ["Untitled HTML canvas"] },
-      duration: data.duration || 0,
-      items: [page]
-    });
-  }
 }
-function CreateAudioAnnotationForm(props) {
-  const [url, setUrl] = (0, import_react7.useState)("");
-  const [duration, setDuration] = (0, import_react7.useState)(0);
-  const [error, setError] = (0, import_react7.useState)("");
-  const [label, setLabel] = (0, import_react7.useState)({ en: [""] });
-  const onSubmit = () => {
-    props.runCreate({
-      url,
-      duration,
-      label
-    });
-  };
-  (0, import_react7.useEffect)(() => {
-    setError("");
-    setDuration(0);
-    if (url) {
-      const labelFromUrl = url.split("/").pop()?.split(".").shift();
-      setLabel({ en: [labelFromUrl || ""] });
+function CreateWebPageForm(props) {
+  const [label, setLabel] = (0, import_react10.useState)({ en: [""] });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.url) {
+      props.runCreate({ url: formData.url, label });
     }
-  }, [url]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(PaddedSidebarContainer, { children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_editors9.InputContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.InputLabel, { htmlFor: "audio-url", children: "URL" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.Input, { type: "text", id: "audio-url", value: url, onChange: (e) => setUrl(e.target.value) })
-    ] }),
-    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_editors9.LanguageFieldEditor,
+  };
+  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_editors10.LanguageFieldEditor,
       {
-        containerId: "label",
-        focusId: "label_",
+        focusId: "label",
         label: "Label",
         fields: label,
         onSave: (e) => setLabel(e.toInternationalString())
-      },
-      url + "__" + duration
-    ) }) : null,
-    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_iiif_vault3.CanvasPanel.AudioHTML, { media: { url, duration, type: "Sound" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      MediaControls,
-      {
-        onError: (error2) => setError(error2),
-        onDuration: (duration2) => setDuration(duration2)
-      },
-      url + "__" + duration
-    ) }, url + "__" + duration) : null,
-    duration && !error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_editors9.FormFieldWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.InputLabel, { htmlFor: "duration", children: "Duration" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.Input, { type: "number", id: "duration", value: duration, onChange: (e) => setDuration(e.target.valueAsNumber) })
-    ] }) : null,
-    url && !error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { onClick: onSubmit, children: "Add audio" })
-  ] });
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_editors10.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.InputLabel, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { type: "submit", children: "Create link" })
+  ] }) });
 }
 
-// src/Annotation/AudioAnnotation/index.tsx
-var import_components9 = require("@manifest-editor/components");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var audioAnnotation = {
-  id: "@manifest-editor/audio-annotation",
-  create: createAudioAnnotation,
-  label: "Audio",
-  summary: "Audio annotation",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components9.AudioIcon, {}),
+// src/ContentResource/WebPageCreator/index.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var webPageCreator = {
+  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, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CreateAudioAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreateWebPageForm, { ...ctx });
   },
-  resourceType: "Annotation",
-  resourceFields: ["id", "type", "motivation", "body", "target"],
-  additionalTypes: ["Canvas"],
+  resourceType: "ContentResource",
+  resourceFields: ["label", "format"],
   supports: {
-    initialData: true,
-    parentTypes: ["AnnotationPage", "Manifest"],
-    parentFields: ["items"]
-  },
-  staticFields: {
-    type: "Annotation"
+    parentFields: ["seeAlso", "rendering", "homepage"]
   }
 };
 
-// src/Annotation/VideoAnnotation/create-video-annotation.tsx
-var import_helpers3 = require("@iiif/helpers");
-var import_editors10 = require("@manifest-editor/editors");
-var import_react8 = require("react");
+// src/ContentResource/YouTubeCreator/index.tsx
+var import_components13 = require("@manifest-editor/components");
 
-// ../ui/ui/VideoPlayer/VideoPlayer.tsx
-var import_react_iiif_vault4 = require("react-iiif-vault");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function VideoPlayer({
-  media,
-  onError,
-  duration,
-  onDuration,
-  onDimensions
-}) {
-  const [{ element, currentTime, progress }, state, actions] = (0, import_react_iiif_vault4.useSimpleMediaPlayer)({ duration });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_react_iiif_vault4.MediaPlayerProvider,
-    {
-      element,
-      state,
-      actions,
-      currentTime,
-      progress,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          "div",
-          {
-            style: {
-              maxHeight: 400,
-              aspectRatio: `${media.width}/${media.height}`,
-              position: "relative"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_iiif_vault4.CanvasPanel.VideoHTML, { element, media, playPause: actions.playPause })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MediaControls, { onError, onDuration, onDimensions })
-      ]
-    }
-  );
+// src/ContentResource/YouTubeCreator/create-youtube-body.tsx
+var import_editors11 = require("@manifest-editor/editors");
+var import_jsx_runtime36 = 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;
 }
-
-// src/Annotation/VideoAnnotation/create-video-annotation.tsx
-var import_jsx_runtime34 = 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({
-    id: data.url,
+function validateYouTube(data) {
+  return !!getYouTubeId(data.youtubeUrl);
+}
+async function createYoutubeBody(data, ctx) {
+  const id = getYouTubeId(data.youtubeUrl);
+  const body = ctx.embed({
+    id: `https://www.youtube.com/watch?v=${id}`,
     type: "Video",
-    format: "video/mp4",
-    width: data.width,
-    height: data.height,
-    duration: data.duration || 0
+    service: [
+      {
+        profile: "http://digirati.com/objectifier",
+        params: {
+          data: `https://www.youtube.com/embed/${id}`
+        }
+      },
+      {
+        id: `https://www.youtube.com/watch?v=${id}`,
+        profile: "https://www.youtube.com"
+      }
+    ]
   });
-  if (targetType === "Annotation") {
-    return ctx.embed({
-      ...annotation,
-      label: (0, import_helpers3.getValue)(data.label) && data.label,
-      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
-      body,
-      target: ctx.getTarget()
-    });
-  }
-  if (targetType === "Canvas") {
+  if (ctx.options.targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
-    const annotationResource = ctx.embed({
-      ...annotation,
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
+    const annotation = ctx.embed({
+      id: ctx.generateId("annotation", { id: pageId, type: "AnnotationPage" }),
+      type: "Annotation",
       motivation: "painting",
-      body,
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      body: [body],
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
       type: "AnnotationPage",
-      items: [annotationResource]
+      items: [annotation]
     });
     return ctx.embed({
       id: canvasId,
       type: "Canvas",
-      label: data.label || { en: ["Untitled HTML canvas"] },
-      duration: data.duration || 0,
-      width: data.width,
-      height: data.height,
+      label: data.label || { en: ["Untitled YouTube canvas"] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      duration: data.duration || 1,
       items: [page]
     });
   }
-}
-function CreateVideoAnnotationForm(props) {
-  const [url, setUrl] = (0, import_react8.useState)("");
-  const [duration, setDuration] = (0, import_react8.useState)(0);
-  const [width, setWidth] = (0, import_react8.useState)(0);
-  const [height, setHeight] = (0, import_react8.useState)(0);
-  const [error, setError] = (0, import_react8.useState)("");
-  const [label, setLabel] = (0, import_react8.useState)({ en: [""] });
-  const onSubmit = () => {
-    props.runCreate({
-      url,
-      duration,
-      label,
-      width,
-      height
+  if (ctx.options.targetType === "Annotation") {
+    return ctx.embed({
+      id: ctx.generateId("annotation"),
+      type: "Annotation",
+      motivation: "painting",
+      body: [body],
+      target: ctx.getTarget()
     });
-  };
-  (0, import_react8.useEffect)(() => {
-    setError("");
-    setDuration(0);
-    if (url) {
-      const labelFromUrl = url.split("/").pop()?.split(".").shift();
-      setLabel({ en: [labelFromUrl || ""] });
+  }
+  return body;
+}
+function YouTubeForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.youtubeUrl) {
+      props.runCreate({ youtubeUrl: formData.youtubeUrl });
     }
-  }, [url]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(PaddedSidebarContainer, { children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_editors10.InputContainer, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.InputLabel, { htmlFor: "video-url", children: "URL" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.Input, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
+  };
+  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: "" })
     ] }),
-    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_editors10.LanguageFieldEditor,
-      {
-        containerId: "label",
-        focusId: "label_",
-        label: "Label",
-        fields: label,
-        onSave: (e) => setLabel(e.toInternationalString())
-      },
-      url + "__" + duration
-    ) }) : null,
-    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      VideoPlayer,
-      {
-        duration,
-        onDuration: (d) => setDuration(d),
-        onError: (err) => setError(err),
-        media: {
-          url,
-          duration,
-          height,
-          width,
-          type: "Video"
-        },
-        onDimensions: (w, h) => {
-          setWidth(w || 0);
-          setHeight(h || 0);
-        }
-      }
-    ) : null,
-    !error && (duration || width || height) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.InputContainer, { $wide: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_editors10.DimensionsTriplet,
-      {
-        widthId: "width",
-        width: width || 0,
-        changeWidth: (v) => setWidth(v),
-        heightId: "height",
-        height: height || 0,
-        changeHeight: (v) => setHeight(v),
-        durationId: "duration",
-        duration: duration || 0,
-        changeDuration: (v) => setDuration(v)
-      }
-    ) }) : null,
-    url && !error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: onSubmit, children: "Add video" })
-  ] });
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
 }
 
-// src/Annotation/VideoAnnotation/index.tsx
-var import_components10 = require("@manifest-editor/components");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var videoAnnotation = {
-  id: "@manifest-editor/video-annotation",
-  create: createVideoAnnotation,
-  label: "Video",
-  summary: "Video annotation",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components10.VideoIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreateVideoAnnotationForm, { ...ctx });
-  },
-  resourceType: "Annotation",
-  resourceFields: ["id", "type", "motivation", "body", "target"],
-  additionalTypes: ["Canvas"],
+// src/ContentResource/YouTubeCreator/index.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var youTubeBodyCreator = {
+  id: "@manifest-editor/youtube",
+  create: createYoutubeBody,
+  label: "YouTube",
+  summary: "Embed YouTube",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components13.YouTubeIcon, {}),
+  resourceType: "ContentResource",
+  additionalTypes: ["Canvas", "Annotation"],
+  resourceFields: ["id", "type", "service"],
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(YouTubeForm, { ...ctx }),
   supports: {
-    initialData: true,
-    parentTypes: ["AnnotationPage", "Manifest"],
-    parentFields: ["items"]
+    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
+    parentFieldMap: {
+      Annotation: ["body"],
+      Manifest: ["items"],
+      AnnotationPage: ["items"]
+    }
   },
   staticFields: {
-    type: "Annotation"
+    type: "Video"
   }
 };
 
+// src/Manifest/ManifestBrowserCreator/index.tsx
+var import_components14 = require("@manifest-editor/components");
+
 // src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
-var import_helpers4 = require("@iiif/helpers");
-var import_react9 = require("react");
+var import_helpers5 = require("@iiif/helpers");
+var import_react11 = 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_helpers5.normaliseContentState)(
+    typeof data.output === "string" ? (0, import_helpers5.parseContentState)(data.output) : data.output
   );
   const target = contentState.target[0];
   const previewVault = ctx.getPreviewVault();
@@ -2032,20 +2392,21 @@ async function createFromManifestBrowserOutput(data, ctx) {
   }
   throw new Error("Not yet supported.");
 }
-var ManifestBrowserCreatorForm2 = (0, import_react9.lazy)(() => Promise.resolve().then(() => (init_manifest_browser_form_lazy(), manifest_browser_form_lazy_exports)));
+var ManifestBrowserCreatorForm2 = (0, import_react11.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_components11 = require("@manifest-editor/components");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var manifestBrowserCreator = {
   id: "@manifest-editor/manifest-browser-creator",
   create: createFromManifestBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components11.IIIFBrowserIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_components14.IIIFBrowserIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ManifestBrowserCreatorForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ManifestBrowserCreatorForm, { ...ctx });
   },
   resourceType: "Manifest",
   resourceFields: ["id", "label"],
@@ -2078,5 +2439,6 @@ var allCreators = [
   webPageCreator,
   emptyAnnotationPage,
   noBodyAnnotation,
-  internalCanvas
+  internalCanvas,
+  captionedImageAnnotation
 ];