@manifest-editor/creators 1.0.2

package/dist/index.js

@@ -0,0 +1,1972 @@
+import {
+  ManifestBrowserCreatorForm
+} from "./chunk-7FSKLOVQ.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"]
+  }
+};
+async function createEmptyCanvas(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const page = ctx.embed({
+    id: ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" }),
+    type: "AnnotationPage",
+    items: []
+  });
+  return {
+    id: canvasId,
+    type: "Canvas",
+    label: data.label || { en: [""] },
+    height: data.height || 1e3,
+    width: data.width || 1e3,
+    items: [page]
+  };
+}
+
+// ../ui/icons/TextFormatIcon.tsx
+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" })
+] });
+
+// src/ContentResource/PlaintextCreator/create-plaintext.tsx
+import { LanguageFieldEditor, InputContainer, InputLabel, Input } from "@manifest-editor/editors";
+
+// ../ui/atoms/Button.tsx
+import styled from "styled-components";
+var ButtonReset = styled.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+  &:hover {
+    color: inherit;
+  }
+`;
+var Button = styled.button`
+  padding: 0.5rem 1rem;
+  color: ${(props) => props.theme.color.main || "none"};
+  background-color: ${(props) => props.theme.color.white || "white"};
+  border-radius: inherit;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 0.85em;
+  :disabled {
+    opacity: 0.65;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background: #eee;
+  }
+`;
+var SmallButton = styled(Button)`
+  padding: 0.25em ${(props) => props.theme.padding.xs || "0.4em"};
+  height: unset;
+  background: none;
+`;
+var SecondaryButton = styled(Button)`
+   {
+    padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
+    color: ${(props) => props.theme.color.main || "#B84C74;"};
+    background-color: ${(props) => props.theme.color.white || "white"};
+    border: 1px solid ${(props) => props.theme.color.main || "#B84C74;"};
+    border-radius: 0.25rem;
+    cursor: pointer;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    font-size: 0.75rem;
+
+    :disabled {
+      opacity: 0.65;
+      cursor: not-allowed;
+    }
+  }
+`;
+var CalltoButton = styled(Button)`
+  padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
+  color: ${(props) => props.theme.color.white || "white"};
+  background-color: ${(props) => props.theme.color.main || "#B84C74;"};
+  border: 1px solid #eee;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  &:hover {
+    background-color: ${(props) => props.theme.color.mainHover || "#B84C74;"};
+  }
+`;
+var ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: ${(props) => props.$right ? "flex-end" : "flex-start"};
+`;
+
+// ../ui/atoms/PaddedSidebarContainer.tsx
+import 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 });
+    }
+  };
+  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({
+    id: data.url,
+    type: "Text",
+    label: data.label,
+    format: "text/html"
+  });
+}
+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())
+      }
+    ),
+    /* @__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"]
+  }
+};
+
+// 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);
+  const onSubmit = () => {
+    props.runCreate({
+      language,
+      body
+    });
+  };
+  return /* @__PURE__ */ jsxs5(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsxs5(InputContainer3, { children: [
+      /* @__PURE__ */ jsx8(InputLabel3, { children: "HTML Body" }),
+      /* @__PURE__ */ jsx8(
+        RichTextLanguageField,
+        {
+          value: body,
+          language,
+          onUpdateLanguage: (lng) => setLang(lng),
+          languages: i18n.availableLanguages,
+          onUpdate: (e) => setBodyValue(e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
+}
+
+// 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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx9(CreateHTMLBodyForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "language", "type", "format", "value"],
+  supports: {
+    parentTypes: ["Annotation"],
+    parentFields: ["body"]
+  },
+  staticFields: {
+    type: "TextualBody",
+    format: "text/html"
+  }
+};
+
+// 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) {
+  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" } }
+        )
+      );
+    }
+  }
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
+      body: bodies,
+      target: ctx.getTarget()
+    });
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: bodies,
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateHTMLAnnotation(props) {
+  const [body, setBody] = useState4({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      body
+    });
+  };
+  return /* @__PURE__ */ jsxs6(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsxs6(InputContainer4, { children: [
+      /* @__PURE__ */ jsx10(InputLabel4, { children: "HTML Body" }),
+      /* @__PURE__ */ jsx10(
+        LanguageFieldEditor3,
+        {
+          focusId: "html-content",
+          label: "HTML Content",
+          fields: body,
+          onSave: (e) => setBody(e.toInternationalString())
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10(Button, { onClick: () => onSubmit(), 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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx11(CreateHTMLAnnotation, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// ../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/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"]
+    }
+  }
+};
+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") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotation = await ctx.embed({
+      id: ctx.generateId("annotation", { id: pageId, type: "AnnotationPage" }),
+      type: "Annotation",
+      motivation: "painting",
+      body: [body],
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotation]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled YouTube canvas"] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      duration: data.duration || 1,
+      items: [page]
+    });
+  }
+  if (ctx.options.targetType === "Annotation" || ctx.options.targetType === "Canvas") {
+    return ctx.embed({
+      id: ctx.generateId("annotation"),
+      type: "Annotation",
+      motivation: "painting",
+      body: [body],
+      target: ctx.getTarget()
+    });
+  }
+  return body;
+}
+function YouTubeForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.youtubeUrl) {
+      props.runCreate({ youtubeUrl: formData.youtubeUrl });
+    }
+  };
+  return /* @__PURE__ */ 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 });
+    }
+  };
+  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: "" })
+    ] }),
+    /* @__PURE__ */ jsx16(Button, { type: "submit", 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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx17(CreateImageUrlForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["format"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+};
+
+// 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/side-effects/reposition-multiple-images.ts
+import { isImageService } from "@iiif/parser/image-3";
+import { EditorInstance } from "@manifest-editor/editor-api";
+import { centerRectangles } from "@manifest-editor/editors";
+var repositionMultipleImages = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      if (annoPage.items.length < 2) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      const body = bodies[0];
+      const selector = fullAnno.body[0]?.selector;
+      const serviceList = body.service || [];
+      const imageService = serviceList.find((s) => isImageService(s));
+      if (imageService) {
+        if (imageService.width && imageService.height) {
+          if (imageService.width !== body.width) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+          }
+          if (imageService.height !== body.height) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+          }
+        }
+      }
+      let width = imageService?.width || body.width;
+      let height = imageService?.height || body.height;
+      if (selector) {
+        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
+          const [x, y, width_, height_] = selector.region.split(",");
+          width = Number(width_) || width;
+          height = Number(height_) || height;
+        }
+      }
+      const editor = new EditorInstance({ vault, reference: result });
+      const imagePosition = centerRectangles(
+        canvas,
+        {
+          width,
+          height
+        },
+        0.6
+      );
+      editor.annotation.target.setPosition(imagePosition);
+    }
+  }
+};
+
+// src/side-effects/resize-resource-to-empty-canvas.ts
+import { EditorInstance as EditorInstance2 } from "@manifest-editor/editor-api";
+var resizeResourceToEmptyCanvas = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      if (annoPage.items.length > 1) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      if (bodies.length !== 1) {
+        return;
+      }
+      const body = bodies[0];
+      const selector = fullAnno.body[0]?.selector;
+      const service = (body.service || [])[0];
+      let width = service?.width || body.width;
+      let height = service?.height || body.height;
+      const duration = body.duration || service?.duration;
+      if (selector) {
+        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
+          const [x, y, width_, height_] = selector.region.split(",");
+          width = Number(width_) || width;
+          height = Number(height_) || height;
+        }
+      }
+      const editor = new EditorInstance2({ vault, reference: canvasRef });
+      vault.batch(() => {
+        if (typeof width !== "undefined") {
+          editor.technical.width.set(width);
+        }
+        if (typeof height !== "undefined") {
+          editor.technical.height.set(height);
+        }
+        if (typeof duration !== "undefined") {
+          editor.technical.duration.set(duration);
+        }
+      });
+    }
+  }
+};
+
+// src/side-effects/resize-to-fit-service.ts
+import { isImageService as isImageService2 } from "@atlas-viewer/iiif-image-api";
+var resizeToFitService = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      const resourceBody = Array.isArray(fullAnno.body) ? fullAnno.body[0] : fullAnno.body;
+      if (resourceBody.type === "SpecificResource" && resourceBody.selector) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      const body = bodies[0];
+      const serviceList = body.service || [];
+      const imageService = serviceList.find((s) => isImageService2(s));
+      if (imageService) {
+        if (imageService.width && imageService.height) {
+          if (imageService.width !== body.width) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+          }
+          if (imageService.height !== body.height) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+          }
+        }
+      }
+    }
+  }
+};
+
+// src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
+import { jsx as jsx20 } 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" }
+  });
+  if (targetType === "Annotation") {
+    return {
+      ...annotation,
+      body: [resource],
+      motivation: data.motivation || "painting",
+      target: ctx.getTarget()
+    };
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: [resource],
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled canvas"] },
+      height: resource.resource.height || 1e3,
+      width: resource.resource.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateImageServiceAnnotationForm(props) {
+  return /* @__PURE__ */ jsx20(CreateImageServerForm, { ...props });
+}
+
+// src/Annotation/ImageServiceAnnotation/index.tsx
+import { IIIFLogo } from "@manifest-editor/components";
+import { jsx as jsx21 } 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 } }),
+  render(ctx) {
+    return /* @__PURE__ */ jsx21(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/NoBodyAnnotation/index.tsx
+import { EmptyCanvasIcon as EmptyCanvasIcon2 } from "@manifest-editor/components";
+import { jsx as jsx22 } 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, {}),
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "target"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage"],
+    parentFields: ["items"],
+    disallowPainting: true
+  },
+  sideEffects: [],
+  staticFields: {
+    type: "Annotation"
+  }
+};
+function createNoBodyAnnotation(data, ctx) {
+  return ctx.embed({
+    id: ctx.generateId("annotation"),
+    type: "Annotation",
+    label: data?.label,
+    motivation: data.motivation || ctx.options.initialData?.motivation || "highlighting",
+    target: ctx.getTarget()
+  });
+}
+
+// src/ContentResource/IIIFBrowserCreator/iiif-browser-creator.tsx
+import { normaliseContentState, parseContentState } from "@iiif/helpers";
+import { lazy } from "react";
+
+// ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
+var isProduction = false;
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  if (isProduction) {
+    throw new Error(prefix);
+  }
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+  throw new Error(value);
+}
+
+// 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,
+    {
+      vault,
+      entry: manifest,
+      window: false,
+      hideHeader: true,
+      hideBack: true,
+      output: { type: "url" },
+      outputTargets: [
+        {
+          type: "callback",
+          label: "Select canvas",
+          cb: (url) => {
+            props.runCreate({ id: url });
+          }
+        }
+      ],
+      outputTypes: ["Canvas"]
+    }
+  );
+}
+async function createInternalCanvas(data, ctx) {
+  return ctx.embed({ id: data.id, type: "Canvas" });
+}
+
+// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
+import { jsx as jsx25 } 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__ */ jsx25(CreateImageUrlForm, { ...props });
+}
+
+// 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 });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+import { useEffect as useEffect2, useState as useState6 } from "react";
+
+// ../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"};
+  }
+  ${(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";
+
+// ../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",
+    {
+      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 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
+
+  &:disabled {
+    color: #999;
+  }
+`;
+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;
+`;
+
+// ../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"
+      }
+    ) })
+  ] }) });
+}
+
+// ../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;
+      }
+      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__ */ jsxs13(AudioPlayerContainer, { children: [
+    /* @__PURE__ */ jsx29(
+      PlayButton,
+      {
+        disabled: playRequested,
+        onClick: () => {
+          if (isPlaying) {
+            pause();
+          } else {
+            play();
+          }
+        },
+        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))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx29(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ jsx29(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 as Input6, InputContainer as InputContainer8, InputLabel as InputLabel8, LanguageFieldEditor as LanguageFieldEditor4, FormFieldWrapper } from "@manifest-editor/editors";
+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({
+    id: data.url,
+    type: "Sound",
+    format: "audio/mp4",
+    duration: data.duration || 0
+  });
+  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 || ""] });
+    }
+  }, [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,
+      {
+        containerId: "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" })
+  ] });
+}
+
+// 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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx31(CreateAudioAnnotationForm, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Annotation/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";
+
+// ../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/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,
+    type: "Video",
+    format: "video/mp4",
+    width: data.width,
+    height: data.height,
+    duration: data.duration || 0
+  });
+  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") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body,
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      duration: data.duration || 0,
+      width: data.width,
+      height: data.height,
+      items: [page]
+    });
+  }
+}
+function CreateVideoAnnotationForm(props) {
+  const [url, setUrl] = 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
+    });
+  };
+  useEffect3(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      setLabel({ en: [labelFromUrl || ""] });
+    }
+  }, [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) })
+    ] }),
+    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" })
+  ] });
+}
+
+// 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"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
+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;
+  if (Array.isArray(data.output)) {
+    throw new Error("Multiple items not yet supported");
+  }
+  const contentState = normaliseContentState2(
+    typeof data.output === "string" ? parseContentState2(data.output) : data.output
+  );
+  const target = contentState.target[0];
+  const previewVault = ctx.getPreviewVault();
+  if (!target) {
+    throw new Error("No target found in content state");
+  }
+  if (targetType === "Manifest") {
+    const manifestId = target.source.id;
+    invariant(manifestId, "Could not find Manifest ID");
+    const manifest = await previewVault.get(manifestId);
+    return ctx.embed({
+      id: target.source.id,
+      type: "Manifest",
+      label: manifest.label
+    });
+  }
+  if (targetType === "Collection") {
+    const collectionId = target.source.id;
+    invariant(collectionId, "Could not find Manifest ID");
+    const collection = await previewVault.get(collectionId);
+    return ctx.embed({
+      id: target.source.id,
+      type: "Collection",
+      label: collection.label
+    });
+  }
+  throw new Error("Not yet supported.");
+}
+var ManifestBrowserCreatorForm2 = lazy2(() => import("./manifest-browser-form.lazy-WRWZPVRC.js"));
+
+// src/Manifest/ManifestBrowserCreator/index.tsx
+import { IIIFBrowserIcon as IIIFBrowserIcon2 } from "@manifest-editor/components";
+import { jsx as jsx35 } 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, {}),
+  render(ctx) {
+    return /* @__PURE__ */ jsx35(ManifestBrowserCreatorForm, { ...ctx });
+  },
+  resourceType: "Manifest",
+  resourceFields: ["id", "label"],
+  additionalTypes: ["Collection"],
+  supports: {
+    parentTypes: ["Collection"],
+    parentFieldMap: {
+      Collection: ["items"]
+    }
+  },
+  sideEffects: [],
+  staticFields: {}
+};
+
+// src/index.ts
+var allCreators = [
+  // Images first.
+  imageServiceCreator,
+  imageServiceAnnotation,
+  imageUrlCreator,
+  imageUrlAnnotation,
+  videoAnnotation,
+  audioAnnotation,
+  htmlBodyCreator,
+  htmlAnnotation,
+  youTubeBodyCreator,
+  iiifBrowserCreator,
+  emptyCanvas,
+  plaintextCreator,
+  webPageCreator,
+  emptyAnnotationPage,
+  noBodyAnnotation,
+  internalCanvas
+];
+export {
+  allCreators,
+  audioAnnotation,
+  emptyAnnotationPage,
+  emptyCanvas,
+  htmlAnnotation,
+  htmlBodyCreator,
+  iiifBrowserCreator,
+  imageServiceAnnotation,
+  imageServiceCreator,
+  imageUrlAnnotation,
+  imageUrlCreator,
+  internalCanvas,
+  manifestBrowserCreator,
+  noBodyAnnotation,
+  plaintextCreator,
+  videoAnnotation,
+  webPageCreator,
+  youTubeBodyCreator
+};