@manifest-editor/exhibition-preset 1.3.0 → 1.4.0

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",
@@ -712,49 +696,160 @@ 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: "Image",
-  summary: "An image with text.",
-  icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "IMAGE" }),
+  label: "Empty slide",
+  summary: "An empty image slide.",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components5.EmptyCanvasIcon, {}),
   tags: ["exhibition-slide"],
+  // No tag, so it doesn't appear, it's just called.
   resourceType: "Canvas",
   resourceFields: ["id", "type", "label", "height", "width", "items"],
   supports: {
     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 = ctx.generateId("Canvas");
+  const canvasId = payload.canvasId || ctx.generateId("Canvas");
   const itemsPageId = ctx.generateId("AnnotationPage", {
     id: canvasId,
     type: "Canvas"
@@ -763,8 +858,23 @@ function createImageSlide(payload, ctx) {
     id: canvasId,
     type: "Canvas"
   });
-  const behavior = ["w-12", "h-4"];
+  const behavior = [];
   let width = 6e3;
+  if (payload.width && payload.height) {
+    if (payload.width > payload.height) {
+      const gridSize = payload.width / 12;
+      const heightColumns = Math.floor(payload.height / gridSize);
+      const hClass = `h-${heightColumns}`;
+      behavior.push("w-12", hClass);
+    } else {
+      const gridSize = payload.height / 12;
+      const widthColumns = Math.floor(payload.width / gridSize);
+      const wClass = `w-${widthColumns}`;
+      behavior.push(wClass, "h-12");
+    }
+  } else {
+    behavior.push("w-12", "h-4");
+  }
   switch (payload.type) {
     case "left":
       behavior.push("left");
@@ -778,6 +888,9 @@ function createImageSlide(payload, ctx) {
       behavior.push("bottom");
       break;
   }
+  if (!payload.items?.length) {
+    behavior.push("multi-image");
+  }
   return ctx.embed({
     ...import_parser.emptyCanvas,
     id: canvasId,
@@ -790,7 +903,7 @@ function createImageSlide(payload, ctx) {
         ...import_parser.emptyAnnotationPage,
         id: itemsPageId,
         type: "AnnotationPage",
-        items: []
+        items: payload.items ? payload.items : []
       })
     ],
     annotations: [
@@ -804,30 +917,83 @@ function createImageSlide(payload, ctx) {
   });
 }
 
+// src/creators/image-url-slide.tsx
+var import_creator_api4 = require("@manifest-editor/creator-api");
+var import_creators3 = require("@manifest-editor/creators");
+var imageUrlSlideCreator = (0, import_creator_api4.defineCreator)({
+  ...import_creators3.imageUrlCreator,
+  id: "@exhibitions/image-url-creator",
+  create: createUrlSlide,
+  tags: ["exhibition-slide"],
+  label: "Image",
+  summary: "Image from URL",
+  resourceType: "Canvas",
+  supports: {
+    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 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: annotationId,
+    type: "Annotation",
+    motivation: "painting",
+    body: [resource],
+    target: {
+      type: "SpecificResource",
+      source: { id: canvasId, type: "Canvas" }
+    }
+  });
+  const createSlide = (0, import_creator_api4.creatorHelper)(ctx, "Manifest", "items", "@exhibitions/image-slide-creator");
+  return await createSlide({
+    canvasId,
+    width,
+    height,
+    type: "default",
+    // default / left / right / bottom
+    items: [annotation]
+  });
+}
+
 // 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.jsx)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 24 24",
-      children: /* @__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"],
@@ -835,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", {
@@ -914,7 +1080,7 @@ async function createInfoBox(data, ctx) {
     id: canvasId,
     type: "Canvas",
     behavior: ["w-4", "h-4", "info"],
-    label: data.label || { en: ["Untitled info box"] },
+    label: data.label || void 0,
     height: data.height || 1e3,
     width: data.width || 1e3,
     items: [page],
@@ -924,16 +1090,17 @@ async function createInfoBox(data, ctx) {
 
 // src/creators/youtube-slide-creator.tsx
 var import_parser3 = require("@iiif/parser");
-var import_creators = require("@manifest-editor/creators");
+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 = {
-  ...import_creators.youTubeBodyCreator,
+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");
@@ -958,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({
@@ -979,9 +1146,9 @@ async function createYoutube(data, ctx) {
 }
 
 // src/left-panels/ExhibitionGrid.tsx
-var import_components6 = require("@manifest-editor/components");
+var import_components7 = require("@manifest-editor/components");
 var import_editors5 = require("@manifest-editor/editors");
-var import_components7 = require("@manifest-editor/manifest-preset/components");
+var import_components8 = require("@manifest-editor/manifest-preset/components");
 var import_shell8 = require("@manifest-editor/shell");
 
 // src/components/ExhibitionGrid.tsx
@@ -1012,7 +1179,7 @@ function ExhibitionContainer({
 }
 
 // src/components/ExhibitionItem.tsx
-var import_components5 = require("@manifest-editor/components");
+var import_components6 = require("@manifest-editor/components");
 var import_editors4 = require("@manifest-editor/editors");
 var import_react3 = require("react");
 var import_react_iiif_vault7 = require("react-iiif-vault");
@@ -1041,7 +1208,7 @@ var ExhibitionItem = (0, import_react3.forwardRef)(
             isLeft ? "flex-row-reverse" : isBottom ? "flex-col" : "flex-row"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 overflow-hidden relative justify-self-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components5.LazyThumbnail, { cover: true, fade: false }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 overflow-hidden relative justify-self-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components6.LazyThumbnail, { cover: true, fade: false }) }) }),
             isImage ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "div",
               {
@@ -1243,14 +1410,14 @@ function ExhibitionGridLeftPanel() {
   const manifest = { id: manifestId, type: "Manifest" };
   const [canCreateCanvas, canvasActions] = (0, import_shell8.useCreator)(manifest, "items", "Canvas");
   const [toggled, toggle] = (0, import_editors5.useToggleList)();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_components6.Sidebar, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_components7.Sidebar, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_components6.SidebarHeader,
+      import_components7.SidebarHeader,
       {
         title: "Exhibition",
         actions: [
           {
-            icon: toggled.list ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components7.CanvasListingIcon, { className: "text-2xl" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExhibitionGridIcon, {}),
+            icon: toggled.list ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components8.CanvasListingIcon, { className: "text-2xl" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExhibitionGridIcon, {}),
             title: toggled.list ? "List view" : "Grid view",
             onClick: () => toggle("list")
           },
@@ -1269,7 +1436,7 @@ function ExhibitionGridLeftPanel() {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components6.SidebarContent, { children: toggled.list ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components7.CanvasListView, { isEditing: toggled.editing }) : toggled.editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SortableExhibitionGrid, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExhibitionGrid, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components7.SidebarContent, { children: toggled.list ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components8.CanvasListView, { isEditing: toggled.editing }) : toggled.editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SortableExhibitionGrid, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExhibitionGrid, {}) })
   ] });
 }
 function ExhibitionGridIcon() {
@@ -1292,208 +1459,19 @@ function NewSlideIcon() {
   ] });
 }
 
-// src/right-panels/SlideBehaviours.tsx
-var import_components8 = require("@manifest-editor/components");
-var import_editors6 = require("@manifest-editor/editors");
-var import_shell9 = require("@manifest-editor/shell");
-var import_react5 = require("react");
-
-// src/components/AspectRatioWarning.tsx
-var import_react_iiif_vault10 = require("react-iiif-vault");
-var import_tiny_invariant2 = __toESM(require("tiny-invariant"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function AspectRatioWarning() {
-  const canvas = (0, import_react_iiif_vault10.useCanvas)();
-  (0, import_tiny_invariant2.default)(canvas);
-  const ratio = canvas.width && canvas.height ? canvas.width / canvas.height : 0;
-  const target = getHeightWidthRatio(canvas.behavior || []);
-  if (Math.abs(ratio - target.ratio) < 0.01)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "p-2 rounded bg-me-100", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-me-700-500", children: "Aspect ratio warning" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "text-sm text-black/60", children: [
-      "The aspect ratio of this canvas is ",
-      ratio.toFixed(2),
-      " but the target aspect ratio is ",
-      target.ratio.toFixed(2),
-      ". Some parts of this image may be cropped.",
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "relative h-32 w-full mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        "div",
-        {
-          className: "bg-[red] left-0 top-0 z-2 opacity-50 max-w-32 max-h-32",
-          style: { aspectRatio: ratio.toFixed(2) },
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            "div",
-            {
-              className: "asbolute bg-[white] left-0 top-0 z-1 opacity-50 max-w-32 max-h-32",
-              style: { aspectRatio: target.ratio }
-            }
-          )
-        }
-      ) })
-    ] })
-  ] });
-}
-
-// src/right-panels/SlideBehaviours.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var customBehaviourEditor = {
-  component: () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SlideBehavioursPanel, {}),
-  supports: {
-    edit: true,
-    resourceTypes: ["Canvas"],
-    properties: ["behavior"]
-  },
-  id: "slide-behaviors",
-  label: "Layout",
-  tabs: {
-    showTitle: true
-  }
-};
-var exhibitionConfigs = [
-  {
-    id: "layout",
-    type: "choice",
-    label: { en: ["Layout"] },
-    initialOpen: true,
-    items: [
-      {
-        label: { en: ["Text on left"] },
-        value: "left"
-      },
-      {
-        label: { en: ["Text on right"] },
-        value: "right"
-      },
-      {
-        label: { en: ["Text on bottom"] },
-        value: "bottom"
-      },
-      {
-        label: { en: ["Only image"] },
-        value: "image"
-      }
-    ]
-  },
-  {
-    id: "size",
-    component: (existing, setBehaviors) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(EditSize, { behaviors: existing, setBehaviors }),
-    label: { en: ["Size"] },
-    type: "custom",
-    initialOpen: true,
-    supports: (b) => b.startsWith("w-") || b.startsWith("h-")
-  }
-];
-function parseBehaviors(items) {
-  let width = 0;
-  let height = 0;
-  for (const item of items) {
-    if (item.startsWith("w-")) {
-      width = Number.parseInt(item.slice(2));
-    }
-    if (item.startsWith("h-")) {
-      height = Number.parseInt(item.slice(2));
-    }
-  }
-  return {
-    width,
-    height
-  };
-}
-function EditSize({ behaviors, setBehaviors }) {
-  const { width, height } = parseBehaviors(behaviors);
-  const [hoverPosition, setHoverPosition] = (0, import_react5.useState)({ x: -1, y: -1 });
-  const setBehavior = (w2, h) => {
-    const newBehaviors = behaviors.filter((b) => {
-      return !b.startsWith("w-") && !b.startsWith("h-");
-    });
-    newBehaviors.push(`w-${w2}`);
-    newBehaviors.push(`h-${h}`);
-    setBehaviors(newBehaviors);
-  };
-  const cells = Array.from({ length: 144 }, (_2, i2) => {
-    const x2 = i2 % 12;
-    const y2 = Math.floor(i2 / 12);
-    const hovered = hoverPosition.x >= x2 && hoverPosition.y >= y2;
-    const selected = x2 < width && y2 < height;
-    const hoveredAndSelected = hovered && selected;
-    let bgClass = "bg-gray-200";
-    if (hovered) {
-      bgClass = "bg-me-200";
-    }
-    if (selected) {
-      bgClass = "bg-me-500";
-    }
-    if (hoveredAndSelected) {
-      bgClass = "bg-me-400";
-    }
-    return (
-      // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        "div",
-        {
-          className: `flex aspect-square rounded cursor-se-resize items-center justify-center ${bgClass}`,
-          onClick: () => setBehavior(x2 + 1, y2 + 1),
-          onMouseUp: () => setBehavior(x2 + 1, y2 + 1),
-          onMouseEnter: () => setHoverPosition({ x: x2, y: y2 })
-        },
-        i2
-      )
-    );
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "grid grid-cols-12 grid-rows-12 gap-1", onMouseLeave: () => setHoverPosition({ x: -1, y: -1 }), children: cells });
-}
-function SlideBehavioursPanel() {
-  const canvas = (0, import_editors6.useInStack)("Canvas");
-  const editor = (0, import_shell9.useEditor)();
-  const { width, height } = editor.technical;
-  if (!canvas || editor.technical.type !== "Canvas") {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_components8.Sidebar, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components8.SidebarHeader, { title: "Slide behaviors" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: "Please select canvas" })
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components8.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_components8.SidebarContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_editors6.InputContainer, { $wide: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_editors6.DimensionsTriplet,
-        {
-          widthId: width.containerId(),
-          width: width.get() || 0,
-          changeWidth: (v2) => width.set(v2),
-          heightId: height.containerId(),
-          height: height.get() || 0,
-          changeHeight: (v2) => height.set(v2)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AspectRatioWarning, {}) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_editors6.BehaviorEditor,
-      {
-        behavior: editor.technical.behavior.get() || [],
-        onChange: (v2) => {
-          editor.technical.behavior.set(v2);
-        },
-        configs: exhibitionConfigs
-      }
-    )
-  ] }) });
-}
-
 // src/right-panels/ExhibitionCanvasEditor.tsx
 var import_components10 = require("@manifest-editor/components");
-var import_editors7 = require("@manifest-editor/editors");
-var import_shell11 = require("@manifest-editor/shell");
-var import_react_iiif_vault11 = require("react-iiif-vault");
+var import_editors6 = require("@manifest-editor/editors");
+var import_shell10 = require("@manifest-editor/shell");
+var import_react_iiif_vault10 = require("react-iiif-vault");
 
 // src/components/ExhibitionItemConversion.tsx
-var import_helpers4 = require("@iiif/helpers");
+var import_helpers3 = require("@iiif/helpers");
 var import_components9 = require("@manifest-editor/components");
-var import_shell10 = require("@manifest-editor/shell");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_shell9 = require("@manifest-editor/shell");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ExhibitionItemConversion() {
-  const editor = (0, import_shell10.useEditor)();
+  const editor = (0, import_shell9.useEditor)();
   const applyDefaultSettings = () => {
     const canvasWidth = editor.technical.width.get();
     const canvasHeight = editor.technical.height.get();
@@ -1503,19 +1481,19 @@ function ExhibitionItemConversion() {
     behaviorsToAdd.push("w-12");
     const height = Math.max(1, Math.min(12, Math.round(canvasWidth / canvasHeight * 12)));
     behaviorsToAdd.push(`h-${height}`);
-    if (!(0, import_helpers4.getValue)(summary.get())) {
+    if (!(0, import_helpers3.getValue)(summary.get())) {
       summary.set({ en: ["Summary of image"] });
     }
     editor.technical.behavior.set(behaviorsToAdd);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col items-center gap-4 border-me-100 border-2 p-4 rounded", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col items-center gap-4 border-me-100 border-2 p-4 rounded", children: [
     "This canvas was not created in the exhibition editor. Do you want to apply default settings?",
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components9.ActionButton, { onPress: () => applyDefaultSettings(), children: "Apply defaults" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components9.ActionButton, { onPress: () => applyDefaultSettings(), children: "Apply defaults" })
   ] });
 }
 
 // src/right-panels/ExhibitionCanvasEditor.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var exhibitionCanvasEditor = {
   id: "@exhibition/right-panel-editor",
   supports: {
@@ -1532,12 +1510,12 @@ var exhibitionCanvasEditor = {
     }
   },
   label: "Exhibition",
-  component: () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExhibitionRightPanel, {})
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExhibitionRightPanel, {})
 };
 function ExhibitionRightPanel() {
-  const canvas = (0, import_react_iiif_vault11.useCanvas)();
-  const resource = (0, import_shell11.useEditingResource)();
-  const { structural, technical, descriptive } = (0, import_shell11.useEditor)();
+  const canvas = (0, import_react_iiif_vault10.useCanvas)();
+  const resource = (0, import_shell10.useEditingResource)();
+  const { structural, technical, descriptive } = (0, import_shell10.useEditor)();
   const { items } = structural;
   const { thumbnail } = descriptive;
   const { width, height } = technical;
@@ -1545,12 +1523,12 @@ function ExhibitionRightPanel() {
   const page = pages[0];
   const isAnExhibitionCanvas = isExhibitionItem(canvas);
   if (!canvas || !page || !resource)
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-8", children: "Canvas, page, or resource not found" });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_components10.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_components10.SidebarContent, { padding: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_shell11.ResourceEditingProvider, { resource: canvas, children: [
-    !isAnExhibitionCanvas ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExhibitionItemConversion, {}) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_editors7.LanguageMapEditor, { dispatchType: "label", disableMultiline: true, disallowHTML: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_editors7.LinkingPropertyList,
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "p-8", children: "Canvas, page, or resource not found" });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components10.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_components10.SidebarContent, { padding: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_shell10.ResourceEditingProvider, { resource: canvas, children: [
+    !isAnExhibitionCanvas ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExhibitionItemConversion, {}) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors6.LanguageMapEditor, { dispatchType: "label", disableMultiline: true, disallowHTML: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_editors6.LinkingPropertyList,
       {
         containerId: thumbnail.containerId(),
         label: "Thumbnail",
@@ -1558,22 +1536,22 @@ function ExhibitionRightPanel() {
         items: thumbnail.get(),
         singleMode: true,
         reorder: (ctx) => thumbnail.reorder(ctx.startIndex, ctx.endIndex),
-        createActions: (0, import_editors7.createAppActions)(thumbnail),
+        createActions: (0, import_editors6.createAppActions)(thumbnail),
         creationType: "ContentResource",
         emptyLabel: "No thumbnail",
         parent: resource?.resource
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_iiif_vault11.AnnotationPageContext, { annotationPage: page.id, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_editors7.PaintingAnnotationList, { createFilter: "image" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_iiif_vault10.AnnotationPageContext, { annotationPage: page.id, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_editors6.PaintingAnnotationList, { createFilter: "image" }) })
   ] }) }) });
 }
 
 // src/right-panels/ExhibitionSummaryEditor.tsx
 var import_components11 = require("@manifest-editor/components");
-var import_editors8 = require("@manifest-editor/editors");
-var import_shell12 = require("@manifest-editor/shell");
-var import_react_iiif_vault12 = require("react-iiif-vault");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_editors7 = require("@manifest-editor/editors");
+var import_shell11 = require("@manifest-editor/shell");
+var import_react_iiif_vault11 = require("react-iiif-vault");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var exhibitionSummaryEdtior = {
   id: "@exhibition/summary-editor",
   supports: {
@@ -1590,41 +1568,41 @@ var exhibitionSummaryEdtior = {
     }
   },
   label: "Summary",
-  component: () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ExhibitionRightPanel2, {})
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ExhibitionRightPanel2, {})
 };
 function ExhibitionRightPanel2() {
-  const canvas = (0, import_react_iiif_vault12.useCanvas)();
+  const canvas = (0, import_react_iiif_vault11.useCanvas)();
   if (!canvas)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components11.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components11.SidebarContent, { padding: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_shell12.ResourceEditingProvider, { resource: canvas, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_editors8.LanguageMapEditor, { dispatchType: "label" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_editors8.LanguageMapEditor, { dispatchType: "summary" })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components11.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components11.SidebarContent, { padding: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_shell11.ResourceEditingProvider, { resource: canvas, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_editors7.LanguageMapEditor, { dispatchType: "label" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_editors7.LanguageMapEditor, { dispatchType: "summary" })
   ] }) }) });
 }
 
 // src/right-panels/ExhibitionTourSteps.tsx
 var import_components17 = require("@manifest-editor/components");
-var import_editors12 = require("@manifest-editor/editors");
-var import_shell18 = require("@manifest-editor/shell");
-var import_react10 = require("react");
-var import_react_aria_components2 = require("react-aria-components");
-var import_react_iiif_vault19 = require("react-iiif-vault");
-
-// src/components/TourAnnotationPageEditor.tsx
 var import_editors11 = require("@manifest-editor/editors");
 var import_shell17 = require("@manifest-editor/shell");
+var import_react9 = require("react");
+var import_react_aria_components2 = require("react-aria-components");
 var import_react_iiif_vault18 = require("react-iiif-vault");
 
-// src/components/TourAnnotationEditor.tsx
+// src/components/TourAnnotationPageEditor.tsx
 var import_editors10 = require("@manifest-editor/editors");
 var import_shell16 = require("@manifest-editor/shell");
-var import_react9 = require("react");
 var import_react_iiif_vault17 = require("react-iiif-vault");
 
+// src/components/TourAnnotationEditor.tsx
+var import_editors9 = require("@manifest-editor/editors");
+var import_shell15 = require("@manifest-editor/shell");
+var import_react8 = require("react");
+var import_react_iiif_vault16 = require("react-iiif-vault");
+
 // src/components/TourNormalAnnotationEditor.tsx
 var import_components13 = require("@manifest-editor/components");
 var import_components14 = require("@manifest-editor/manifest-preset/components");
-var import_shell14 = require("@manifest-editor/shell");
+var import_shell13 = require("@manifest-editor/shell");
 
 // ../../node_modules/.pnpm/tslib@2.5.0/node_modules/tslib/tslib.es6.js
 var __assign = function() {
@@ -1671,7 +1649,7 @@ var isPropValid = /* @__PURE__ */ memoize(
 );
 
 // ../../node_modules/.pnpm/styled-components@6.1.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/styled-components/dist/styled-components.browser.esm.js
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_shallowequal = __toESM(require_shallowequal());
 
 // ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Enum.js
@@ -2289,7 +2267,7 @@ var P = function(t, n) {
         for (var n2 = [], o3 = 1; o3 < arguments.length; o3++)
           n2[o3 - 1] = arguments[o3];
         E.test(t2) ? (a2 = false, N.delete(s2)) : i2.apply(void 0, __spreadArray([t2], n2, false));
-      }, (0, import_react6.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
+      }, (0, import_react5.useRef)(), a2 && !N.has(s2) && (console.warn(s2), N.add(s2));
     } catch (e) {
       E.test(e.message) && N.delete(s2);
     } finally {
@@ -2654,26 +2632,26 @@ function xe(e) {
 }
 var Ve = new Re();
 var Fe = xe();
-var Me = import_react6.default.createContext({ shouldForwardProp: void 0, styleSheet: Ve, stylis: Fe });
+var Me = import_react5.default.createContext({ shouldForwardProp: void 0, styleSheet: Ve, stylis: Fe });
 var $e = Me.Consumer;
-var ze = import_react6.default.createContext(void 0);
+var ze = import_react5.default.createContext(void 0);
 function Be() {
-  return (0, import_react6.useContext)(Me);
+  return (0, import_react5.useContext)(Me);
 }
 function Le(e) {
-  var t = (0, import_react6.useState)(e.stylisPlugins), n = t[0], r2 = t[1], c2 = Be().styleSheet, l2 = (0, import_react6.useMemo)(function() {
+  var t = (0, import_react5.useState)(e.stylisPlugins), n = t[0], r2 = t[1], c2 = Be().styleSheet, l2 = (0, import_react5.useMemo)(function() {
     var t2 = c2;
     return e.sheet ? t2 = e.sheet : e.target && (t2 = t2.reconstructWithOptions({ target: e.target }, false)), e.disableCSSOMInjection && (t2 = t2.reconstructWithOptions({ useCSSOMInjection: false })), t2;
-  }, [e.disableCSSOMInjection, e.sheet, e.target, c2]), u2 = (0, import_react6.useMemo)(function() {
+  }, [e.disableCSSOMInjection, e.sheet, e.target, c2]), u2 = (0, import_react5.useMemo)(function() {
     return xe({ options: { namespace: e.namespace, prefix: e.enableVendorPrefixes }, plugins: n });
   }, [e.enableVendorPrefixes, e.namespace, n]);
-  (0, import_react6.useEffect)(function() {
+  (0, import_react5.useEffect)(function() {
     (0, import_shallowequal.default)(n, e.stylisPlugins) || r2(e.stylisPlugins);
   }, [e.stylisPlugins]);
-  var d = (0, import_react6.useMemo)(function() {
+  var d = (0, import_react5.useMemo)(function() {
     return { shouldForwardProp: e.shouldForwardProp, styleSheet: l2, stylis: u2 };
   }, [e.shouldForwardProp, l2, u2]);
-  return import_react6.default.createElement(Me.Provider, { value: d }, import_react6.default.createElement(ze.Provider, { value: u2 }, e.children));
+  return import_react5.default.createElement(Me.Provider, { value: d }, import_react5.default.createElement(ze.Provider, { value: u2 }, e.children));
 }
 var Ge = function() {
   function e(e2, t) {
@@ -2773,7 +2751,7 @@ var Ze = function() {
     return o2;
   }, e;
 }();
-var Ke = import_react6.default.createContext(void 0);
+var Ke = import_react5.default.createContext(void 0);
 var Qe = Ke.Consumer;
 var nt = {};
 var ot = /* @__PURE__ */ new Set();
@@ -2799,8 +2777,8 @@ function rt(e, r2, s2) {
   var N2 = new Ze(s2, g2, i2 ? a2.componentStyle : void 0);
   function O2(e2, r3) {
     return function(e3, r4, s3) {
-      var i3 = e3.attrs, a3 = e3.componentStyle, c3 = e3.defaultProps, p3 = e3.foldedComponentIds, d2 = e3.styledComponentId, h2 = e3.target, f3 = import_react6.default.useContext(Ke), m3 = Be(), y3 = e3.shouldForwardProp || m3.shouldForwardProp;
-      (0, import_react6.useDebugValue)(d2);
+      var i3 = e3.attrs, a3 = e3.componentStyle, c3 = e3.defaultProps, p3 = e3.foldedComponentIds, d2 = e3.styledComponentId, h2 = e3.target, f3 = import_react5.default.useContext(Ke), m3 = Be(), y3 = e3.shouldForwardProp || m3.shouldForwardProp;
+      (0, import_react5.useDebugValue)(d2);
       var v2 = I(r4, f3, c3) || C, g3 = function(e4, n, o2) {
         for (var r5, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i4 = 0; i4 < e4.length; i4 += 1) {
           var a4 = re(r5 = e4[i4]) ? r5(s4) : r5;
@@ -2813,15 +2791,15 @@ function rt(e, r2, s2) {
         void 0 === g3[b2] || "$" === b2[0] || "as" === b2 || "theme" === b2 && g3.theme === v2 || ("forwardedAs" === b2 ? w3.as = g3.forwardedAs : y3 && !y3(b2, S3) || (w3[b2] = g3[b2], y3 || false || isPropValid(b2) || ot.has(b2) || !A.has(S3) || (ot.add(b2), console.warn('styled-components: it looks like an unknown prop "'.concat(b2, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
       var E3 = function(e4, t) {
         var n = Be(), o2 = e4.generateAndInjectStyles(t, n.styleSheet, n.stylis);
-        return (0, import_react6.useDebugValue)(o2), o2;
+        return (0, import_react5.useDebugValue)(o2), o2;
       }(a3, g3);
       e3.warnTooManyClasses && e3.warnTooManyClasses(E3);
       var N3 = ie(p3, d2);
-      return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, w3.ref = s3, (0, import_react6.createElement)(S3, w3);
+      return E3 && (N3 += " " + E3), g3.className && (N3 += " " + g3.className), w3[L(S3) && !A.has(S3) ? "class" : "className"] = N3, w3.ref = s3, (0, import_react5.createElement)(S3, w3);
     }(D2, e2, r3);
   }
   O2.displayName = y2;
-  var D2 = import_react6.default.forwardRef(O2);
+  var D2 = import_react5.default.forwardRef(O2);
   return D2.attrs = S2, D2.componentStyle = N2, D2.displayName = y2, D2.shouldForwardProp = w2, D2.foldedComponentIds = i2 ? ie(a2.foldedComponentIds, a2.styledComponentId) : "", D2.styledComponentId = g2, D2.target = i2 ? a2.target : e, Object.defineProperty(D2, "defaultProps", { get: function() {
     return this._foldedDefaultProps;
   }, set: function(e2) {
@@ -2909,7 +2887,7 @@ var mt = function() {
       if (e2.sealed)
         throw he(2);
       var r2 = ((n = {})[f] = "", n[y] = v, n.dangerouslySetInnerHTML = { __html: e2.instance.toString() }, n), s2 = Pe();
-      return s2 && (r2.nonce = s2), [import_react6.default.createElement("style", __assign({}, r2, { key: "sc-0-0" }))];
+      return s2 && (r2.nonce = s2), [import_react5.default.createElement("style", __assign({}, r2, { key: "sc-0-0" }))];
     }, this.seal = function() {
       e2.sealed = true;
     }, this.instance = new Re({ isServer: true }), this.sealed = false;
@@ -2917,7 +2895,7 @@ var mt = function() {
   return e.prototype.collectStyles = function(e2) {
     if (this.sealed)
       throw he(2);
-    return import_react6.default.createElement(Le, { sheet: this.instance }, e2);
+    return import_react5.default.createElement(Le, { sheet: this.instance }, e2);
   }, e.prototype.interleaveWithNodeStream = function(e2) {
     throw he(3);
   }, e;
@@ -2927,10 +2905,10 @@ var vt = "__sc-".concat(f, "__");
 "undefined" != typeof window && (window[vt] || (window[vt] = 0), 1 === window[vt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[vt] += 1);
 
 // ../../packages/ui/madoc/components/icons/CloseIcon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var CloseIcon = ut((props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" })
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var CloseIcon = ut((props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" })
 ] }))`
   fill: rgba(0, 0, 0, 0.5);
   cursor: pointer;
@@ -2948,50 +2926,40 @@ var CloseIcon = ut((props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("sv
 `;
 
 // src/components/TourNormalAnnotationEditor.tsx
-var import_react7 = require("react");
-var import_react_iiif_vault15 = require("react-iiif-vault");
+var import_react6 = require("react");
+var import_react_iiif_vault14 = require("react-iiif-vault");
 
 // src/components/HTMLAnnotationBodyRender.tsx
-var import_react_iiif_vault13 = require("react-iiif-vault");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function HTMLAnnotationBodyRender({
-  className,
-  locale
-}) {
-  const annotation = (0, import_react_iiif_vault13.useAnnotation)();
+var import_react_iiif_vault12 = require("react-iiif-vault");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function HTMLAnnotationBodyRender({ className, locale }) {
+  const annotation = (0, import_react_iiif_vault12.useAnnotation)();
   const filteredBodies = locale && annotation ? annotation?.body.filter((body) => {
     const language = Array.isArray(body.language) ? body.language[0] : body.language;
     return language === locale;
   }) : annotation?.body || [];
   const bodiesToRender = filteredBodies.length ? filteredBodies : locale ? [(annotation?.body || [])[0]] : annotation?.body || [];
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className, children: bodiesToRender.map((body, idx) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      "div",
-      {
-        className: "prose-headings:mt-1 prose-headings:mb-1 prose-sm leading-normal",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { dangerouslySetInnerHTML: { __html: body.value } })
-      },
-      idx
-    );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, children: bodiesToRender.map((body, idx) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "prose-headings:mt-1 prose-headings:mb-1 prose-sm leading-normal", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { dangerouslySetInnerHTML: { __html: body.value } }) }, idx);
   }) });
 }
 
 // src/components/HTMLAnnotationEditor.tsx
 var import_components12 = require("@manifest-editor/components");
-var import_shell13 = require("@manifest-editor/shell");
-var import_react_iiif_vault14 = require("react-iiif-vault");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_shell12 = require("@manifest-editor/shell");
+var import_react_iiif_vault13 = require("react-iiif-vault");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function HTMLAnnotationEditor() {
-  const annotation = (0, import_react_iiif_vault14.useAnnotation)();
-  const creator = (0, import_shell13.useInlineCreator)();
+  const annotation = (0, import_react_iiif_vault13.useAnnotation)();
+  const creator = (0, import_shell12.useInlineCreator)();
   const bodies = annotation?.body || [];
-  const editor = (0, import_shell13.useGenericEditor)(annotation);
+  const editor = (0, import_shell12.useGenericEditor)(annotation);
   if (!annotation) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-4", children: [
     bodies.map((body, n) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         AnnotationBodyEditor,
         {
           resourceId: body.id,
@@ -3000,7 +2968,7 @@ function HTMLAnnotationEditor() {
         n
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_components12.ActionButton,
       {
         primary: true,
@@ -3028,15 +2996,15 @@ function HTMLAnnotationEditor() {
 }
 
 // src/components/TourNormalAnnotationEditor.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TourNormalAnnotationEditor({
   highlightProps
 }) {
-  const annotation = (0, import_react_iiif_vault15.useAnnotation)();
-  const editor = (0, import_shell14.useGenericEditor)(annotation);
-  const pageEditor = (0, import_shell14.useGenericEditor)((0, import_react_iiif_vault15.useAnnotationPage)());
+  const annotation = (0, import_react_iiif_vault14.useAnnotation)();
+  const editor = (0, import_shell13.useGenericEditor)(annotation);
+  const pageEditor = (0, import_shell13.useGenericEditor)((0, import_react_iiif_vault14.useAnnotationPage)());
   const target = editor.annotation.target.getParsedSelector();
-  const { requestAnnotation, isPending, cancelRequest, busy } = (0, import_shell14.useRequestAnnotation)({
+  const { requestAnnotation, isPending, cancelRequest, busy } = (0, import_shell13.useRequestAnnotation)({
     onSuccess: (resp) => {
       if (resp.target) {
         editor.annotation.target.setSelector(resp.target);
@@ -3081,29 +3049,29 @@ function TourNormalAnnotationEditor({
       pageEditor.structural.items.deleteAtIndex(index);
     }
   };
-  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       ...highlightProps,
       className: "border border-gray-300 p-3 hover:border-me-500 shadow-sm rounded bg-white relative",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "absolute top-1 right-1 z-20 flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.ActionButton, { onPress: () => deleteAnnotation(), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.DeleteForeverIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.ActionButton, { onPress: () => setIsOpen((o2) => !o2), children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components14.ListEditIcon, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "absolute top-1 right-1 z-20 flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components13.ActionButton, { onPress: () => deleteAnnotation(), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components13.DeleteForeverIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components13.ActionButton, { onPress: () => setIsOpen((o2) => !o2), children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components14.ListEditIcon, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mb-2 relative", children: [
-          isOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h3", { className: "text-lg font-semibold border-b pt-1 pb-2 mb-2", children: "Edit step" }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(HTMLAnnotationEditor, {})
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mb-2 relative", children: [
+          isOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-lg font-semibold border-b pt-1 pb-2 mb-2", children: "Edit step" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HTMLAnnotationEditor, {})
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             HTMLAnnotationBodyRender,
             {
               className: "line-clamp-3 prose-p:text-slate-600",
               locale: "en"
             }
           ) }),
-          !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_components13.ActionButton, { onPress: cancelRequest, children: "Discard changes" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          !isOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: isPending ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_components13.ActionButton, { onPress: cancelRequest, children: "Discard changes" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             import_components13.ActionButton,
             {
               isDisabled: busy,
@@ -3112,7 +3080,7 @@ function TourNormalAnnotationEditor({
             }
           ) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -bottom-5 h-5 border-l-2 border-gray-300 w-0" })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "absolute -bottom-5 h-5 border-l-2 border-gray-300 w-0" })
       ]
     }
   );
@@ -3120,52 +3088,52 @@ function TourNormalAnnotationEditor({
 
 // src/components/TourPaintingAnnotationEditor.tsx
 var import_components15 = require("@manifest-editor/components");
-var import_editors9 = require("@manifest-editor/editors");
+var import_editors8 = require("@manifest-editor/editors");
 var import_components16 = require("@manifest-editor/manifest-preset/components");
-var import_shell15 = require("@manifest-editor/shell");
-var import_react8 = require("react");
-var import_react_iiif_vault16 = require("react-iiif-vault");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_shell14 = require("@manifest-editor/shell");
+var import_react7 = require("react");
+var import_react_iiif_vault15 = require("react-iiif-vault");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function TourPaintingAnnotationEditor({
   originalAnnotationId,
   highlightProps
 }) {
-  const page = (0, import_react_iiif_vault16.useAnnotationPage)();
-  const pageEditor = (0, import_shell15.useGenericEditor)(page);
-  const annotation = (0, import_react_iiif_vault16.useAnnotation)();
-  const { edit } = (0, import_shell15.useLayoutActions)();
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+  const page = (0, import_react_iiif_vault15.useAnnotationPage)();
+  const pageEditor = (0, import_shell14.useGenericEditor)(page);
+  const annotation = (0, import_react_iiif_vault15.useAnnotation)();
+  const { edit } = (0, import_shell14.useLayoutActions)();
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
   const deleteAnnotation = () => {
     if (originalAnnotationId && confirm("Are you sure you want to delete this annotation?")) {
       const index = pageEditor.structural.items.getWithoutTracking().findIndex((item) => item.id === originalAnnotationId);
       pageEditor.structural.items.deleteAtIndex(index);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       ...highlightProps,
       className: "border border-gray-300 hover:border-me-500 shadow-sm rounded p-3 bg-white relative",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "absolute top-1 right-1 z-20 flex gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components15.ActionButton, { onPress: () => deleteAnnotation(), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components15.DeleteForeverIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components15.ActionButton, { onPress: () => setIsOpen((o2) => !o2), children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components16.ListEditIcon, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "absolute top-1 right-1 z-20 flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components15.ActionButton, { onPress: () => deleteAnnotation(), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components15.DeleteForeverIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components15.ActionButton, { onPress: () => setIsOpen((o2) => !o2), children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components16.ListEditIcon, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-1 min-w-0", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h3", { className: "text-lg font-semibold border-b pt-1 pb-2 mb-2", children: "Edit step" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_editors9.LanguageMapEditor, { dispatchType: "label" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_editors9.LanguageMapEditor, { dispatchType: "summary" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_react_iiif_vault16.LocaleString,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 min-w-0", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "text-lg font-semibold border-b pt-1 pb-2 mb-2", children: "Edit step" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_editors8.LanguageMapEditor, { dispatchType: "label" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_editors8.LanguageMapEditor, { dispatchType: "summary" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_iiif_vault15.LocaleString,
             {
               as: "div",
               className: "whitespace-nowrap overflow-ellipsis w-full overflow-x-hidden",
               children: annotation?.label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_react_iiif_vault16.LocaleString,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react_iiif_vault15.LocaleString,
             {
               className: "text-gray-500 text-sm bg-white line-clamp-2",
               as: "div",
@@ -3173,25 +3141,25 @@ function TourPaintingAnnotationEditor({
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_components15.ActionButton, { onPress: () => edit(annotation), children: "Edit target annotation" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute -bottom-5 h-8 -z-10 border-l-2 border-gray-300 w-0" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components15.ActionButton, { onPress: () => edit(annotation), children: "Edit target annotation" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -bottom-5 h-8 -z-10 border-l-2 border-gray-300 w-0" })
       ]
     }
   );
 }
 
 // src/components/TourAnnotationEditor.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function TourAnnotationEditor() {
-  const [annotation, { annotationTarget, highlightProps }] = (0, import_editors10.useAnnotationInfo)();
-  const resource = (0, import_react9.useMemo)(() => {
+  const [annotation, { annotationTarget, highlightProps }] = (0, import_editors9.useAnnotationInfo)();
+  const resource = (0, import_react8.useMemo)(() => {
     if (annotationTarget) {
       return { id: annotationTarget, type: "Annotation" };
     }
     return { id: annotation?.id, type: "Annotation" };
   }, [annotation?.id, annotationTarget]);
   if (annotationTarget) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_shell16.ResourceEditingProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_iiif_vault17.AnnotationContext, { annotation: annotationTarget, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_shell15.ResourceEditingProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_iiif_vault16.AnnotationContext, { annotation: annotationTarget, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       TourPaintingAnnotationEditor,
       {
         originalAnnotationId: annotation?.id,
@@ -3199,37 +3167,37 @@ function TourAnnotationEditor() {
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_shell16.ResourceEditingProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TourNormalAnnotationEditor, { highlightProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_shell15.ResourceEditingProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TourNormalAnnotationEditor, { highlightProps }) });
 }
 
 // src/components/TourAnnotationPageEditor.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function TourAnnotationPageEditor({
   reorderable = false
 }) {
-  const page = (0, import_react_iiif_vault18.useAnnotationPage)();
-  const editor = (0, import_shell17.useGenericEditor)(page);
+  const page = (0, import_react_iiif_vault17.useAnnotationPage)();
+  const editor = (0, import_shell16.useGenericEditor)(page);
   if (!page) {
     return null;
   }
   if (!reorderable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: page.items.map((annotation) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_iiif_vault18.AnnotationContext, { annotation: annotation.id, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TourAnnotationEditor, {}) }, annotation.id)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: page.items.map((annotation) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_iiif_vault17.AnnotationContext, { annotation: annotation.id, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TourAnnotationEditor, {}) }, annotation.id)) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_editors11.ReorderList,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_editors10.ReorderList,
     {
       id: page.id,
       marginBottom: "0.5em",
       items: page.items || [],
       inlineHandle: false,
       reorder: ({ startIndex, endIndex }) => editor.structural.items.reorder(startIndex, endIndex),
-      renderItem: (ref, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_iiif_vault18.AnnotationContext, { annotation: ref.id, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TourAnnotationEditor, {}) })
+      renderItem: (ref, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_iiif_vault17.AnnotationContext, { annotation: ref.id, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TourAnnotationEditor, {}) })
     }
   ) });
 }
 
 // src/right-panels/ExhibitionTourSteps.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var exhibitionTourSteps = {
   id: "@exhibition/tour-steps",
   supports: {
@@ -3246,20 +3214,20 @@ var exhibitionTourSteps = {
     }
   },
   label: "Tour steps",
-  component: () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExhibitionRightPanelOptionalPage, {})
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ExhibitionRightPanelOptionalPage, {})
 };
 function ExhibitionRightPanelOptionalPage() {
-  const canvas = (0, import_react_iiif_vault19.useCanvas)();
+  const canvas = (0, import_react_iiif_vault18.useCanvas)();
   const firstAnnotationPage = canvas?.annotations[0];
   const itemsAnnotationPage = canvas?.items[0];
   if (!firstAnnotationPage || !canvas || !itemsAnnotationPage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PromptCreationOfTourSteps, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PromptCreationOfTourSteps, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExhibitionRightPanel3, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ExhibitionRightPanel3, {});
 }
 function PromptCreationOfTourSteps() {
-  const canvas = (0, import_react_iiif_vault19.useCanvas)();
-  const creator = (0, import_shell18.useInlineCreator)();
+  const canvas = (0, import_react_iiif_vault18.useCanvas)();
+  const creator = (0, import_shell17.useInlineCreator)();
   const createEmptyAnnotationPage = () => {
     if (!canvas)
       return;
@@ -3284,9 +3252,9 @@ function PromptCreationOfTourSteps() {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center justify-center p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-4 opacity-50 text-center", children: "This image does not yet have a tour." }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center justify-center p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "p-4 opacity-50 text-center", children: "This image does not yet have a tour." }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_react_aria_components2.Button,
       {
         className: "border w-full disabled:opacity-50 border-gray-300 hover:border-me-500 hover:bg-me-50 cursor-pointer shadow-sm rounded p-4 bg-white relative text-black/40 hover:text-me-500",
@@ -3297,13 +3265,13 @@ function PromptCreationOfTourSteps() {
   ] });
 }
 function ExhibitionRightPanel3() {
-  const canvas = (0, import_react_iiif_vault19.useCanvas)();
+  const canvas = (0, import_react_iiif_vault18.useCanvas)();
   const firstAnnotationPage = canvas?.annotations[0];
   const itemsAnnotationPage = canvas?.items[0];
-  const editor = (0, import_shell18.useGenericEditor)(firstAnnotationPage);
-  const creator = (0, import_shell18.useInlineCreator)();
-  const [reorderable, setReorderable] = (0, import_react10.useState)(false);
-  const { requestAnnotation, isPending, busy, cancelRequest, completeRequest } = (0, import_shell18.useRequestAnnotation)({
+  const editor = (0, import_shell17.useGenericEditor)(firstAnnotationPage);
+  const creator = (0, import_shell17.useInlineCreator)();
+  const [reorderable, setReorderable] = (0, import_react9.useState)(false);
+  const { requestAnnotation, isPending, busy, cancelRequest, completeRequest } = (0, import_shell17.useRequestAnnotation)({
     onSuccess: (resp) => {
       if (!resp.cancelled && resp.target && firstAnnotationPage) {
         creator.create(
@@ -3340,18 +3308,18 @@ function ExhibitionRightPanel3() {
   if (!canvas)
     return null;
   if (!firstAnnotationPage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: "No annotation page - create one?" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "No annotation page - create one?" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components17.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_components17.SidebarContent, { padding: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-4 border-b pt-4 pb-2 mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-lg font-semibold flex-1", children: "Tour steps" }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components17.ActionButton, { onPress: () => setReorderable((r2) => !r2), children: reorderable ? "Done" : "Reorder" })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components17.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_components17.SidebarContent, { padding: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4 border-b pt-4 pb-2 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-lg font-semibold flex-1", children: "Tour steps" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_components17.ActionButton, { onPress: () => setReorderable((r2) => !r2), children: reorderable ? "Done" : "Reorder" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_shell18.ResourceEditingProvider, { resource: canvas, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_iiif_vault19.AnnotationPageContext, { annotationPage: firstAnnotationPage.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TourAnnotationPageEditor, { reorderable }),
-        !busy ? isPending ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "border grid grid-cols-2 gap-2 disabled:opacity-50 border-gray-300 shadow-sm rounded p-1 bg-white relative text-black/40", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_shell17.ResourceEditingProvider, { resource: canvas, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_iiif_vault18.AnnotationPageContext, { annotationPage: firstAnnotationPage.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TourAnnotationPageEditor, { reorderable }),
+        !busy ? isPending ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "border grid grid-cols-2 gap-2 disabled:opacity-50 border-gray-300 shadow-sm rounded p-1 bg-white relative text-black/40", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_react_aria_components2.Button,
             {
               onPress: cancelRequest,
@@ -3359,7 +3327,7 @@ function ExhibitionRightPanel3() {
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             import_react_aria_components2.Button,
             {
               onPress: completeRequest,
@@ -3367,7 +3335,7 @@ function ExhibitionRightPanel3() {
               children: "Save changes"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_react_aria_components2.Button,
           {
             onPress: () => requestAnnotation({ type: "polygon" }),
@@ -3376,10 +3344,10 @@ function ExhibitionRightPanel3() {
           }
         ) : null
       ] }),
-      itemsAnnotationPage ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h3", { className: "text-md border-b pt-4 pb-2 mb-2", children: "Available tour steps from images" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_editors12.PromptToAddPaintingAnnotations,
+      itemsAnnotationPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-md border-b pt-4 pb-2 mb-2", children: "Available tour steps from images" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_editors11.PromptToAddPaintingAnnotations,
           {
             painting: itemsAnnotationPage,
             page: editor.ref(),
@@ -3391,6 +3359,195 @@ function ExhibitionRightPanel3() {
   ] }) });
 }
 
+// src/right-panels/SlideBehaviours.tsx
+var import_components18 = require("@manifest-editor/components");
+var import_editors12 = require("@manifest-editor/editors");
+var import_shell18 = require("@manifest-editor/shell");
+var import_react10 = require("react");
+
+// src/components/AspectRatioWarning.tsx
+var import_react_iiif_vault19 = require("react-iiif-vault");
+var import_tiny_invariant2 = __toESM(require("tiny-invariant"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function AspectRatioWarning() {
+  const canvas = (0, import_react_iiif_vault19.useCanvas)();
+  (0, import_tiny_invariant2.default)(canvas);
+  const ratio = canvas.width && canvas.height ? canvas.width / canvas.height : 0;
+  const target = getHeightWidthRatio(canvas.behavior || []);
+  if (Math.abs(ratio - target.ratio) < 0.01)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "p-2 rounded bg-me-100", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-me-700-500", children: "Aspect ratio warning" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-sm text-black/60", children: [
+      "The aspect ratio of this canvas is ",
+      ratio.toFixed(2),
+      " but the target aspect ratio is ",
+      target.ratio.toFixed(2),
+      ". Some parts of this image may be cropped.",
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative h-32 w-full mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: "bg-[red] left-0 top-0 z-2 opacity-50 max-w-32 max-h-32",
+          style: { aspectRatio: ratio.toFixed(2) },
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "div",
+            {
+              className: "asbolute bg-[white] left-0 top-0 z-1 opacity-50 max-w-32 max-h-32",
+              style: { aspectRatio: target.ratio }
+            }
+          )
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/right-panels/SlideBehaviours.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var customBehaviourEditor = {
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SlideBehavioursPanel, {}),
+  supports: {
+    edit: true,
+    resourceTypes: ["Canvas"],
+    properties: ["behavior"]
+  },
+  id: "slide-behaviors",
+  label: "Layout",
+  tabs: {
+    showTitle: true
+  }
+};
+var exhibitionConfigs = [
+  {
+    id: "layout",
+    type: "choice",
+    label: { en: ["Layout"] },
+    initialOpen: true,
+    items: [
+      {
+        label: { en: ["Text on left"] },
+        value: "left"
+      },
+      {
+        label: { en: ["Text on right"] },
+        value: "right"
+      },
+      {
+        label: { en: ["Text on bottom"] },
+        value: "bottom"
+      },
+      {
+        label: { en: ["Only image"] },
+        value: "image"
+      }
+    ]
+  },
+  {
+    id: "size",
+    component: (existing, setBehaviors) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EditSize, { behaviors: existing, setBehaviors }),
+    label: { en: ["Size"] },
+    type: "custom",
+    initialOpen: true,
+    supports: (b) => b.startsWith("w-") || b.startsWith("h-")
+  }
+];
+function parseBehaviors(items) {
+  let width = 0;
+  let height = 0;
+  for (const item of items) {
+    if (item.startsWith("w-")) {
+      width = Number.parseInt(item.slice(2));
+    }
+    if (item.startsWith("h-")) {
+      height = Number.parseInt(item.slice(2));
+    }
+  }
+  return {
+    width,
+    height
+  };
+}
+function EditSize({ behaviors, setBehaviors }) {
+  const { width, height } = parseBehaviors(behaviors);
+  const [hoverPosition, setHoverPosition] = (0, import_react10.useState)({ x: -1, y: -1 });
+  const setBehavior = (w2, h) => {
+    const newBehaviors = behaviors.filter((b) => {
+      return !b.startsWith("w-") && !b.startsWith("h-");
+    });
+    newBehaviors.push(`w-${w2}`);
+    newBehaviors.push(`h-${h}`);
+    setBehaviors(newBehaviors);
+  };
+  const cells = Array.from({ length: 144 }, (_2, i2) => {
+    const x2 = i2 % 12;
+    const y2 = Math.floor(i2 / 12);
+    const hovered = hoverPosition.x >= x2 && hoverPosition.y >= y2;
+    const selected = x2 < width && y2 < height;
+    const hoveredAndSelected = hovered && selected;
+    let bgClass = "bg-gray-200";
+    if (hovered) {
+      bgClass = "bg-me-200";
+    }
+    if (selected) {
+      bgClass = "bg-me-500";
+    }
+    if (hoveredAndSelected) {
+      bgClass = "bg-me-400";
+    }
+    return (
+      // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
+        {
+          className: `flex aspect-square rounded cursor-se-resize items-center justify-center ${bgClass}`,
+          onClick: () => setBehavior(x2 + 1, y2 + 1),
+          onMouseUp: () => setBehavior(x2 + 1, y2 + 1),
+          onMouseEnter: () => setHoverPosition({ x: x2, y: y2 })
+        },
+        i2
+      )
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-12 grid-rows-12 gap-1", onMouseLeave: () => setHoverPosition({ x: -1, y: -1 }), children: cells });
+}
+function SlideBehavioursPanel() {
+  const canvas = (0, import_editors12.useInStack)("Canvas");
+  const editor = (0, import_shell18.useEditor)();
+  const { width, height } = editor.technical;
+  if (!canvas || editor.technical.type !== "Canvas") {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_components18.Sidebar, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components18.SidebarHeader, { title: "Slide behaviors" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: "Please select canvas" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_components18.Sidebar, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_components18.SidebarContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_editors12.InputContainer, { $wide: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        import_editors12.DimensionsTriplet,
+        {
+          widthId: width.containerId(),
+          width: width.get() || 0,
+          changeWidth: (v2) => width.set(v2),
+          heightId: height.containerId(),
+          height: height.get() || 0,
+          changeHeight: (v2) => height.set(v2)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AspectRatioWarning, {}) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      import_editors12.BehaviorEditor,
+      {
+        behavior: editor.technical.behavior.get() || [],
+        onChange: (v2) => {
+          editor.technical.behavior.set(v2);
+        },
+        configs: exhibitionConfigs
+      }
+    )
+  ] }) });
+}
+
 // src/index.tsx
 var exhibitionEditorPreset = (0, import_shell19.extendApp)(
   (0, import_shell19.mapApp)(ManifestPreset),
@@ -3432,14 +3589,19 @@ var exhibitionEditorPreset = (0, import_shell19.extendApp)(
       youtubeMainEdtior,
       infoBlockEditor
     ],
-    editors: [exhibitionCanvasEditor, customBehaviourEditor, exhibitionSummaryEdtior, exhibitionTourSteps],
+    editors: [
+      exhibitionCanvasEditor,
+      customBehaviourEditor,
+      exhibitionSummaryEdtior,
+      exhibitionTourSteps
+    ],
     creators: [
       infoBoxCreator,
-      imageSlideBottomCreator,
+      youtubeSlideCreator,
+      imageServiceSlideCreator,
+      imageBrowserSlideCreator,
       imageSlideCreator,
-      imageSlideLeftCreator,
-      imageSlideRightCreator,
-      youtubeSlideCreator
+      imageUrlSlideCreator
     ]
   }
 );