@manifest-editor/exhibition-preset 1.3.1 → 1.4.1

package/dist/index.cjs

@@ -623,13 +623,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var youtubeMainEdtior = {
   id: "youtube-main-editor",
   label: "YouTube main editor",
-  component: (strategy) => strategy.type === "media" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    YouTubeEditor,
-    {
-      strategy,
-      video: strategy.media
-    }
-  ) : null,
+  component: (strategy) => strategy.type === "media" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(YouTubeEditor, { strategy, video: strategy.media }) : null,
   supports: {
     strategy: (strategy, resource, vault) => {
       console.log(strategy);
@@ -643,10 +637,7 @@ var youtubeMainEdtior = {
     }
   }
 };
-function YouTubeEditor({
-  strategy,
-  video
-}) {
+function YouTubeEditor({ strategy, video }) {
   const { edit } = (0, import_shell4.useLayoutActions)();
   const canvas = (0, import_react_iiif_vault5.useCanvas)();
   const annotationRef = (0, import_react_iiif_vault5.useVaultSelector)((_2, v2) => {
@@ -658,26 +649,19 @@ function YouTubeEditor({
   const annotation = (0, import_shell4.useGenericEditor)(annotationRef);
   const media = video;
   const ar = (canvas.width || 1) / (canvas.height || 1);
-  const ytThumbnail = `https://img.youtube.com/vi/${media.youTubeId}/0.jpg`;
+  const ytThumbnail = `https://img.youtube.com/vi/${media.youTubeId}/maxresdefault.jpg`;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "overflow-y-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-8", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "div",
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-8", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-black z-20 flex p-8 rounded-lg max-w-full max-h-[70vh] mx-auto", style: { aspectRatio: ar }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "iframe",
       {
-        className: "bg-black z-20 flex p-8 rounded-lg max-w-full max-h-[70vh] mx-auto",
-        style: { aspectRatio: ar },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "iframe",
-          {
-            title: "YouTube video",
-            className: "border-none w-full h-full object-contain",
-            ref: player,
-            src: `https://www.youtube.com/embed/${media.youTubeId}?enablejsapi=1&origin=${window.location.host}`,
-            referrerPolicy: "no-referrer",
-            sandbox: "allow-scripts allow-same-origin allow-presentation"
-          }
-        )
+        title: "YouTube video",
+        className: "border-none w-full h-full object-contain",
+        ref: player,
+        src: `https://www.youtube.com/embed/${media.youTubeId}?enablejsapi=1&origin=${window.location.host}`,
+        referrerPolicy: "no-referrer",
+        sandbox: "allow-scripts allow-same-origin allow-presentation"
       }
-    ) }),
+    ) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-white shadow w-full p-8 flex gap-8", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
@@ -713,13 +697,119 @@ function YouTubeEditor({
 }
 
 // src/creators/image-browser-slide-creator.tsx
+var import_creator_api = require("@manifest-editor/creator-api");
 var import_creators = require("@manifest-editor/creators");
+var imageBrowserSlideCreator = (0, import_creator_api.defineCreator)({
+  ...import_creators.iiifBrowserCreator,
+  id: "@exhibitions/browser-creator",
+  create: createBrowser,
+  tags: ["image", "exhibition-slide"],
+  label: "IIIF Browser",
+  summary: "Browse IIIF Resources"
+});
+async function createBrowser(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const pageId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const dimensions = { width: 0, height: 0 };
+  const createBrowserAnnotation = (0, import_creator_api.creatorHelper)(
+    ctx,
+    { id: pageId, type: "AnnotationPage" },
+    "items",
+    "@manifest-editor/iiif-browser-creator"
+  );
+  const annotation = await createBrowserAnnotation(
+    {
+      ...data,
+      trackSize({ width, height }) {
+        dimensions.height = height;
+        dimensions.width = width;
+      }
+    },
+    {
+      targetType: "Annotation",
+      target: {
+        id: canvasId,
+        type: "Canvas"
+      }
+    }
+  );
+  const createSlide = (0, import_creator_api.creatorHelper)(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
+    canvasId,
+    width: dimensions.width,
+    height: dimensions.height,
+    type: "default",
+    // default / left / right / bottom
+    items: annotation
+  });
+}
+
+// src/creators/image-service-slide-creator.tsx
+var import_creator_api2 = require("@manifest-editor/creator-api");
+var import_creators2 = require("@manifest-editor/creators");
+var imageServiceSlideCreator = (0, import_creator_api2.defineCreator)({
+  ...import_creators2.imageServiceCreator,
+  id: "@exhibitions/image-service-creator",
+  create: createImageService,
+  tags: ["image", "exhibition-slide"],
+  label: "IIIF Image",
+  summary: "IIIF Image service",
+  resourceType: "Canvas",
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
+  }
+});
+async function createImageService(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const pageId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const annotationId = ctx.generateId("annotation");
+  const createImageService2 = (0, import_creator_api2.creatorHelper)(
+    ctx,
+    { id: annotationId, type: "Annotation" },
+    "body",
+    "@manifest-editor/image-service-creator"
+  );
+  const resource = await createImageService2(data, {
+    target: {
+      id: canvasId,
+      type: "Canvas"
+    }
+  });
+  const { width, height } = resource.get();
+  const annotation = ctx.embed({
+    id: ctx.generateId("annotation"),
+    type: "Annotation",
+    motivation: "painting",
+    body: [resource],
+    target: {
+      type: "SpecificResource",
+      source: { id: canvasId, type: "Canvas" }
+    }
+  });
+  const createSlide = (0, import_creator_api2.creatorHelper)(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
+    canvasId,
+    width,
+    height,
+    type: "default",
+    // default / left / right / bottom
+    items: [annotation]
+  });
+}
 
 // src/creators/image-slide-creator.tsx
 var import_parser = require("@iiif/parser");
 var import_components5 = require("@manifest-editor/components");
+var import_creator_api3 = require("@manifest-editor/creator-api");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var imageSlideCreator = {
+var imageSlideCreator = (0, import_creator_api3.defineCreator)({
   id: "@exhibitions/image-slide-creator",
   create: createImageSlide,
   label: "Empty slide",
@@ -733,31 +823,31 @@ var imageSlideCreator = {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
-var imageSlideLeftCreator = {
+});
+var imageSlideLeftCreator = (0, import_creator_api3.defineCreator)({
   ...imageSlideCreator,
   id: "@exhibitions/image-slide-creator-left",
   label: "Image (Left)",
   summary: "An image with text on the left.",
   icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "IMAGE (LEFT)" }),
   create: (payload, ctx) => createImageSlide({ ...payload, type: "left" }, ctx)
-};
-var imageSlideRightCreator = {
+});
+var imageSlideRightCreator = (0, import_creator_api3.defineCreator)({
   ...imageSlideCreator,
   id: "@exhibitions/image-slide-creator-right",
   label: "Image (Right)",
   summary: "An image with text on the right.",
   icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "IMAGE (RIGHT)" }),
   create: (payload, ctx) => createImageSlide({ ...payload, type: "right" }, ctx)
-};
-var imageSlideBottomCreator = {
+});
+var imageSlideBottomCreator = (0, import_creator_api3.defineCreator)({
   ...imageSlideCreator,
   id: "@exhibitions/image-slide-creator-bottom",
   label: "Image (Bottom)",
   summary: "An image with text at the bottom.",
   icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "IMAGE (BOTTOM)" }),
   create: (payload, ctx) => createImageSlide({ ...payload, type: "bottom" }, ctx)
-};
+});
 function createImageSlide(payload, ctx) {
   const canvasId = payload.canvasId || ctx.generateId("Canvas");
   const itemsPageId = ctx.generateId("AnnotationPage", {
@@ -827,113 +917,10 @@ function createImageSlide(payload, ctx) {
   });
 }
 
-// src/creators/image-browser-slide-creator.tsx
-var imageBrowserSlideCreator = {
-  ...import_creators.iiifBrowserCreator,
-  id: "@exhibitions/browser-creator",
-  create: createBrowser,
-  tags: ["image", "exhibition-slide"],
-  label: "IIIF Browser",
-  summary: "Browse IIIF Resources"
-};
-async function createBrowser(data, ctx) {
-  const canvasId = ctx.generateId("canvas");
-  const pageId = ctx.generateId("annotation-page", {
-    id: canvasId,
-    type: "Canvas"
-  });
-  const dimensions = { width: 0, height: 0 };
-  const annotation = await ctx.create(
-    import_creators.iiifBrowserCreator.id,
-    {
-      ...data,
-      trackSize({ width, height }) {
-        dimensions.height = height;
-        dimensions.width = width;
-      }
-    },
-    {
-      target: {
-        id: canvasId,
-        type: "Canvas"
-      },
-      targetType: "Annotation",
-      parent: {
-        resource: { id: pageId, type: "AnnotationPage" },
-        property: "items"
-      }
-    }
-  );
-  return await ctx.create(imageSlideCreator.id, {
-    canvasId,
-    width: dimensions.width,
-    height: dimensions.height,
-    type: "default",
-    // default / left / right / bottom
-    items: [annotation]
-  });
-}
-
-// src/creators/image-service-slide-creator.tsx
-var import_creators2 = require("@manifest-editor/creators");
-var imageServiceSlideCreator = {
-  ...import_creators2.imageServiceCreator,
-  id: "@exhibitions/image-service-creator",
-  create: createImageService,
-  tags: ["image", "exhibition-slide"],
-  label: "IIIF Image",
-  summary: "IIIF Image service",
-  resourceType: "Canvas",
-  supports: {
-    parentTypes: ["Manifest"],
-    parentFields: ["items"]
-  }
-};
-async function createImageService(data, ctx) {
-  const canvasId = ctx.generateId("canvas");
-  const pageId = ctx.generateId("annotation-page", {
-    id: canvasId,
-    type: "Canvas"
-  });
-  const resource = await ctx.create(
-    import_creators2.imageServiceCreator.id,
-    data,
-    {
-      target: {
-        id: canvasId,
-        type: "Canvas"
-      },
-      targetType: "Annotation",
-      parent: {
-        resource: { id: pageId, type: "AnnotationPage" },
-        property: "items"
-      }
-    }
-  );
-  const { width, height } = resource.get();
-  const annotation = ctx.embed({
-    id: ctx.generateId("annotation"),
-    type: "Annotation",
-    motivation: "painting",
-    body: [resource],
-    target: {
-      type: "SpecificResource",
-      source: { id: canvasId, type: "Canvas" }
-    }
-  });
-  return await ctx.create(imageSlideCreator.id, {
-    canvasId,
-    width,
-    height,
-    type: "default",
-    // default / left / right / bottom
-    items: [annotation]
-  });
-}
-
 // src/creators/image-url-slide.tsx
+var import_creator_api4 = require("@manifest-editor/creator-api");
 var import_creators3 = require("@manifest-editor/creators");
-var imageUrlSlideCreator = {
+var imageUrlSlideCreator = (0, import_creator_api4.defineCreator)({
   ...import_creators3.imageUrlCreator,
   id: "@exhibitions/image-url-creator",
   create: createUrlSlide,
@@ -945,31 +932,30 @@ var imageUrlSlideCreator = {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
+});
 async function createUrlSlide(data, ctx) {
   const canvasId = ctx.generateId("canvas");
   const pageId = ctx.generateId("annotation-page", {
     id: canvasId,
     type: "Canvas"
   });
-  const resource = await ctx.create(
-    import_creators3.imageUrlCreator.id,
-    data,
-    {
-      target: {
-        id: canvasId,
-        type: "Canvas"
-      },
-      targetType: "Annotation",
-      parent: {
-        resource: { id: pageId, type: "AnnotationPage" },
-        property: "items"
-      }
-    }
+  const annotationId = ctx.generateId("annotation");
+  const createImageUrl = (0, import_creator_api4.creatorHelper)(
+    ctx,
+    { id: annotationId, type: "Annotation" },
+    "body",
+    "@manifest-editor/image-url-creator"
   );
+  const resource = await createImageUrl(data, {
+    target: {
+      id: canvasId,
+      type: "Canvas"
+    },
+    targetType: "Annotation"
+  });
   const { width, height } = resource.get();
   const annotation = ctx.embed({
-    id: ctx.generateId("annotation"),
+    id: annotationId,
     type: "Annotation",
     motivation: "painting",
     body: [resource],
@@ -978,7 +964,8 @@ async function createUrlSlide(data, ctx) {
       source: { id: canvasId, type: "Canvas" }
     }
   });
-  return await ctx.create(imageSlideCreator.id, {
+  const createSlide = (0, import_creator_api4.creatorHelper)(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
     canvasId,
     width,
     height,
@@ -990,31 +977,23 @@ async function createUrlSlide(data, ctx) {
 
 // src/creators/info-box-creator.tsx
 var import_parser2 = require("@iiif/parser");
+var import_creator_api5 = require("@manifest-editor/creator-api");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var infoBoxCreator = {
+var infoBoxCreator = (0, import_creator_api5.defineCreator)({
   id: "@exhibitions/info-box-creator",
   create: createInfoBox,
   label: "Info box",
   summary: "A text panel for an exhibition",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 24 24",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Info box" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
-          }
-        )
-      ]
-    }
-  ),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: "Info box" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
+      }
+    )
+  ] }),
   tags: ["exhibition-slide"],
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label", "height", "width", "items"],
@@ -1022,7 +1001,7 @@ var infoBoxCreator = {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
+});
 async function createInfoBox(data, ctx) {
   const canvasId = ctx.generateId("canvas");
   const pageId = ctx.generateId("annotation-page", {
@@ -1111,16 +1090,17 @@ async function createInfoBox(data, ctx) {
 
 // src/creators/youtube-slide-creator.tsx
 var import_parser3 = require("@iiif/parser");
+var import_creator_api6 = require("@manifest-editor/creator-api");
 var import_creators4 = require("@manifest-editor/creators");
 var import_editors3 = require("@manifest-editor/editors");
-var youtubeSlideCreator = {
+var youtubeSlideCreator = (0, import_creator_api6.defineCreator)({
   ...import_creators4.youTubeBodyCreator,
   id: "@exhibitions/youtube-creator",
   create: createYoutube,
   tags: ["video", "exhibition-slide"],
   label: "YouTube",
   summary: "A YouTube for an exhibition"
-};
+});
 async function createYoutube(data, ctx) {
   const ytId = (0, import_editors3.getYouTubeId)(data.youtubeUrl);
   const canvasId = ctx.generateId("canvas");
@@ -1145,10 +1125,10 @@ async function createYoutube(data, ctx) {
     items: [annotation]
   });
   const thumbnail = ctx.embed({
-    id: `https://img.youtube.com/vi/${ytId}/0.jpg`,
+    id: `https://img.youtube.com/vi/${ytId}/maxresdefault.jpg`,
     type: "Image",
     format: "image/jpeg",
-    width: 480,
+    width: 640,
     height: 360
   });
   return ctx.embed({
@@ -1346,7 +1326,7 @@ function SortableExhibitionItem({
       onClick,
       isFirst,
       item,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute bg-white text-2xl p-1 top-0.5 right-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ResizeHandleIcon, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute bg-white text-2xl p-1 top-0.5 right-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ResizeHandleIcon, { "aria-label": "Reorder item" }) })
     }
   );
 }

package/dist/index.js

@@ -629,10 +629,7 @@ function AnnotationEditor() {
 
 // src/canvas-editors/youtube-editor.tsx
 import { ActionButton as ActionButton4, LazyThumbnail } from "@manifest-editor/components";
-import {
-  useGenericEditor as useGenericEditor4,
-  useLayoutActions
-} from "@manifest-editor/shell";
+import { useGenericEditor as useGenericEditor4, useLayoutActions } from "@manifest-editor/shell";
 import { useRef as useRef2 } from "react";
 import {
   LocaleString as LocaleString2,
@@ -644,13 +641,7 @@ import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var youtubeMainEdtior = {
   id: "youtube-main-editor",
   label: "YouTube main editor",
-  component: (strategy) => strategy.type === "media" ? /* @__PURE__ */ jsx7(
-    YouTubeEditor,
-    {
-      strategy,
-      video: strategy.media
-    }
-  ) : null,
+  component: (strategy) => strategy.type === "media" ? /* @__PURE__ */ jsx7(YouTubeEditor, { strategy, video: strategy.media }) : null,
   supports: {
     strategy: (strategy, resource, vault) => {
       console.log(strategy);
@@ -664,10 +655,7 @@ var youtubeMainEdtior = {
     }
   }
 };
-function YouTubeEditor({
-  strategy,
-  video
-}) {
+function YouTubeEditor({ strategy, video }) {
   const { edit } = useLayoutActions();
   const canvas = useCanvas5();
   const annotationRef = useVaultSelector2((_2, v2) => {
@@ -679,26 +667,19 @@ function YouTubeEditor({
   const annotation = useGenericEditor4(annotationRef);
   const media = video;
   const ar = (canvas.width || 1) / (canvas.height || 1);
-  const ytThumbnail = `https://img.youtube.com/vi/${media.youTubeId}/0.jpg`;
+  const ytThumbnail = `https://img.youtube.com/vi/${media.youTubeId}/maxresdefault.jpg`;
   return /* @__PURE__ */ jsxs4("div", { className: "overflow-y-auto", children: [
-    /* @__PURE__ */ jsx7("div", { className: "p-8", children: /* @__PURE__ */ jsx7(
-      "div",
+    /* @__PURE__ */ jsx7("div", { className: "p-8", children: /* @__PURE__ */ jsx7("div", { className: "bg-black z-20 flex p-8 rounded-lg max-w-full max-h-[70vh] mx-auto", style: { aspectRatio: ar }, children: /* @__PURE__ */ jsx7(
+      "iframe",
       {
-        className: "bg-black z-20 flex p-8 rounded-lg max-w-full max-h-[70vh] mx-auto",
-        style: { aspectRatio: ar },
-        children: /* @__PURE__ */ jsx7(
-          "iframe",
-          {
-            title: "YouTube video",
-            className: "border-none w-full h-full object-contain",
-            ref: player,
-            src: `https://www.youtube.com/embed/${media.youTubeId}?enablejsapi=1&origin=${window.location.host}`,
-            referrerPolicy: "no-referrer",
-            sandbox: "allow-scripts allow-same-origin allow-presentation"
-          }
-        )
+        title: "YouTube video",
+        className: "border-none w-full h-full object-contain",
+        ref: player,
+        src: `https://www.youtube.com/embed/${media.youTubeId}?enablejsapi=1&origin=${window.location.host}`,
+        referrerPolicy: "no-referrer",
+        sandbox: "allow-scripts allow-same-origin allow-presentation"
       }
-    ) }),
+    ) }) }),
     /* @__PURE__ */ jsxs4("div", { className: "bg-white shadow w-full p-8 flex gap-8", children: [
       /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7(
         "div",
@@ -734,13 +715,125 @@ function YouTubeEditor({
 }
 
 // src/creators/image-browser-slide-creator.tsx
+import {
+  creatorHelper,
+  defineCreator
+} from "@manifest-editor/creator-api";
 import { iiifBrowserCreator } from "@manifest-editor/creators";
+var imageBrowserSlideCreator = defineCreator({
+  ...iiifBrowserCreator,
+  id: "@exhibitions/browser-creator",
+  create: createBrowser,
+  tags: ["image", "exhibition-slide"],
+  label: "IIIF Browser",
+  summary: "Browse IIIF Resources"
+});
+async function createBrowser(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const pageId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const dimensions = { width: 0, height: 0 };
+  const createBrowserAnnotation = creatorHelper(
+    ctx,
+    { id: pageId, type: "AnnotationPage" },
+    "items",
+    "@manifest-editor/iiif-browser-creator"
+  );
+  const annotation = await createBrowserAnnotation(
+    {
+      ...data,
+      trackSize({ width, height }) {
+        dimensions.height = height;
+        dimensions.width = width;
+      }
+    },
+    {
+      targetType: "Annotation",
+      target: {
+        id: canvasId,
+        type: "Canvas"
+      }
+    }
+  );
+  const createSlide = creatorHelper(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
+    canvasId,
+    width: dimensions.width,
+    height: dimensions.height,
+    type: "default",
+    // default / left / right / bottom
+    items: annotation
+  });
+}
+
+// src/creators/image-service-slide-creator.tsx
+import {
+  creatorHelper as creatorHelper2,
+  defineCreator as defineCreator2
+} from "@manifest-editor/creator-api";
+import { imageServiceCreator } from "@manifest-editor/creators";
+var imageServiceSlideCreator = defineCreator2({
+  ...imageServiceCreator,
+  id: "@exhibitions/image-service-creator",
+  create: createImageService,
+  tags: ["image", "exhibition-slide"],
+  label: "IIIF Image",
+  summary: "IIIF Image service",
+  resourceType: "Canvas",
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
+  }
+});
+async function createImageService(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const pageId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const annotationId = ctx.generateId("annotation");
+  const createImageService2 = creatorHelper2(
+    ctx,
+    { id: annotationId, type: "Annotation" },
+    "body",
+    "@manifest-editor/image-service-creator"
+  );
+  const resource = await createImageService2(data, {
+    target: {
+      id: canvasId,
+      type: "Canvas"
+    }
+  });
+  const { width, height } = resource.get();
+  const annotation = ctx.embed({
+    id: ctx.generateId("annotation"),
+    type: "Annotation",
+    motivation: "painting",
+    body: [resource],
+    target: {
+      type: "SpecificResource",
+      source: { id: canvasId, type: "Canvas" }
+    }
+  });
+  const createSlide = creatorHelper2(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
+    canvasId,
+    width,
+    height,
+    type: "default",
+    // default / left / right / bottom
+    items: [annotation]
+  });
+}
 
 // src/creators/image-slide-creator.tsx
 import { emptyAnnotationPage, emptyCanvas } from "@iiif/parser";
 import { EmptyCanvasIcon } from "@manifest-editor/components";
+import { defineCreator as defineCreator3 } from "@manifest-editor/creator-api";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var imageSlideCreator = {
+var imageSlideCreator = defineCreator3({
   id: "@exhibitions/image-slide-creator",
   create: createImageSlide,
   label: "Empty slide",
@@ -754,31 +847,31 @@ var imageSlideCreator = {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
-var imageSlideLeftCreator = {
+});
+var imageSlideLeftCreator = defineCreator3({
   ...imageSlideCreator,
   id: "@exhibitions/image-slide-creator-left",
   label: "Image (Left)",
   summary: "An image with text on the left.",
   icon: /* @__PURE__ */ jsx8("div", { children: "IMAGE (LEFT)" }),
   create: (payload, ctx) => createImageSlide({ ...payload, type: "left" }, ctx)
-};
-var imageSlideRightCreator = {
+});
+var imageSlideRightCreator = defineCreator3({
   ...imageSlideCreator,
   id: "@exhibitions/image-slide-creator-right",
   label: "Image (Right)",
   summary: "An image with text on the right.",
   icon: /* @__PURE__ */ jsx8("div", { children: "IMAGE (RIGHT)" }),
   create: (payload, ctx) => createImageSlide({ ...payload, type: "right" }, ctx)
-};
-var imageSlideBottomCreator = {
+});
+var imageSlideBottomCreator = defineCreator3({
   ...imageSlideCreator,
   id: "@exhibitions/image-slide-creator-bottom",
   label: "Image (Bottom)",
   summary: "An image with text at the bottom.",
   icon: /* @__PURE__ */ jsx8("div", { children: "IMAGE (BOTTOM)" }),
   create: (payload, ctx) => createImageSlide({ ...payload, type: "bottom" }, ctx)
-};
+});
 function createImageSlide(payload, ctx) {
   const canvasId = payload.canvasId || ctx.generateId("Canvas");
   const itemsPageId = ctx.generateId("AnnotationPage", {
@@ -848,113 +941,13 @@ function createImageSlide(payload, ctx) {
   });
 }
 
-// src/creators/image-browser-slide-creator.tsx
-var imageBrowserSlideCreator = {
-  ...iiifBrowserCreator,
-  id: "@exhibitions/browser-creator",
-  create: createBrowser,
-  tags: ["image", "exhibition-slide"],
-  label: "IIIF Browser",
-  summary: "Browse IIIF Resources"
-};
-async function createBrowser(data, ctx) {
-  const canvasId = ctx.generateId("canvas");
-  const pageId = ctx.generateId("annotation-page", {
-    id: canvasId,
-    type: "Canvas"
-  });
-  const dimensions = { width: 0, height: 0 };
-  const annotation = await ctx.create(
-    iiifBrowserCreator.id,
-    {
-      ...data,
-      trackSize({ width, height }) {
-        dimensions.height = height;
-        dimensions.width = width;
-      }
-    },
-    {
-      target: {
-        id: canvasId,
-        type: "Canvas"
-      },
-      targetType: "Annotation",
-      parent: {
-        resource: { id: pageId, type: "AnnotationPage" },
-        property: "items"
-      }
-    }
-  );
-  return await ctx.create(imageSlideCreator.id, {
-    canvasId,
-    width: dimensions.width,
-    height: dimensions.height,
-    type: "default",
-    // default / left / right / bottom
-    items: [annotation]
-  });
-}
-
-// src/creators/image-service-slide-creator.tsx
-import { imageServiceCreator } from "@manifest-editor/creators";
-var imageServiceSlideCreator = {
-  ...imageServiceCreator,
-  id: "@exhibitions/image-service-creator",
-  create: createImageService,
-  tags: ["image", "exhibition-slide"],
-  label: "IIIF Image",
-  summary: "IIIF Image service",
-  resourceType: "Canvas",
-  supports: {
-    parentTypes: ["Manifest"],
-    parentFields: ["items"]
-  }
-};
-async function createImageService(data, ctx) {
-  const canvasId = ctx.generateId("canvas");
-  const pageId = ctx.generateId("annotation-page", {
-    id: canvasId,
-    type: "Canvas"
-  });
-  const resource = await ctx.create(
-    imageServiceCreator.id,
-    data,
-    {
-      target: {
-        id: canvasId,
-        type: "Canvas"
-      },
-      targetType: "Annotation",
-      parent: {
-        resource: { id: pageId, type: "AnnotationPage" },
-        property: "items"
-      }
-    }
-  );
-  const { width, height } = resource.get();
-  const annotation = ctx.embed({
-    id: ctx.generateId("annotation"),
-    type: "Annotation",
-    motivation: "painting",
-    body: [resource],
-    target: {
-      type: "SpecificResource",
-      source: { id: canvasId, type: "Canvas" }
-    }
-  });
-  return await ctx.create(imageSlideCreator.id, {
-    canvasId,
-    width,
-    height,
-    type: "default",
-    // default / left / right / bottom
-    items: [annotation]
-  });
-}
-
 // src/creators/image-url-slide.tsx
+import {
+  creatorHelper as creatorHelper3,
+  defineCreator as defineCreator4
+} from "@manifest-editor/creator-api";
 import { imageUrlCreator } from "@manifest-editor/creators";
-var imageUrlSlideCreator = {
+var imageUrlSlideCreator = defineCreator4({
   ...imageUrlCreator,
   id: "@exhibitions/image-url-creator",
   create: createUrlSlide,
@@ -966,31 +959,30 @@ var imageUrlSlideCreator = {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
+});
 async function createUrlSlide(data, ctx) {
   const canvasId = ctx.generateId("canvas");
   const pageId = ctx.generateId("annotation-page", {
     id: canvasId,
     type: "Canvas"
   });
-  const resource = await ctx.create(
-    imageUrlCreator.id,
-    data,
-    {
-      target: {
-        id: canvasId,
-        type: "Canvas"
-      },
-      targetType: "Annotation",
-      parent: {
-        resource: { id: pageId, type: "AnnotationPage" },
-        property: "items"
-      }
-    }
+  const annotationId = ctx.generateId("annotation");
+  const createImageUrl = creatorHelper3(
+    ctx,
+    { id: annotationId, type: "Annotation" },
+    "body",
+    "@manifest-editor/image-url-creator"
   );
+  const resource = await createImageUrl(data, {
+    target: {
+      id: canvasId,
+      type: "Canvas"
+    },
+    targetType: "Annotation"
+  });
   const { width, height } = resource.get();
   const annotation = ctx.embed({
-    id: ctx.generateId("annotation"),
+    id: annotationId,
     type: "Annotation",
     motivation: "painting",
     body: [resource],
@@ -999,7 +991,8 @@ async function createUrlSlide(data, ctx) {
       source: { id: canvasId, type: "Canvas" }
     }
   });
-  return await ctx.create(imageSlideCreator.id, {
+  const createSlide = creatorHelper3(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
     canvasId,
     width,
     height,
@@ -1011,31 +1004,23 @@ async function createUrlSlide(data, ctx) {
 
 // src/creators/info-box-creator.tsx
 import { emptyAnnotation, emptyCanvas as emptyCanvas2 } from "@iiif/parser";
+import { defineCreator as defineCreator5 } from "@manifest-editor/creator-api";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var infoBoxCreator = {
+var infoBoxCreator = defineCreator5({
   id: "@exhibitions/info-box-creator",
   create: createInfoBox,
   label: "Info box",
   summary: "A text panel for an exhibition",
-  icon: /* @__PURE__ */ jsxs5(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 24 24",
-      children: [
-        /* @__PURE__ */ jsx9("title", { children: "Info box" }),
-        /* @__PURE__ */ jsx9(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
-          }
-        )
-      ]
-    }
-  ),
+  icon: /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", children: [
+    /* @__PURE__ */ jsx9("title", { children: "Info box" }),
+    /* @__PURE__ */ jsx9(
+      "path",
+      {
+        fill: "currentColor",
+        d: "M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
+      }
+    )
+  ] }),
   tags: ["exhibition-slide"],
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label", "height", "width", "items"],
@@ -1043,7 +1028,7 @@ var infoBoxCreator = {
     parentTypes: ["Manifest"],
     parentFields: ["items"]
   }
-};
+});
 async function createInfoBox(data, ctx) {
   const canvasId = ctx.generateId("canvas");
   const pageId = ctx.generateId("annotation-page", {
@@ -1132,16 +1117,17 @@ async function createInfoBox(data, ctx) {
 
 // src/creators/youtube-slide-creator.tsx
 import { emptyCanvas as emptyCanvas3 } from "@iiif/parser";
+import { defineCreator as defineCreator6 } from "@manifest-editor/creator-api";
 import { youTubeBodyCreator } from "@manifest-editor/creators";
 import { getYouTubeId } from "@manifest-editor/editors";
-var youtubeSlideCreator = {
+var youtubeSlideCreator = defineCreator6({
   ...youTubeBodyCreator,
   id: "@exhibitions/youtube-creator",
   create: createYoutube,
   tags: ["video", "exhibition-slide"],
   label: "YouTube",
   summary: "A YouTube for an exhibition"
-};
+});
 async function createYoutube(data, ctx) {
   const ytId = getYouTubeId(data.youtubeUrl);
   const canvasId = ctx.generateId("canvas");
@@ -1166,10 +1152,10 @@ async function createYoutube(data, ctx) {
     items: [annotation]
   });
   const thumbnail = ctx.embed({
-    id: `https://img.youtube.com/vi/${ytId}/0.jpg`,
+    id: `https://img.youtube.com/vi/${ytId}/maxresdefault.jpg`,
     type: "Image",
     format: "image/jpeg",
-    width: 480,
+    width: 640,
     height: 360
   });
   return ctx.embed({
@@ -1390,7 +1376,7 @@ function SortableExhibitionItem({
       onClick,
       isFirst,
       item,
-      children: /* @__PURE__ */ jsx14("div", { className: "absolute bg-white text-2xl p-1 top-0.5 right-0.5", children: /* @__PURE__ */ jsx14(ResizeHandleIcon, {}) })
+      children: /* @__PURE__ */ jsx14("div", { className: "absolute bg-white text-2xl p-1 top-0.5 right-0.5", children: /* @__PURE__ */ jsx14(ResizeHandleIcon, { "aria-label": "Reorder item" }) })
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manifest-editor/exhibition-preset",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "type": "module",
   "bugs": "https://github.com/digirati-co-uk/iiif-manifest-editor/issues",
   "repository": {
@@ -47,20 +47,20 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "^3.2.1",
     "@iiif/helpers": "^1.3.1",
-    "@iiif/parser": "^2.1.7",
+    "@iiif/parser": "^2.1.8",
     "@iiif/presentation-3": "^2.2.3",
     "@iiif/presentation-3-normalized": "^0.9.7",
-    "@manifest-editor/components": "1.3.1",
-    "@manifest-editor/creator-api": "1.3.1",
-    "@manifest-editor/creators": "1.3.1",
-    "@manifest-editor/editor-api": "1.3.1",
-    "@manifest-editor/editors": "1.3.1",
-    "@manifest-editor/manifest-preset": "1.3.1",
-    "@manifest-editor/shell": "1.3.1",
+    "@manifest-editor/components": "1.4.1",
+    "@manifest-editor/creator-api": "1.4.0",
+    "@manifest-editor/creators": "1.4.1",
+    "@manifest-editor/editor-api": "1.4.0",
+    "@manifest-editor/editors": "1.4.1",
+    "@manifest-editor/manifest-preset": "1.4.1",
+    "@manifest-editor/shell": "1.4.1",
     "react": "^18.3.1",
     "react-aria-components": "^1.7.1",
     "react-dom": "^18.3.1",
-    "react-iiif-vault": "^1.5.1",
+    "react-iiif-vault": "^1.5.6",
     "tailwind-merge": "^2.3.0",
     "tiny-invariant": "^1.3.3",
     "zustand": "^4.5.2"
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "920fe405869996394c204c6eae70f446aab78986"
+  "gitHead": "7e8791689668c2428ecf0d617f69038d0fd2e758"
 }