@manifest-editor/creators 1.0.2

package/dist/index.cjs

@@ -0,0 +1,2082 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContentResource/IIIFBrowserCreator/iiif-browser-form.lazy.tsx
+var iiif_browser_form_lazy_exports = {};
+__export(iiif_browser_form_lazy_exports, {
+  default: () => IIIFBrowserCreatorForm
+});
+function IIIFBrowserCreatorForm(props) {
+  const vault = (0, import_shell3.usePreviewVault)();
+  const { addHistory, clearHistory } = (0, import_shell3.usePreviewHistory)();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_shell3.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_iiif_browser.IIIFExplorer,
+    {
+      window: false,
+      hideHeader: true,
+      outputTypes: ["Canvas", "CanvasList", "CanvasRegion", "ImageService", "ImageServiceRegion"],
+      vault,
+      output: { type: "content-state" },
+      homepageCollection: import_shell3.HOMEPAGE_COLLECTION,
+      clearHomepageCollection: clearHistory,
+      onHistory: addHistory,
+      height: 500,
+      outputTargets: [
+        {
+          type: "callback",
+          label: "Select",
+          cb: (resource) => props.runCreate({ output: resource })
+        }
+      ],
+      allowRemoveEntry: true
+    }
+  ) });
+}
+var import_iiif_browser, import_shell3, import_jsx_runtime23;
+var init_iiif_browser_form_lazy = __esm({
+  "src/ContentResource/IIIFBrowserCreator/iiif-browser-form.lazy.tsx"() {
+    "use strict";
+    import_iiif_browser = require("@manifest-editor/iiif-browser");
+    import_shell3 = require("@manifest-editor/shell");
+    import_jsx_runtime23 = require("react/jsx-runtime");
+  }
+});
+
+// src/Manifest/ManifestBrowserCreator/manifest-browser-form.lazy.tsx
+var manifest_browser_form_lazy_exports = {};
+__export(manifest_browser_form_lazy_exports, {
+  default: () => ManifestBrowserCreatorForm
+});
+function ManifestBrowserCreatorForm(props) {
+  const vault = (0, import_shell4.usePreviewVault)();
+  const { addHistory, clearHistory } = (0, import_shell4.usePreviewHistory)();
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_shell4.PreviewVaultBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_iiif_browser3.IIIFExplorer,
+    {
+      window: false,
+      hideHeader: true,
+      outputTypes: ["Manifest", "Collection"],
+      vault,
+      output: { type: "content-state" },
+      homepageCollection: import_shell4.HOMEPAGE_COLLECTION,
+      clearHomepageCollection: clearHistory,
+      onHistory: addHistory,
+      outputTargets: [
+        {
+          type: "callback",
+          label: "Select",
+          cb: (resource) => props.runCreate({ output: resource })
+        }
+      ],
+      allowRemoveEntry: true
+    }
+  ) }) });
+}
+var import_iiif_browser3, import_shell4, import_jsx_runtime36;
+var init_manifest_browser_form_lazy = __esm({
+  "src/Manifest/ManifestBrowserCreator/manifest-browser-form.lazy.tsx"() {
+    "use strict";
+    import_iiif_browser3 = require("@manifest-editor/iiif-browser");
+    import_shell4 = require("@manifest-editor/shell");
+    import_jsx_runtime36 = require("react/jsx-runtime");
+  }
+});
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  allCreators: () => allCreators,
+  audioAnnotation: () => audioAnnotation,
+  emptyAnnotationPage: () => emptyAnnotationPage,
+  emptyCanvas: () => emptyCanvas,
+  htmlAnnotation: () => htmlAnnotation,
+  htmlBodyCreator: () => htmlBodyCreator,
+  iiifBrowserCreator: () => iiifBrowserCreator,
+  imageServiceAnnotation: () => imageServiceAnnotation,
+  imageServiceCreator: () => imageServiceCreator,
+  imageUrlAnnotation: () => imageUrlAnnotation,
+  imageUrlCreator: () => imageUrlCreator,
+  internalCanvas: () => internalCanvas,
+  manifestBrowserCreator: () => manifestBrowserCreator,
+  noBodyAnnotation: () => noBodyAnnotation,
+  plaintextCreator: () => plaintextCreator,
+  videoAnnotation: () => videoAnnotation,
+  webPageCreator: () => webPageCreator,
+  youTubeBodyCreator: () => youTubeBodyCreator
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Canvas/EmptyCanvas/index.tsx
+var import_components = require("@manifest-editor/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var emptyCanvas = {
+  id: "@manifest-editor/empty-canvas",
+  create: createEmptyCanvas,
+  label: "Empty canvas",
+  summary: "No content",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.EmptyCanvasIcon, {}),
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label", "height", "width", "items"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
+  }
+};
+async function createEmptyCanvas(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const page = ctx.embed({
+    id: ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" }),
+    type: "AnnotationPage",
+    items: []
+  });
+  return {
+    id: canvasId,
+    type: "Canvas",
+    label: data.label || { en: [""] },
+    height: data.height || 1e3,
+    width: data.width || 1e3,
+    items: [page]
+  };
+}
+
+// ../ui/icons/TextFormatIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TextFormatIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98 13.87 11h-3.74L12 5.98z" })
+] });
+
+// src/ContentResource/PlaintextCreator/create-plaintext.tsx
+var import_editors = require("@manifest-editor/editors");
+
+// ../ui/atoms/Button.tsx
+var import_styled_components = __toESM(require("styled-components"), 1);
+var ButtonReset = import_styled_components.default.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  cursor: pointer;
+  &:hover {
+    color: inherit;
+  }
+`;
+var Button = import_styled_components.default.button`
+  padding: 0.5rem 1rem;
+  color: ${(props) => props.theme.color.main || "none"};
+  background-color: ${(props) => props.theme.color.white || "white"};
+  border-radius: inherit;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 0.85em;
+  :disabled {
+    opacity: 0.65;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background: #eee;
+  }
+`;
+var SmallButton = (0, import_styled_components.default)(Button)`
+  padding: 0.25em ${(props) => props.theme.padding.xs || "0.4em"};
+  height: unset;
+  background: none;
+`;
+var SecondaryButton = (0, import_styled_components.default)(Button)`
+   {
+    padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
+    color: ${(props) => props.theme.color.main || "#B84C74;"};
+    background-color: ${(props) => props.theme.color.white || "white"};
+    border: 1px solid ${(props) => props.theme.color.main || "#B84C74;"};
+    border-radius: 0.25rem;
+    cursor: pointer;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    font-size: 0.75rem;
+
+    :disabled {
+      opacity: 0.65;
+      cursor: not-allowed;
+    }
+  }
+`;
+var CalltoButton = (0, import_styled_components.default)(Button)`
+  padding: 0 ${(props) => props.theme.padding.medium || "1rem"};
+  color: ${(props) => props.theme.color.white || "white"};
+  background-color: ${(props) => props.theme.color.main || "#B84C74;"};
+  border: 1px solid #eee;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  &:hover {
+    background-color: ${(props) => props.theme.color.mainHover || "#B84C74;"};
+  }
+`;
+var ButtonGroup = import_styled_components.default.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
+var import_styled_components2 = __toESM(require("styled-components"), 1);
+var PaddedSidebarContainer = import_styled_components2.default.div`
+  padding: 0 0.7em;
+  margin: 0.7em 0;
+  flex: 1;
+  overflow: visible;
+`;
+
+// src/ContentResource/PlaintextCreator/create-plaintext.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+async function createPlaintext(data, ctx) {
+  return ctx.embed({
+    id: data.url,
+    type: "Text",
+    label: data.label,
+    format: "text/plain"
+  });
+}
+function CreatePlaintextForm(props) {
+  const [label, setLabel] = (0, import_react.useState)({ en: ["View as text"] });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.url) {
+      props.runCreate({ url: formData.url, label });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_editors.LanguageFieldEditor,
+      {
+        focusId: "label",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_editors.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_editors.InputLabel, { htmlFor: "id", children: "Link to plaintext" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_editors.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/ContentResource/PlaintextCreator/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var plaintextCreator = {
+  id: "@manifest-editor/plaintext-creator",
+  create: createPlaintext,
+  label: "Plaintext",
+  summary: "Add link to an plaintext",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CreatePlaintextForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["label", "format"],
+  supports: {
+    parentFields: ["seeAlso", "rendering", "homepage"]
+  },
+  staticFields: {
+    format: "text/plain"
+  }
+};
+
+// src/ContentResource/WebPageCreator/create-web-page.tsx
+var import_editors2 = require("@manifest-editor/editors");
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+async function createWebPage(data, ctx) {
+  return ctx.embed({
+    id: data.url,
+    type: "Text",
+    label: data.label,
+    format: "text/html"
+  });
+}
+function CreateWebPageForm(props) {
+  const [label, setLabel] = (0, import_react2.useState)({ en: [""] });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.url) {
+      props.runCreate({ url: formData.url, label });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_editors2.LanguageFieldEditor,
+      {
+        focusId: "label",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_editors2.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_editors2.InputLabel, { htmlFor: "id", children: "Link" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_editors2.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { type: "submit", children: "Create link" })
+  ] }) });
+}
+
+// ../ui/icons/LinkIcon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LinkIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })
+  ] });
+}
+
+// src/ContentResource/WebPageCreator/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var webPageCreator = {
+  id: "@manifest-editor/web-page-creator",
+  create: createWebPage,
+  label: "Web page",
+  summary: "Add link to an external web page",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CreateWebPageForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["label", "format"],
+  supports: {
+    parentFields: ["seeAlso", "rendering", "homepage"]
+  }
+};
+
+// src/ContentResource/HTMLBodyCreator/create-html-body.tsx
+var import_editors3 = require("@manifest-editor/editors");
+var import_shell = require("@manifest-editor/shell");
+var import_react3 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+async function createHtmlBody(data, ctx) {
+  return ctx.embed({
+    id: ctx.generateId(`html/${data.language}`),
+    language: data.language,
+    type: "TextualBody",
+    format: "text/html",
+    value: data.body || ""
+  });
+}
+function CreateHTMLBodyForm(props) {
+  const { i18n } = (0, import_shell.useConfig)();
+  const [body, setBodyValue] = (0, import_react3.useState)("<p></p>");
+  const [language, setLang] = (0, import_react3.useState)(i18n.defaultLanguage);
+  const onSubmit = () => {
+    props.runCreate({
+      language,
+      body
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_editors3.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_editors3.InputLabel, { children: "HTML Body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_editors3.RichTextLanguageField,
+        {
+          value: body,
+          language,
+          onUpdateLanguage: (lng) => setLang(lng),
+          languages: i18n.availableLanguages,
+          onUpdate: (e) => setBodyValue(e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
+}
+
+// src/ContentResource/HTMLBodyCreator/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var htmlBodyCreator = {
+  id: "@manifest-editor/html-body-creator",
+  create: createHtmlBody,
+  label: "HTML Body",
+  summary: "Add HTML annotation body",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CreateHTMLBodyForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["id", "language", "type", "format", "value"],
+  supports: {
+    parentTypes: ["Annotation"],
+    parentFields: ["body"]
+  },
+  staticFields: {
+    type: "TextualBody",
+    format: "text/html"
+  }
+};
+
+// src/Annotation/HTMLAnnotation/create-html-annotation.tsx
+var import_react4 = require("react");
+var import_editors4 = require("@manifest-editor/editors");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+async function createHtmlAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const languages = Object.keys(data.body);
+  const bodies = [];
+  for (const language of languages) {
+    const body = data.body[language].join("\n");
+    if (body) {
+      bodies.push(
+        await ctx.create(
+          "@manifest-editor/html-body-creator",
+          {
+            language,
+            body
+          },
+          { parent: { resource: annotation, property: "items" } }
+        )
+      );
+    }
+  }
+  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] = (0, import_react4.useState)({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      body
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_editors4.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_editors4.InputLabel, { children: "HTML Body" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_editors4.LanguageFieldEditor,
+        {
+          focusId: "html-content",
+          label: "HTML Content",
+          fields: body,
+          onSave: (e) => setBody(e.toInternationalString())
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { onClick: () => onSubmit(), children: "Create" })
+  ] });
+}
+
+// src/Annotation/HTMLAnnotation/index.tsx
+var import_components2 = require("@manifest-editor/components");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var htmlAnnotation = {
+  id: "@manifest-editor/html-annotation",
+  create: createHtmlAnnotation,
+  label: "HTML",
+  summary: "HTML annotation",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components2.HTMLIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ThumbnailStripIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "#000000",
+    transform: "scale(-1, 1)",
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { fill: "none", height: "24", width: "24" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M16,20H2V4h14V20z M18,8h4V4h-4V8z M18,20h4v-4h-4V20z M18,14h4v-4h-4V14z" })
+    ] })
+  }
+);
+
+// src/AnnotationPage/EmptyAnnotationPage/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var emptyAnnotationPage = {
+  id: "@manifest-editor/empty-annotation-page",
+  create: createEmptyAnnotationPage,
+  label: "Empty annotation page",
+  summary: "AnnotationPage with nothing",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThumbnailStripIcon, {}),
+  resourceType: "AnnotationPage",
+  resourceFields: ["id", "type", "items"],
+  supports: {
+    parentTypes: ["Manifest", "Canvas", "Range"],
+    parentFieldMap: {
+      Manifest: ["annotations"],
+      Canvas: ["items", "annotations"],
+      Range: ["annotations"]
+    }
+  }
+};
+async function createEmptyAnnotationPage(data, ctx) {
+  return ctx.embed({
+    id: ctx.generateId("annotations"),
+    type: "AnnotationPage",
+    items: []
+  });
+}
+
+// src/ContentResource/YouTubeCreator/index.tsx
+var import_components3 = require("@manifest-editor/components");
+
+// src/ContentResource/YouTubeCreator/create-youtube-body.tsx
+var import_editors5 = require("@manifest-editor/editors");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ytRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
+function getYouTubeId(url) {
+  const id = (url || "").match(ytRegex);
+  return id ? id[1] : null;
+}
+async function createYoutubeBody(data, ctx) {
+  const id = getYouTubeId(data.youtubeUrl);
+  const body = ctx.embed({
+    id: `https://www.youtube.com/watch?v=${id}`,
+    type: "Video",
+    service: [
+      {
+        profile: "http://digirati.com/objectifier",
+        params: {
+          data: `https://www.youtube.com/embed/${id}`
+        }
+      },
+      {
+        id: `https://www.youtube.com/watch?v=${id}`,
+        profile: "https://www.youtube.com"
+      }
+    ]
+  });
+  if (ctx.options.targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotation = await ctx.embed({
+      id: ctx.generateId("annotation", { id: pageId, type: "AnnotationPage" }),
+      type: "Annotation",
+      motivation: "painting",
+      body: [body],
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotation]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled YouTube canvas"] },
+      height: data.height || 1e3,
+      width: data.width || 1e3,
+      duration: data.duration || 1,
+      items: [page]
+    });
+  }
+  if (ctx.options.targetType === "Annotation" || ctx.options.targetType === "Canvas") {
+    return ctx.embed({
+      id: ctx.generateId("annotation"),
+      type: "Annotation",
+      motivation: "painting",
+      body: [body],
+      target: ctx.getTarget()
+    });
+  }
+  return body;
+}
+function YouTubeForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.youtubeUrl) {
+      props.runCreate({ youtubeUrl: formData.youtubeUrl });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_editors5.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_editors5.InputLabel, { htmlFor: "id", children: "Link to YouTube" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_editors5.Input, { id: "youtubeUrl", name: "youtubeUrl", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/ContentResource/YouTubeCreator/index.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var youTubeBodyCreator = {
+  id: "@manifest-editor/youtube",
+  create: createYoutubeBody,
+  label: "YouTube",
+  summary: "Embed YouTube",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components3.YouTubeIcon, {}),
+  resourceType: "ContentResource",
+  additionalTypes: ["Canvas", "Annotation"],
+  resourceFields: ["id", "type", "service"],
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(YouTubeForm, { ...ctx }),
+  supports: {
+    parentTypes: ["Annotation", "Manifest", "AnnotationPage"],
+    parentFieldMap: {
+      Annotation: ["body"],
+      Manifest: ["items"],
+      AnnotationPage: ["items"]
+    }
+  },
+  staticFields: {
+    type: "Video"
+  }
+};
+
+// src/ContentResource/ImageUrlCreator/create-image-url.tsx
+var import_editors6 = require("@manifest-editor/editors");
+var import_shell2 = require("@manifest-editor/shell");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+async function createImageUrl(data, ctx) {
+  if (!data.height || !data.width) {
+    const dimensions = await (0, import_shell2.getImageDimensions)(data.url);
+    if (dimensions) {
+      data.height = dimensions.height;
+      data.width = dimensions.width;
+    }
+  }
+  return ctx.embed({
+    id: data.url,
+    type: "Image",
+    format: data.format || await (0, import_shell2.getFormat)(data.url),
+    height: data.height,
+    width: data.width,
+    service: data.service ? Array.isArray(data.service) ? data.service : [data.service] : void 0
+  });
+}
+function CreateImageUrlForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    if (formData.url) {
+      props.runCreate({ url: formData.url });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_editors6.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_editors6.InputLabel, { htmlFor: "id", children: "Link to Image" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_editors6.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/ContentResource/ImageUrlCreator/index.tsx
+var import_components4 = require("@manifest-editor/components");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var imageUrlCreator = {
+  id: "@manifest-editor/image-url-creator",
+  create: createImageUrl,
+  label: "Image",
+  summary: "Image from a URL",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components4.AddImageIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CreateImageUrlForm, { ...ctx });
+  },
+  resourceType: "ContentResource",
+  resourceFields: ["format"],
+  supports: {
+    parentFields: ["logo", "body", "thumbnail"]
+  },
+  staticFields: {
+    type: "Image"
+  }
+};
+
+// src/ContentResource/ImageServiceCreator/create-image-service.tsx
+var import_image_3 = require("@iiif/parser/image-3");
+var import_editors7 = require("@manifest-editor/editors");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+async function createImageServer(data, ctx) {
+  const request = (0, import_image_3.createImageServiceRequest)(data.service);
+  const imageId = (0, import_image_3.imageServiceRequestToString)({
+    identifier: request.identifier,
+    server: request.server,
+    scheme: request.scheme,
+    type: "image",
+    size: {
+      max: !data.size?.width && !data.size?.height,
+      confined: false,
+      upscaled: false,
+      ...data.size || {}
+    },
+    format: "jpg",
+    // This isn't how it should be modelled, always full,
+    // region: data.selector ? data.selector : { full: true },
+    region: { full: true },
+    rotation: { angle: 0 },
+    quality: "default",
+    prefix: request.prefix,
+    originalPath: request.originalPath
+  });
+  const resource = ctx.embed({
+    id: imageId,
+    type: "Image",
+    format: data.format || "image/jpeg",
+    height: data.height || data.service.height,
+    width: data.width || data.service.width,
+    service: data.embedService === false ? void 0 : [data.service]
+  });
+  return resource;
+}
+function CreateImageServerForm(props) {
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = new FormData(e.target);
+    const formData = Object.fromEntries(data.entries());
+    const url = formData.url;
+    if (url) {
+      const canon = (0, import_image_3.canonicalServiceUrl)(url);
+      fetch(canon).then((r) => r.json()).then((service) => {
+        if (service["@id"]) {
+          service.id = service["@id"];
+        }
+        if (service["@type"]) {
+          service.type = service["@type"];
+        }
+        props.runCreate({ url: formData.url, service });
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddedSidebarContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_editors7.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.InputLabel, { htmlFor: "id", children: "Link to image service" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors7.Input, { id: "url", name: "url", defaultValue: "" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { type: "submit", children: "Create" })
+  ] }) });
+}
+
+// src/ContentResource/ImageServiceCreator/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var imageServiceCreator = {
+  id: "@manifest-editor/image-service-creator",
+  create: createImageServer,
+  label: "Image Service",
+  summary: "Add an image from Image Service",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextFormatIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(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
+var import_image_32 = require("@iiif/parser/image-3");
+var import_editor_api = require("@manifest-editor/editor-api");
+var import_editors8 = require("@manifest-editor/editors");
+var repositionMultipleImages = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      if (annoPage.items.length < 2) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      const body = bodies[0];
+      const selector = fullAnno.body[0]?.selector;
+      const serviceList = body.service || [];
+      const imageService = serviceList.find((s) => (0, import_image_32.isImageService)(s));
+      if (imageService) {
+        if (imageService.width && imageService.height) {
+          if (imageService.width !== body.width) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+          }
+          if (imageService.height !== body.height) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+          }
+        }
+      }
+      let width = imageService?.width || body.width;
+      let height = imageService?.height || body.height;
+      if (selector) {
+        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
+          const [x, y, width_, height_] = selector.region.split(",");
+          width = Number(width_) || width;
+          height = Number(height_) || height;
+        }
+      }
+      const editor = new import_editor_api.EditorInstance({ vault, reference: result });
+      const imagePosition = (0, import_editors8.centerRectangles)(
+        canvas,
+        {
+          width,
+          height
+        },
+        0.6
+      );
+      editor.annotation.target.setPosition(imagePosition);
+    }
+  }
+};
+
+// src/side-effects/resize-resource-to-empty-canvas.ts
+var import_editor_api2 = require("@manifest-editor/editor-api");
+var resizeResourceToEmptyCanvas = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      if (annoPage.items.length > 1) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      if (bodies.length !== 1) {
+        return;
+      }
+      const body = bodies[0];
+      const selector = fullAnno.body[0]?.selector;
+      const service = (body.service || [])[0];
+      let width = service?.width || body.width;
+      let height = service?.height || body.height;
+      const duration = body.duration || service?.duration;
+      if (selector) {
+        if ((selector.type === "iiif:ImageApiSelector" || selector.type === "ImageApiSelector") && selector.region) {
+          const [x, y, width_, height_] = selector.region.split(",");
+          width = Number(width_) || width;
+          height = Number(height_) || height;
+        }
+      }
+      const editor = new import_editor_api2.EditorInstance({ vault, reference: canvasRef });
+      vault.batch(() => {
+        if (typeof width !== "undefined") {
+          editor.technical.width.set(width);
+        }
+        if (typeof height !== "undefined") {
+          editor.technical.height.set(height);
+        }
+        if (typeof duration !== "undefined") {
+          editor.technical.duration.set(duration);
+        }
+      });
+    }
+  }
+};
+
+// src/side-effects/resize-to-fit-service.ts
+var import_iiif_image_api = require("@atlas-viewer/iiif-image-api");
+var resizeToFitService = {
+  canvasInteraction: true,
+  spatial: true,
+  async run(result, { vault, options }) {
+    if (result && result.type === "Annotation" && options.targetType === "Annotation") {
+      const fullAnno = vault.get(result);
+      const target = fullAnno.target;
+      if (!(target && target.source?.type === "Canvas")) {
+        return;
+      }
+      const canvasRef = target.source;
+      const canvas = vault.get(canvasRef);
+      if (!canvas.items) {
+        return;
+      }
+      const annoPage = vault.get(canvas.items[0]);
+      if (!annoPage) {
+        return;
+      }
+      const resourceBody = Array.isArray(fullAnno.body) ? fullAnno.body[0] : fullAnno.body;
+      if (resourceBody.type === "SpecificResource" && resourceBody.selector) {
+        return;
+      }
+      const bodies = vault.get(fullAnno.body);
+      const body = bodies[0];
+      const serviceList = body.service || [];
+      const imageService = serviceList.find((s) => (0, import_iiif_image_api.isImageService)(s));
+      if (imageService) {
+        if (imageService.width && imageService.height) {
+          if (imageService.width !== body.width) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "width", imageService.width);
+          }
+          if (imageService.height !== body.height) {
+            vault.modifyEntityField({ id: body.id, type: "ContentResource" }, "height", imageService.height);
+          }
+        }
+      }
+    }
+  }
+};
+
+// src/Annotation/ImageServiceAnnotation/create-service-annotation.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+async function createImageServiceAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const resource = await ctx.create("@manifest-editor/image-service-creator", data, {
+    parent: { resource: annotation, property: "body" }
+  });
+  if (targetType === "Annotation") {
+    return {
+      ...annotation,
+      body: [resource],
+      motivation: data.motivation || "painting",
+      target: ctx.getTarget()
+    };
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: [resource],
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled canvas"] },
+      height: resource.resource.height || 1e3,
+      width: resource.resource.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateImageServiceAnnotationForm(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CreateImageServerForm, { ...props });
+}
+
+// src/Annotation/ImageServiceAnnotation/index.tsx
+var import_components5 = require("@manifest-editor/components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var imageServiceAnnotation = {
+  id: "@manifest-editor/image-service-annotation",
+  create: createImageServiceAnnotation,
+  label: "IIIF Image",
+  dependencies: ["@manifest-editor/image-service-creator"],
+  summary: "IIIF Image service",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components5.IIIFLogo, { style: { padding: 10 } }),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(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
+var import_components6 = require("@manifest-editor/components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var noBodyAnnotation = {
+  id: "@manifest-editor/no-body-annotation",
+  create: createNoBodyAnnotation,
+  label: "Annotation without body",
+  summary: "Add an annotation that only has motivation and target",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components6.EmptyCanvasIcon, {}),
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "target"],
+  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
+var import_helpers = require("@iiif/helpers");
+var import_react5 = require("react");
+
+// ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
+var isProduction = false;
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  if (isProduction) {
+    throw new Error(prefix);
+  }
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+  throw new Error(value);
+}
+
+// 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 = (0, import_helpers.normaliseContentState)(
+    typeof data.output === "string" ? (0, import_helpers.parseContentState)(data.output) : data.output
+  );
+  if (!contentState.target || contentState.target.length === 0) {
+    throw new Error("No target found in content state");
+  }
+  const 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 IIIFBrowserCreatorForm2 = (0, import_react5.lazy)(() => Promise.resolve().then(() => (init_iiif_browser_form_lazy(), iiif_browser_form_lazy_exports)));
+
+// src/ContentResource/IIIFBrowserCreator/index.tsx
+var import_components7 = require("@manifest-editor/components");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var iiifBrowserCreator = {
+  id: "@manifest-editor/iiif-browser-creator",
+  create: createFromIIIFBrowserOutput,
+  label: "IIIF Browser",
+  summary: "Browse IIIF Resources",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components7.IIIFBrowserIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IIIFBrowserCreatorForm2, { ...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
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_iiif_browser2 = require("@manifest-editor/iiif-browser");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var internalCanvas = {
+  id: "@manifest-editor/internal-canvas",
+  create: createInternalCanvas,
+  label: "Internal canvas link",
+  summary: "Canvas from the same manifest",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ThumbnailStripIcon, {}),
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["start"]
+  },
+  render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InternalCanvas, { ...ctx })
+};
+function InternalCanvas(props) {
+  const manifest = (0, import_react_iiif_vault.useManifest)();
+  const vault = (0, import_react_iiif_vault.useVault)();
+  invariant(manifest, "Manifest is not loaded");
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_iiif_browser2.IIIFExplorer,
+    {
+      vault,
+      entry: manifest,
+      window: false,
+      hideHeader: true,
+      hideBack: true,
+      output: { type: "url" },
+      outputTargets: [
+        {
+          type: "callback",
+          label: "Select canvas",
+          cb: (url) => {
+            props.runCreate({ id: url });
+          }
+        }
+      ],
+      outputTypes: ["Canvas"]
+    }
+  );
+}
+async function createInternalCanvas(data, ctx) {
+  return ctx.embed({ id: data.id, type: "Canvas" });
+}
+
+// src/Annotation/ImageUrlAnnotation/create-image-url-annotation.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+async function createImageUrlAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const resource = await ctx.create("@manifest-editor/image-url-creator", data, {
+    parent: { resource: annotation, property: "body" }
+  });
+  if (targetType === "Annotation") {
+    return {
+      ...annotation,
+      body: [resource],
+      motivation: data.motivation || "painting",
+      target: ctx.getTarget()
+    };
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body: [resource],
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled canvas"] },
+      height: resource.resource.height || 1e3,
+      width: resource.resource.width || 1e3,
+      items: [page]
+    });
+  }
+}
+function CreateImageUrlAnnotationForm(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CreateImageUrlForm, { ...props });
+}
+
+// src/Annotation/ImageUrlAnnotation/index.tsx
+var import_components8 = require("@manifest-editor/components");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var imageUrlAnnotation = {
+  id: "@manifest-editor/image-url-annotation",
+  create: createImageUrlAnnotation,
+  label: "Image",
+  dependencies: ["@manifest-editor/image-url-creator"],
+  summary: "Image from URL",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components8.AddImageIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreateImageUrlAnnotationForm, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  sideEffects: [resizeToFitService, resizeResourceToEmptyCanvas, repositionMultipleImages],
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_react7 = require("react");
+
+// ../ui/atoms/callouts/ErrorMessage.tsx
+var import_styled_components3 = __toESM(require("styled-components"), 1);
+var ErrorMessage = import_styled_components3.default.div`
+  border: 2px solid ${(props) => props.theme.color.danger || "red"};
+  width: 100%;
+  border-radius: 5px;
+  padding: ${(props) => props.theme.padding.small || "0.5rem"}
+    ${(props) => props.theme.padding.medium || "1rem"};
+  line-height: 1.9em;
+  display: flex;
+  align-items: center;
+  a {
+    color: ${(props) => props.theme.color.white || "white"};
+  }
+  ${(props) => props.$small && import_styled_components3.css`
+      font-size: 0.75em;
+      white-space: nowrap;
+      padding: ${props.theme.padding.xs || "0.25rem"} ${props.theme.padding.small || "0.5rem"};
+      line-height: 1.6em;
+      width: fit-content;
+    `}
+`;
+
+// ../ui/ui/MediaControls/MediaControls.tsx
+var import_react_iiif_vault2 = require("react-iiif-vault");
+var import_react6 = require("react");
+
+// ../ui/ui/MediaControls/MediaControls.icons.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var PlayIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
+  props.title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: props.title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 5v14l11-7z", fill: "currentColor" })
+] });
+var PauseIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, viewBox: "4 4 16 16", xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", children: [
+  props.title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: props.title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+] });
+var VolumeUpIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+    }
+  )
+] });
+var VolumeDownIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"
+    }
+  )
+] });
+var VolumeOffIcon = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "2 2 20 20", children: [
+  title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: title }) : null,
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"
+    }
+  )
+] });
+
+// ../ui/ui/MediaControls/MediaControls.styles.ts
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var AudioPlayerContainer = import_styled_components4.default.div`
+  background: #ededed; // Not in variable.
+  display: flex;
+  padding: 0.5em;
+  align-items: center;
+`;
+var BaseButton = import_styled_components4.default.button`
+  cursor: pointer;
+  padding: 0.75em 1.5em;
+  font-size: 0.938em;
+  background: none;
+  color: inherit;
+  border: none;
+  text-decoration: none;
+  display: inline-block;
+  vertical-align: top;
+  white-space: nowrap;
+`;
+var PlayButton = (0, import_styled_components4.default)(BaseButton)`
+  width: 2em;
+  height: 2em;
+  overflow: hidden;
+  font-size: 1.1em;
+  background: #fff;
+  border-radius: 3px;
+  padding: 0;
+  margin: 0;
+  color: #000; // Not in colours
+
+  &:disabled {
+    color: #999;
+  }
+`;
+var TimeDisplay = import_styled_components4.default.div`
+  margin: 0 1em;
+  font-size: 0.85em;
+  color: #000;
+`;
+var ProgressContainer = import_styled_components4.default.div`
+  flex: 1 1 0px;
+  height: 6px;
+  display: flex;
+  position: relative;
+  padding: 15px 0;
+`;
+var ProgressCurrent = import_styled_components4.default.div`
+  background: #d85680;
+  height: 6px;
+  pointer-events: none;
+  position: absolute;
+  top: 13px;
+  left: 0;
+  border-radius: 3px;
+  transition: width 200ms;
+`;
+var ProgressBackground = import_styled_components4.default.div`
+  position: absolute;
+  top: 13px;
+  left: 0;
+  height: 6px;
+  border-radius: 3px;
+  width: 100%;
+  pointer-events: none;
+  background: #fff;
+`;
+var SoundButton = (0, import_styled_components4.default)(BaseButton)`
+  width: 2em;
+  height: 2em;
+  overflow: hidden;
+  font-size: 1.1em;
+  background: transparent;
+  border-radius: 3px;
+  padding: 0;
+  margin: 0;
+`;
+var SoundContainer = import_styled_components4.default.div`
+  display: flex;
+  align-items: center;
+`;
+var VolumeContainer = import_styled_components4.default.div`
+  width: 0;
+  overflow: hidden;
+  transition: width 500ms;
+  color: #4a473f; // Not in colours
+
+  ${(props) => props.$isOpen && import_styled_components4.css`
+      width: 150px;
+    `}
+`;
+var VolumeSlider = import_styled_components4.default.input.attrs({ type: "range" })`
+  width: 120px;
+  margin: 0 15px;
+`;
+
+// ../ui/madoc/components/icons/Spinner.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function Spinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 18 18",
+        to: "360 18 18",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ) })
+  ] }) });
+}
+
+// ../ui/atoms/VisuallHidden/VisuallHidden.tsx
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var visuallyHidden = import_styled_components5.css`
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+`;
+var VisuallyHiddenLabel = import_styled_components5.default.label`
+  ${visuallyHidden}
+`;
+
+// ../ui/ui/MediaControls/MediaControls.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function MediaControls(props) {
+  const [isVolumeOpen, setIsVolumeOpen] = (0, import_react6.useState)(false);
+  const { progress, currentTime, element } = (0, import_react_iiif_vault2.useMediaElements)();
+  const { duration, isMuted, volume, isPlaying, playRequested } = (0, import_react_iiif_vault2.useMediaState)();
+  const { setVolume, toggleMute, play, pause, setDurationPercent } = (0, import_react_iiif_vault2.useMediaActions)();
+  const Volume = isMuted || volume === 0 ? VolumeOffIcon : volume > 50 ? VolumeUpIcon : VolumeDownIcon;
+  (0, import_react6.useLayoutEffect)(() => {
+    if (element.current) {
+      const $el = element.current;
+      if ($el.error && props.onError) {
+        props.onError($el.error?.message || "Unknown error");
+        return;
+      }
+      const onError = () => {
+        if (props.onError) {
+          props.onError($el.error?.message || "Unknown error");
+        }
+      };
+      const loadedMetadata = () => {
+        if ($el.duration && props.onDuration) {
+          props.onDuration($el.duration);
+        }
+        if (props.onDimensions && $el instanceof HTMLVideoElement) {
+          props.onDimensions($el.videoWidth, $el.videoHeight);
+        }
+      };
+      $el.addEventListener("loadedmetadata", loadedMetadata);
+      $el.addEventListener("error", onError);
+      return () => {
+        $el.removeEventListener("loadedmetadata", loadedMetadata);
+        $el.removeEventListener("error", onError);
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AudioPlayerContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      PlayButton,
+      {
+        disabled: playRequested,
+        onClick: () => {
+          if (isPlaying) {
+            pause();
+          } else {
+            play();
+          }
+        },
+        children: playRequested ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Spinner, { stroke: "#999" }) : isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PauseIcon, { title: "Pause" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PlayIcon, { title: "Play" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TimeDisplay, { ref: currentTime, children: "0:00" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      ProgressContainer,
+      {
+        onClick: (e) => {
+          const { left, width } = e.currentTarget.getBoundingClientRect();
+          const percent = (e.pageX - left) / width;
+          setDurationPercent(percent);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ProgressBackground, {}),
+          duration ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ProgressCurrent, { ref: progress }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TimeDisplay, { children: (0, import_react_iiif_vault2.formatTime)(duration) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(SoundContainer, { onMouseEnter: () => setIsVolumeOpen(true), onMouseLeave: () => setIsVolumeOpen(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VolumeContainer, { $isOpen: isVolumeOpen, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VisuallyHiddenLabel, { htmlFor: "audio-slider", children: "Change volume" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          VolumeSlider,
+          {
+            id: "audio-slider",
+            role: "slider",
+            disabled: isMuted,
+            min: "0",
+            max: "100",
+            value: volume,
+            onChange: (e) => setVolume(Number(e.currentTarget.value))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SoundButton, { onClick: () => toggleMute(), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Volume, { title: isMuted ? "Mute" : "Unmute" }) })
+    ] })
+  ] });
+}
+
+// src/Annotation/AudioAnnotation/create-audio-annotation.tsx
+var import_react_iiif_vault3 = require("react-iiif-vault");
+var import_helpers2 = require("@iiif/helpers");
+var import_editors9 = require("@manifest-editor/editors");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+async function createAudioAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const body = await ctx.embed({
+    id: data.url,
+    type: "Sound",
+    format: "audio/mp4",
+    duration: data.duration || 0
+  });
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      label: (0, import_helpers2.getValue)(data.label) && data.label,
+      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
+      body,
+      target: ctx.getTarget()
+    });
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body,
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      duration: data.duration || 0,
+      items: [page]
+    });
+  }
+}
+function CreateAudioAnnotationForm(props) {
+  const [url, setUrl] = (0, import_react7.useState)("");
+  const [duration, setDuration] = (0, import_react7.useState)(0);
+  const [error, setError] = (0, import_react7.useState)("");
+  const [label, setLabel] = (0, import_react7.useState)({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      url,
+      duration,
+      label
+    });
+  };
+  (0, import_react7.useEffect)(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      setLabel({ en: [labelFromUrl || ""] });
+    }
+  }, [url]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(PaddedSidebarContainer, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ErrorMessage, { children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_editors9.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.InputLabel, { htmlFor: "audio-url", children: "URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.Input, { type: "text", id: "audio-url", value: url, onChange: (e) => setUrl(e.target.value) })
+    ] }),
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_editors9.LanguageFieldEditor,
+      {
+        containerId: "label",
+        focusId: "label_",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      },
+      url + "__" + duration
+    ) }) : null,
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_iiif_vault3.CanvasPanel.AudioHTML, { media: { url, duration, type: "Sound" }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      MediaControls,
+      {
+        onError: (error2) => setError(error2),
+        onDuration: (duration2) => setDuration(duration2)
+      },
+      url + "__" + duration
+    ) }, url + "__" + duration) : null,
+    duration && !error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_editors9.FormFieldWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.InputLabel, { htmlFor: "duration", children: "Duration" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_editors9.Input, { type: "number", id: "duration", value: duration, onChange: (e) => setDuration(e.target.valueAsNumber) })
+    ] }) : null,
+    url && !error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { onClick: onSubmit, children: "Add audio" })
+  ] });
+}
+
+// src/Annotation/AudioAnnotation/index.tsx
+var import_components9 = require("@manifest-editor/components");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var audioAnnotation = {
+  id: "@manifest-editor/audio-annotation",
+  create: createAudioAnnotation,
+  label: "Audio",
+  summary: "Audio annotation",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components9.AudioIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CreateAudioAnnotationForm, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+var import_helpers3 = require("@iiif/helpers");
+var import_editors10 = require("@manifest-editor/editors");
+var import_react8 = require("react");
+
+// ../ui/ui/VideoPlayer/VideoPlayer.tsx
+var import_react_iiif_vault4 = require("react-iiif-vault");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function VideoPlayer({
+  media,
+  onError,
+  duration,
+  onDuration,
+  onDimensions
+}) {
+  const [{ element, currentTime, progress }, state, actions] = (0, import_react_iiif_vault4.useSimpleMediaPlayer)({ duration });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    import_react_iiif_vault4.MediaPlayerProvider,
+    {
+      element,
+      state,
+      actions,
+      currentTime,
+      progress,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            style: {
+              maxHeight: 400,
+              aspectRatio: `${media.width}/${media.height}`,
+              position: "relative"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_iiif_vault4.CanvasPanel.VideoHTML, { element, media, playPause: actions.playPause })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MediaControls, { onError, onDuration, onDimensions })
+      ]
+    }
+  );
+}
+
+// src/Annotation/VideoAnnotation/create-video-annotation.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+async function createVideoAnnotation(data, ctx) {
+  const annotation = {
+    id: ctx.generateId("annotation"),
+    type: "Annotation"
+  };
+  const targetType = ctx.options.targetType;
+  const body = await ctx.embed({
+    id: data.url,
+    type: "Video",
+    format: "video/mp4",
+    width: data.width,
+    height: data.height,
+    duration: data.duration || 0
+  });
+  if (targetType === "Annotation") {
+    return ctx.embed({
+      ...annotation,
+      label: (0, import_helpers3.getValue)(data.label) && data.label,
+      motivation: data.motivation || ctx.options.initialData?.motivation || "painting",
+      body,
+      target: ctx.getTarget()
+    });
+  }
+  if (targetType === "Canvas") {
+    const canvasId = ctx.generateId("canvas");
+    const pageId = ctx.generateId("annotation-page", { id: canvasId, type: "Canvas" });
+    const annotationResource = ctx.embed({
+      ...annotation,
+      motivation: "painting",
+      body,
+      target: { type: "SpecificResource", source: { id: canvasId, type: "Canvas" } }
+    });
+    const page = ctx.embed({
+      id: pageId,
+      type: "AnnotationPage",
+      items: [annotationResource]
+    });
+    return ctx.embed({
+      id: canvasId,
+      type: "Canvas",
+      label: data.label || { en: ["Untitled HTML canvas"] },
+      duration: data.duration || 0,
+      width: data.width,
+      height: data.height,
+      items: [page]
+    });
+  }
+}
+function CreateVideoAnnotationForm(props) {
+  const [url, setUrl] = (0, import_react8.useState)("");
+  const [duration, setDuration] = (0, import_react8.useState)(0);
+  const [width, setWidth] = (0, import_react8.useState)(0);
+  const [height, setHeight] = (0, import_react8.useState)(0);
+  const [error, setError] = (0, import_react8.useState)("");
+  const [label, setLabel] = (0, import_react8.useState)({ en: [""] });
+  const onSubmit = () => {
+    props.runCreate({
+      url,
+      duration,
+      label,
+      width,
+      height
+    });
+  };
+  (0, import_react8.useEffect)(() => {
+    setError("");
+    setDuration(0);
+    if (url) {
+      const labelFromUrl = url.split("/").pop()?.split(".").shift();
+      setLabel({ en: [labelFromUrl || ""] });
+    }
+  }, [url]);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(PaddedSidebarContainer, { children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorMessage, { children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_editors10.InputContainer, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.InputLabel, { htmlFor: "video-url", children: "URL" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.Input, { type: "text", id: "video-url", value: url, onChange: (e) => setUrl(e.target.value) })
+    ] }),
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_editors10.LanguageFieldEditor,
+      {
+        containerId: "label",
+        focusId: "label_",
+        label: "Label",
+        fields: label,
+        onSave: (e) => setLabel(e.toInternationalString())
+      },
+      url + "__" + duration
+    ) }) : null,
+    url && !error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      VideoPlayer,
+      {
+        duration,
+        onDuration: (d) => setDuration(d),
+        onError: (err) => setError(err),
+        media: {
+          url,
+          duration,
+          height,
+          width,
+          type: "Video"
+        },
+        onDimensions: (w, h) => {
+          setWidth(w || 0);
+          setHeight(h || 0);
+        }
+      }
+    ) : null,
+    !error && (duration || width || height) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_editors10.InputContainer, { $wide: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_editors10.DimensionsTriplet,
+      {
+        widthId: "width",
+        width: width || 0,
+        changeWidth: (v) => setWidth(v),
+        heightId: "height",
+        height: height || 0,
+        changeHeight: (v) => setHeight(v),
+        durationId: "duration",
+        duration: duration || 0,
+        changeDuration: (v) => setDuration(v)
+      }
+    ) }) : null,
+    url && !error && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { onClick: onSubmit, children: "Add video" })
+  ] });
+}
+
+// src/Annotation/VideoAnnotation/index.tsx
+var import_components10 = require("@manifest-editor/components");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var videoAnnotation = {
+  id: "@manifest-editor/video-annotation",
+  create: createVideoAnnotation,
+  label: "Video",
+  summary: "Video annotation",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_components10.VideoIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CreateVideoAnnotationForm, { ...ctx });
+  },
+  resourceType: "Annotation",
+  resourceFields: ["id", "type", "motivation", "body", "target"],
+  additionalTypes: ["Canvas"],
+  supports: {
+    initialData: true,
+    parentTypes: ["AnnotationPage", "Manifest"],
+    parentFields: ["items"]
+  },
+  staticFields: {
+    type: "Annotation"
+  }
+};
+
+// src/Manifest/ManifestBrowserCreator/manifest-browser-creator.tsx
+var import_helpers4 = require("@iiif/helpers");
+var import_react9 = require("react");
+async function createFromManifestBrowserOutput(data, ctx) {
+  const targetType = ctx.options.targetType;
+  if (Array.isArray(data.output)) {
+    throw new Error("Multiple items not yet supported");
+  }
+  const contentState = (0, import_helpers4.normaliseContentState)(
+    typeof data.output === "string" ? (0, import_helpers4.parseContentState)(data.output) : data.output
+  );
+  const 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 = (0, import_react9.lazy)(() => Promise.resolve().then(() => (init_manifest_browser_form_lazy(), manifest_browser_form_lazy_exports)));
+
+// src/Manifest/ManifestBrowserCreator/index.tsx
+init_manifest_browser_form_lazy();
+var import_components11 = require("@manifest-editor/components");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var manifestBrowserCreator = {
+  id: "@manifest-editor/manifest-browser-creator",
+  create: createFromManifestBrowserOutput,
+  label: "IIIF Browser",
+  summary: "Browse IIIF Resources",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_components11.IIIFBrowserIcon, {}),
+  render(ctx) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(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
+];