@manifest-editor/creators 1.2.0 → 1.3.1

package/dist/index.js

@@ -1,53 +1,308 @@
 import {
   ManifestBrowserCreatorForm
-} from "./chunk-7FSKLOVQ.js";
+} from "./chunk-KLSWX2QF.js";
 
-// src/Canvas/EmptyCanvas/index.tsx
-import { EmptyCanvasIcon } from "@manifest-editor/components";
-import { jsx } from "react/jsx-runtime";
-var emptyCanvas = {
-  id: "@manifest-editor/empty-canvas",
-  create: createEmptyCanvas,
-  label: "Empty canvas",
-  summary: "No content",
-  icon: /* @__PURE__ */ jsx(EmptyCanvasIcon, {}),
-  resourceType: "Canvas",
-  resourceFields: ["id", "type", "label", "height", "width", "items"],
-  supports: {
-    parentTypes: ["Manifest"],
-    parentFields: ["items"]
+// src/Annotation/AudioAnnotation/index.tsx
+import { AudioIcon } from "@manifest-editor/components";
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// ../ui/atoms/PaddedSidebarContainer.tsx
+import styled from "styled-components";
+var PaddedSidebarContainer = styled.div`
+  padding: 0 0.7em;
+  margin: 0.7em 0;
+  flex: 1;
+  overflow: visible;
+`;
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+import { ErrorMessage } from "@manifest-editor/components";
+
+// ../ui/ui/MediaControls/MediaControls.tsx
+import { formatTime, useMediaActions, useMediaElements, useMediaState } from "react-iiif-vault";
+import { useLayoutEffect, useState } from "react";
+
+// ../ui/ui/MediaControls/MediaControls.icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PlayIcon = (props) => /* @__PURE__ */ jsxs("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
+  props.title ? /* @__PURE__ */ jsx("title", { children: props.title }) : null,
+  /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z", fill: "currentColor" })
+] });
+var PauseIcon = (props) => /* @__PURE__ */ jsxs("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
+  props.title ? /* @__PURE__ */ jsx("title", { children: props.title }) : null,
+  /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+] });
+var VolumeUpIcon = ({ title, ...props }) => /* @__PURE__ */ jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+  /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ 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__ */ jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+  /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ 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__ */ jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+  /* @__PURE__ */ jsx("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ 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
+import styled2, { css } from "styled-components";
+var AudioPlayerContainer = styled2.div`
+  background: #ededed; // Not in variable.
+  display: flex;
+  padding: 0.5em;
+  align-items: center;
+`;
+var BaseButton = styled2.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 = styled2(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;
   }
-};
-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]
-  };
+`;
+var TimeDisplay = styled2.div`
+  margin: 0 1em;
+  font-size: 0.85em;
+  color: #000;
+`;
+var ProgressContainer = styled2.div`
+  flex: 1 1 0px;
+  height: 6px;
+  display: flex;
+  position: relative;
+  padding: 15px 0;
+`;
+var ProgressCurrent = styled2.div`
+  background: #d85680;
+  height: 6px;
+  pointer-events: none;
+  position: absolute;
+  top: 13px;
+  left: 0;
+  border-radius: 3px;
+  transition: width 200ms;
+`;
+var ProgressBackground = styled2.div`
+  position: absolute;
+  top: 13px;
+  left: 0;
+  height: 6px;
+  border-radius: 3px;
+  width: 100%;
+  pointer-events: none;
+  background: #fff;
+`;
+var SoundButton = styled2(BaseButton)`
+  width: 2em;
+  height: 2em;
+  overflow: hidden;
+  font-size: 1.1em;
+  background: transparent;
+  border-radius: 3px;
+  padding: 0;
+  margin: 0;
+`;
+var SoundContainer = styled2.div`
+  display: flex;
+  align-items: center;
+`;
+var VolumeContainer = styled2.div`
+  width: 0;
+  overflow: hidden;
+  transition: width 500ms;
+  color: #4a473f; // Not in colours
+
+  ${(props) => props.$isOpen && css`
+      width: 150px;
+    `}
+`;
+var VolumeSlider = styled2.input.attrs({ type: "range" })`
+  width: 120px;
+  margin: 0 15px;
+`;
+
+// ../ui/madoc/components/icons/Spinner.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Spinner(props) {
+  return /* @__PURE__ */ jsx2("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ jsxs2("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ jsx2("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+    /* @__PURE__ */ jsx2("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx2(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 18 18",
+        to: "360 18 18",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ) })
+  ] }) });
 }
 
-// ../ui/icons/TextFormatIcon.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var TextFormatIcon = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
-  /* @__PURE__ */ jsx2("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx2("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/atoms/VisuallHidden/VisuallHidden.tsx
+import styled3, { css as css2 } from "styled-components";
+var visuallyHidden = css2`
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+`;
+var VisuallyHiddenLabel = styled3.label`
+  ${visuallyHidden}
+`;
 
-// src/ContentResource/PlaintextCreator/create-plaintext.tsx
-import { LanguageFieldEditor, InputContainer, InputLabel, Input } from "@manifest-editor/editors";
+// ../ui/ui/MediaControls/MediaControls.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function MediaControls(props) {
+  const [isVolumeOpen, setIsVolumeOpen] = useState(false);
+  const { progress, currentTime, element } = useMediaElements();
+  const { duration, isMuted, volume, isPlaying, playRequested } = useMediaState();
+  const { setVolume, toggleMute, play, pause, setDurationPercent } = useMediaActions();
+  const Volume = isMuted || volume === 0 ? VolumeOffIcon : volume > 50 ? VolumeUpIcon : VolumeDownIcon;
+  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__ */ jsxs3(AudioPlayerContainer, { children: [
+    /* @__PURE__ */ jsx3(
+      PlayButton,
+      {
+        disabled: playRequested,
+        onClick: () => {
+          if (isPlaying) {
+            pause();
+          } else {
+            play();
+          }
+        },
+        children: playRequested ? /* @__PURE__ */ jsx3(Spinner, { stroke: "#999" }) : isPlaying ? /* @__PURE__ */ jsx3(PauseIcon, { title: "Pause" }) : /* @__PURE__ */ jsx3(PlayIcon, { title: "Play" })
+      }
+    ),
+    /* @__PURE__ */ jsx3(TimeDisplay, { ref: currentTime, children: "0:00" }),
+    /* @__PURE__ */ jsxs3(
+      ProgressContainer,
+      {
+        onClick: (e) => {
+          const { left, width } = e.currentTarget.getBoundingClientRect();
+          const percent = (e.pageX - left) / width;
+          setDurationPercent(percent);
+        },
+        children: [
+          /* @__PURE__ */ jsx3(ProgressBackground, {}),
+          duration ? /* @__PURE__ */ jsx3(ProgressCurrent, { ref: progress }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(TimeDisplay, { children: formatTime(duration) }),
+    /* @__PURE__ */ jsxs3(SoundContainer, { onMouseEnter: () => setIsVolumeOpen(true), onMouseLeave: () => setIsVolumeOpen(false), children: [
+      /* @__PURE__ */ jsx3(VolumeContainer, { $isOpen: isVolumeOpen, children: /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3(VisuallyHiddenLabel, { htmlFor: "audio-slider", children: "Change volume" }),
+        /* @__PURE__ */ jsx3(
+          VolumeSlider,
+          {
+            id: "audio-slider",
+            role: "slider",
+            disabled: isMuted,
+            min: "0",
+            max: "100",
+            value: volume,
+            onChange: (e) => setVolume(Number(e.currentTarget.value))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx3(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ jsx3(Volume, { title: isMuted ? "Mute" : "Unmute" }) })
+    ] })
+  ] });
+}
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+import { CanvasPanel } from "react-iiif-vault";
+import { getValue } from "@iiif/helpers";
+import {
+  Input,
+  InputContainer,
+  InputLabel,
+  LanguageFieldEditor,
+  FormFieldWrapper
+} from "@manifest-editor/editors";
 
 // ../ui/atoms/Button.tsx
-import styled from "styled-components";
-var ButtonReset = styled.button`
+import styled4 from "styled-components";
+var ButtonReset = styled4.button`
   border: none;
   outline: none;
   background-color: transparent;
@@ -60,7 +315,7 @@ var ButtonReset = styled.button`
     color: inherit;
   }
 `;
-var Button = styled.button`
+var Button = styled4.button`
   padding: 0.5rem 1rem;
   color: ${(props) => props.theme.color.main || "none"};
   background-color: ${(props) => props.theme.color.white || "white"};
@@ -79,12 +334,12 @@ var Button = styled.button`
     background: #eee;
   }
 `;
-var SmallButton = styled(Button)`
+var SmallButton = styled4(Button)`
   padding: 0.25em ${(props) => props.theme.padding.xs || "0.4em"};
   height: unset;
   background: none;
 `;
-var SecondaryButton = styled(Button)`
+var SecondaryButton = styled4(Button)`
    {
     padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
     color: ${(props) => props.theme.color.main || "#B84C74;"};
@@ -104,7 +359,7 @@ var SecondaryButton = styled(Button)`
     }
   }
 `;
-var CalltoButton = styled(Button)`
+var CalltoButton = styled4(Button)`
   padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
   color: ${(props) => props.theme.color.white || "white"};
   background-color: ${(props) => props.theme.color.main || "#B84C74;"};
@@ -118,7 +373,7 @@ var CalltoButton = styled(Button)`
     background-color: ${(props) => props.theme.color.mainHover || "#B84C74;"};
   }
 `;
-var ButtonGroup = styled.div`
+var ButtonGroup = styled4.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -126,212 +381,171 @@ var ButtonGroup = styled.div`
   justify-content: ${(props) => props.$right ? "flex-end" : "flex-start"};
 `;
 
-// ../ui/atoms/PaddedSidebarContainer.tsx
-import styled2 from "styled-components";
-var PaddedSidebarContainer = styled2.div`
-  padding: 0 0.7em;
-  margin: 0.7em 0;
-  flex: 1;
-  overflow: visible;
-`;
-
-// src/ContentResource/PlaintextCreator/create-plaintext.tsx
-import { useState } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "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] = 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 });
-    }
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+async function createAudioAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
   };
-  return /* @__PURE__ */ jsx3(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs2("form", { onSubmit, children: [
-    /* @__PURE__ */ jsx3(
-      LanguageFieldEditor,
-      {
-        focusId: "label",
-        label: "Label",
-        fields: label,
-        onSave: (e) => setLabel(e.toInternationalString())
-      }
-    ),
-    /* @__PURE__ */ jsxs2(InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ jsx3(InputLabel, { htmlFor: "id", children: "Link to plaintext" }),
-      /* @__PURE__ */ jsx3(Input, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ jsx3(Button, { type: "submit", children: "Create" })
-  ] }) });
-}
-
-// src/ContentResource/PlaintextCreator/index.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var plaintextCreator = {
-  id: "@manifest-editor/plaintext-creator",
-  create: createPlaintext,
-  label: "Plaintext",
-  summary: "Add link to an plaintext",
-  icon: /* @__PURE__ */ jsx4(TextFormatIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ jsx4(CreatePlaintextForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["label", "format"],
-  supports: {
-    parentFields: ["seeAlso", "rendering", "homepage"]
-  },
-  staticFields: {
-    format: "text/plain"
-  }
-};
-
-// src/ContentResource/WebPageCreator/create-web-page.tsx
-import { LanguageFieldEditor as LanguageFieldEditor2, InputContainer as InputContainer2, InputLabel as InputLabel2, Input as Input2 } from "@manifest-editor/editors";
-import { useState as useState2 } from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-async function createWebPage(data, ctx) {
-  return ctx.embed({
+  const targetType = ctx.options.targetType;
+  const body = await ctx.embed({
     id: data.url,
-    type: "Text",
-    label: data.label,
-    format: "text/html"
+    type: "Sound",
+    format: "audio/mp4",
+    duration: data.duration || 0
   });
-}
-function CreateWebPageForm(props) {
-  const [label, setLabel] = useState2({ 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__ */ jsx5(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs3("form", { onSubmit, children: [
-    /* @__PURE__ */ jsx5(
-      LanguageFieldEditor2,
-      {
-        focusId: "label",
-        label: "Label",
-        fields: label,
-        onSave: (e) => setLabel(e.toInternationalString())
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      label: 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" }
       }
-    ),
-    /* @__PURE__ */ jsxs3(InputContainer2, { $wide: true, children: [
-      /* @__PURE__ */ jsx5(InputLabel2, { htmlFor: "id", children: "Link" }),
-      /* @__PURE__ */ jsx5(Input2, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ jsx5(Button, { type: "submit", children: "Create link" })
-  ] }) });
-}
-
-// ../ui/icons/LinkIcon.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function LinkIcon() {
-  return /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
-    /* @__PURE__ */ jsx6("path", { d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ jsx6("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
-  ] });
-}
-
-// src/ContentResource/WebPageCreator/index.tsx
-import { jsx as jsx7 } from "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__ */ jsx7(LinkIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ jsx7(CreateWebPageForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["label", "format"],
-  supports: {
-    parentFields: ["seeAlso", "rendering", "homepage"]
+    });
+    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]
+    });
   }
-};
-
-// src/ContentResource/HTMLBodyCreator/create-html-body.tsx
-import { InputContainer as InputContainer3, InputLabel as InputLabel3, RichTextLanguageField } from "@manifest-editor/editors";
-import { useConfig } from "@manifest-editor/shell";
-import { useState as useState3 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "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 } = useConfig();
-  const [body, setBodyValue] = useState3("<p></p>");
-  const [language, setLang] = useState3(i18n.defaultLanguage);
+function CreateAudioAnnotationForm(props) {
+  const [url, setUrl] = useState2("");
+  const [duration, setDuration] = useState2(0);
+  const [error, setError] = useState2("");
+  const [label, setLabel] = useState2({ en: [""] });
   const onSubmit = () => {
     props.runCreate({
-      language,
-      body
+      url,
+      duration,
+      label
     });
   };
-  return /* @__PURE__ */ jsxs5(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsxs5(InputContainer3, { children: [
-      /* @__PURE__ */ jsx8(InputLabel3, { children: "HTML Body" }),
-      /* @__PURE__ */ jsx8(
-        RichTextLanguageField,
+  useEffect2(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      setLabel({ en: [labelFromUrl || ""] });
+    }
+  }, [url]);
+  return /* @__PURE__ */ jsxs4(PaddedSidebarContainer, { children: [
+    error ? /* @__PURE__ */ jsx4(ErrorMessage, { children: error }) : null,
+    /* @__PURE__ */ jsxs4(InputContainer, { children: [
+      /* @__PURE__ */ jsx4(InputLabel, { htmlFor: "audio-url", children: "URL" }),
+      /* @__PURE__ */ jsx4(
+        Input,
         {
-          value: body,
-          language,
-          onUpdateLanguage: (lng) => setLang(lng),
-          languages: i18n.availableLanguages,
-          onUpdate: (e) => setBodyValue(e)
+          type: "text",
+          id: "audio-url",
+          value: url,
+          onChange: (e) => setUrl(e.target.value)
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(Button, { onClick: () => onSubmit(), children: "Create" })
+    url && !error ? /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+      LanguageFieldEditor,
+      {
+        containerId: "label",
+        focusId: "label_",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      },
+      url + "__" + duration
+    ) }) : null,
+    url && !error ? /* @__PURE__ */ jsx4(
+      CanvasPanel.AudioHTML,
+      {
+        media: { url, duration, type: "Sound" },
+        children: /* @__PURE__ */ jsx4(
+          MediaControls,
+          {
+            onError: (error2) => setError(error2),
+            onDuration: (duration2) => setDuration(duration2)
+          },
+          url + "__" + duration
+        )
+      },
+      url + "__" + duration
+    ) : null,
+    duration && !error ? /* @__PURE__ */ jsxs4(FormFieldWrapper, { children: [
+      /* @__PURE__ */ jsx4(InputLabel, { htmlFor: "duration", children: "Duration" }),
+      /* @__PURE__ */ jsx4(
+        Input,
+        {
+          type: "number",
+          id: "duration",
+          value: duration,
+          onChange: (e) => setDuration(e.target.valueAsNumber)
+        }
+      )
+    ] }) : null,
+    url && !error && /* @__PURE__ */ jsx4(Button, { onClick: onSubmit, children: "Add audio" })
   ] });
 }
 
-// src/ContentResource/HTMLBodyCreator/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var htmlBodyCreator = {
-  id: "@manifest-editor/html-body-creator",
-  create: createHtmlBody,
-  label: "HTML Body",
-  summary: "Add HTML annotation body",
-  icon: /* @__PURE__ */ jsx9(TextFormatIcon, {}),
+// src/Annotation/AudioAnnotation/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var audioAnnotation = {
+  id: "@manifest-editor/audio-annotation",
+  create: createAudioAnnotation,
+  label: "Audio",
+  summary: "Audio annotation",
+  icon: /* @__PURE__ */ jsx5(AudioIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx9(CreateHTMLBodyForm, { ...ctx });
+    return /* @__PURE__ */ jsx5(CreateAudioAnnotationForm, { ...ctx });
   },
-  resourceType: "ContentResource",
-  resourceFields: ["id", "language", "type", "format", "value"],
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
   supports: {
-    parentTypes: ["Annotation"],
-    parentFields: ["body"]
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
   },
   staticFields: {
-    type: "TextualBody",
-    format: "text/html"
+    type: "Annotation"
   }
 };
 
-// src/Annotation/HTMLAnnotation/create-html-annotation.tsx
-import { useState as useState4 } from "react";
-import { InputContainer as InputContainer4, InputLabel as InputLabel4, LanguageFieldEditor as LanguageFieldEditor3 } from "@manifest-editor/editors";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-async function createHtmlAnnotation(data, ctx) {
+// src/Annotation/CaptionedImageAnnotation/index.tsx
+import { AddImageIcon } from "@manifest-editor/components";
+
+// src/Annotation/CaptionedImageAnnotation/create-captioned-image-annotation.tsx
+import {
+  Input as Input2,
+  InputContainer as InputContainer2,
+  InputLabel as InputLabel2,
+  LanguageFieldEditor as LanguageFieldEditor2
+} from "@manifest-editor/editors";
+import { useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+async function createCaptionedImageAnnotation(data, ctx) {
   const annotation = {
     id: ctx.generateId("annotation"),
     type: "Annotation"
@@ -354,6 +568,16 @@ async function createHtmlAnnotation(data, ctx) {
       );
     }
   }
+  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,
@@ -364,12 +588,18 @@ async function createHtmlAnnotation(data, ctx) {
   }
   if (targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
       body: bodies,
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -386,18 +616,26 @@ async function createHtmlAnnotation(data, ctx) {
     });
   }
 }
-function CreateHTMLAnnotation(props) {
-  const [body, setBody] = useState4({ en: [""] });
-  const onSubmit = () => {
+function CreateCaptionedImageAnnotation(props) {
+  const [body, setBody] = useState3({ en: [""] });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
     props.runCreate({
-      body
+      body,
+      imageUrl: formData.url
     });
   };
-  return /* @__PURE__ */ jsxs6(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsxs6(InputContainer4, { children: [
-      /* @__PURE__ */ jsx10(InputLabel4, { children: "HTML Body" }),
-      /* @__PURE__ */ jsx10(
-        LanguageFieldEditor3,
+  return /* @__PURE__ */ jsx6("form", { onSubmit, children: /* @__PURE__ */ jsxs5(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsx6(InputContainer2, { children: /* @__PURE__ */ jsxs5(InputContainer2, { $wide: true, children: [
+      /* @__PURE__ */ jsx6(InputLabel2, { htmlFor: "id", children: "Link to Image" }),
+      /* @__PURE__ */ jsx6(Input2, { id: "url", name: "url", defaultValue: "" })
+    ] }) }),
+    /* @__PURE__ */ jsxs5(InputContainer2, { children: [
+      /* @__PURE__ */ jsx6(InputLabel2, { children: "Image Caption" }),
+      /* @__PURE__ */ jsx6(
+        LanguageFieldEditor2,
         {
           focusId: "html-content",
           label: "HTML Content",
@@ -406,28 +644,27 @@ function CreateHTMLAnnotation(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10(Button, { onClick: () => onSubmit(), children: "Create" })
-  ] });
+    /* @__PURE__ */ jsx6(Button, { type: "submit", children: "Create" })
+  ] }) });
 }
 
-// src/Annotation/HTMLAnnotation/index.tsx
-import { HTMLIcon } from "@manifest-editor/components";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var htmlAnnotation = {
-  id: "@manifest-editor/html-annotation",
-  create: createHtmlAnnotation,
-  label: "HTML",
-  summary: "HTML annotation",
-  icon: /* @__PURE__ */ jsx11(HTMLIcon, {}),
+// src/Annotation/CaptionedImageAnnotation/index.tsx
+import { jsx as jsx7 } from "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__ */ jsx7(AddImageIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx11(CreateHTMLAnnotation, { ...ctx });
+    return /* @__PURE__ */ jsx7(CreateCaptionedImageAnnotation, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
   additionalTypes: ["Canvas"],
   supports: {
     initialData: true,
-    parentTypes: ["AnnotationPage", "Manifest"],
+    parentTypes: ["AnnotationPage"],
     parentFields: ["items"]
   },
   staticFields: {
@@ -435,308 +672,128 @@ var htmlAnnotation = {
   }
 };
 
-// ../ui/icons/ThumbnailStripIcon.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
-var ThumbnailStripIcon = () => /* @__PURE__ */ jsx12(
-  "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__ */ jsxs7("g", { children: [
-      /* @__PURE__ */ jsx12("rect", { fill: "none", height: "24", width: "24" }),
-      /* @__PURE__ */ jsx12("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
-    ] })
-  }
-);
+// src/Annotation/HTMLAnnotation/index.tsx
+import { HTMLIcon as HTMLIcon2 } from "@manifest-editor/components";
 
-// src/AnnotationPage/EmptyAnnotationPage/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var emptyAnnotationPage = {
-  id: "@manifest-editor/empty-annotation-page",
-  create: createEmptyAnnotationPage,
-  label: "Empty annotation page",
-  summary: "AnnotationPage with nothing",
-  icon: /* @__PURE__ */ jsx13(ThumbnailStripIcon, {}),
-  resourceType: "AnnotationPage",
-  resourceFields: ["id", "type", "items"],
-  supports: {
-    parentTypes: ["Manifest", "Canvas", "Range"],
-    parentFieldMap: {
-      Manifest: ["annotations"],
-      Canvas: ["items", "annotations"],
-      Range: ["annotations"]
+// src/Annotation/HTMLAnnotation/create-html-annotation.tsx
+import { useState as useState4 } from "react";
+import {
+  InputContainer as InputContainer3,
+  InputLabel as InputLabel3,
+  LanguageFieldEditor as LanguageFieldEditor3
+} from "@manifest-editor/editors";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+async function createHtmlAnnotation(data, ctx) {
+  const annotation = {
+    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
-import { YouTubeIcon } from "@manifest-editor/components";
-
-// src/ContentResource/YouTubeCreator/create-youtube-body.tsx
-import { InputContainer as InputContainer5, InputLabel as InputLabel5, Input as Input3 } from "@manifest-editor/editors";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var ytRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
-function getYouTubeId(url) {
-  const id = (url || "").match(ytRegex);
-  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") {
+  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) {
-  const onSubmit = (e) => {
-    e.preventDefault();
-    const data = new FormData(e.target);
-    const formData = Object.fromEntries(data.entries());
-    if (formData.youtubeUrl) {
-      props.runCreate({ youtubeUrl: formData.youtubeUrl });
-    }
-  };
-  return /* @__PURE__ */ jsx14(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs8("form", { onSubmit, children: [
-    /* @__PURE__ */ jsxs8(InputContainer5, { $wide: true, children: [
-      /* @__PURE__ */ jsx14(InputLabel5, { htmlFor: "id", children: "Link to YouTube" }),
-      /* @__PURE__ */ jsx14(Input3, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ jsx14(Button, { type: "submit", children: "Create" })
-  ] }) });
-}
-
-// src/ContentResource/YouTubeCreator/index.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var youTubeBodyCreator = {
-  id: "@manifest-editor/youtube",
-  create: createYoutubeBody,
-  label: "YouTube",
-  summary: "Embed YouTube",
-  icon: /* @__PURE__ */ jsx15(YouTubeIcon, {}),
-  resourceType: "ContentResource",
-  additionalTypes: ["Canvas", "Annotation"],
-  resourceFields: ["id", "type", "service"],
-  render: (ctx) => /* @__PURE__ */ jsx15(YouTubeForm, { ...ctx }),
-  supports: {
-    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
-    parentFieldMap: {
-      Annotation: ["body"],
-      Manifest: ["items"],
-      AnnotationPage: ["items"]
-    }
-  },
-  staticFields: {
-    type: "Video"
-  }
-};
-
-// src/ContentResource/ImageUrlCreator/create-image-url.tsx
-import { InputContainer as InputContainer6, InputLabel as InputLabel6, Input as Input4 } from "@manifest-editor/editors";
-import { getImageDimensions, getFormat } from "@manifest-editor/shell";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-async function createImageUrl(data, ctx) {
-  if (!data.height || !data.width) {
-    const dimensions = await 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 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 });
-    }
+function CreateHTMLAnnotation(props) {
+  const [body, setBody] = useState4({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      body
+    });
   };
-  return /* @__PURE__ */ jsx16(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs9("form", { onSubmit, children: [
-    /* @__PURE__ */ jsxs9(InputContainer6, { $wide: true, children: [
-      /* @__PURE__ */ jsx16(InputLabel6, { htmlFor: "id", children: "Link to Image" }),
-      /* @__PURE__ */ jsx16(Input4, { id: "url", name: "url", defaultValue: "" })
+  return /* @__PURE__ */ jsxs6(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsxs6(InputContainer3, { children: [
+      /* @__PURE__ */ jsx8(InputLabel3, { children: "HTML Body" }),
+      /* @__PURE__ */ jsx8(
+        LanguageFieldEditor3,
+        {
+          focusId: "html-content",
+          label: "HTML Content",
+          fields: body,
+          onSave: (e) => setBody(e.toInternationalString())
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx16(Button, { type: "submit", children: "Create" })
-  ] }) });
+    /* @__PURE__ */ jsx8(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
 }
 
-// src/ContentResource/ImageUrlCreator/index.tsx
-import { AddImageIcon } from "@manifest-editor/components";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var imageUrlCreator = {
-  id: "@manifest-editor/image-url-creator",
-  create: createImageUrl,
-  label: "Image",
-  summary: "Image from a URL",
-  icon: /* @__PURE__ */ jsx17(AddImageIcon, {}),
+// src/Annotation/HTMLAnnotation/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var htmlAnnotation = {
+  id: "@manifest-editor/html-annotation",
+  create: createHtmlAnnotation,
+  label: "HTML",
+  summary: "HTML annotation",
+  icon: /* @__PURE__ */ jsx9(HTMLIcon2, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx17(CreateImageUrlForm, { ...ctx });
+    return /* @__PURE__ */ jsx9(CreateHTMLAnnotation, { ...ctx });
   },
-  resourceType: "ContentResource",
-  resourceFields: ["format"],
+  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/ContentResource/ImageServiceCreator/create-image-service.tsx
-import {
-  imageServiceRequestToString,
-  createImageServiceRequest,
-  canonicalServiceUrl
-} from "@iiif/parser/image-3";
-import { InputContainer as InputContainer7, InputLabel as InputLabel7, Input as Input5 } from "@manifest-editor/editors";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-async function createImageServer(data, ctx) {
-  const request = createImageServiceRequest(data.service);
-  const imageId = 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 = 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__ */ jsx18(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs10("form", { onSubmit, children: [
-    /* @__PURE__ */ jsxs10(InputContainer7, { $wide: true, children: [
-      /* @__PURE__ */ jsx18(InputLabel7, { htmlFor: "id", children: "Link to image service" }),
-      /* @__PURE__ */ jsx18(Input5, { id: "url", name: "url", defaultValue: "" })
-    ] }),
-    /* @__PURE__ */ jsx18(Button, { type: "submit", children: "Create" })
-  ] }) });
-}
-
-// src/ContentResource/ImageServiceCreator/index.tsx
-import { jsx as jsx19 } from "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__ */ jsx19(TextFormatIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ jsx19(CreateImageServerForm, { ...ctx });
-  },
-  resourceType: "ContentResource",
-  resourceFields: ["id", "type", "height", "width", "format", "service"],
-  supports: {
-    parentFields: ["logo", "body", "thumbnail"]
-  },
-  staticFields: {
-    type: "Image"
-  }
-};
+// src/Annotation/ImageServiceAnnotation/index.tsx
+import { IIIFLogo } from "@manifest-editor/components";
 
 // src/side-effects/reposition-multiple-images.ts
 import { isImageService } from "@iiif/parser/image-3";
@@ -761,7 +818,7 @@ var repositionMultipleImages = {
       if (!annoPage) {
         return;
       }
-      if (annoPage.items.length < 2) {
+      if (annoPage.items.length < 2 && !canvas.behavior.includes("multi-image")) {
         return;
       }
       const bodies = vault.get(fullAnno.body);
@@ -772,10 +829,18 @@ var repositionMultipleImages = {
       if (imageService) {
         if (imageService.width && imageService.height) {
           if (imageService.width !== body.width) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "width",
+              imageService.width
+            );
           }
           if (imageService.height !== body.height) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "height",
+              imageService.height
+            );
           }
         }
       }
@@ -819,6 +884,9 @@ var resizeResourceToEmptyCanvas = {
       if (!canvas.items) {
         return;
       }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
       const annoPage = vault.get(canvas.items[0]);
       if (!annoPage) {
         return;
@@ -876,6 +944,9 @@ var resizeToFitService = {
       if (!canvas.items) {
         return;
       }
+      if (canvas.behavior.includes("multi-image")) {
+        return;
+      }
       const annoPage = vault.get(canvas.items[0]);
       if (!annoPage) {
         return;
@@ -891,10 +962,18 @@ var resizeToFitService = {
       if (imageService) {
         if (imageService.width && imageService.height) {
           if (imageService.width !== body.width) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "width",
+              imageService.width
+            );
           }
           if (imageService.height !== body.height) {
-            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+            vault.modifyEntityField(
+              { id: body.id, type: "ContentResource" },
+              "height",
+              imageService.height
+            );
           }
         }
       }
@@ -902,17 +981,89 @@ var resizeToFitService = {
   }
 };
 
+// src/ContentResource/ImageServiceCreator/create-image-service.tsx
+import {
+  imageServiceRequestToString,
+  createImageServiceRequest,
+  canonicalServiceUrl
+} from "@iiif/parser/image-3";
+import { InputContainer as InputContainer4, InputLabel as InputLabel4, Input as Input3 } from "@manifest-editor/editors";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+async function createImageServer(data, ctx) {
+  const request = createImageServiceRequest(data.service);
+  const imageId = 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 = 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__ */ jsx10(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs7("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxs7(InputContainer4, { $wide: true, children: [
+      /* @__PURE__ */ jsx10(InputLabel4, { htmlFor: "id", children: "Link to image service" }),
+      /* @__PURE__ */ jsx10(Input3, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ jsx10(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
 // src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "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" }
-  });
+  const resource = await ctx.create(
+    "@manifest-editor/image-service-creator",
+    data,
+    {
+      parent: { resource: annotation, property: "body" }
+    }
+  );
   if (targetType === "Annotation") {
     return {
       ...annotation,
@@ -923,12 +1074,18 @@ async function createImageServiceAnnotation(data, ctx) {
   }
   if (targetType === "Canvas") {
     const canvasId = ctx.generateId("canvas");
-    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const pageId = ctx.generateId("annotation-page", {
+      id: canvasId,
+      type: "Canvas"
+    });
     const annotationResource = ctx.embed({
       ...annotation,
       motivation: "painting",
       body: [resource],
-      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -946,21 +1103,150 @@ async function createImageServiceAnnotation(data, ctx) {
   }
 }
 function CreateImageServiceAnnotationForm(props) {
-  return /* @__PURE__ */ jsx20(CreateImageServerForm, { ...props });
+  return /* @__PURE__ */ jsx11(CreateImageServerForm, { ...props });
 }
 
 // src/Annotation/ImageServiceAnnotation/index.tsx
-import { IIIFLogo } from "@manifest-editor/components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "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__ */ jsx21(IIIFLogo, { style: { padding: 10 } }),
+  tags: ["image", "image-service"],
+  icon: /* @__PURE__ */ jsx12(IIIFLogo, { style: { padding: 10 } }),
+  render(ctx) {
+    return /* @__PURE__ */ jsx12(CreateImageServiceAnnotationForm, { ...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/ImageUrlAnnotation/index.tsx
+import { AddImageIcon as AddImageIcon2 } from "@manifest-editor/components";
+
+// src/ContentResource/ImageUrlCreator/create-image-url.tsx
+import { InputContainer as InputContainer5, InputLabel as InputLabel5, Input as Input4 } from "@manifest-editor/editors";
+import { getImageDimensions, getFormat } from "@manifest-editor/shell";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+async function createImageUrl(data, ctx) {
+  if (!data.height || !data.width) {
+    const dimensions = await 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 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__ */ jsx13(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs8("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxs8(InputContainer5, { $wide: true, children: [
+      /* @__PURE__ */ jsx13(InputLabel5, { htmlFor: "id", children: "Link to Image" }),
+      /* @__PURE__ */ jsx13(Input4, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ jsx13(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
+import { jsx as jsx14 } from "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__ */ jsx14(CreateImageUrlForm, { ...props });
+}
+
+// src/Annotation/ImageUrlAnnotation/index.tsx
+import { jsx as jsx15 } from "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__ */ jsx15(AddImageIcon2, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx21(CreateImageServiceAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ jsx15(CreateImageUrlAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
@@ -969,21 +1255,25 @@ var imageServiceAnnotation = {
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
+  sideEffects: [
+    resizeToFitService,
+    resizeResourceToEmptyCanvas,
+    repositionMultipleImages
+  ],
   staticFields: {
     type: "Annotation"
   }
 };
 
 // src/Annotation/NoBodyAnnotation/index.tsx
-import { EmptyCanvasIcon as EmptyCanvasIcon2 } from "@manifest-editor/components";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { EmptyCanvasIcon } from "@manifest-editor/components";
+import { jsx as jsx16 } from "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__ */ jsx22(EmptyCanvasIcon2, {}),
+  icon: /* @__PURE__ */ jsx16(EmptyCanvasIcon, {}),
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "target"],
   supports: {
@@ -1007,201 +1297,97 @@ function createNoBodyAnnotation(data, ctx) {
   });
 }
 
-// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-import { normaliseContentState, parseContentState } from "@iiif/helpers";
-import { lazy } from "react";
+// src/Annotation/VideoAnnotation/index.tsx
+import { VideoIcon } from "@manifest-editor/components";
 
-// ../../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/Annotation/VideoAnnotation/create-video-annotation.tsx
+import { getValue as getValue2 } from "@iiif/helpers";
+import { ErrorMessage as ErrorMessage2 } from "@manifest-editor/components";
+import {
+  DimensionsTriplet,
+  Input as Input5,
+  InputContainer as InputContainer6,
+  InputLabel as InputLabel6,
+  LanguageFieldEditor as LanguageFieldEditor4
+} from "@manifest-editor/editors";
 
-// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
-async function createFromIIIFBrowserOutput(data, ctx) {
-  const targetType = ctx.options.targetType;
-  if (Array.isArray(data.output)) {
-    throw new Error("Multiple items not yet supported");
-  }
-  const contentState = normaliseContentState(
-    typeof data.output === "string" ? parseContentState(data.output) : data.output
-  );
-  if (!contentState.target || contentState.target.length === 0) {
-    throw new Error("No target found in content state");
-  }
-  const target = contentState.target[0];
-  const type = target.source.type;
-  const previewVault = 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()
-          });
-        }
-        return ctx.embed({
-          ...previewVault.toPresentation3(annotation),
-          target: ctx.getTarget()
-        });
-      }
-    }
-  }
-  throw new Error("Not yet supported.");
-}
-var IIIFBrowserCreatorForm = lazy(() => import("./iiif-browser-form.lazy-PL3WMLU5.js"));
-
-// src/ContentResource/IIIFBrowserCreator/index.tsx
-import { IIIFBrowserIcon } from "@manifest-editor/components";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var iiifBrowserCreator = {
-  id: "@manifest-editor/iiif-browser-creator",
-  create: createFromIIIFBrowserOutput,
-  label: "IIIF Browser",
-  summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ jsx23(IIIFBrowserIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ jsx23(IIIFBrowserCreatorForm, { ...ctx });
-  },
-  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/Canvas/InternalCanvas/index.tsx
-import { useManifest, useVault } from "react-iiif-vault";
-import { IIIFExplorer } from "@manifest-editor/iiif-browser";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var internalCanvas = {
-  id: "@manifest-editor/internal-canvas",
-  create: createInternalCanvas,
-  label: "Internal canvas link",
-  summary: "Canvas from the same manifest",
-  icon: /* @__PURE__ */ jsx24(ThumbnailStripIcon, {}),
-  resourceType: "Canvas",
-  resourceFields: ["id", "type", "label"],
-  supports: {
-    parentTypes: ["Manifest"],
-    parentFields: ["start"]
-  },
-  render: (ctx) => /* @__PURE__ */ jsx24(InternalCanvas, { ...ctx })
-};
-function InternalCanvas(props) {
-  const manifest = useManifest();
-  const vault = useVault();
-  invariant(manifest, "Manifest is not loaded");
-  return /* @__PURE__ */ jsx24(
-    IIIFExplorer,
+// ../ui/ui/VideoPlayer/VideoPlayer.tsx
+import { CanvasPanel as CanvasPanel2, MediaPlayerProvider, useSimpleMediaPlayer } from "react-iiif-vault";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+function VideoPlayer({
+  media,
+  onError,
+  duration,
+  onDuration,
+  onDimensions
+}) {
+  const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration });
+  return /* @__PURE__ */ jsxs9(
+    MediaPlayerProvider,
     {
-      vault,
-      entry: manifest,
-      window: false,
-      hideHeader: true,
-      hideBack: true,
-      output: { type: "url" },
-      outputTargets: [
-        {
-          type: "callback",
-          label: "Select canvas",
-          cb: (url) => {
-            props.runCreate({ id: url });
+      element,
+      state,
+      actions,
+      currentTime,
+      progress,
+      children: [
+        /* @__PURE__ */ jsx17(
+          "div",
+          {
+            style: {
+              maxHeight: 400,
+              aspectRatio: `${media.width}/${media.height}`,
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx17(CanvasPanel2.VideoHTML, { element, media, playPause: actions.playPause })
           }
-        }
-      ],
-      outputTypes: ["Canvas"]
+        ),
+        /* @__PURE__ */ jsx17(MediaControls, { onError, onDuration, onDimensions })
+      ]
     }
   );
 }
-async function createInternalCanvas(data, ctx) {
-  return ctx.embed({ id: data.id, type: "Canvas" });
-}
 
-// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-async function createImageUrlAnnotation(data, ctx) {
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+async function createVideoAnnotation(data, ctx) {
   const annotation = {
     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" }
+  const body = ctx.embed({
+    id: data.url,
+    type: "Video",
+    format: "video/mp4",
+    width: data.width,
+    height: data.height,
+    duration: data.duration || 0
   });
   if (targetType === "Annotation") {
-    return {
+    return ctx.embed({
       ...annotation,
-      body: [resource],
-      motivation: data.motivation || "painting",
+      label: getValue2(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 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" } }
+      body,
+      target: {
+        type: "SpecificResource",
+        source: { id: canvasId, type: "Canvas" }
+      }
     });
     const page = ctx.embed({
       id: pageId,
@@ -1211,662 +1397,826 @@ async function createImageUrlAnnotation(data, ctx) {
     return ctx.embed({
       id: canvasId,
       type: "Canvas",
-      label: data.label || { en: ["Untitled canvas"] },
-      height: resource.resource.height || 1e3,
-      width: resource.resource.width || 1e3,
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      duration: data.duration || 0,
+      width: data.width,
+      height: data.height,
       items: [page]
     });
   }
 }
-function CreateImageUrlAnnotationForm(props) {
-  return /* @__PURE__ */ jsx25(CreateImageUrlForm, { ...props });
+function CreateVideoAnnotationForm(props) {
+  const [url, setUrl] = useState5("");
+  const [duration, setDuration] = useState5(0);
+  const [width, setWidth] = useState5(0);
+  const [height, setHeight] = useState5(0);
+  const [error, setError] = useState5("");
+  const [label, setLabel] = useState5({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      url,
+      duration,
+      label,
+      width,
+      height
+    });
+  };
+  useEffect3(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      setLabel({ en: [labelFromUrl || ""] });
+    }
+  }, [url]);
+  return /* @__PURE__ */ jsxs10(PaddedSidebarContainer, { children: [
+    error ? /* @__PURE__ */ jsx18(ErrorMessage2, { children: error }) : null,
+    /* @__PURE__ */ jsxs10(InputContainer6, { children: [
+      /* @__PURE__ */ jsx18(InputLabel6, { htmlFor: "video-url", children: "URL" }),
+      /* @__PURE__ */ jsx18(
+        Input5,
+        {
+          type: "text",
+          id: "video-url",
+          value: url,
+          onChange: (e) => setUrl(e.target.value)
+        }
+      )
+    ] }),
+    url && !error ? /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18(
+      LanguageFieldEditor4,
+      {
+        containerId: "label",
+        focusId: "label_",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      },
+      url + "__" + duration
+    ) }) : null,
+    url && !error ? /* @__PURE__ */ jsx18(
+      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__ */ jsx18(InputContainer6, { $wide: true, children: /* @__PURE__ */ jsx18(
+      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__ */ jsx18(Button, { onClick: onSubmit, children: "Add video" })
+  ] });
 }
 
-// src/Annotation/ImageUrlAnnotation/index.tsx
-import { AddImageIcon as AddImageIcon2 } from "@manifest-editor/components";
-import { jsx as jsx26 } from "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__ */ jsx26(AddImageIcon2, {}),
-  render(ctx) {
-    return /* @__PURE__ */ jsx26(CreateImageUrlAnnotationForm, { ...ctx });
+// src/Annotation/VideoAnnotation/index.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var videoAnnotation = {
+  id: "@manifest-editor/video-annotation",
+  create: createVideoAnnotation,
+  label: "Video",
+  summary: "Video annotation",
+  icon: /* @__PURE__ */ jsx19(VideoIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx19(CreateVideoAnnotationForm, { ...ctx });
   },
   resourceType: "Annotation",
   resourceFields: ["id", "type", "motivation", "body", "target"],
   additionalTypes: ["Canvas"],
   supports: {
+    initialData: true,
     parentTypes: ["AnnotationPage", "Manifest"],
     parentFields: ["items"]
   },
-  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
   staticFields: {
     type: "Annotation"
   }
 };
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-import { useEffect as useEffect2, useState as useState6 } from "react";
+// ../ui/icons/ThumbnailStripIcon.tsx
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+var ThumbnailStripIcon = () => /* @__PURE__ */ jsx20(
+  "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__ */ jsxs11("g", { children: [
+      /* @__PURE__ */ jsx20("rect", { fill: "none", height: "24", width: "24" }),
+      /* @__PURE__ */ jsx20("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
+    ] })
+  }
+);
 
-// ../ui/atoms/callouts/ErrorMessage.tsx
-import styled3, { css } from "styled-components";
-var ErrorMessage = styled3.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/AnnotationPage/EmptyAnnotationPage/index.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var emptyAnnotationPage = {
+  id: "@manifest-editor/empty-annotation-page",
+  create: (data, ctx) => {
+    return ctx.embed({
+      id: ctx.generateId("annotations"),
+      label: data.label,
+      type: "AnnotationPage",
+      items: []
+    });
+  },
+  label: "Empty annotation page",
+  summary: "AnnotationPage with nothing",
+  icon: /* @__PURE__ */ jsx21(ThumbnailStripIcon, {}),
+  resourceType: "AnnotationPage",
+  resourceFields: ["id", "type", "items"],
+  supports: {
+    parentTypes: ["Manifest", "Canvas", "Range"],
+    parentFieldMap: {
+      Manifest: ["annotations"],
+      Canvas: ["items", "annotations"],
+      Range: ["annotations"]
+    }
   }
-  ${(props) => props.$small && 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
-import { formatTime, useMediaActions, useMediaElements, useMediaState } from "react-iiif-vault";
-import { useLayoutEffect, useState as useState5 } from "react";
+// src/Canvas/EmptyCanvas/index.tsx
+import { EmptyCanvasIcon as EmptyCanvasIcon2 } from "@manifest-editor/components";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var emptyCanvas = {
+  id: "@manifest-editor/empty-canvas",
+  create: (data, ctx) => {
+    const canvasId = ctx.generateId("canvas");
+    const page = ctx.embed({
+      id: ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" }),
+      type: "AnnotationPage",
+      items: []
+    });
+    return {
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: [""] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      items: [page]
+    };
+  },
+  label: "Empty canvas",
+  summary: "No content",
+  icon: /* @__PURE__ */ jsx22(EmptyCanvasIcon2, {}),
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label", "height", "width", "items"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
+  }
+};
 
-// ../ui/ui/MediaControls/MediaControls.icons.tsx
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
-var PlayIcon = (props) => /* @__PURE__ */ jsxs11("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
-  props.title ? /* @__PURE__ */ jsx27("title", { children: props.title }) : null,
-  /* @__PURE__ */ jsx27("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx27("path", { d: "M8 5v14l11-7z", fill: "currentColor" })
-] });
-var PauseIcon = (props) => /* @__PURE__ */ jsxs11("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
-  props.title ? /* @__PURE__ */ jsx27("title", { children: props.title }) : null,
-  /* @__PURE__ */ jsx27("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx27("path", { fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
-] });
-var VolumeUpIcon = ({ title, ...props }) => /* @__PURE__ */ jsxs11("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
-  title ? /* @__PURE__ */ jsx27("title", { children: title }) : null,
-  /* @__PURE__ */ jsx27("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx27(
-    "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__ */ jsxs11("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
-  title ? /* @__PURE__ */ jsx27("title", { children: title }) : null,
-  /* @__PURE__ */ jsx27("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx27(
-    "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__ */ jsxs11("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
-  title ? /* @__PURE__ */ jsx27("title", { children: title }) : null,
-  /* @__PURE__ */ jsx27("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx27(
-    "path",
+// src/Canvas/InternalCanvas/index.tsx
+import { IIIFExplorer } from "@manifest-editor/iiif-browser";
+import { useManifest, useVault } from "react-iiif-vault";
+
+// ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
+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
+import { jsx as jsx23 } from "react/jsx-runtime";
+var internalCanvas = {
+  id: "@manifest-editor/internal-canvas",
+  create: createInternalCanvas,
+  label: "Internal canvas link",
+  summary: "Canvas from the same manifest",
+  icon: /* @__PURE__ */ jsx23(ThumbnailStripIcon, {}),
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["start"]
+  },
+  render: (ctx) => /* @__PURE__ */ jsx23(InternalCanvas, { ...ctx })
+};
+function InternalCanvas(props) {
+  const manifest = useManifest();
+  const vault = useVault();
+  invariant(manifest, "Manifest is not loaded");
+  return /* @__PURE__ */ jsx23(
+    IIIFExplorer,
     {
-      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"
+      vault,
+      entry: manifest,
+      window: false,
+      hideHeader: true,
+      hideBack: true,
+      output: { type: "url" },
+      outputTargets: [
+        {
+          type: "callback",
+          label: "Select canvas",
+          cb: (url) => {
+            props.runCreate({ id: url });
+          }
+        }
+      ],
+      outputTypes: ["Canvas"]
     }
-  )
+  );
+}
+async function createInternalCanvas(data, ctx) {
+  return ctx.embed({ id: data.id, type: "Canvas" });
+}
+
+// ../ui/icons/TextFormatIcon.tsx
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var TextFormatIcon = (props) => /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ jsx24("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx24("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
 ] });
 
-// ../ui/ui/MediaControls/MediaControls.styles.ts
-import styled4, { css as css2 } from "styled-components";
-var AudioPlayerContainer = styled4.div`
-  background: #ededed; // Not in variable.
-  display: flex;
-  padding: 0.5em;
-  align-items: center;
-`;
-var BaseButton = styled4.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 = styled4(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
+// src/ContentResource/HTMLBodyCreator/create-html-body.tsx
+import {
+  InputContainer as InputContainer7,
+  InputLabel as InputLabel7,
+  RichTextLanguageField
+} from "@manifest-editor/editors";
+import { useConfig } from "@manifest-editor/shell";
+import { useState as useState6 } from "react";
+import { jsx as jsx25, jsxs as jsxs13 } from "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 } = useConfig();
+  const [body, setBodyValue] = useState6("<p></p>");
+  const [language, setLang] = useState6(i18n.defaultLanguage);
+  const onSubmit = () => {
+    props.runCreate({
+      language,
+      body
+    });
+  };
+  return /* @__PURE__ */ jsxs13(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsxs13(InputContainer7, { children: [
+      /* @__PURE__ */ jsx25(InputLabel7, { children: "HTML Body" }),
+      /* @__PURE__ */ jsx25(
+        RichTextLanguageField,
+        {
+          value: body,
+          language,
+          onUpdateLanguage: (lng) => setLang(lng),
+          languages: i18n.availableLanguages,
+          onUpdate: (e) => setBodyValue(e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx25(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
+}
 
-  &:disabled {
-    color: #999;
+// src/ContentResource/HTMLBodyCreator/index.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var htmlBodyCreator = {
+  id: "@manifest-editor/html-body-creator",
+  create: createHtmlBody,
+  label: "HTML Body",
+  summary: "Add HTML annotation body",
+  icon: /* @__PURE__ */ jsx26(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx26(CreateHTMLBodyForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "language", "type", "format", "value"],
+  supports: {
+    parentTypes: ["Annotation"],
+    parentFields: ["body"]
+  },
+  staticFields: {
+    type: "TextualBody",
+    format: "text/html"
   }
-`;
-var TimeDisplay = styled4.div`
-  margin: 0 1em;
-  font-size: 0.85em;
-  color: #000;
-`;
-var ProgressContainer = styled4.div`
-  flex: 1 1 0px;
-  height: 6px;
-  display: flex;
-  position: relative;
-  padding: 15px 0;
-`;
-var ProgressCurrent = styled4.div`
-  background: #d85680;
-  height: 6px;
-  pointer-events: none;
-  position: absolute;
-  top: 13px;
-  left: 0;
-  border-radius: 3px;
-  transition: width 200ms;
-`;
-var ProgressBackground = styled4.div`
-  position: absolute;
-  top: 13px;
-  left: 0;
-  height: 6px;
-  border-radius: 3px;
-  width: 100%;
-  pointer-events: none;
-  background: #fff;
-`;
-var SoundButton = styled4(BaseButton)`
-  width: 2em;
-  height: 2em;
-  overflow: hidden;
-  font-size: 1.1em;
-  background: transparent;
-  border-radius: 3px;
-  padding: 0;
-  margin: 0;
-`;
-var SoundContainer = styled4.div`
-  display: flex;
-  align-items: center;
-`;
-var VolumeContainer = styled4.div`
-  width: 0;
-  overflow: hidden;
-  transition: width 500ms;
-  color: #4a473f; // Not in colours
+};
 
-  ${(props) => props.$isOpen && css2`
-      width: 150px;
-    `}
-`;
-var VolumeSlider = styled4.input.attrs({ type: "range" })`
-  width: 120px;
-  margin: 0 15px;
-`;
+// src/ContentResource/IIIFBrowserCreator/index.tsx
+import { IIIFBrowserIcon } from "@manifest-editor/components";
 
-// ../ui/madoc/components/icons/Spinner.tsx
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
-function Spinner(props) {
-  return /* @__PURE__ */ jsx28("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ jsxs12("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ jsx28("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ jsx28("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx28(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 18 18",
-        to: "360 18 18",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
+// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
+import {
+  Vault,
+  normaliseContentState,
+  parseContentState
+} from "@iiif/helpers";
+import { getImageServices } from "@iiif/parser/image-3";
+import { lazy } from "react";
+function croppedRegion(imageServiceId, region, size) {
+  return `${imageServiceId}/${Math.floor(region.x)},${Math.floor(region.y)},${Math.floor(region.width)},${Math.floor(
+    region.height
+  )}/${size}/0/default.jpg`;
 }
-
-// ../ui/atoms/VisuallHidden/VisuallHidden.tsx
-import styled5, { css as css3 } from "styled-components";
-var visuallyHidden = css3`
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-`;
-var VisuallyHiddenLabel = styled5.label`
-  ${visuallyHidden}
-`;
-
-// ../ui/ui/MediaControls/MediaControls.tsx
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
-function MediaControls(props) {
-  const [isVolumeOpen, setIsVolumeOpen] = useState5(false);
-  const { progress, currentTime, element } = useMediaElements();
-  const { duration, isMuted, volume, isPlaying, playRequested } = useMediaState();
-  const { setVolume, toggleMute, play, pause, setDurationPercent } = useMediaActions();
-  const Volume = isMuted || volume === 0 ? VolumeOffIcon : volume > 50 ? VolumeUpIcon : VolumeDownIcon;
-  useLayoutEffect(() => {
-    if (element.current) {
-      const $el = element.current;
-      if ($el.error && props.onError) {
-        props.onError($el.error?.message || "Unknown error");
-        return;
+async function createFromIIIFBrowserOutput(data, ctx) {
+  const targetType = ctx.options.targetType;
+  if (Array.isArray(data.output)) {
+    throw new Error("Multiple items not yet supported");
+  }
+  const contentState = normaliseContentState(
+    typeof data.output === "string" ? parseContentState(data.output) : data.output
+  );
+  if (!contentState.target || contentState.target.length === 0) {
+    throw new Error("No target found in content state");
+  }
+  const target = contentState.target[0];
+  const type = target.source.type;
+  const previewVault = new Vault();
+  if (targetType === "Canvas" || targetType === "Annotation" || targetType === "ContentResource") {
+    if (type === "Canvas") {
+      const canvasId = target.source.id;
+      const manifestId = target.source.partOf?.find(
+        (t) => t.type === "Manifest"
+      );
+      invariant(manifestId, "Could not load external resource without partOf");
+      const manifest = await previewVault.loadManifest(manifestId);
+      invariant(manifest, "Manifest not found");
+      const canvasRef = manifest.items.find((item) => item.id === canvasId);
+      invariant(canvasRef, "Canvas not found");
+      const canvas = previewVault.get(canvasRef);
+      if (targetType === "Canvas" && target.selector?.type !== "BoxSelector") {
+        return ctx.embed(previewVault.toPresentation3(canvas));
       }
-      const 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);
+      const annotationPage = previewVault.get(canvas.items[0]);
+      const annotation = previewVault.get(annotationPage.items[0]);
+      if (targetType === "Annotation" || targetType === "Canvas" || targetType === "ContentResource") {
+        const fullAnnotation = previewVault.toPresentation3(annotation);
+        fullAnnotation.id = ctx.generateId("Annotation");
+        let service = null;
+        const dimensions = { width: 0, height: 0 };
+        if (fullAnnotation?.body?.service) {
+          const width = fullAnnotation?.body.width;
+          const height = fullAnnotation?.body.height;
+          service = getImageServices(fullAnnotation?.body)[0];
+          if (service && (!service.width || !service.height)) {
+            service.width = width;
+            service.height = height;
+          }
+          dimensions.width = width;
+          dimensions.height = height;
+          if (data.trackSize) {
+            data.trackSize(dimensions);
+          }
         }
-      };
-      $el.addEventListener("loadedmetadata", loadedMetadata);
-      $el.addEventListener("error", onError);
-      return () => {
-        $el.removeEventListener("loadedmetadata", loadedMetadata);
-        $el.removeEventListener("error", onError);
-      };
-    }
-  }, []);
-  return /* @__PURE__ */ jsxs13(AudioPlayerContainer, { children: [
-    /* @__PURE__ */ jsx29(
-      PlayButton,
-      {
-        disabled: playRequested,
-        onClick: () => {
-          if (isPlaying) {
-            pause();
-          } else {
-            play();
+        if (target.selector && target.selector.type === "BoxSelector") {
+          const selector = {
+            "@context": "http://iiif.io/api/annex/openannotation/context.json",
+            type: "iiif:ImageApiSelector",
+            region: [
+              ~~target.selector.spatial.x,
+              ~~target.selector.spatial.y,
+              ~~target.selector.spatial.width,
+              ~~target.selector.spatial.height
+            ].join(",")
+          };
+          const newBody = { ...fullAnnotation.body };
+          let thumbnailId = "";
+          if (service) {
+            const id = service.id || service["@id"] || "";
+            if (id) {
+              newBody.id = croppedRegion(id, target.selector.spatial, "max");
+              thumbnailId = croppedRegion(id, target.selector.spatial, "512,");
+            }
           }
-        },
-        children: playRequested ? /* @__PURE__ */ jsx29(Spinner, { stroke: "#999" }) : isPlaying ? /* @__PURE__ */ jsx29(PauseIcon, { title: "Pause" }) : /* @__PURE__ */ jsx29(PlayIcon, { title: "Play" })
-      }
-    ),
-    /* @__PURE__ */ jsx29(TimeDisplay, { ref: currentTime, children: "0:00" }),
-    /* @__PURE__ */ jsxs13(
-      ProgressContainer,
-      {
-        onClick: (e) => {
-          const { left, width } = e.currentTarget.getBoundingClientRect();
-          const percent = (e.pageX - left) / width;
-          setDurationPercent(percent);
-        },
-        children: [
-          /* @__PURE__ */ jsx29(ProgressBackground, {}),
-          duration ? /* @__PURE__ */ jsx29(ProgressCurrent, { ref: progress }) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx29(TimeDisplay, { children: formatTime(duration) }),
-    /* @__PURE__ */ jsxs13(SoundContainer, { onMouseEnter: () => setIsVolumeOpen(true), onMouseLeave: () => setIsVolumeOpen(false), children: [
-      /* @__PURE__ */ jsx29(VolumeContainer, { $isOpen: isVolumeOpen, children: /* @__PURE__ */ jsxs13("span", { children: [
-        /* @__PURE__ */ jsx29(VisuallyHiddenLabel, { htmlFor: "audio-slider", children: "Change volume" }),
-        /* @__PURE__ */ jsx29(
-          VolumeSlider,
-          {
-            id: "audio-slider",
-            role: "slider",
-            disabled: isMuted,
-            min: "0",
-            max: "100",
-            value: volume,
-            onChange: (e) => setVolume(Number(e.currentTarget.value))
+          fullAnnotation.body = {
+            id: ctx.generateId("SpecificResource", annotation),
+            type: "SpecificResource",
+            source: newBody,
+            selector
+          };
+          if (data.trackSize) {
+            data.trackSize({
+              width: ~~target.selector.spatial.width,
+              height: ~~target.selector.spatial.height
+            });
           }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx29(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ jsx29(Volume, { title: isMuted ? "Mute" : "Unmute" }) })
-    ] })
-  ] });
+          if (targetType === "ContentResource") {
+            return fullAnnotation.body;
+          }
+          if (targetType === "Canvas") {
+            const canvasId2 = ctx.generateId("Canvas", annotation);
+            fullAnnotation.target = canvasId2;
+            const pageId = ctx.generateId("Page", annotation);
+            const annotationPage2 = ctx.embed({
+              id: pageId,
+              type: "AnnotationPage",
+              items: [fullAnnotation]
+            });
+            return ctx.embed({
+              id: canvasId2,
+              type: "Canvas",
+              width: ~~target.selector.spatial.width,
+              height: ~~target.selector.spatial.height,
+              thumbnail: thumbnailId ? [
+                ctx.embed({
+                  id: thumbnailId,
+                  type: "Image",
+                  format: "image/jpeg",
+                  width: 512,
+                  height: Math.round(
+                    target.selector.spatial.height / target.selector.spatial.width * 512
+                  )
+                })
+              ] : void 0,
+              items: [annotationPage2]
+            });
+          }
+          return ctx.embed({
+            ...fullAnnotation,
+            target: ctx.getTarget()
+          });
+        }
+        return ctx.embed({
+          ...previewVault.toPresentation3(annotation),
+          target: ctx.getTarget()
+        });
+      }
+    }
+  }
+  throw new Error("Not yet supported.");
 }
+var IIIFBrowserCreatorForm = lazy(
+  () => import("./iiif-browser-form.lazy-HZ3M2DXT.js")
+);
 
-// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
-import { CanvasPanel } from "react-iiif-vault";
-import { getValue } from "@iiif/helpers";
-import { Input as Input6, InputContainer as InputContainer8, InputLabel as InputLabel8, LanguageFieldEditor as LanguageFieldEditor4, FormFieldWrapper } from "@manifest-editor/editors";
+// src/ContentResource/IIIFBrowserCreator/index.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var iiifBrowserCreator = {
+  id: "@manifest-editor/iiif-browser-creator",
+  create: createFromIIIFBrowserOutput,
+  label: "IIIF Browser",
+  summary: "Browse IIIF Resources",
+  icon: /* @__PURE__ */ jsx27(IIIFBrowserIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx27(IIIFBrowserCreatorForm, { ...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
+import { jsx as jsx28 } from "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__ */ jsx28(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx28(CreateImageServerForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "type", "height", "width", "format", "service"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  }
+};
+
+// src/ContentResource/ImageUrlCreator/index.tsx
+import { AddImageIcon as AddImageIcon3 } from "@manifest-editor/components";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var imageUrlCreator = {
+  id: "@manifest-editor/image-url-creator",
+  create: createImageUrl,
+  label: "Image",
+  summary: "Image from a URL",
+  icon: /* @__PURE__ */ jsx29(AddImageIcon3, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx29(CreateImageUrlForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["format"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+};
+
+// src/ContentResource/PlaintextCreator/create-plaintext.tsx
+import {
+  LanguageFieldEditor as LanguageFieldEditor5,
+  InputContainer as InputContainer8,
+  InputLabel as InputLabel8,
+  Input as Input6
+} from "@manifest-editor/editors";
+import { useState as useState7 } from "react";
 import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
-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: 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] = useState6("");
-  const [duration, setDuration] = useState6(0);
-  const [error, setError] = useState6("");
-  const [label, setLabel] = useState6({ en: [""] });
-  const onSubmit = () => {
-    props.runCreate({
-      url,
-      duration,
-      label
-    });
-  };
-  useEffect2(() => {
-    setError("");
-    setDuration(0);
-    if (url) {
-      const labelFromUrl = url.split("/").pop()?.split(".").shift();
-      setLabel({ en: [labelFromUrl || ""] });
+function CreatePlaintextForm(props) {
+  const [label, setLabel] = useState7({
+    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__ */ jsxs14(PaddedSidebarContainer, { children: [
-    error ? /* @__PURE__ */ jsx30(ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ jsxs14(InputContainer8, { children: [
-      /* @__PURE__ */ jsx30(InputLabel8, { htmlFor: "audio-url", children: "URL" }),
-      /* @__PURE__ */ jsx30(Input6, { type: "text", id: "audio-url", value: url, onChange: (e) => setUrl(e.target.value) })
-    ] }),
-    url && !error ? /* @__PURE__ */ jsx30("div", { children: /* @__PURE__ */ jsx30(
-      LanguageFieldEditor4,
+  };
+  return /* @__PURE__ */ jsx30(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs14("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx30(
+      LanguageFieldEditor5,
       {
-        containerId: "label",
-        focusId: "label_",
+        focusId: "label",
         label: "Label",
         fields: label,
         onSave: (e) => setLabel(e.toInternationalString())
-      },
-      url + "__" + duration
-    ) }) : null,
-    url && !error ? /* @__PURE__ */ jsx30(CanvasPanel.AudioHTML, { media: { url, duration, type: "Sound" }, children: /* @__PURE__ */ jsx30(
-      MediaControls,
-      {
-        onError: (error2) => setError(error2),
-        onDuration: (duration2) => setDuration(duration2)
-      },
-      url + "__" + duration
-    ) }, url + "__" + duration) : null,
-    duration && !error ? /* @__PURE__ */ jsxs14(FormFieldWrapper, { children: [
-      /* @__PURE__ */ jsx30(InputLabel8, { htmlFor: "duration", children: "Duration" }),
-      /* @__PURE__ */ jsx30(Input6, { type: "number", id: "duration", value: duration, onChange: (e) => setDuration(e.target.valueAsNumber) })
-    ] }) : null,
-    url && !error && /* @__PURE__ */ jsx30(Button, { onClick: onSubmit, children: "Add audio" })
+      }
+    ),
+    /* @__PURE__ */ jsxs14(InputContainer8, { $wide: true, children: [
+      /* @__PURE__ */ jsx30(InputLabel8, { htmlFor: "id", children: "Link to plaintext" }),
+      /* @__PURE__ */ jsx30(Input6, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ jsx30(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/ContentResource/PlaintextCreator/index.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+var plaintextCreator = {
+  id: "@manifest-editor/plaintext-creator",
+  create: createPlaintext,
+  label: "Plaintext",
+  summary: "Add link to an plaintext",
+  icon: /* @__PURE__ */ jsx31(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx31(CreatePlaintextForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["label", "format"],
+  supports: {
+    parentFields: ["seeAlso", "rendering", "homepage"]
+  },
+  staticFields: {
+    format: "text/plain"
+  }
+};
+
+// ../ui/icons/LinkIcon.tsx
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+function LinkIcon() {
+  return /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+    /* @__PURE__ */ jsx32("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx32("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
   ] });
 }
 
-// src/Annotation/AudioAnnotation/index.tsx
-import { AudioIcon } from "@manifest-editor/components";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var audioAnnotation = {
-  id: "@manifest-editor/audio-annotation",
-  create: createAudioAnnotation,
-  label: "Audio",
-  summary: "Audio annotation",
-  icon: /* @__PURE__ */ jsx31(AudioIcon, {}),
+// src/ContentResource/WebPageCreator/create-web-page.tsx
+import {
+  LanguageFieldEditor as LanguageFieldEditor6,
+  InputContainer as InputContainer9,
+  InputLabel as InputLabel9,
+  Input as Input7
+} from "@manifest-editor/editors";
+import { useState as useState8 } from "react";
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+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] = useState8({ 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__ */ jsx33(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs16("form", { onSubmit, children: [
+    /* @__PURE__ */ jsx33(
+      LanguageFieldEditor6,
+      {
+        focusId: "label",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      }
+    ),
+    /* @__PURE__ */ jsxs16(InputContainer9, { $wide: true, children: [
+      /* @__PURE__ */ jsx33(InputLabel9, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ jsx33(Input7, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ jsx33(Button, { type: "submit", children: "Create link" })
+  ] }) });
+}
+
+// src/ContentResource/WebPageCreator/index.tsx
+import { jsx as jsx34 } from "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__ */ jsx34(LinkIcon, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx31(CreateAudioAnnotationForm, { ...ctx });
+    return /* @__PURE__ */ jsx34(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
-import { getValue as getValue2 } from "@iiif/helpers";
-import { InputContainer as InputContainer9, InputLabel as InputLabel9, Input as Input7, LanguageFieldEditor as LanguageFieldEditor5, DimensionsTriplet } from "@manifest-editor/editors";
-import { useState as useState7, useEffect as useEffect3 } from "react";
+// src/ContentResource/YouTubeCreator/index.tsx
+import { YouTubeIcon } from "@manifest-editor/components";
 
-// ../ui/ui/VideoPlayer/VideoPlayer.tsx
-import { CanvasPanel as CanvasPanel2, MediaPlayerProvider, useSimpleMediaPlayer } from "react-iiif-vault";
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
-function VideoPlayer({
-  media,
-  onError,
-  duration,
-  onDuration,
-  onDimensions
-}) {
-  const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration });
-  return /* @__PURE__ */ jsxs15(
-    MediaPlayerProvider,
-    {
-      element,
-      state,
-      actions,
-      currentTime,
-      progress,
-      children: [
-        /* @__PURE__ */ jsx32(
-          "div",
-          {
-            style: {
-              maxHeight: 400,
-              aspectRatio: `${media.width}/${media.height}`,
-              position: "relative"
-            },
-            children: /* @__PURE__ */ jsx32(CanvasPanel2.VideoHTML, { element, media, playPause: actions.playPause })
-          }
-        ),
-        /* @__PURE__ */ jsx32(MediaControls, { onError, onDuration, onDimensions })
-      ]
-    }
-  );
+// src/ContentResource/YouTubeCreator/create-youtube-body.tsx
+import { Input as Input8, InputContainer as InputContainer10, InputLabel as InputLabel10 } from "@manifest-editor/editors";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+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
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
-async function createVideoAnnotation(data, ctx) {
-  const annotation = {
-    id: ctx.generateId("annotation"),
-    type: "Annotation"
-  };
-  const targetType = ctx.options.targetType;
-  const body = await ctx.embed({
-    id: data.url,
+function validateYouTube(data) {
+  return !!getYouTubeId(data.youtubeUrl);
+}
+async function createYoutubeBody(data, ctx) {
+  const id = getYouTubeId(data.youtubeUrl);
+  const body = ctx.embed({
+    id: `https://www.youtube.com/watch?v=${id}`,
     type: "Video",
-    format: "video/mp4",
-    width: data.width,
-    height: data.height,
-    duration: data.duration || 0
+    service: [
+      {
+        profile: "http://digirati.com/objectifier",
+        params: {
+          data: `https://www.youtube.com/embed/${id}`
+        }
+      },
+      {
+        id: `https://www.youtube.com/watch?v=${id}`,
+        profile: "https://www.youtube.com"
+      }
+    ]
   });
-  if (targetType === "Annotation") {
-    return ctx.embed({
-      ...annotation,
-      label: getValue2(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] = useState7("");
-  const [duration, setDuration] = useState7(0);
-  const [width, setWidth] = useState7(0);
-  const [height, setHeight] = useState7(0);
-  const [error, setError] = useState7("");
-  const [label, setLabel] = useState7({ 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()
     });
-  };
-  useEffect3(() => {
-    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__ */ jsxs16(PaddedSidebarContainer, { children: [
-    error ? /* @__PURE__ */ jsx33(ErrorMessage, { children: error }) : null,
-    /* @__PURE__ */ jsxs16(InputContainer9, { children: [
-      /* @__PURE__ */ jsx33(InputLabel9, { htmlFor: "video-url", children: "URL" }),
-      /* @__PURE__ */ jsx33(Input7, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
+  };
+  return /* @__PURE__ */ jsx35(PaddedSidebarContainer, { children: /* @__PURE__ */ jsxs17("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxs17(InputContainer10, { $wide: true, children: [
+      /* @__PURE__ */ jsx35(InputLabel10, { htmlFor: "id", children: "Link to YouTube" }),
+      /* @__PURE__ */ jsx35(Input8, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
     ] }),
-    url && !error ? /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
-      LanguageFieldEditor5,
-      {
-        containerId: "label",
-        focusId: "label_",
-        label: "Label",
-        fields: label,
-        onSave: (e) => setLabel(e.toInternationalString())
-      },
-      url + "__" + duration
-    ) }) : null,
-    url && !error ? /* @__PURE__ */ jsx33(
-      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__ */ jsx33(InputContainer9, { $wide: true, children: /* @__PURE__ */ jsx33(
-      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__ */ jsx33(Button, { onClick: onSubmit, children: "Add video" })
-  ] });
+    /* @__PURE__ */ jsx35(Button, { type: "submit", children: "Create" })
+  ] }) });
 }
 
-// src/Annotation/VideoAnnotation/index.tsx
-import { VideoIcon } from "@manifest-editor/components";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var videoAnnotation = {
-  id: "@manifest-editor/video-annotation",
-  create: createVideoAnnotation,
-  label: "Video",
-  summary: "Video annotation",
-  icon: /* @__PURE__ */ jsx34(VideoIcon, {}),
-  render(ctx) {
-    return /* @__PURE__ */ jsx34(CreateVideoAnnotationForm, { ...ctx });
-  },
-  resourceType: "Annotation",
-  resourceFields: ["id", "type", "motivation", "body", "target"],
-  additionalTypes: ["Canvas"],
+// src/ContentResource/YouTubeCreator/index.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var youTubeBodyCreator = {
+  id: "@manifest-editor/youtube",
+  create: createYoutubeBody,
+  label: "YouTube",
+  summary: "Embed YouTube",
+  icon: /* @__PURE__ */ jsx36(YouTubeIcon, {}),
+  resourceType: "ContentResource",
+  additionalTypes: ["Canvas", "Annotation"],
+  resourceFields: ["id", "type", "service"],
+  render: (ctx) => /* @__PURE__ */ jsx36(YouTubeForm, { ...ctx }),
   supports: {
-    initialData: true,
-    parentTypes: ["AnnotationPage", "Manifest"],
-    parentFields: ["items"]
+    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
+    parentFieldMap: {
+      Annotation: ["body"],
+      Manifest: ["items"],
+      AnnotationPage: ["items"]
+    }
   },
   staticFields: {
-    type: "Annotation"
+    type: "Video"
   }
 };
 
+// src/Manifest/ManifestBrowserCreator/index.tsx
+import { IIIFBrowserIcon as IIIFBrowserIcon2 } from "@manifest-editor/components";
+
 // src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
-import { normaliseContentState as normaliseContentState2, parseContentState as parseContentState2 } from "@iiif/helpers";
+import {
+  normaliseContentState as normaliseContentState2,
+  parseContentState as parseContentState2
+} from "@iiif/helpers";
 import { lazy as lazy2 } from "react";
 async function createFromManifestBrowserOutput(data, ctx) {
   const targetType = ctx.options.targetType;
@@ -1903,19 +2253,20 @@ async function createFromManifestBrowserOutput(data, ctx) {
   }
   throw new Error("Not yet supported.");
 }
-var ManifestBrowserCreatorForm2 = lazy2(() => import("./manifest-browser-form.lazy-WRWZPVRC.js"));
+var ManifestBrowserCreatorForm2 = lazy2(
+  () => import("./manifest-browser-form.lazy-MYI26AX4.js")
+);
 
 // src/Manifest/ManifestBrowserCreator/index.tsx
-import { IIIFBrowserIcon as IIIFBrowserIcon2 } from "@manifest-editor/components";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var manifestBrowserCreator = {
   id: "@manifest-editor/manifest-browser-creator",
   create: createFromManifestBrowserOutput,
   label: "IIIF Browser",
   summary: "Browse IIIF Resources",
-  icon: /* @__PURE__ */ jsx35(IIIFBrowserIcon2, {}),
+  icon: /* @__PURE__ */ jsx37(IIIFBrowserIcon2, {}),
   render(ctx) {
-    return /* @__PURE__ */ jsx35(ManifestBrowserCreatorForm, { ...ctx });
+    return /* @__PURE__ */ jsx37(ManifestBrowserCreatorForm, { ...ctx });
   },
   resourceType: "Manifest",
   resourceFields: ["id", "label"],
@@ -1948,13 +2299,43 @@ var allCreators = [
   webPageCreator,
   emptyAnnotationPage,
   noBodyAnnotation,
-  internalCanvas
+  internalCanvas,
+  captionedImageAnnotation
 ];
 export {
+  CreateAudioAnnotationForm,
+  CreateCaptionedImageAnnotation,
+  CreateHTMLAnnotation,
+  CreateHTMLBodyForm,
+  CreateImageServerForm,
+  CreateImageServiceAnnotationForm,
+  CreateImageUrlAnnotationForm,
+  CreateImageUrlForm,
+  CreatePlaintextForm,
+  CreateVideoAnnotationForm,
+  CreateWebPageForm,
+  IIIFBrowserCreatorForm,
+  YouTubeForm,
   allCreators,
   audioAnnotation,
+  captionedImageAnnotation,
+  createAudioAnnotation,
+  createCaptionedImageAnnotation,
+  createFromIIIFBrowserOutput,
+  createHtmlAnnotation,
+  createHtmlBody,
+  createImageServer,
+  createImageServiceAnnotation,
+  createImageUrl,
+  createImageUrlAnnotation,
+  createNoBodyAnnotation,
+  createPlaintext,
+  createVideoAnnotation,
+  createWebPage,
+  createYoutubeBody,
   emptyAnnotationPage,
   emptyCanvas,
+  getYouTubeId,
   htmlAnnotation,
   htmlBodyCreator,
   iiifBrowserCreator,
@@ -1966,6 +2347,7 @@ export {
   manifestBrowserCreator,
   noBodyAnnotation,
   plaintextCreator,
+  validateYouTube,
   videoAnnotation,
   webPageCreator,
   youTubeBodyCreator