@manifest-editor/creators 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -37,37 +37,48 @@ __export(iiif_browser_form_lazy_exports, {
 });
 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 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]);
+  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"],
       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: {
+        canCropImage: true,
+        canSelectCanvas: true,
+        canSelectManifest: false,
+        canSelectCollection: false,
+        // @todo fix the output so this one works.
+        multiSelect: false
+      }
     }
   ) });
 }
-var import_iiif_browser, import_shell3, import_jsx_runtime23;
+var 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_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 +90,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,13 +112,13 @@ 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");
   }
 });
 
@@ -116,6 +127,7 @@ var src_exports = {};
 __export(src_exports, {
   allCreators: () => allCreators,
   audioAnnotation: () => audioAnnotation,
+  captionedImageAnnotation: () => captionedImageAnnotation,
   emptyAnnotationPage: () => emptyAnnotationPage,
   emptyCanvas: () => emptyCanvas,
   htmlAnnotation: () => htmlAnnotation,
@@ -135,363 +147,396 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/Canvas/EmptyCanvas/index.tsx
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_react2 = require("react");
+
+// ../ui/atoms/PaddedSidebarContainer.tsx
+var import_styled_components = __toESM(require("styled-components"), 1);
+var PaddedSidebarContainer = import_styled_components.default.div`
+  padding: 0 0.7em;
+  margin: 0.7em 0;
+  flex: 1;
+  overflow: visible;
+`;
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.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" })
-] });
+// ../ui/ui/MediaControls/MediaControls.tsx
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_react = require("react");
 
-// src/ContentResource/PlaintextCreator/create-plaintext.tsx
-var import_editors = require("@manifest-editor/editors");
+// ../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/atoms/Button.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 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;
+// ../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())
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 18 18",
+        to: "360 18 18",
+        dur: "1s",
+        repeatCount: "indefinite"
       }
-    ),
-    /* @__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" })
+    ) })
   ] }) });
 }
 
-// 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/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" })
-  ] });
-}
+// 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/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"
+// ../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/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");
-async function createHtmlAnnotation(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" } }
-        )
-      );
+  &: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: bodies,
+      body,
       target: ctx.getTarget()
     });
   }
@@ -501,7 +546,7 @@ async function createHtmlAnnotation(data, ctx) {
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
-      body: bodies,
+      body,
       target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
     });
     const page = ctx.embed({
@@ -513,47 +558,75 @@ async function createHtmlAnnotation(data, ctx) {
       id: canvasId,
       type: "Canvas",
       label: data.label || { en: ["Untitled HTML canvas"] },
-      height: data.height || 1e3,
-      width: data.width || 1e3,
+      duration: data.duration || 0,
       items: [page]
     });
   }
 }
-function CreateHTMLAnnotation(props) {
-  const [body, setBody] = (0, import_react4.useState)({ en: [""] });
+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({
-      body
+      url,
+      duration,
+      label
     });
   };
-  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,
-        {
-          focusId: "html-content",
-          label: "HTML Content",
-          fields: body,
-          onSave: (e) => setBody(e.toInternationalString())
-        }
-      )
+  (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) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+    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/HTMLAnnotation/index.tsx
+// src/Annotation/AudioAnnotation/index.tsx
 var import_components2 = require("@manifest-editor/components");
-var import_jsx_runtime11 = 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, {}),
+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_runtime11.jsx)(CreateHTMLAnnotation, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CreateAudioAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
@@ -568,309 +641,258 @@ 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/CaptionedImageAnnotation/index.tsx
+var import_components3 = 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/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" } }
+        )
+      );
     }
   }
-};
-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}`
-        }
-      },
-      {
-        id: `https://www.youtube.com/watch?v=${id}`,
-        profile: "https://www.youtube.com"
-      }
-    ]
-  });
-  if (ctx.options.targetType === "Canvas") {
+  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 annotation = await ctx.embed({
-      id: ctx.generateId("annotation", { id: pageId, type: "AnnotationPage" }),
-      type: "Annotation",
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
+    const annotationResource = ctx.embed({
+      ...annotation,
       motivation: "painting",
-      body: [body],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      body: bodies,
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
       type: "AnnotationPage",
-      items: [annotation]
+      items: [annotationResource]
     });
     return ctx.embed({
       id: canvasId,
       type: "Canvas",
-      label: data.label || { en: ["Untitled YouTube canvas"] },
+      label: data.label || { en: ["Untitled HTML 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) {
+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());
-    if (formData.youtubeUrl) {
-      props.runCreate({ youtubeUrl: formData.youtubeUrl });
-    }
+    props.runCreate({
+      body,
+      imageUrl: formData.url
+    });
   };
-  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: "" })
+  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_runtime14.jsx)(Button, { type: "submit", children: "Create" })
+    /* @__PURE__ */ (0, import_jsx_runtime6.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 }),
+// 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: {
-    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
-    parentFieldMap: {
-      Annotation: ["body"],
-      Manifest: ["items"],
-      AnnotationPage: ["items"]
-    }
+    initialData: true,
+    parentTypes: ["AnnotationPage"],
+    parentFields: ["items"]
   },
   staticFields: {
-    type: "Video"
+    type: "Annotation"
   }
 };
 
-// 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;
+// src/Annotation/HTMLAnnotation/create-html-annotation.tsx
+var import_react4 = require("react");
+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"),
+    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" } }
+        )
+      );
     }
   }
-  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 });
-    }
-  };
-  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"
+  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]
+    });
   }
-};
-
-// 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");
-async function createImageServer(data, ctx) {
-  const request = (0, import_image_3.createImageServiceRequest)(data.service);
-  const imageId = (0, import_image_3.imageServiceRequestToString)({
-    identifier: request.identifier,
-    server: request.server,
-    scheme: request.scheme,
-    type: "image",
-    size: {
-      max: !data.size?.width && !data.size?.height,
-      confined: false,
-      upscaled: false,
-      ...data.size || {}
-    },
-    format: "jpg",
-    // This isn't how it should be modelled, always full,
-    // region: data.selector ? data.selector : { full: true },
-    region: { full: true },
-    rotation: { angle: 0 },
-    quality: "default",
-    prefix: request.prefix,
-    originalPath: request.originalPath
-  });
-  const resource = ctx.embed({
-    id: imageId,
-    type: "Image",
-    format: data.format || "image/jpeg",
-    height: data.height || data.service.height,
-    width: data.width || data.service.width,
-    service: data.embedService === false ? void 0 : [data.service]
-  });
-  return resource;
 }
-function CreateImageServerForm(props) {
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.target);
-    const formData = Object.fromEntries(data.entries());
-    const url = formData.url;
-    if (url) {
-      const canon = (0, import_image_3.canonicalServiceUrl)(url);
-      fetch(canon).then((r) => r.json()).then((service) => {
-        if (service["@id"]) {
-          service.id = service["@id"];
-        }
-        if (service["@type"]) {
-          service.type = service["@type"];
-        }
-        props.runCreate({ url: formData.url, service });
-      });
-    }
+function CreateHTMLAnnotation(props) {
+  const [body, setBody] = (0, import_react4.useState)({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      body
+    });
   };
-  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_runtime8.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_editors3.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_editors3.InputLabel, { children: "HTML Body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_editors3.LanguageFieldEditor,
+        {
+          focusId: "html-content",
+          label: "HTML Content",
+          fields: body,
+          onSave: (e) => setBody(e.toInternationalString())
+        }
+      )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { type: "submit", children: "Create" })
-  ] }) });
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: () => onSubmit(), 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/HTMLAnnotation/index.tsx
+var import_components4 = require("@manifest-editor/components");
+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_runtime9.jsx)(import_components4.HTMLIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CreateImageServerForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreateHTMLAnnotation, { ...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"]
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
   },
   staticFields: {
-    type: "Image"
+    type: "Annotation"
   }
 };
 
 // src/side-effects/reposition-multiple-images.ts
-var import_image_32 = require("@iiif/parser/image-3");
+var import_image_3 = require("@iiif/parser/image-3");
 var import_editor_api = require("@manifest-editor/editor-api");
-var import_editors8 = require("@manifest-editor/editors");
+var import_editors4 = require("@manifest-editor/editors");
 var repositionMultipleImages = {
   canvasInteraction: true,
   spatial: true,
@@ -897,7 +919,7 @@ var repositionMultipleImages = {
       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));
+      const imageService = serviceList.find((s) => (0, import_image_3.isImageService)(s));
       if (imageService) {
         if (imageService.width && imageService.height) {
           if (imageService.width !== body.width) {
@@ -918,7 +940,7 @@ var repositionMultipleImages = {
         }
       }
       const editor = new import_editor_api.EditorInstance({ vault, reference: result });
-      const imagePosition = (0, import_editors8.centerRectangles)(
+      const imagePosition = (0, import_editors4.centerRectangles)(
         canvas,
         {
           width,
@@ -1031,13 +1053,77 @@ var resizeToFitService = {
   }
 };
 
-// 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"
-  };
+// src/ContentResource/ImageServiceCreator/create-image-service.tsx
+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_32.createImageServiceRequest)(data.service);
+  const imageId = (0, import_image_32.imageServiceRequestToString)({
+    identifier: request.identifier,
+    server: request.server,
+    scheme: request.scheme,
+    type: "image",
+    size: {
+      max: !data.size?.width && !data.size?.height,
+      confined: false,
+      upscaled: false,
+      ...data.size || {}
+    },
+    format: "jpg",
+    // This isn't how it should be modelled, always full,
+    // region: data.selector ? data.selector : { full: true },
+    region: { full: true },
+    rotation: { angle: 0 },
+    quality: "default",
+    prefix: request.prefix,
+    originalPath: request.originalPath
+  });
+  const resource = ctx.embed({
+    id: imageId,
+    type: "Image",
+    format: data.format || "image/jpeg",
+    height: data.height || data.service.height,
+    width: data.width || data.service.width,
+    service: data.embedService === false ? void 0 : [data.service]
+  });
+  return resource;
+}
+function CreateImageServerForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    const url = formData.url;
+    if (url) {
+      const canon = (0, import_image_32.canonicalServiceUrl)(url);
+      fetch(canon).then((r) => r.json()).then((service) => {
+        if (service["@id"]) {
+          service.id = service["@id"];
+        }
+        if (service["@type"]) {
+          service.type = service["@type"];
+        }
+        props.runCreate({ url: formData.url, service });
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_editors5.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_editors5.InputLabel, { htmlFor: "id", children: "Link to image service" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_editors5.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// 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" }
@@ -1075,21 +1161,22 @@ async function createImageServiceAnnotation(data, ctx) {
   }
 }
 function CreateImageServiceAnnotationForm(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CreateImageServerForm, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CreateImageServerForm, { ...props });
 }
 
 // src/Annotation/ImageServiceAnnotation/index.tsx
 var import_components5 = require("@manifest-editor/components");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+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",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components5.IIIFLogo, { style: { padding: 10 } }),
+  tags: ["image", "image-service"],
+  icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components5.IIIFLogo, { style: { padding: 10 } }),
   render(ctx) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CreateImageServiceAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CreateImageServiceAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
@@ -1104,15 +1191,128 @@ var imageServiceAnnotation = {
   }
 };
 
-// src/Annotation/NoBodyAnnotation/index.tsx
+// 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/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_components6 = require("@manifest-editor/components");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+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/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_runtime22.jsx)(import_components6.EmptyCanvasIcon, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components7.EmptyCanvasIcon, {}),
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "target"],
   supports: {
@@ -1136,150 +1336,322 @@ function createNoBodyAnnotation(data, ctx) {
   });
 }
 
-// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-var import_helpers = require("@iiif/helpers");
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+var import_helpers2 = require("@iiif/helpers");
+var import_editors7 = require("@manifest-editor/editors");
+var import_components8 = require("@manifest-editor/components");
 var import_react5 = require("react");
 
-// ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
-var isProduction = false;
-var prefix = "Invariant failed";
-function invariant(condition, message) {
-  if (condition) {
-    return;
-  }
-  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);
+// ../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/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-async function createFromIIIFBrowserOutput(data, ctx) {
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+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;
-  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
-  );
-  if (!contentState.target || contentState.target.length === 0) {
-    throw new Error("No target found in content state");
+  const body = await 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()
+    });
   }
-  const target = contentState.target[0];
-  const type = target.source.type;
-  const previewVault = ctx.getPreviewVault();
-  if (targetType === "Canvas" || targetType === "Annotation") {
-    if (type === "Canvas") {
-      const canvasId = target.source.id;
-      const manifestId = target.source.partOf?.find((t) => t.type === "Manifest");
-      invariant(manifestId, "Could not load external resource without partOf");
-      const manifest = await previewVault.loadManifest(manifestId);
-      invariant(manifest, "Manifest not found");
-      const canvasRef = manifest.items.find((item) => item.id === canvasId);
-      invariant(canvasRef, "Canvas not found");
-      const canvas = previewVault.get(canvasRef);
-      if (targetType === "Canvas") {
-        return ctx.embed(previewVault.toPresentation3(canvas));
-      }
-      const annotationPage = previewVault.get(canvas.items[0]);
-      const annotation = previewVault.get(annotationPage.items[0]);
-      if (targetType === "Annotation") {
-        const fullAnnotation = previewVault.toPresentation3(annotation);
-        if (fullAnnotation && fullAnnotation?.body?.service) {
-          const width = fullAnnotation?.body.width;
-          const height = fullAnnotation?.body.height;
-          const service = Array.isArray(fullAnnotation?.body?.service) ? fullAnnotation?.body?.service[0] : fullAnnotation?.body?.service;
-          if (!service.width || !service.height) {
-            service.width = width;
-            service.height = height;
-          }
-        }
-        if (target.selector && target.selector.type === "BoxSelector") {
-          const selector = {
-            "@context": "http://iiif.io/api/annex/openannotation/context.json",
-            type: "iiif:ImageApiSelector",
-            region: [
-              ~~target.selector.spatial.x,
-              ~~target.selector.spatial.y,
-              ~~target.selector.spatial.width,
-              ~~target.selector.spatial.height
-            ].join(",")
-          };
-          fullAnnotation.body = {
-            id: ctx.generateId("SpecificResource", annotation),
-            type: "SpecificResource",
-            source: fullAnnotation.body,
-            selector
-          };
-          return ctx.embed({
-            ...fullAnnotation,
-            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);
         }
-        return ctx.embed({
-          ...previewVault.toPresentation3(annotation),
-          target: ctx.getTarget()
-        });
       }
-    }
-  }
-  throw new Error("Not yet supported.");
+    ) : 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)
+      }
+    ) }) : null,
+    url && !error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { onClick: onSubmit, children: "Add video" })
+  ] });
 }
-var IIIFBrowserCreatorForm2 = (0, import_react5.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 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, {}),
+// src/Annotation/VideoAnnotation/index.tsx
+var import_components9 = require("@manifest-editor/components");
+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_runtime24.jsx)(IIIFBrowserCreatorForm2, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CreateVideoAnnotationForm, { ...ctx });
   },
-  resourceType: "ContentResource",
-  resourceFields: ["id", "language", "type", "format", "value"],
-  additionalTypes: ["Annotation", "Canvas"],
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
   supports: {
-    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// ../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: createEmptyAnnotationPage,
+  label: "Empty annotation page",
+  summary: "AnnotationPage with nothing",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ThumbnailStripIcon, {}),
+  resourceType: "AnnotationPage",
+  resourceFields: ["id", "type", "items"],
+  supports: {
+    parentTypes: ["Manifest", "Canvas", "Range"],
     parentFieldMap: {
-      Annotation: ["body"],
-      Manifest: ["items"],
-      AnnotationPage: ["items"]
+      Manifest: ["annotations"],
+      Canvas: ["items", "annotations"],
+      Range: ["annotations"]
     }
-  },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
-  staticFields: {}
+  }
+};
+async function createEmptyAnnotationPage(data, ctx) {
+  return ctx.embed({
+    id: ctx.generateId("annotations"),
+    label: data.label,
+    type: "AnnotationPage",
+    items: []
+  });
+}
+
+// src/Canvas/EmptyCanvas/index.tsx
+var import_components10 = require("@manifest-editor/components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var emptyCanvas = {
+  id: "@manifest-editor/empty-canvas",
+  create: createEmptyCanvas,
+  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"]
+  }
 };
+async function createEmptyCanvas(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const page = ctx.embed({
+    id: ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" }),
+    type: "AnnotationPage",
+    items: []
+  });
+  return {
+    id: canvasId,
+    type: "Canvas",
+    label: data.label || { en: [""] },
+    height: data.height || 1e3,
+    width: data.width || 1e3,
+    items: [page]
+  };
+}
 
 // src/Canvas/InternalCanvas/index.tsx
-var import_react_iiif_vault = require("react-iiif-vault");
-var import_iiif_browser2 = require("@manifest-editor/iiif-browser");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+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;
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  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);
+}
+
+// src/Canvas/InternalCanvas/index.tsx
+var import_iiif_browser = require("@manifest-editor/iiif-browser");
+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_runtime25.jsx)(ThumbnailStripIcon, {}),
+  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_runtime25.jsx)(InternalCanvas, { ...ctx })
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InternalCanvas, { ...ctx })
 };
 function InternalCanvas(props) {
-  const manifest = (0, import_react_iiif_vault.useManifest)();
-  const vault = (0, import_react_iiif_vault.useVault)();
+  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_runtime25.jsx)(
-    import_iiif_browser2.IIIFExplorer,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_iiif_browser.IIIFExplorer,
     {
       vault,
       entry: manifest,
@@ -1304,699 +1676,498 @@ 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" }
+// 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_runtime24 = 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 || ""
   });
-  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 });
+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_runtime24.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_editors8.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_editors8.InputLabel, { children: "HTML Body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_editors8.RichTextLanguageField,
+        {
+          value: body,
+          language,
+          onUpdateLanguage: (lng) => setLang(lng),
+          languages: i18n.availableLanguages,
+          onUpdate: (e) => setBodyValue(e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
 }
 
-// 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, {}),
+// ../ui/icons/TextFormatIcon.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var TextFormatIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
+] });
+
+// src/ContentResource/HTMLBodyCreator/index.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var htmlBodyCreator = {
+  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_runtime27.jsx)(CreateImageUrlAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreateHTMLBodyForm, { ...ctx });
   },
-  resourceType: "Annotation",
-  resourceFields: ["id", "type", "motivation", "body", "target"],
-  additionalTypes: ["Canvas"],
+  resourceType: "ContentResource",
+  resourceFields: ["id", "language", "type", "format", "value"],
   supports: {
-    parentTypes: ["AnnotationPage", "Manifest"],
-    parentFields: ["items"]
+    parentTypes: ["Annotation"],
+    parentFields: ["body"]
   },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
   staticFields: {
-    type: "Annotation"
+    type: "TextualBody",
+    format: "text/html"
   }
 };
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-var import_react7 = require("react");
+// src/ContentResource/IIIFBrowserCreator/index.tsx
+var import_components11 = require("@manifest-editor/components");
 
-// ../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"};
+// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
+var import_helpers3 = require("@iiif/helpers");
+var import_react8 = require("react");
+async function createFromIIIFBrowserOutput(data, ctx) {
+  const targetType = ctx.options.targetType;
+  if (Array.isArray(data.output)) {
+    throw new Error("Multiple items not yet supported");
   }
-  ${(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;
+  const contentState = (0, import_helpers3.normaliseContentState)(
+    typeof data.output === "string" ? (0, import_helpers3.parseContentState)(data.output) : data.output
+  );
+  if (!contentState.target || contentState.target.length === 0) {
+    throw new Error("No target found in content state");
   }
-`;
-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;
-`;
-
-// ../ui/madoc/components/icons/Spinner.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}
-`;
-
-// ../ui/ui/MediaControls/MediaControls.tsx
-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);
-      };
-    }
-  }, []);
-  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,
-      {
-        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
-        ]
+  const target = contentState.target[0];
+  const type = target.source.type;
+  const previewVault = ctx.getPreviewVault();
+  if (targetType === "Canvas" || targetType === "Annotation") {
+    if (type === "Canvas") {
+      const canvasId = target.source.id;
+      const manifestId = target.source.partOf?.find(
+        (t) => t.type === "Manifest"
+      );
+      invariant(manifestId, "Could not load external resource without partOf");
+      const manifest = await previewVault.loadManifest(manifestId);
+      invariant(manifest, "Manifest not found");
+      const canvasRef = manifest.items.find((item) => item.id === canvasId);
+      invariant(canvasRef, "Canvas not found");
+      const canvas = previewVault.get(canvasRef);
+      if (targetType === "Canvas" && target.selector?.type !== "BoxSelector") {
+        return ctx.embed(previewVault.toPresentation3(canvas));
       }
-    ),
-    /* @__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))
+      const annotationPage = previewVault.get(canvas.items[0]);
+      const annotation = previewVault.get(annotationPage.items[0]);
+      if (targetType === "Annotation" || targetType === "Canvas") {
+        const fullAnnotation = previewVault.toPresentation3(annotation);
+        if (fullAnnotation?.body?.service) {
+          const width = fullAnnotation?.body.width;
+          const height = fullAnnotation?.body.height;
+          const service = Array.isArray(fullAnnotation?.body?.service) ? fullAnnotation?.body?.service[0] : fullAnnotation?.body?.service;
+          if (!service.width || !service.height) {
+            service.width = width;
+            service.height = height;
           }
-        )
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Volume, { title: isMuted ? "Mute" : "Unmute" }) })
-    ] })
-  ] });
+        }
+        if (target.selector && target.selector.type === "BoxSelector") {
+          const selector = {
+            "@context": "http://iiif.io/api/annex/openannotation/context.json",
+            type: "iiif:ImageApiSelector",
+            region: [
+              ~~target.selector.spatial.x,
+              ~~target.selector.spatial.y,
+              ~~target.selector.spatial.width,
+              ~~target.selector.spatial.height
+            ].join(",")
+          };
+          fullAnnotation.body = {
+            id: ctx.generateId("SpecificResource", annotation),
+            type: "SpecificResource",
+            source: fullAnnotation.body,
+            selector
+          };
+          if (targetType === "Canvas") {
+            const canvasId2 = ctx.generateId("Canvas", annotation);
+            fullAnnotation.target = canvasId2;
+            const pageId = ctx.generateId("Page", annotation);
+            const annotationPage2 = ctx.embed({
+              id: pageId,
+              type: "AnnotationPage",
+              items: [fullAnnotation]
+            });
+            return ctx.embed({
+              id: canvasId2,
+              type: "Canvas",
+              width: ~~target.selector.spatial.width,
+              height: ~~target.selector.spatial.height,
+              items: [annotationPage2]
+            });
+          }
+          return ctx.embed({
+            ...fullAnnotation,
+            target: ctx.getTarget()
+          });
+        }
+        return ctx.embed({
+          ...previewVault.toPresentation3(annotation),
+          target: ctx.getTarget()
+        });
+      }
+    }
+  }
+  throw new Error("Not yet supported.");
 }
+var IIIFBrowserCreatorForm2 = (0, import_react8.lazy)(
+  () => Promise.resolve().then(() => (init_iiif_browser_form_lazy(), iiif_browser_form_lazy_exports))
+);
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-var import_react_iiif_vault3 = require("react-iiif-vault");
-var import_helpers2 = require("@iiif/helpers");
+// src/ContentResource/IIIFBrowserCreator/index.tsx
+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_runtime28.jsx)(import_components11.IIIFBrowserIcon, {}),
+  render(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"],
+  supports: {
+    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
+    parentFieldMap: {
+      Annotation: ["body"],
+      Manifest: ["items"],
+      AnnotationPage: ["items"]
+    }
+  },
+  sideEffects: [
+    resizeToFitService,
+    resizeResourceToEmptyCanvas,
+    repositionMultipleImages
+  ],
+  staticFields: {}
+};
+
+// src/ContentResource/ImageServiceCreator/index.tsx
+var import_jsx_runtime29 = 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_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"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+};
+
+// src/ContentResource/ImageUrlCreator/index.tsx
+var import_components12 = require("@manifest-editor/components");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var imageUrlCreator = {
+  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 createAudioAnnotation(data, ctx) {
-  const annotation = {
-    id: ctx.generateId("annotation"),
-    type: "Annotation"
-  };
-  const targetType = ctx.options.targetType;
-  const body = await ctx.embed({
+async function createPlaintext(data, ctx) {
+  return ctx.embed({
     id: data.url,
-    type: "Sound",
-    format: "audio/mp4",
-    duration: data.duration || 0
+    type: "Text",
+    label: data.label,
+    format: "text/plain"
   });
-  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 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 });
     }
-  }, [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)(
+  };
+  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,
       {
-        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_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"
+  }
+};
+
+// src/ContentResource/WebPageCreator/create-web-page.tsx
+var import_editors10 = require("@manifest-editor/editors");
+var import_react10 = require("react");
+var import_jsx_runtime33 = 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_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 });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_editors10.LanguageFieldEditor,
+      {
+        focusId: "label",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_editors10.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_editors10.InputLabel, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_editors10.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { type: "submit", children: "Create link" })
+  ] }) });
+}
+
+// ../ui/icons/LinkIcon.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function LinkIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
   ] });
 }
 
-// src/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,
+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/manifest-browser-creator.tsx
 var import_helpers4 = require("@iiif/helpers");
-var import_react9 = require("react");
+var import_react11 = require("react");
 async function createFromManifestBrowserOutput(data, ctx) {
   const targetType = ctx.options.targetType;
   if (Array.isArray(data.output)) {
@@ -2032,20 +2203,20 @@ 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_components14 = require("@manifest-editor/components");
+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 +2249,6 @@ var allCreators = [
   webPageCreator,
   emptyAnnotationPage,
   noBodyAnnotation,
-  internalCanvas
+  internalCanvas,
+  captionedImageAnnotation
 ];