@manifest-editor/exhibition-preset 1.3.0

package/dist/index.cjs

@@ -0,0 +1,3445 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from2, except, desc) => {
+  if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+    for (let key of __getOwnPropNames(from2))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc(from2, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../node_modules/.pnpm/shallowequal@1.1.0/node_modules/shallowequal/index.js
+var require_shallowequal = __commonJS({
+  "../../node_modules/.pnpm/shallowequal@1.1.0/node_modules/shallowequal/index.js"(exports, module2) {
+    "use strict";
+    module2.exports = function shallowEqual(objA, objB, compare, compareContext) {
+      var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
+      if (ret !== void 0) {
+        return !!ret;
+      }
+      if (objA === objB) {
+        return true;
+      }
+      if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
+        return false;
+      }
+      var keysA = Object.keys(objA);
+      var keysB = Object.keys(objB);
+      if (keysA.length !== keysB.length) {
+        return false;
+      }
+      var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+      for (var idx = 0; idx < keysA.length; idx++) {
+        var key = keysA[idx];
+        if (!bHasOwnProperty(key)) {
+          return false;
+        }
+        var valueA = objA[key];
+        var valueB = objB[key];
+        ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
+        if (ret === false || ret === void 0 && valueA !== valueB) {
+          return false;
+        }
+      }
+      return true;
+    };
+  }
+});
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  exhibitionEditorPreset: () => exhibitionEditorPreset
+});
+module.exports = __toCommonJS(src_exports);
+var ManifestPreset = __toESM(require("@manifest-editor/manifest-preset"), 1);
+var import_shell19 = require("@manifest-editor/shell");
+
+// src/annotations/TourStepAnnotations.tsx
+var import_shell = require("@manifest-editor/shell");
+var import_react_iiif_vault2 = require("react-iiif-vault");
+var import_zustand = require("zustand");
+
+// src/components/AtlasRenderBoxSelector.tsx
+var import_jsx_runtime = (
+  // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+  require("react/jsx-runtime")
+);
+function AtlasRenderBoxSelector({
+  id,
+  target,
+  style,
+  onClick
+}) {
+  const { x: x2, y: y2, width, height } = target.spatial;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "box",
+    {
+      id,
+      relativeStyle: true,
+      relativeSize: false,
+      target: { x: x2, y: y2, width, height },
+      style: style || {
+        border: "2px solid rgba(255, 255, 255, 0.2)",
+        ":hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)"
+        }
+      },
+      onClick
+    }
+  );
+}
+
+// src/components/AtlasRenderSVGSelector.tsx
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_jsx_runtime2 = (
+  // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+  require("react/jsx-runtime")
+);
+function AtlasRenderSVGSelector({
+  id,
+  target,
+  style,
+  onClick
+}) {
+  const canvas = (0, import_react_iiif_vault.useCanvas)();
+  if (!canvas)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "shape",
+    {
+      id,
+      points: target.points || [],
+      target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
+      relativeStyle: true,
+      relativeSize: false,
+      style: style || {
+        border: "2px solid rgba(255, 255, 255, 0.2)",
+        ":hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.2)"
+        }
+      },
+      onClick
+    }
+  );
+}
+
+// src/annotations/TourStepAnnotations.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var tourStepAnnotations = {
+  id: "@exhibition/tour-step-annotations",
+  label: "Tour steps",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TourStepAnnotations, {})
+};
+function TourStepAnnotations() {
+  const canvas = (0, import_react_iiif_vault2.useCanvas)();
+  const store = (0, import_shell.useAtlasStore)();
+  const tool = (0, import_zustand.useStore)(store, (s2) => s2.tool);
+  const { rightPanel } = (0, import_shell.useLayoutState)();
+  const isRightPanel = rightPanel.current === "@manifest-editor/editor";
+  const isTour = isRightPanel && rightPanel.state?.currentTab?.startsWith("@exhibition/tour-steps");
+  const firstAnnotationPage = canvas?.annotations[0];
+  if (!isTour || !canvas || tool.enabled || !firstAnnotationPage) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_iiif_vault2.AnnotationPageContext, { annotationPage: firstAnnotationPage.id, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewAnnotationPage, {}) }) });
+}
+function ViewAnnotationPage() {
+  const page = (0, import_react_iiif_vault2.useAnnotationPage)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: page?.items?.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_iiif_vault2.AnnotationContext, { annotation: item.id, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewAnnotation, {}) }, item.id);
+  }) });
+}
+function ViewAnnotation() {
+  const annotation = (0, import_react_iiif_vault2.useAnnotation)();
+  const editor = (0, import_shell.useGenericEditor)(annotation);
+  const target = editor.annotation.target.getParsedSelector();
+  if (!target || !annotation)
+    return null;
+  if (target.type === "BoxSelector") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AtlasRenderBoxSelector, { id: annotation.id, target });
+  }
+  if (target.type === "SvgSelector") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AtlasRenderSVGSelector, { id: annotation.id, target });
+  }
+  return null;
+}
+
+// src/canvas-editors/image-block-editor.tsx
+var import_components = require("@manifest-editor/components");
+var import_editors = require("@manifest-editor/editors");
+
+// ../../packages/ui/madoc/use-local-storage.ts
+var import_react = require("react");
+
+// ../../node_modules/.pnpm/mitt@3.0.1/node_modules/mitt/dist/mitt.mjs
+function mitt_default(n) {
+  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
+    var i2 = n.get(t);
+    i2 ? i2.push(e) : n.set(t, [e]);
+  }, off: function(t, e) {
+    var i2 = n.get(t);
+    i2 && (e ? i2.splice(i2.indexOf(e) >>> 0, 1) : n.set(t, []));
+  }, emit: function(t, e) {
+    var i2 = n.get(t);
+    i2 && i2.slice().map(function(n2) {
+      n2(e);
+    }), (i2 = n.get("*")) && i2.slice().map(function(n2) {
+      n2(t, e);
+    });
+  } };
+}
+
+// ../../packages/ui/madoc/use-local-storage.ts
+globalThis.MS_LS_EMITTER = globalThis.MS_LS_EMITTER || mitt_default();
+var lsEmitter = globalThis.MS_LS_EMITTER;
+function useLocalStorage(key, initialValue) {
+  const lastStoredValue = (0, import_react.useRef)();
+  if (!lastStoredValue.current && initialValue) {
+    lastStoredValue.current = JSON.stringify(initialValue);
+  }
+  const [storedValue, setStoredValue] = (0, import_react.useState)(() => {
+    try {
+      if (typeof window === "undefined" || typeof window.localStorage === "undefined") {
+        return initialValue;
+      }
+      const item = window.localStorage.getItem(key);
+      if (item) {
+        lastStoredValue.current = item;
+      }
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.log(error);
+      return initialValue;
+    }
+  });
+  const setValue = (value) => {
+    try {
+      if (typeof window !== "undefined" && typeof window.localStorage !== "undefined") {
+        let prev2 = initialValue;
+        try {
+          prev2 = typeof lastStoredValue.current === "undefined" ? initialValue : JSON.parse(lastStoredValue.current);
+        } catch (e) {
+        }
+        const valueToStore = value instanceof Function ? value(prev2) : value;
+        setStoredValue(valueToStore);
+        const valueJson = JSON.stringify(valueToStore);
+        window.localStorage.setItem(key, valueJson);
+        if (valueJson !== lastStoredValue.current) {
+          lastStoredValue.current = valueJson;
+          lsEmitter.emit(`change:${key}`, { valueJson });
+        }
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    const listener = ({ valueJson }) => {
+      if (valueJson && valueJson !== lastStoredValue.current) {
+        try {
+          setStoredValue(JSON.parse(valueJson));
+          lastStoredValue.current = valueJson;
+        } catch (e) {
+        }
+      }
+    };
+    lsEmitter.on(`change:${key}`, listener);
+    return () => {
+      lsEmitter.off(`change:${key}`, listener);
+    };
+  }, [key]);
+  return [storedValue, setValue, lastStoredValue];
+}
+
+// src/canvas-editors/image-block-editor.tsx
+var import_react_iiif_vault3 = require("react-iiif-vault");
+var import_tailwind_merge = require("tailwind-merge");
+
+// src/helpers.ts
+var heightMap = {
+  "h-1": "lg:min-h-[100px] row-span-1",
+  "h-2": "lg:min-h-[200px] row-span-2",
+  "h-3": "lg:min-h-[300px] row-span-3",
+  "h-4": "lg:min-h-[400px] row-span-4",
+  "h-5": "lg:min-h-[500px] row-span-5",
+  "h-6": "lg:min-h-[600px] row-span-6",
+  "h-7": "lg:min-h-[700px] row-span-7",
+  "h-8": "lg:min-h-[800px] row-span-8",
+  "h-9": "lg:min-h-[900px] row-span-9",
+  "h-10": "lg:min-h-[1000px] row-span-10",
+  "h-11": "lg:min-h-[1100px] row-span-11",
+  "h-12": "lg:min-h-[1200px] row-span-12"
+};
+var previewHeightMap = {
+  "h-1": "lg:min-h-[25px] row-span-1",
+  "h-2": "lg:min-h-[50px] row-span-2",
+  "h-3": "lg:min-h-[75px] row-span-3",
+  "h-4": "lg:min-h-[100px] row-span-4",
+  "h-5": "lg:min-h-[125px] row-span-5",
+  "h-6": "lg:min-h-[150px] row-span-6",
+  "h-7": "lg:min-h-[175px] row-span-7",
+  "h-8": "lg:min-h-[200px] row-span-8",
+  "h-9": "lg:min-h-[225px] row-span-9",
+  "h-10": "lg:min-h-[250px] row-span-10",
+  "h-11": "lg:min-h-[275px] row-span-11",
+  "h-12": "lg:min-h-[300px] row-span-12"
+};
+var widthMap = {
+  "w-1": "col-span-1",
+  "w-2": "col-span-2",
+  "w-3": "col-span-3",
+  "w-4": "col-span-4",
+  "w-5": "col-span-5",
+  "w-6": "col-span-6",
+  "w-7": "col-span-7",
+  "w-8": "col-span-8",
+  "w-9": "col-span-9",
+  "w-10": "col-span-10",
+  "w-11": "col-span-11",
+  "w-12": "col-span-12"
+};
+function getHeightWidthRatio(behavior) {
+  const { isLeft, isRight, isBottom } = getGridStats(behavior);
+  const h = behavior?.find((a2) => a2.includes("h-"));
+  const w2 = behavior?.find((a2) => a2.includes("w-"));
+  if (!h || !w2) {
+    return { h: 0, w: 0, ratio: 1 };
+  }
+  const ret = {
+    h: Number.parseInt(h.split("-")[1]),
+    w: Number.parseInt(w2.split("-")[1]),
+    ratio: 1
+  };
+  if (isLeft || isRight) {
+    ret.w *= 2 / 3;
+  }
+  if (isBottom) {
+    ret.h *= 2 / 3;
+  }
+  if (ret.h && ret.w) {
+    ret.ratio = ret.w / ret.h;
+  }
+  return ret;
+}
+function getClassName(b, firstInfo = false, preview = true) {
+  if (!b || b.length === 0) {
+    b = ["h-8", "w-8", "image"];
+  }
+  let h = b.find((a2) => a2.includes("h-"));
+  const w2 = b.find((a2) => a2.includes("w-"));
+  const classNames = [];
+  if (firstInfo && h === "h-4") {
+    h = "h-8";
+  }
+  classNames.push(preview ? previewHeightMap[h] : heightMap[h]);
+  classNames.push(widthMap[w2]);
+  return classNames.join(" ");
+}
+function getGridStats(behavior) {
+  const isRight = behavior?.includes("right");
+  const isLeft = behavior?.includes("left");
+  const isBottom = behavior?.includes("bottom");
+  const isTop = behavior?.includes("top");
+  const isInfo = behavior?.includes("info");
+  const isImage = behavior?.includes("image") || !isLeft && !isRight && !isBottom && !isTop;
+  return {
+    isRight,
+    isLeft,
+    isBottom,
+    isTop,
+    isInfo,
+    isImage
+  };
+}
+function isExhibitionItem(canvas) {
+  if (!canvas)
+    return false;
+  const behaviors = canvas.behavior || [];
+  if (behaviors.includes("image") || behaviors.includes("info")) {
+    return true;
+  }
+  for (const behavior of behaviors) {
+    if (behavior.startsWith("w-") || behavior.startsWith("h-")) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// src/canvas-editors/image-block-editor.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var imageBlockEditor = {
+  id: "image-block-editor",
+  label: "Image Block Editor",
+  component: (strategy) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImageBlockEditor, { strategy }),
+  supports: {
+    strategy: (strategy, resource, vault) => {
+      if (strategy.type !== "images") {
+        return false;
+      }
+      const fullResource = vault.get(resource.resource);
+      if (fullResource.type !== "Canvas") {
+        return false;
+      }
+      const behaviors = fullResource.behavior || [];
+      let isImage = false;
+      for (const behaviour of behaviors) {
+        if (behaviour.startsWith("w-") || behaviour.startsWith("h-") || behaviour === "image") {
+          isImage = true;
+        }
+      }
+      return isImage;
+    }
+  }
+};
+function ImageBlockEditor({
+  strategy
+}) {
+  const [isPreview, setIsPreview] = useLocalStorage("exhibition-preview-mode");
+  const canvas = (0, import_editors.useInStack)("Canvas");
+  if (!canvas) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_iiif_vault3.CanvasContext, { canvas: canvas.resource.source?.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-4 bg-me-500 py-2 px-4 text-white shadow-md z-40 ring-1 ring-me-500 items-center", children: [
+      "Switch view",
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components.ActionButton, { onPress: () => setIsPreview(!isPreview), children: isPreview ? "Full canvas" : "Layout preview" })
+    ] }),
+    isPreview ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-12 grid-rows-12 h-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImageBlockRenderer, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-full flex flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors.CanvasPanelEditor, { asFallback: true }) })
+  ] });
+}
+function ImageBlockRenderer() {
+  const canvas = (0, import_react_iiif_vault3.useCanvas)();
+  const behavior = canvas?.behavior || [];
+  const className = getClassName(behavior);
+  const { isBottom, isImage, isInfo, isLeft } = getGridStats(canvas?.behavior);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: (0, import_tailwind_merge.twMerge)(
+        className,
+        "flex h-full max-h-full min-h-0",
+        isLeft ? "flex-row-reverse" : isBottom ? "flex-col" : "flex-row"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 h-full flex min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editors.CanvasPanelEditor, { asFallback: true }) }),
+        !isImage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            className: `${isBottom ? "min-h-3 w-full" : "w-1/3"} flex-shrink-0 self-stretch text-white bg-black rounded p-8`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_iiif_vault3.LocaleString, { className: "block mb-4", children: canvas?.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_iiif_vault3.LocaleString, { children: canvas?.summary })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/canvas-editors/info-block-editor.tsx
+var import_components3 = require("@manifest-editor/components");
+var import_shell3 = require("@manifest-editor/shell");
+var import_react_iiif_vault4 = require("react-iiif-vault");
+
+// src/components/AnnotationBodyEditor.tsx
+var import_components2 = require("@manifest-editor/components");
+var import_editors2 = require("@manifest-editor/editors");
+var import_shell2 = require("@manifest-editor/shell");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function AnnotationBodyEditor({
+  className,
+  resourceId,
+  onRemove
+}) {
+  const editor = (0, import_shell2.useGenericEditor)({
+    id: resourceId,
+    type: "ContentResource"
+  });
+  const { language, value } = editor.descriptive;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-4 mb-4 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_editors2.Label, { children: "Language" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-32", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_editors2.Input,
+        {
+          value: language.get() || "",
+          onChange: (newValue) => language.set(newValue.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_components2.ActionButton,
+        {
+          onPress: () => {
+            if (confirm("Do you want to remove this body?")) {
+              onRemove();
+            }
+          },
+          children: "Remove"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "prose-xl", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_components2.HTMLEditor,
+      {
+        value: value.get() || "",
+        onChange: (newValue) => value.set(newValue)
+      }
+    ) })
+  ] });
+}
+
+// src/canvas-editors/info-block-editor.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var infoBlockEditor = {
+  id: "info-block-editor",
+  label: "info Block Editor",
+  component: (strategy) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InfoBlockEditor, { strategy }),
+  supports: {
+    strategy: (strategy, resource, vault) => {
+      if (strategy.type !== "textual-content") {
+        return false;
+      }
+      return true;
+    }
+  }
+};
+function InfoBlockEditor(props) {
+  const canvas = (0, import_react_iiif_vault4.useCanvas)();
+  const annotationPage = (0, import_react_iiif_vault4.useVaultSelector)(
+    (_2, vault) => (
+      // biome-ignore lint/style/noNonNullAssertion: Should always be present.
+      vault.get(canvas?.items[0])
+    )
+  );
+  const longSummaries = (0, import_react_iiif_vault4.useVaultSelector)(
+    (_2, vault) => canvas?.annotations[0] ? vault.get(canvas?.annotations[0]) : null
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "overflow-y-auto bg-white shadow", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-12", children: annotationPage.items.map((annotation, key) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_iiif_vault4.AnnotationContext,
+        {
+          annotation: annotation.id,
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnnotationEditor, {})
+        },
+        annotation.id + key
+      );
+    }) }),
+    longSummaries ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "text-2xl font-bold px-4 border-t border-gray-200 pt-4 mb-4", children: "Long Summaries" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "my-4 px-4", children: 'Long summaries are used to provide more detailed information about the canvas. They appear when the user clicks "read more" in the exhibition.' }),
+      longSummaries.items.map((annotation, key) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_iiif_vault4.AnnotationContext,
+          {
+            annotation: annotation.id,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnnotationEditor, {})
+          },
+          annotation.id + key
+        );
+      })
+    ] }) : null
+  ] });
+}
+function AnnotationEditor() {
+  const annotation = (0, import_react_iiif_vault4.useAnnotation)();
+  const creator = (0, import_shell3.useInlineCreator)();
+  const bodies = annotation?.body || [];
+  const editor = (0, import_shell3.useGenericEditor)(annotation);
+  if (!annotation) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+    bodies.map((body, n) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        AnnotationBodyEditor,
+        {
+          className: "p-4 hover:bg-me-100/40 focus-within:bg-me-100/40",
+          resourceId: body.id,
+          onRemove: () => editor.annotation.body.deleteAtIndex(n)
+        },
+        n
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_components3.ActionButton,
+      {
+        primary: true,
+        onPress: () => {
+          creator.create(
+            "@manifest-editor/html-body-creator",
+            { language: "en", value: "" },
+            {
+              targetType: "ContentResource",
+              parent: {
+                property: "body",
+                resource: {
+                  id: annotation.id,
+                  type: "Annotation"
+                }
+              },
+              initialData: {}
+            }
+          );
+        },
+        children: "Add new annotation"
+      }
+    ) })
+  ] });
+}
+
+// src/canvas-editors/youtube-editor.tsx
+var import_components4 = require("@manifest-editor/components");
+var import_shell4 = require("@manifest-editor/shell");
+var import_react2 = require("react");
+var import_react_iiif_vault5 = require("react-iiif-vault");
+var import_tiny_invariant = __toESM(require("tiny-invariant"), 1);
+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,
+  supports: {
+    strategy: (strategy, resource, vault) => {
+      console.log(strategy);
+      if (strategy.type !== "media") {
+        return false;
+      }
+      if (strategy.media.type !== "VideoYouTube") {
+        return false;
+      }
+      return true;
+    }
+  }
+};
+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) => {
+    const page = v2.get(canvas?.items[0]);
+    return page.items[0];
+  });
+  (0, import_tiny_invariant.default)(canvas && annotationRef);
+  const player = (0, import_react2.useRef)(null);
+  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`;
+  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",
+      {
+        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"
+          }
+        )
+      }
+    ) }),
+    /* @__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",
+        {
+          className: "w-64 bg-black flex-shrink-0 flex items-center justify-center rounded overflow-clip",
+          style: { aspectRatio: ar },
+          children: canvas.thumbnail?.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components4.LazyThumbnail, { cover: true }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-white/50 text-center py-16", children: "No thumbnail" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_iiif_vault5.LocaleString,
+          {
+            as: "h3",
+            className: "text-2xl font-bold mt-4",
+            defaultText: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-black/30", children: "No Label" }),
+            children: annotation.descriptive.label.get()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_iiif_vault5.LocaleString,
+          {
+            as: "p",
+            className: "mt-2 mb-8",
+            defaultText: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-black/30", children: "No summary" }),
+            children: annotation.descriptive.summary.get()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_components4.ActionButton, { onPress: () => edit(annotation.ref()), children: "Edit properties" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/creators/image-slide-creator.tsx
+var import_parser = require("@iiif/parser");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var imageSlideCreator = {
+  id: "@exhibitions/image-slide-creator",
+  create: createImageSlide,
+  label: "Image",
+  summary: "An image with text.",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: "IMAGE" }),
+  tags: ["exhibition-slide"],
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label", "height", "width", "items"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
+  }
+};
+var imageSlideLeftCreator = {
+  ...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 = {
+  ...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 = {
+  ...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 itemsPageId = ctx.generateId("AnnotationPage", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const annotationsPageId = ctx.generateId("AnnotationPage", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const behavior = ["w-12", "h-4"];
+  let width = 6e3;
+  switch (payload.type) {
+    case "left":
+      behavior.push("left");
+      width *= 2 / 3;
+      break;
+    case "right":
+      behavior.push("right");
+      width *= 2 / 3;
+      break;
+    case "bottom":
+      behavior.push("bottom");
+      break;
+  }
+  return ctx.embed({
+    ...import_parser.emptyCanvas,
+    id: canvasId,
+    behavior,
+    label: payload.label || { en: ["Untitled"] },
+    height: payload.height || 2e3,
+    width: payload.width || width,
+    items: [
+      ctx.embed({
+        ...import_parser.emptyAnnotationPage,
+        id: itemsPageId,
+        type: "AnnotationPage",
+        items: []
+      })
+    ],
+    annotations: [
+      ctx.embed({
+        ...import_parser.emptyAnnotationPage,
+        id: annotationsPageId,
+        type: "AnnotationPage",
+        items: []
+      })
+    ]
+  });
+}
+
+// src/creators/info-box-creator.tsx
+var import_parser2 = require("@iiif/parser");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var infoBoxCreator = {
+  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"
+        }
+      )
+    }
+  ),
+  tags: ["exhibition-slide"],
+  resourceType: "Canvas",
+  resourceFields: ["id", "type", "label", "height", "width", "items"],
+  supports: {
+    parentTypes: ["Manifest"],
+    parentFields: ["items"]
+  }
+};
+async function createInfoBox(data, ctx) {
+  const canvasId = ctx.generateId("canvas");
+  const pageId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const annotationsId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const annotation = {
+    ...import_parser2.emptyAnnotation,
+    id: ctx.generateId("annotation", { id: canvasId, type: "Canvas" }),
+    type: "Annotation"
+  };
+  const bodies = [
+    await ctx.create(
+      "@manifest-editor/html-body-creator",
+      {
+        language: "en",
+        body: ""
+      },
+      { parent: { resource: annotation, property: "body" } }
+    )
+  ];
+  const annotationResource = ctx.embed({
+    ...annotation,
+    motivation: "painting",
+    body: bodies,
+    target: {
+      type: "SpecificResource",
+      source: { id: canvasId, type: "Canvas" }
+    }
+  });
+  const annotationLongId = ctx.generateId("annotation", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const longDescriptionResource = ctx.embed({
+    id: annotationLongId,
+    type: "Annotation",
+    motivation: "describing",
+    body: [
+      await ctx.create(
+        "@manifest-editor/html-body-creator",
+        {
+          language: "en",
+          body: ""
+        },
+        {
+          parent: {
+            resource: { id: annotationLongId, type: "Annotation" },
+            property: "body"
+          }
+        }
+      )
+    ],
+    target: {
+      type: "SpecificResource",
+      source: { id: canvasId, type: "Canvas" }
+    }
+  });
+  const page = ctx.embed({
+    id: pageId,
+    type: "AnnotationPage",
+    items: [annotationResource]
+  });
+  const annotations = ctx.embed({
+    id: annotationsId,
+    type: "AnnotationPage",
+    items: [longDescriptionResource]
+  });
+  return ctx.embed({
+    ...import_parser2.emptyCanvas,
+    // bug with placeholder canvas.
+    id: canvasId,
+    type: "Canvas",
+    behavior: ["w-4", "h-4", "info"],
+    label: data.label || { en: ["Untitled info box"] },
+    height: data.height || 1e3,
+    width: data.width || 1e3,
+    items: [page],
+    annotations: [annotations]
+  });
+}
+
+// src/creators/youtube-slide-creator.tsx
+var import_parser3 = require("@iiif/parser");
+var import_creators = require("@manifest-editor/creators");
+var import_editors3 = require("@manifest-editor/editors");
+var youtubeSlideCreator = {
+  ...import_creators.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");
+  const pageId = ctx.generateId("annotation-page", {
+    id: canvasId,
+    type: "Canvas"
+  });
+  const annotation = await ctx.create("@manifest-editor/youtube", data, {
+    target: {
+      id: canvasId,
+      type: "Canvas"
+    },
+    targetType: "Annotation",
+    parent: {
+      resource: { id: pageId, type: "AnnotationPage" },
+      property: "items"
+    }
+  });
+  const page = ctx.embed({
+    id: pageId,
+    type: "AnnotationPage",
+    items: [annotation]
+  });
+  const thumbnail = ctx.embed({
+    id: `https://img.youtube.com/vi/${ytId}/0.jpg`,
+    type: "Image",
+    format: "image/jpeg",
+    width: 480,
+    height: 360
+  });
+  return ctx.embed({
+    ...import_parser3.emptyCanvas,
+    // bug with placeholder canvas.
+    id: canvasId,
+    type: "Canvas",
+    behavior: ["w-12", "h-8"],
+    label: data.label || { en: ["Untitled YouTube Video"] },
+    height: data.height || 1080,
+    width: data.width || 1920,
+    thumbnail: [thumbnail],
+    items: [page]
+  });
+}
+
+// src/left-panels/ExhibitionGrid.tsx
+var import_components6 = require("@manifest-editor/components");
+var import_editors5 = require("@manifest-editor/editors");
+var import_components7 = require("@manifest-editor/manifest-preset/components");
+var import_shell8 = require("@manifest-editor/shell");
+
+// src/components/ExhibitionGrid.tsx
+var import_shell6 = require("@manifest-editor/shell");
+var import_react_iiif_vault8 = require("react-iiif-vault");
+
+// src/components/ExhibitionContainer.tsx
+var import_shell5 = require("@manifest-editor/shell");
+var import_react_aria_components = require("react-aria-components");
+var import_react_iiif_vault6 = require("react-iiif-vault");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ExhibitionContainer({
+  children
+}) {
+  const manifest = (0, import_react_iiif_vault6.useManifest)();
+  const { edit } = (0, import_shell5.useLayoutActions)();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid auto-rows-auto grid-cols-12 content-center justify-center gap-2 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "col-span-4 row-span-4 text-black min-h-[100px] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_aria_components.Button,
+      {
+        onPress: () => manifest && edit(manifest),
+        className: "col-span-4 row-span-4 text-xs text-black bg-[rgb(250,204,21)] min-h-[100px] w-full flex items-center justify-center",
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_iiif_vault6.LocaleString, { children: manifest?.label })
+      }
+    ) }),
+    children
+  ] });
+}
+
+// src/components/ExhibitionItem.tsx
+var import_components5 = 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");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ExhibitionItem = (0, import_react3.forwardRef)(
+  function ExhibitionItem2({ isFirst, item, children: divChildren, ...props }, ref) {
+    const canvas = (0, import_react_iiif_vault7.useCanvas)();
+    const [strategy] = (0, import_react_iiif_vault7.useRenderingStrategy)();
+    const behavior = canvas?.behavior || [];
+    const currentCanvas = (0, import_editors4.useInStack)("Canvas");
+    const className = getClassName(canvas?.behavior, isFirst);
+    const { isBottom, isImage, isInfo, isLeft } = getGridStats(
+      canvas?.behavior
+    );
+    const isSelected = currentCanvas?.resource.source?.id === canvas?.id;
+    let children = null;
+    if (isInfo) {
+      children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-black w-full h-full text-white max-h-40", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-1.5 text-[4px]", children: strategy.type === "textual-content" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_iiif_vault7.LocaleString, { enableDangerouslySetInnerHTML: true, children: strategy.items[0]?.text }) : null }) });
+    } else {
+      children = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          className: (0, import_tailwind_merge2.twMerge)(
+            "flex h-full max-h-full min-h-0",
+            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 }) }) }),
+            isImage ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
+              {
+                className: `${isBottom ? "min-h-3 w-full" : "w-1/3"} flex-shrink-0 self-stretch p-2 text-white bg-black rounded`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "p-1.5 text-[4px]", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_iiif_vault7.LocaleString, { className: "block mb-1 text-[5px]", children: canvas?.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_iiif_vault7.LocaleString, { children: canvas?.summary })
+                ] })
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_tailwind_merge2.twMerge)(
+          className,
+          "bg-me-gray-700 overflow-hidden hover:ring-2 ring-me-primary-500 relative",
+          isSelected ? "ring-2 ring-me-primary-500" : ""
+        ),
+        ...props,
+        children: [
+          children,
+          divChildren
+        ]
+      }
+    );
+  }
+);
+
+// src/components/ExhibitionGrid.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ExhibitionGrid() {
+  const { open } = (0, import_shell6.useLayoutActions)();
+  const { structural, technical } = (0, import_shell6.useManifestEditor)();
+  const [, canvasActions] = (0, import_shell6.useCreator)(
+    { id: technical.id.get(), type: "Manifest" },
+    "items",
+    "Manifest"
+  );
+  const items = structural.items.get();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExhibitionContainer, { children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_iiif_vault8.CanvasContext, { canvas: item.id, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ExhibitionItem,
+    {
+      isFirst: index === 0,
+      item,
+      onClick: () => {
+        open({ id: "current-canvas" });
+        canvasActions.edit(item, index);
+      }
+    }
+  ) }, index)) });
+}
+
+// src/components/SortableExhibitionGrid.tsx
+var import_core = require("@dnd-kit/core");
+var import_modifiers = require("@dnd-kit/modifiers");
+var import_sortable2 = require("@dnd-kit/sortable");
+var import_shell7 = require("@manifest-editor/shell");
+var import_react4 = require("react");
+var import_react_iiif_vault9 = require("react-iiif-vault");
+
+// src/components/SortableExhibitionItem.tsx
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+
+// src/icons/ResizeHandleIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ResizeHandleIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      height: "1em",
+      width: "1em",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("title", { children: "Rearrange" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M20 9H4v2h16V9zM4 15h16v-2H4v2z" })
+      ]
+    }
+  );
+}
+
+// src/components/SortableExhibitionItem.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function SortableExhibitionItem({
+  isFirst,
+  onClick,
+  item
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } = (0, import_sortable.useSortable)({
+    id: item.id,
+    transition: {
+      duration: 150,
+      easing: "cubic-bezier(0.25, 1, 0.5, 1)"
+    }
+  });
+  const style = {
+    transform: import_utilities.CSS.Translate.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    ExhibitionItem,
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      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, {}) })
+    }
+  );
+}
+
+// src/components/SortableExhibitionGrid.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function SortableExhibitionGrid() {
+  const { structural, technical } = (0, import_shell7.useManifestEditor)();
+  const items = structural.items.get();
+  const { open } = (0, import_shell7.useLayoutActions)();
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, {
+      coordinateGetter: import_sortable2.sortableKeyboardCoordinates
+    })
+  );
+  const [, canvasActions] = (0, import_shell7.useCreator)(
+    { id: technical.id.get(), type: "Manifest" },
+    "items",
+    "Manifest"
+  );
+  const onDragEnd = (0, import_react4.useCallback)(
+    (result) => {
+      const { active, over } = result;
+      if (over && active.id !== over.id) {
+        structural.items.reorder(
+          items.findIndex((item) => item.id === active.id),
+          items.findIndex((item) => item.id === over.id)
+        );
+      }
+    },
+    [items, structural.items]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ExhibitionContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_core.DndContext,
+    {
+      sensors,
+      collisionDetection: import_core.closestCenter,
+      onDragEnd,
+      modifiers: [import_modifiers.restrictToParentElement],
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_sortable2.SortableContext, { items, strategy: import_sortable2.rectSortingStrategy, children: items.map((item, idx) => {
+        if (!item)
+          return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_iiif_vault9.CanvasContext, { canvas: item.id, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          SortableExhibitionItem,
+          {
+            item,
+            isFirst: idx === 0,
+            onClick: () => {
+              open({ id: "current-canvas" });
+              canvasActions.edit(item, idx);
+            }
+          },
+          item.id
+        ) }, item.id);
+      }) })
+    }
+  ) });
+}
+
+// src/left-panels/ExhibitionGrid.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var exhibitionGridLeftPanel = {
+  id: "canvas-listing",
+  // We are overriding the default canvas listing panel
+  label: "Exhibition grid",
+  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExhibitionGridIcon, {}),
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ExhibitionGridLeftPanel, {}),
+  options: {
+    minWidth: 350,
+    maxWidth: 350
+  }
+};
+function ExhibitionGridLeftPanel() {
+  const { technical } = (0, import_shell8.useManifestEditor)();
+  const manifestId = technical.id.get();
+  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: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_components6.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, {}),
+            title: toggled.list ? "List view" : "Grid view",
+            onClick: () => toggle("list")
+          },
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ListEditIcon, {}),
+            title: "Edit slides",
+            toggled: toggled.editing,
+            onClick: () => toggle("editing")
+          },
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NewSlideIcon, {}),
+            title: "Add new slide",
+            disabled: !canCreateCanvas,
+            onClick: () => canvasActions.createFiltered("exhibition-slide")
+          }
+        ]
+      }
+    ),
+    /* @__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, {}) })
+  ] });
+}
+function ExhibitionGridIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", viewBox: "0 -960 960 960", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("title", { children: "Exhibition grid" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M600-160v-280h280v280H600ZM440-520v-280h440v280H440ZM80-160v-280h440v280H80Zm0-360v-280h280v280H80Zm440-80h280v-120H520v120ZM160-240h280v-120H160v120Zm520 0h120v-120H680v120ZM160-600h120v-120H160v120Zm360 0Zm-80 240Zm240 0ZM280-600Z" })
+  ] });
+}
+function ListEditIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24", viewBox: "0 0 24 24", width: "24", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("title", { children: "Edit slides" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z" })
+  ] });
+}
+function NewSlideIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", viewBox: "0 -960 960 960", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("title", { children: "Add new slide" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M160-240v-480 480Zm80-80v-200h360v200H240Zm-80 160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v240h-80v-240H160v480h360v80H160Zm500-320v-100H360v-60h360v160h-60Zm60 400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Z" })
+  ] });
+}
+
+// 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");
+
+// src/components/ExhibitionItemConversion.tsx
+var import_helpers4 = 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");
+function ExhibitionItemConversion() {
+  const editor = (0, import_shell10.useEditor)();
+  const applyDefaultSettings = () => {
+    const canvasWidth = editor.technical.width.get();
+    const canvasHeight = editor.technical.height.get();
+    const summary = editor.descriptive.summary;
+    const behaviors = editor.technical.behavior;
+    const behaviorsToAdd = behaviors.get();
+    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())) {
+      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: [
+    "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" })
+  ] });
+}
+
+// src/right-panels/ExhibitionCanvasEditor.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var exhibitionCanvasEditor = {
+  id: "@exhibition/right-panel-editor",
+  supports: {
+    edit: true,
+    properties: ["label", "summary"],
+    resourceTypes: ["Canvas"],
+    custom: ({ resource }, vault) => {
+      const full = vault.get(resource);
+      const stats = getGridStats(full.behavior);
+      if (full.type === "Canvas" && !stats.isInfo) {
+        return true;
+      }
+      return false;
+    }
+  },
+  label: "Exhibition",
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime20.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 { items } = structural;
+  const { thumbnail } = descriptive;
+  const { width, height } = technical;
+  const pages = items.get();
+  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,
+      {
+        containerId: thumbnail.containerId(),
+        label: "Thumbnail",
+        property: "thumbnail",
+        items: thumbnail.get(),
+        singleMode: true,
+        reorder: (ctx) => thumbnail.reorder(ctx.startIndex, ctx.endIndex),
+        createActions: (0, import_editors7.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" }) })
+  ] }) }) });
+}
+
+// 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 exhibitionSummaryEdtior = {
+  id: "@exhibition/summary-editor",
+  supports: {
+    edit: true,
+    properties: ["summary"],
+    resourceTypes: ["Canvas"],
+    custom: ({ resource }, vault) => {
+      const full = vault.get(resource);
+      const stats = getGridStats(full.behavior);
+      if (full.type === "Canvas" && !stats.isInfo && !stats.isBottom) {
+        return true;
+      }
+      return false;
+    }
+  },
+  label: "Summary",
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ExhibitionRightPanel2, {})
+};
+function ExhibitionRightPanel2() {
+  const canvas = (0, import_react_iiif_vault12.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" })
+  ] }) }) });
+}
+
+// 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_react_iiif_vault18 = require("react-iiif-vault");
+
+// src/components/TourAnnotationEditor.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/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");
+
+// ../../node_modules/.pnpm/tslib@2.5.0/node_modules/tslib/tslib.es6.js
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s2 = arguments[i2];
+      for (var p2 in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p2))
+          t[p2] = s2[p2];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function __spreadArray(to, from2, pack) {
+  if (pack || arguments.length === 2)
+    for (var i2 = 0, l2 = from2.length, ar; i2 < l2; i2++) {
+      if (ar || !(i2 in from2)) {
+        if (!ar)
+          ar = Array.prototype.slice.call(from2, 0, i2);
+        ar[i2] = from2[i2];
+      }
+    }
+  return to.concat(ar || Array.prototype.slice.call(from2));
+}
+
+// ../../node_modules/.pnpm/@emotion+memoize@0.8.1/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0)
+      cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+// ../../node_modules/.pnpm/@emotion+is-prop-valid@1.2.1/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var isPropValid = /* @__PURE__ */ memoize(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+
+// ../../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_shallowequal = __toESM(require_shallowequal());
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Enum.js
+var MS = "-ms-";
+var MOZ = "-moz-";
+var WEBKIT = "-webkit-";
+var COMMENT = "comm";
+var RULESET = "rule";
+var DECLARATION = "decl";
+var IMPORT = "@import";
+var KEYFRAMES = "@keyframes";
+var LAYER = "@layer";
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Utility.js
+var abs = Math.abs;
+var from = String.fromCharCode;
+var assign = Object.assign;
+function hash(value, length2) {
+  return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
+}
+function trim(value) {
+  return value.trim();
+}
+function match(value, pattern) {
+  return (value = pattern.exec(value)) ? value[0] : value;
+}
+function replace(value, pattern, replacement) {
+  return value.replace(pattern, replacement);
+}
+function indexof(value, search, position2) {
+  return value.indexOf(search, position2);
+}
+function charat(value, index) {
+  return value.charCodeAt(index) | 0;
+}
+function substr(value, begin, end) {
+  return value.slice(begin, end);
+}
+function strlen(value) {
+  return value.length;
+}
+function sizeof(value) {
+  return value.length;
+}
+function append(value, array) {
+  return array.push(value), value;
+}
+function combine(array, callback) {
+  return array.map(callback).join("");
+}
+function filter(array, pattern) {
+  return array.filter(function(value) {
+    return !match(value, pattern);
+  });
+}
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Tokenizer.js
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = "";
+function node(value, root, parent, type, props, children, length2, siblings) {
+  return { value, root, parent, type, props, children, line, column, length: length2, return: "", siblings };
+}
+function copy(root, props) {
+  return assign(node("", null, null, "", null, null, 0, root.siblings), root, { length: -root.length }, props);
+}
+function lift(root) {
+  while (root.root)
+    root = copy(root.root, { children: [root] });
+  append(root, root.siblings);
+}
+function char() {
+  return character;
+}
+function prev() {
+  character = position > 0 ? charat(characters, --position) : 0;
+  if (column--, character === 10)
+    column = 1, line--;
+  return character;
+}
+function next() {
+  character = position < length ? charat(characters, position++) : 0;
+  if (column++, character === 10)
+    column = 1, line++;
+  return character;
+}
+function peek() {
+  return charat(characters, position);
+}
+function caret() {
+  return position;
+}
+function slice(begin, end) {
+  return substr(characters, begin, end);
+}
+function token(type) {
+  switch (type) {
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    case 58:
+      return 3;
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function alloc(value) {
+  return line = column = 1, length = strlen(characters = value), position = 0, [];
+}
+function dealloc(value) {
+  return characters = "", value;
+}
+function delimit(type) {
+  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
+}
+function whitespace(type) {
+  while (character = peek())
+    if (character < 33)
+      next();
+    else
+      break;
+  return token(type) > 2 || token(character) > 3 ? "" : " ";
+}
+function escaping(index, count) {
+  while (--count && next())
+    if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97)
+      break;
+  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
+}
+function delimiter(type) {
+  while (next())
+    switch (character) {
+      case type:
+        return position;
+      case 34:
+      case 39:
+        if (type !== 34 && type !== 39)
+          delimiter(character);
+        break;
+      case 40:
+        if (type === 41)
+          delimiter(type);
+        break;
+      case 92:
+        next();
+        break;
+    }
+  return position;
+}
+function commenter(type, index) {
+  while (next())
+    if (type + character === 47 + 10)
+      break;
+    else if (type + character === 42 + 42 && peek() === 47)
+      break;
+  return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
+}
+function identifier(index) {
+  while (!token(peek()))
+    next();
+  return slice(index, position);
+}
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Parser.js
+function compile(value) {
+  return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
+}
+function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+  var index = 0;
+  var offset = 0;
+  var length2 = pseudo;
+  var atrule = 0;
+  var property = 0;
+  var previous = 0;
+  var variable = 1;
+  var scanning = 1;
+  var ampersand = 1;
+  var character2 = 0;
+  var type = "";
+  var props = rules;
+  var children = rulesets;
+  var reference = rule;
+  var characters2 = type;
+  while (scanning)
+    switch (previous = character2, character2 = next()) {
+      case 40:
+        if (previous != 108 && charat(characters2, length2 - 1) == 58) {
+          if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f", abs(index ? points[index - 1] : 0)) != -1)
+            ampersand = -1;
+          break;
+        }
+      case 34:
+      case 39:
+      case 91:
+        characters2 += delimit(character2);
+        break;
+      case 9:
+      case 10:
+      case 13:
+      case 32:
+        characters2 += whitespace(previous);
+        break;
+      case 92:
+        characters2 += escaping(caret() - 1, 7);
+        continue;
+      case 47:
+        switch (peek()) {
+          case 42:
+          case 47:
+            append(comment(commenter(next(), caret()), root, parent, declarations), declarations);
+            break;
+          default:
+            characters2 += "/";
+        }
+        break;
+      case 123 * variable:
+        points[index++] = strlen(characters2) * ampersand;
+      case 125 * variable:
+      case 59:
+      case 0:
+        switch (character2) {
+          case 0:
+          case 125:
+            scanning = 0;
+          case 59 + offset:
+            if (ampersand == -1)
+              characters2 = replace(characters2, /\f/g, "");
+            if (property > 0 && strlen(characters2) - length2)
+              append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1, declarations) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2, declarations), declarations);
+            break;
+          case 59:
+            characters2 += ";";
+          default:
+            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2, rulesets), rulesets);
+            if (character2 === 123)
+              if (offset === 0)
+                parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
+              else
+                switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
+                  case 100:
+                  case 108:
+                  case 109:
+                  case 115:
+                    parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2, children), children), rules, children, length2, points, rule ? props : children);
+                    break;
+                  default:
+                    parse(characters2, reference, reference, reference, [""], children, 0, points, children);
+                }
+        }
+        index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
+        break;
+      case 58:
+        length2 = 1 + strlen(characters2), property = previous;
+      default:
+        if (variable < 1) {
+          if (character2 == 123)
+            --variable;
+          else if (character2 == 125 && variable++ == 0 && prev() == 125)
+            continue;
+        }
+        switch (characters2 += from(character2), character2 * variable) {
+          case 38:
+            ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
+            break;
+          case 44:
+            points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
+            break;
+          case 64:
+            if (peek() === 45)
+              characters2 += delimit(next());
+            atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
+            break;
+          case 45:
+            if (previous === 45 && strlen(characters2) == 2)
+              variable = 0;
+        }
+    }
+  return rulesets;
+}
+function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length2, siblings) {
+  var post = offset - 1;
+  var rule = offset === 0 ? rules : [""];
+  var size = sizeof(rule);
+  for (var i2 = 0, j2 = 0, k2 = 0; i2 < index; ++i2)
+    for (var x2 = 0, y2 = substr(value, post + 1, post = abs(j2 = points[i2])), z2 = value; x2 < size; ++x2)
+      if (z2 = trim(j2 > 0 ? rule[x2] + " " + y2 : replace(y2, /&\f/g, rule[x2])))
+        props[k2++] = z2;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length2, siblings);
+}
+function comment(value, root, parent, siblings) {
+  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings);
+}
+function declaration(value, root, parent, length2, siblings) {
+  return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2, siblings);
+}
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Prefixer.js
+function prefix(value, length2, children) {
+  switch (hash(value, length2)) {
+    case 5103:
+      return WEBKIT + "print-" + value + value;
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    case 4789:
+      return MOZ + value + value;
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    case 5936:
+      switch (charat(value, length2 + 11)) {
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
+      }
+    case 6828:
+    case 4268:
+    case 2903:
+      return WEBKIT + value + MS + value + value;
+    case 6165:
+      return WEBKIT + value + MS + "flex-" + value + value;
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
+    case 5443:
+      return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/g, "") + (!match(value, /flex-|baseline/) ? MS + "grid-row-" + replace(value, /flex-|-self/g, "") : "") + value;
+    case 4675:
+      return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/g, "") + value;
+    case 5548:
+      return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
+    case 5292:
+      return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
+    case 6060:
+      return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
+    case 4200:
+      if (!match(value, /flex-|baseline/))
+        return MS + "grid-column-align" + substr(value, length2) + value;
+      break;
+    case 2592:
+    case 3360:
+      return MS + replace(value, "template-", "") + value;
+    case 4384:
+    case 3616:
+      if (children && children.some(function(element, index) {
+        return length2 = index, match(element.props, /grid-\w+-end/);
+      })) {
+        return ~indexof(value + (children = children[length2].value), "span", 0) ? value : MS + replace(value, "-start", "") + value + MS + "grid-row-span:" + (~indexof(children, "span", 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ";";
+      }
+      return MS + replace(value, "-start", "") + value;
+    case 4896:
+    case 4128:
+      return children && children.some(function(element) {
+        return match(element.props, /grid-\w+-start/);
+      }) ? value : MS + replace(replace(value, "-end", "-span"), "span ", "") + value;
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (strlen(value) - 1 - length2 > 6)
+        switch (charat(value, length2 + 1)) {
+          case 109:
+            if (charat(value, length2 + 4) !== 45)
+              break;
+          case 102:
+            return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
+          case 115:
+            return ~indexof(value, "stretch", 0) ? prefix(replace(value, "stretch", "fill-available"), length2, children) + value : value;
+        }
+      break;
+    case 5152:
+    case 5920:
+      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b, c2, d, e, f2) {
+        return MS + a2 + ":" + b + f2 + (c2 ? MS + a2 + "-span:" + (d ? e : +e - +b) + f2 : "") + value;
+      });
+    case 4949:
+      if (charat(value, length2 + 6) === 121)
+        return replace(value, ":", ":" + WEBKIT) + value;
+      break;
+    case 6444:
+      switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
+        case 120:
+          return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
+        case 100:
+          return replace(value, ":", ":" + MS) + value;
+      }
+      break;
+    case 5719:
+    case 2647:
+    case 2135:
+    case 3927:
+    case 2391:
+      return replace(value, "scroll-", "scroll-snap-") + value;
+  }
+  return value;
+}
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Serializer.js
+function serialize(children, callback) {
+  var output = "";
+  for (var i2 = 0; i2 < children.length; i2++)
+    output += callback(children[i2], i2, children, callback) || "";
+  return output;
+}
+function stringify(element, index, children, callback) {
+  switch (element.type) {
+    case LAYER:
+      if (element.children.length)
+        break;
+    case IMPORT:
+    case DECLARATION:
+      return element.return = element.return || element.value;
+    case COMMENT:
+      return "";
+    case KEYFRAMES:
+      return element.return = element.value + "{" + serialize(element.children, callback) + "}";
+    case RULESET:
+      if (!strlen(element.value = element.props.join(",")))
+        return "";
+  }
+  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
+}
+
+// ../../node_modules/.pnpm/stylis@4.3.1/node_modules/stylis/src/Middleware.js
+function middleware(collection) {
+  var length2 = sizeof(collection);
+  return function(element, index, children, callback) {
+    var output = "";
+    for (var i2 = 0; i2 < length2; i2++)
+      output += collection[i2](element, index, children, callback) || "";
+    return output;
+  };
+}
+function rulesheet(callback) {
+  return function(element) {
+    if (!element.root) {
+      if (element = element.return)
+        callback(element);
+    }
+  };
+}
+function prefixer(element, index, children, callback) {
+  if (element.length > -1) {
+    if (!element.return)
+      switch (element.type) {
+        case DECLARATION:
+          element.return = prefix(element.value, element.length, children);
+          return;
+        case KEYFRAMES:
+          return serialize([copy(element, { value: replace(element.value, "@", "@" + WEBKIT) })], callback);
+        case RULESET:
+          if (element.length)
+            return combine(children = element.props, function(value) {
+              switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
+                case ":read-only":
+                case ":read-write":
+                  lift(copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] }));
+                  lift(copy(element, { props: [value] }));
+                  assign(element, { props: filter(children, callback) });
+                  break;
+                case "::placeholder":
+                  lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }));
+                  lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }));
+                  lift(copy(element, { props: [replace(value, /:(plac\w+)/, MS + "input-$1")] }));
+                  lift(copy(element, { props: [value] }));
+                  assign(element, { props: filter(children, callback) });
+                  break;
+              }
+              return "";
+            });
+      }
+  }
+}
+
+// ../../node_modules/.pnpm/@emotion+unitless@0.8.0/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+var unitlessKeys = {
+  animationIterationCount: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+var emotion_unitless_esm_default = unitlessKeys;
+
+// ../../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 f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
+var m = "active";
+var y = "data-styled-version";
+var v = "6.1.8";
+var g = "/*!sc*/\n";
+var S = "undefined" != typeof window && "HTMLElement" in window;
+var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
+var E = /invalid hook call/i;
+var N = /* @__PURE__ */ new Set();
+var P = function(t, n) {
+  if (true) {
+    var o2 = n ? ' with the id of "'.concat(n, '"') : "", s2 = "The component ".concat(t).concat(o2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.", i2 = console.error;
+    try {
+      var a2 = true;
+      console.error = function(t2) {
+        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));
+    } catch (e) {
+      E.test(e.message) && N.delete(s2);
+    } finally {
+      console.error = i2;
+    }
+  }
+};
+var _ = Object.freeze([]);
+var C = Object.freeze({});
+function I(e, t, n) {
+  return void 0 === n && (n = C), e.theme !== n.theme && e.theme || t || n.theme;
+}
+var A = /* @__PURE__ */ new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "tr", "track", "u", "ul", "use", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"]);
+var O = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
+var D = /(^-|-$)/g;
+function R(e) {
+  return e.replace(O, "-").replace(D, "");
+}
+var T = /(a)(d)/gi;
+var k = 52;
+var j = function(e) {
+  return String.fromCharCode(e + (e > 25 ? 39 : 97));
+};
+function x(e) {
+  var t, n = "";
+  for (t = Math.abs(e); t > k; t = t / k | 0)
+    n = j(t % k) + n;
+  return (j(t % k) + n).replace(T, "$1-$2");
+}
+var V;
+var F = 5381;
+var M = function(e, t) {
+  for (var n = t.length; n; )
+    e = 33 * e ^ t.charCodeAt(--n);
+  return e;
+};
+var $ = function(e) {
+  return M(F, e);
+};
+function z(e) {
+  return x($(e) >>> 0);
+}
+function B(e) {
+  return "string" == typeof e && e || e.displayName || e.name || "Component";
+}
+function L(e) {
+  return "string" == typeof e && e.charAt(0) === e.charAt(0).toLowerCase();
+}
+var G = "function" == typeof Symbol && Symbol.for;
+var Y = G ? Symbol.for("react.memo") : 60115;
+var W = G ? Symbol.for("react.forward_ref") : 60112;
+var q = { childContextTypes: true, contextType: true, contextTypes: true, defaultProps: true, displayName: true, getDefaultProps: true, getDerivedStateFromError: true, getDerivedStateFromProps: true, mixins: true, propTypes: true, type: true };
+var H = { name: true, length: true, prototype: true, caller: true, callee: true, arguments: true, arity: true };
+var U = { $$typeof: true, compare: true, defaultProps: true, displayName: true, propTypes: true, type: true };
+var J = ((V = {})[W] = { $$typeof: true, render: true, defaultProps: true, displayName: true, propTypes: true }, V[Y] = U, V);
+function X(e) {
+  return ("type" in (t = e) && t.type.$$typeof) === Y ? U : "$$typeof" in e ? J[e.$$typeof] : q;
+  var t;
+}
+var Z = Object.defineProperty;
+var K = Object.getOwnPropertyNames;
+var Q = Object.getOwnPropertySymbols;
+var ee = Object.getOwnPropertyDescriptor;
+var te = Object.getPrototypeOf;
+var ne = Object.prototype;
+function oe(e, t, n) {
+  if ("string" != typeof t) {
+    if (ne) {
+      var o2 = te(t);
+      o2 && o2 !== ne && oe(e, o2, n);
+    }
+    var r2 = K(t);
+    Q && (r2 = r2.concat(Q(t)));
+    for (var s2 = X(e), i2 = X(t), a2 = 0; a2 < r2.length; ++a2) {
+      var c2 = r2[a2];
+      if (!(c2 in H || n && n[c2] || i2 && c2 in i2 || s2 && c2 in s2)) {
+        var l2 = ee(t, c2);
+        try {
+          Z(e, c2, l2);
+        } catch (e2) {
+        }
+      }
+    }
+  }
+  return e;
+}
+function re(e) {
+  return "function" == typeof e;
+}
+function se(e) {
+  return "object" == typeof e && "styledComponentId" in e;
+}
+function ie(e, t) {
+  return e && t ? "".concat(e, " ").concat(t) : e || t || "";
+}
+function ae(e, t) {
+  if (0 === e.length)
+    return "";
+  for (var n = e[0], o2 = 1; o2 < e.length; o2++)
+    n += t ? t + e[o2] : e[o2];
+  return n;
+}
+function ce(e) {
+  return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
+}
+function le(e, t, n) {
+  if (void 0 === n && (n = false), !n && !ce(e) && !Array.isArray(e))
+    return t;
+  if (Array.isArray(t))
+    for (var o2 = 0; o2 < t.length; o2++)
+      e[o2] = le(e[o2], t[o2]);
+  else if (ce(t))
+    for (var o2 in t)
+      e[o2] = le(e[o2], t[o2]);
+  return e;
+}
+function ue(e, t) {
+  Object.defineProperty(e, "toString", { value: t });
+}
+var pe = true ? { 1: "Cannot create styled-component for component: %s.\n\n", 2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n", 3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n", 4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n", 5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n", 6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n", 7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n', 8: 'ThemeProvider: Please make your "theme" prop an object.\n\n', 9: "Missing document `<head>`\n\n", 10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n", 11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n", 12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n", 13: "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n", 14: 'ThemeProvider: "theme" prop is required.\n\n', 15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n", 16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n", 17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n", 18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`" } : {};
+function de() {
+  for (var e = [], t = 0; t < arguments.length; t++)
+    e[t] = arguments[t];
+  for (var n = e[0], o2 = [], r2 = 1, s2 = e.length; r2 < s2; r2 += 1)
+    o2.push(e[r2]);
+  return o2.forEach(function(e2) {
+    n = n.replace(/%[a-z]/, e2);
+  }), n;
+}
+function he(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++)
+    n[o2 - 1] = arguments[o2];
+  return false ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(de.apply(void 0, __spreadArray([pe[t]], n, false)).trim());
+}
+var fe = function() {
+  function e(e2) {
+    this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2;
+  }
+  return e.prototype.indexOfGroup = function(e2) {
+    for (var t = 0, n = 0; n < e2; n++)
+      t += this.groupSizes[n];
+    return t;
+  }, e.prototype.insertRules = function(e2, t) {
+    if (e2 >= this.groupSizes.length) {
+      for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; )
+        if ((r2 <<= 1) < 0)
+          throw he(16, "".concat(e2));
+      this.groupSizes = new Uint32Array(r2), this.groupSizes.set(n), this.length = r2;
+      for (var s2 = o2; s2 < r2; s2++)
+        this.groupSizes[s2] = 0;
+    }
+    for (var i2 = this.indexOfGroup(e2 + 1), a2 = (s2 = 0, t.length); s2 < a2; s2++)
+      this.tag.insertRule(i2, t[s2]) && (this.groupSizes[e2]++, i2++);
+  }, e.prototype.clearGroup = function(e2) {
+    if (e2 < this.length) {
+      var t = this.groupSizes[e2], n = this.indexOfGroup(e2), o2 = n + t;
+      this.groupSizes[e2] = 0;
+      for (var r2 = n; r2 < o2; r2++)
+        this.tag.deleteRule(n);
+    }
+  }, e.prototype.getGroup = function(e2) {
+    var t = "";
+    if (e2 >= this.length || 0 === this.groupSizes[e2])
+      return t;
+    for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s2 = o2; s2 < r2; s2++)
+      t += "".concat(this.tag.getRule(s2)).concat(g);
+    return t;
+  }, e;
+}();
+var me = /* @__PURE__ */ new Map();
+var ye = /* @__PURE__ */ new Map();
+var ve = 1;
+var ge = function(e) {
+  if (me.has(e))
+    return me.get(e);
+  for (; ye.has(ve); )
+    ve++;
+  var t = ve++;
+  if ((0 | t) < 0 || t > 1073741824)
+    throw he(16, "".concat(t));
+  return me.set(e, t), ye.set(t, e), t;
+};
+var Se = function(e, t) {
+  ve = t + 1, me.set(e, t), ye.set(t, e);
+};
+var we = "style[".concat(f, "][").concat(y, '="').concat(v, '"]');
+var be = new RegExp("^".concat(f, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'));
+var Ee = function(e, t, n) {
+  for (var o2, r2 = n.split(","), s2 = 0, i2 = r2.length; s2 < i2; s2++)
+    (o2 = r2[s2]) && e.registerName(t, o2);
+};
+var Ne = function(e, t) {
+  for (var n, o2 = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(g), r2 = [], s2 = 0, i2 = o2.length; s2 < i2; s2++) {
+    var a2 = o2[s2].trim();
+    if (a2) {
+      var c2 = a2.match(be);
+      if (c2) {
+        var l2 = 0 | parseInt(c2[1], 10), u2 = c2[2];
+        0 !== l2 && (Se(u2, l2), Ee(e, u2, c2[3]), e.getTag().insertRules(l2, r2)), r2.length = 0;
+      } else
+        r2.push(a2);
+    }
+  }
+};
+function Pe() {
+  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
+}
+var _e = function(e) {
+  var t = document.head, n = e || t, o2 = document.createElement("style"), r2 = function(e2) {
+    var t2 = Array.from(e2.querySelectorAll("style[".concat(f, "]")));
+    return t2[t2.length - 1];
+  }(n), s2 = void 0 !== r2 ? r2.nextSibling : null;
+  o2.setAttribute(f, m), o2.setAttribute(y, v);
+  var i2 = Pe();
+  return i2 && o2.setAttribute("nonce", i2), n.insertBefore(o2, s2), o2;
+};
+var Ce = function() {
+  function e(e2) {
+    this.element = _e(e2), this.element.appendChild(document.createTextNode("")), this.sheet = function(e3) {
+      if (e3.sheet)
+        return e3.sheet;
+      for (var t = document.styleSheets, n = 0, o2 = t.length; n < o2; n++) {
+        var r2 = t[n];
+        if (r2.ownerNode === e3)
+          return r2;
+      }
+      throw he(17);
+    }(this.element), this.length = 0;
+  }
+  return e.prototype.insertRule = function(e2, t) {
+    try {
+      return this.sheet.insertRule(t, e2), this.length++, true;
+    } catch (e3) {
+      return false;
+    }
+  }, e.prototype.deleteRule = function(e2) {
+    this.sheet.deleteRule(e2), this.length--;
+  }, e.prototype.getRule = function(e2) {
+    var t = this.sheet.cssRules[e2];
+    return t && t.cssText ? t.cssText : "";
+  }, e;
+}();
+var Ie = function() {
+  function e(e2) {
+    this.element = _e(e2), this.nodes = this.element.childNodes, this.length = 0;
+  }
+  return e.prototype.insertRule = function(e2, t) {
+    if (e2 <= this.length && e2 >= 0) {
+      var n = document.createTextNode(t);
+      return this.element.insertBefore(n, this.nodes[e2] || null), this.length++, true;
+    }
+    return false;
+  }, e.prototype.deleteRule = function(e2) {
+    this.element.removeChild(this.nodes[e2]), this.length--;
+  }, e.prototype.getRule = function(e2) {
+    return e2 < this.length ? this.nodes[e2].textContent : "";
+  }, e;
+}();
+var Ae = function() {
+  function e(e2) {
+    this.rules = [], this.length = 0;
+  }
+  return e.prototype.insertRule = function(e2, t) {
+    return e2 <= this.length && (this.rules.splice(e2, 0, t), this.length++, true);
+  }, e.prototype.deleteRule = function(e2) {
+    this.rules.splice(e2, 1), this.length--;
+  }, e.prototype.getRule = function(e2) {
+    return e2 < this.length ? this.rules[e2] : "";
+  }, e;
+}();
+var Oe = S;
+var De = { isServer: !S, useCSSOMInjection: !w };
+var Re = function() {
+  function e(e2, n, o2) {
+    void 0 === e2 && (e2 = C), void 0 === n && (n = {});
+    var r2 = this;
+    this.options = __assign(__assign({}, De), e2), this.gs = n, this.names = new Map(o2), this.server = !!e2.isServer, !this.server && S && Oe && (Oe = false, function(e3) {
+      for (var t = document.querySelectorAll(we), n2 = 0, o3 = t.length; n2 < o3; n2++) {
+        var r3 = t[n2];
+        r3 && r3.getAttribute(f) !== m && (Ne(e3, r3), r3.parentNode && r3.parentNode.removeChild(r3));
+      }
+    }(this)), ue(this, function() {
+      return function(e3) {
+        for (var t = e3.getTag(), n2 = t.length, o3 = "", r3 = function(n3) {
+          var r4 = function(e4) {
+            return ye.get(e4);
+          }(n3);
+          if (void 0 === r4)
+            return "continue";
+          var s3 = e3.names.get(r4), i2 = t.getGroup(n3);
+          if (void 0 === s3 || 0 === i2.length)
+            return "continue";
+          var a2 = "".concat(f, ".g").concat(n3, '[id="').concat(r4, '"]'), c2 = "";
+          void 0 !== s3 && s3.forEach(function(e4) {
+            e4.length > 0 && (c2 += "".concat(e4, ","));
+          }), o3 += "".concat(i2).concat(a2, '{content:"').concat(c2, '"}').concat(g);
+        }, s2 = 0; s2 < n2; s2++)
+          r3(s2);
+        return o3;
+      }(r2);
+    });
+  }
+  return e.registerId = function(e2) {
+    return ge(e2);
+  }, e.prototype.reconstructWithOptions = function(n, o2) {
+    return void 0 === o2 && (o2 = true), new e(__assign(__assign({}, this.options), n), this.gs, o2 && this.names || void 0);
+  }, e.prototype.allocateGSInstance = function(e2) {
+    return this.gs[e2] = (this.gs[e2] || 0) + 1;
+  }, e.prototype.getTag = function() {
+    return this.tag || (this.tag = (e2 = function(e3) {
+      var t = e3.useCSSOMInjection, n = e3.target;
+      return e3.isServer ? new Ae(n) : t ? new Ce(n) : new Ie(n);
+    }(this.options), new fe(e2)));
+    var e2;
+  }, e.prototype.hasNameForId = function(e2, t) {
+    return this.names.has(e2) && this.names.get(e2).has(t);
+  }, e.prototype.registerName = function(e2, t) {
+    if (ge(e2), this.names.has(e2))
+      this.names.get(e2).add(t);
+    else {
+      var n = /* @__PURE__ */ new Set();
+      n.add(t), this.names.set(e2, n);
+    }
+  }, e.prototype.insertRules = function(e2, t, n) {
+    this.registerName(e2, t), this.getTag().insertRules(ge(e2), n);
+  }, e.prototype.clearNames = function(e2) {
+    this.names.has(e2) && this.names.get(e2).clear();
+  }, e.prototype.clearRules = function(e2) {
+    this.getTag().clearGroup(ge(e2)), this.clearNames(e2);
+  }, e.prototype.clearTag = function() {
+    this.tag = void 0;
+  }, e;
+}();
+var Te = /&/g;
+var ke = /^\s*\/\/.*$/gm;
+function je(e, t) {
+  return e.map(function(e2) {
+    return "rule" === e2.type && (e2.value = "".concat(t, " ").concat(e2.value), e2.value = e2.value.replaceAll(",", ",".concat(t, " ")), e2.props = e2.props.map(function(e3) {
+      return "".concat(t, " ").concat(e3);
+    })), Array.isArray(e2.children) && "@keyframes" !== e2.type && (e2.children = je(e2.children, t)), e2;
+  });
+}
+function xe(e) {
+  var t, n, o2, r2 = void 0 === e ? C : e, s2 = r2.options, i2 = void 0 === s2 ? C : s2, a2 = r2.plugins, c2 = void 0 === a2 ? _ : a2, l2 = function(e2, o3, r3) {
+    return r3.startsWith(n) && r3.endsWith(n) && r3.replaceAll(n, "").length > 0 ? ".".concat(t) : e2;
+  }, u2 = c2.slice();
+  u2.push(function(e2) {
+    e2.type === RULESET && e2.value.includes("&") && (e2.props[0] = e2.props[0].replace(Te, n).replace(o2, l2));
+  }), i2.prefix && u2.push(prefixer), u2.push(stringify);
+  var p2 = function(e2, r3, s3, a3) {
+    void 0 === r3 && (r3 = ""), void 0 === s3 && (s3 = ""), void 0 === a3 && (a3 = "&"), t = a3, n = r3, o2 = new RegExp("\\".concat(n, "\\b"), "g");
+    var c3 = e2.replace(ke, ""), l3 = compile(s3 || r3 ? "".concat(s3, " ").concat(r3, " { ").concat(c3, " }") : c3);
+    i2.namespace && (l3 = je(l3, i2.namespace));
+    var p3 = [];
+    return serialize(l3, middleware(u2.concat(rulesheet(function(e3) {
+      return p3.push(e3);
+    })))), p3;
+  };
+  return p2.hash = c2.length ? c2.reduce(function(e2, t2) {
+    return t2.name || he(15), M(e2, t2.name);
+  }, F).toString() : "", p2;
+}
+var Ve = new Re();
+var Fe = xe();
+var Me = import_react6.default.createContext({ shouldForwardProp: void 0, styleSheet: Ve, stylis: Fe });
+var $e = Me.Consumer;
+var ze = import_react6.default.createContext(void 0);
+function Be() {
+  return (0, import_react6.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 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() {
+    return xe({ options: { namespace: e.namespace, prefix: e.enableVendorPrefixes }, plugins: n });
+  }, [e.enableVendorPrefixes, e.namespace, n]);
+  (0, import_react6.useEffect)(function() {
+    (0, import_shallowequal.default)(n, e.stylisPlugins) || r2(e.stylisPlugins);
+  }, [e.stylisPlugins]);
+  var d = (0, import_react6.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));
+}
+var Ge = function() {
+  function e(e2, t) {
+    var n = this;
+    this.inject = function(e3, t2) {
+      void 0 === t2 && (t2 = Fe);
+      var o2 = n.name + t2.hash;
+      e3.hasNameForId(n.id, o2) || e3.insertRules(n.id, o2, t2(n.rules, o2, "@keyframes"));
+    }, this.name = e2, this.id = "sc-keyframes-".concat(e2), this.rules = t, ue(this, function() {
+      throw he(12, String(n.name));
+    });
+  }
+  return e.prototype.getName = function(e2) {
+    return void 0 === e2 && (e2 = Fe), this.name + e2.hash;
+  }, e;
+}();
+var Ye = function(e) {
+  return e >= "A" && e <= "Z";
+};
+function We(e) {
+  for (var t = "", n = 0; n < e.length; n++) {
+    var o2 = e[n];
+    if (1 === n && "-" === o2 && "-" === e[0])
+      return e;
+    Ye(o2) ? t += "-" + o2.toLowerCase() : t += o2;
+  }
+  return t.startsWith("ms-") ? "-" + t : t;
+}
+var qe = function(e) {
+  return null == e || false === e || "" === e;
+};
+var He = function(t) {
+  var n, o2, r2 = [];
+  for (var s2 in t) {
+    var i2 = t[s2];
+    t.hasOwnProperty(s2) && !qe(i2) && (Array.isArray(i2) && i2.isCss || re(i2) ? r2.push("".concat(We(s2), ":"), i2, ";") : ce(i2) ? r2.push.apply(r2, __spreadArray(__spreadArray(["".concat(s2, " {")], He(i2), false), ["}"], false)) : r2.push("".concat(We(s2), ": ").concat((n = s2, null == (o2 = i2) || "boolean" == typeof o2 || "" === o2 ? "" : "number" != typeof o2 || 0 === o2 || n in emotion_unitless_esm_default || n.startsWith("--") ? String(o2).trim() : "".concat(o2, "px")), ";")));
+  }
+  return r2;
+};
+function Ue(e, t, n, o2) {
+  if (qe(e))
+    return [];
+  if (se(e))
+    return [".".concat(e.styledComponentId)];
+  if (re(e)) {
+    if (!re(s2 = e) || s2.prototype && s2.prototype.isReactComponent || !t)
+      return [e];
+    var r2 = e(t);
+    return "object" != typeof r2 || Array.isArray(r2) || r2 instanceof Ge || ce(r2) || null === r2 || console.error("".concat(B(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), Ue(r2, t, n, o2);
+  }
+  var s2;
+  return e instanceof Ge ? n ? (e.inject(n, o2), [e.getName(o2)]) : [e] : ce(e) ? He(e) : Array.isArray(e) ? Array.prototype.concat.apply(_, e.map(function(e2) {
+    return Ue(e2, t, n, o2);
+  })) : [e.toString()];
+}
+function Je(e) {
+  for (var t = 0; t < e.length; t += 1) {
+    var n = e[t];
+    if (re(n) && !se(n))
+      return false;
+  }
+  return true;
+}
+var Xe = $(v);
+var Ze = function() {
+  function e(e2, t, n) {
+    this.rules = e2, this.staticRulesId = "", this.isStatic = false, this.componentId = t, this.baseHash = M(Xe, t), this.baseStyle = n, Re.registerId(t);
+  }
+  return e.prototype.generateAndInjectStyles = function(e2, t, n) {
+    var o2 = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t, n) : "";
+    if (this.isStatic && !n.hash)
+      if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId))
+        o2 = ie(o2, this.staticRulesId);
+      else {
+        var r2 = ae(Ue(this.rules, e2, t, n)), s2 = x(M(this.baseHash, r2) >>> 0);
+        if (!t.hasNameForId(this.componentId, s2)) {
+          var i2 = n(r2, ".".concat(s2), void 0, this.componentId);
+          t.insertRules(this.componentId, s2, i2);
+        }
+        o2 = ie(o2, s2), this.staticRulesId = s2;
+      }
+    else {
+      for (var a2 = M(this.baseHash, n.hash), c2 = "", l2 = 0; l2 < this.rules.length; l2++) {
+        var u2 = this.rules[l2];
+        if ("string" == typeof u2)
+          c2 += u2, a2 = M(a2, u2);
+        else if (u2) {
+          var p2 = ae(Ue(u2, e2, t, n));
+          a2 = M(a2, p2 + l2), c2 += p2;
+        }
+      }
+      if (c2) {
+        var d = x(a2 >>> 0);
+        t.hasNameForId(this.componentId, d) || t.insertRules(this.componentId, d, n(c2, ".".concat(d), void 0, this.componentId)), o2 = ie(o2, d);
+      }
+    }
+    return o2;
+  }, e;
+}();
+var Ke = import_react6.default.createContext(void 0);
+var Qe = Ke.Consumer;
+var nt = {};
+var ot = /* @__PURE__ */ new Set();
+function rt(e, r2, s2) {
+  var i2 = se(e), a2 = e, c2 = !L(e), p2 = r2.attrs, d = void 0 === p2 ? _ : p2, h = r2.componentId, f2 = void 0 === h ? function(e2, t) {
+    var n = "string" != typeof e2 ? "sc" : R(e2);
+    nt[n] = (nt[n] || 0) + 1;
+    var o2 = "".concat(n, "-").concat(z(v + n + nt[n]));
+    return t ? "".concat(t, "-").concat(o2) : o2;
+  }(r2.displayName, r2.parentComponentId) : h, m2 = r2.displayName, y2 = void 0 === m2 ? function(e2) {
+    return L(e2) ? "styled.".concat(e2) : "Styled(".concat(B(e2), ")");
+  }(e) : m2, g2 = r2.displayName && r2.componentId ? "".concat(R(r2.displayName), "-").concat(r2.componentId) : r2.componentId || f2, S2 = i2 && a2.attrs ? a2.attrs.concat(d).filter(Boolean) : d, w2 = r2.shouldForwardProp;
+  if (i2 && a2.shouldForwardProp) {
+    var b = a2.shouldForwardProp;
+    if (r2.shouldForwardProp) {
+      var E2 = r2.shouldForwardProp;
+      w2 = function(e2, t) {
+        return b(e2, t) && E2(e2, t);
+      };
+    } else
+      w2 = b;
+  }
+  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 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;
+          for (var c4 in a4)
+            s4[c4] = "className" === c4 ? ie(s4[c4], a4[c4]) : "style" === c4 ? __assign(__assign({}, s4[c4]), a4[c4]) : a4[c4];
+        }
+        return n.className && (s4.className = ie(s4.className, n.className)), s4;
+      }(i3, r4, v2), S3 = g3.as || h2, w3 = {};
+      for (var b2 in g3)
+        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;
+      }(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);
+    }(D2, e2, r3);
+  }
+  O2.displayName = y2;
+  var D2 = import_react6.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) {
+    this._foldedDefaultProps = i2 ? function(e3) {
+      for (var t = [], n = 1; n < arguments.length; n++)
+        t[n - 1] = arguments[n];
+      for (var o2 = 0, r3 = t; o2 < r3.length; o2++)
+        le(e3, r3[o2], true);
+      return e3;
+    }({}, a2.defaultProps, e2) : e2;
+  } }), P(y2, g2), D2.warnTooManyClasses = /* @__PURE__ */ function(e2, t) {
+    var n = {}, o2 = false;
+    return function(r3) {
+      if (!o2 && (n[r3] = true, Object.keys(n).length >= 200)) {
+        var s3 = t ? ' with the id of "'.concat(t, '"') : "";
+        console.warn("Over ".concat(200, " classes were generated for component ").concat(e2).concat(s3, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), o2 = true, n = {};
+      }
+    };
+  }(y2, g2), ue(D2, function() {
+    return ".".concat(D2.styledComponentId);
+  }), c2 && oe(D2, e, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), D2;
+}
+function st(e, t) {
+  for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1)
+    n.push(t[o2], e[o2 + 1]);
+  return n;
+}
+var it = function(e) {
+  return Object.assign(e, { isCss: true });
+};
+function at(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++)
+    n[o2 - 1] = arguments[o2];
+  if (re(t) || ce(t))
+    return it(Ue(st(_, __spreadArray([t], n, true))));
+  var r2 = t;
+  return 0 === n.length && 1 === r2.length && "string" == typeof r2[0] ? Ue(r2) : it(Ue(st(r2, n)));
+}
+function ct(n, o2, r2) {
+  if (void 0 === r2 && (r2 = C), !o2)
+    throw he(1, o2);
+  var s2 = function(t) {
+    for (var s3 = [], i2 = 1; i2 < arguments.length; i2++)
+      s3[i2 - 1] = arguments[i2];
+    return n(o2, r2, at.apply(void 0, __spreadArray([t], s3, false)));
+  };
+  return s2.attrs = function(e) {
+    return ct(n, o2, __assign(__assign({}, r2), { attrs: Array.prototype.concat(r2.attrs, e).filter(Boolean) }));
+  }, s2.withConfig = function(e) {
+    return ct(n, o2, __assign(__assign({}, r2), e));
+  }, s2;
+}
+var lt = function(e) {
+  return ct(rt, e);
+};
+var ut = lt;
+A.forEach(function(e) {
+  ut[e] = lt(e);
+});
+var pt = function() {
+  function e(e2, t) {
+    this.rules = e2, this.componentId = t, this.isStatic = Je(e2), Re.registerId(this.componentId + 1);
+  }
+  return e.prototype.createStyles = function(e2, t, n, o2) {
+    var r2 = o2(ae(Ue(this.rules, t, n, o2)), ""), s2 = this.componentId + e2;
+    n.insertRules(s2, s2, r2);
+  }, e.prototype.removeStyles = function(e2, t) {
+    t.clearRules(this.componentId + e2);
+  }, e.prototype.renderStyles = function(e2, t, n, o2) {
+    e2 > 2 && Re.registerId(this.componentId + e2), this.removeStyles(e2, n), this.createStyles(e2, t, n, o2);
+  }, e;
+}();
+var mt = function() {
+  function e() {
+    var e2 = this;
+    this._emitSheetCSS = function() {
+      var t = e2.instance.toString(), n = Pe(), o2 = ae([n && 'nonce="'.concat(n, '"'), "".concat(f, '="true"'), "".concat(y, '="').concat(v, '"')].filter(Boolean), " ");
+      return "<style ".concat(o2, ">").concat(t, "</style>");
+    }, this.getStyleTags = function() {
+      if (e2.sealed)
+        throw he(2);
+      return e2._emitSheetCSS();
+    }, this.getStyleElement = function() {
+      var n;
+      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" }))];
+    }, this.seal = function() {
+      e2.sealed = true;
+    }, this.instance = new Re({ isServer: true }), this.sealed = false;
+  }
+  return e.prototype.collectStyles = function(e2) {
+    if (this.sealed)
+      throw he(2);
+    return import_react6.default.createElement(Le, { sheet: this.instance }, e2);
+  }, e.prototype.interleaveWithNodeStream = function(e2) {
+    throw he(3);
+  }, e;
+}();
+"undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
+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" })
+] }))`
+  fill: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  &:hover {
+    fill: rgba(0, 0, 0, 1);
+  }
+  ${(props) => props.disabled ? at`
+          pointer-events: none;
+          opacity: 0.6;
+        ` : ""}
+
+  ${(props) => props.$solid && at`
+      fill: #000;
+    `}
+`;
+
+// src/components/TourNormalAnnotationEditor.tsx
+var import_react7 = require("react");
+var import_react_iiif_vault15 = 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)();
+  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
+    );
+  }) });
+}
+
+// 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");
+function HTMLAnnotationEditor() {
+  const annotation = (0, import_react_iiif_vault14.useAnnotation)();
+  const creator = (0, import_shell13.useInlineCreator)();
+  const bodies = annotation?.body || [];
+  const editor = (0, import_shell13.useGenericEditor)(annotation);
+  if (!annotation) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    bodies.map((body, n) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        AnnotationBodyEditor,
+        {
+          resourceId: body.id,
+          onRemove: () => editor.annotation.body.deleteAtIndex(n)
+        },
+        n
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_components12.ActionButton,
+      {
+        primary: true,
+        onPress: () => {
+          creator.create(
+            "@manifest-editor/html-body-creator",
+            { language: "en", value: "" },
+            {
+              targetType: "ContentResource",
+              parent: {
+                property: "body",
+                resource: {
+                  id: annotation.id,
+                  type: "Annotation"
+                }
+              },
+              initialData: {}
+            }
+          );
+        },
+        children: "Add new translation"
+      }
+    ) })
+  ] });
+}
+
+// src/components/TourNormalAnnotationEditor.tsx
+var import_jsx_runtime25 = 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 target = editor.annotation.target.getParsedSelector();
+  const { requestAnnotation, isPending, cancelRequest, busy } = (0, import_shell14.useRequestAnnotation)({
+    onSuccess: (resp) => {
+      if (resp.target) {
+        editor.annotation.target.setSelector(resp.target);
+      }
+    }
+  });
+  function requestAnnotationFromTarget() {
+    if (target) {
+      if (target.type === "SvgSelector") {
+        return requestAnnotation({
+          type: "polygon",
+          open: false,
+          points: target.points
+        });
+      }
+      if (target.type === "PointSelector") {
+        return requestAnnotation({
+          type: "polygon",
+          open: true,
+          points: target.points
+        });
+      }
+      if (target.type === "BoxSelector") {
+        const p2 = target.spatial;
+        return requestAnnotation({
+          type: "polygon",
+          open: false,
+          points: [
+            [p2.x, p2.y],
+            [p2.x + p2.width, p2.y],
+            [p2.x + p2.width, p2.y + p2.height],
+            [p2.x, p2.y + p2.height]
+          ]
+        });
+      }
+    }
+    return requestAnnotation({ type: "polygon", open: true, points: [] });
+  }
+  const deleteAnnotation = () => {
+    if (annotation && confirm("Are you sure you want to delete this annotation?")) {
+      const index = pageEditor.structural.items.getWithoutTracking().findIndex((item) => item.id === annotation.id);
+      pageEditor.structural.items.deleteAtIndex(index);
+    }
+  };
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.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_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)(
+            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)(
+            import_components13.ActionButton,
+            {
+              isDisabled: busy,
+              onPress: requestAnnotationFromTarget,
+              children: "Edit region"
+            }
+          ) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -bottom-5 h-5 border-l-2 border-gray-300 w-0" })
+      ]
+    }
+  );
+}
+
+// src/components/TourPaintingAnnotationEditor.tsx
+var import_components15 = require("@manifest-editor/components");
+var import_editors9 = 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");
+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 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)(
+    "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_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,
+            {
+              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,
+            {
+              className: "text-gray-500 text-sm bg-white line-clamp-2",
+              as: "div",
+              children: annotation?.label
+            }
+          )
+        ] }) }) }),
+        /* @__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" })
+      ]
+    }
+  );
+}
+
+// src/components/TourAnnotationEditor.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function TourAnnotationEditor() {
+  const [annotation, { annotationTarget, highlightProps }] = (0, import_editors10.useAnnotationInfo)();
+  const resource = (0, import_react9.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)(
+      TourPaintingAnnotationEditor,
+      {
+        originalAnnotationId: annotation?.id,
+        highlightProps
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_shell16.ResourceEditingProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TourNormalAnnotationEditor, { highlightProps }) });
+}
+
+// src/components/TourAnnotationPageEditor.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function TourAnnotationPageEditor({
+  reorderable = false
+}) {
+  const page = (0, import_react_iiif_vault18.useAnnotationPage)();
+  const editor = (0, import_shell17.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_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_editors11.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, {}) })
+    }
+  ) });
+}
+
+// src/right-panels/ExhibitionTourSteps.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var exhibitionTourSteps = {
+  id: "@exhibition/tour-steps",
+  supports: {
+    edit: true,
+    properties: ["annotations"],
+    resourceTypes: ["Canvas"],
+    custom: ({ resource }, vault) => {
+      const full = vault.get(resource);
+      const stats = getGridStats(full.behavior);
+      if (full.type === "Canvas" && !stats.isInfo && !stats.isBottom) {
+        return true;
+      }
+      return false;
+    }
+  },
+  label: "Tour steps",
+  component: () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ExhibitionRightPanelOptionalPage, {})
+};
+function ExhibitionRightPanelOptionalPage() {
+  const canvas = (0, import_react_iiif_vault19.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_runtime29.jsx)(ExhibitionRightPanel3, {});
+}
+function PromptCreationOfTourSteps() {
+  const canvas = (0, import_react_iiif_vault19.useCanvas)();
+  const creator = (0, import_shell18.useInlineCreator)();
+  const createEmptyAnnotationPage = () => {
+    if (!canvas)
+      return;
+    creator.create(
+      "@manifest-editor/empty-annotation-page",
+      {
+        label: { en: ["Tour steps"] }
+      },
+      {
+        target: {
+          id: canvas.id,
+          type: "Canvas"
+        },
+        targetType: "AnnotationPage",
+        parent: {
+          property: "annotations",
+          resource: {
+            id: canvas.id,
+            type: "Canvas"
+          }
+        }
+      }
+    );
+  };
+  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)(
+      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",
+        onPress: () => createEmptyAnnotationPage(),
+        children: "Create Tour"
+      }
+    )
+  ] });
+}
+function ExhibitionRightPanel3() {
+  const canvas = (0, import_react_iiif_vault19.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)({
+    onSuccess: (resp) => {
+      if (!resp.cancelled && resp.target && firstAnnotationPage) {
+        creator.create(
+          "@manifest-editor/html-annotation",
+          {
+            label: { en: ["Tour step"] },
+            body: { en: ["<h2>New step</h2><p>Description</p>"] },
+            motivation: "describing"
+          },
+          {
+            target: {
+              id: canvas.id,
+              type: "Canvas"
+            },
+            targetType: "Annotation",
+            parent: {
+              property: "items",
+              resource: {
+                id: firstAnnotationPage.id,
+                type: "AnnotationPage"
+              }
+            },
+            initialData: {
+              selector: resp.target.type === "SvgSelector" ? {
+                type: "polygon",
+                shape: resp.polygon
+              } : resp.boundingBox
+            }
+          }
+        );
+      }
+    }
+  });
+  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_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" })
+    ] }),
+    /* @__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)(
+            import_react_aria_components2.Button,
+            {
+              onPress: cancelRequest,
+              className: "text-black/80 rounded-sm p-3",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_react_aria_components2.Button,
+            {
+              onPress: completeRequest,
+              className: "bg-me-100 text-me-500 rounded-sm p-3",
+              children: "Save changes"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_react_aria_components2.Button,
+          {
+            onPress: () => requestAnnotation({ type: "polygon" }),
+            className: "border 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",
+            children: "+ Add new step"
+          }
+        ) : 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,
+          {
+            painting: itemsAnnotationPage,
+            page: editor.ref(),
+            canvasId: canvas.id
+          }
+        )
+      ] }) : null
+    ] }) })
+  ] }) });
+}
+
+// src/index.tsx
+var exhibitionEditorPreset = (0, import_shell19.extendApp)(
+  (0, import_shell19.mapApp)(ManifestPreset),
+  {
+    id: "exhibition-editor",
+    title: "Exhibition Editor",
+    project: true,
+    projectType: "Manifest"
+  },
+  {
+    config: {
+      editorConfig: {
+        Canvas: {
+          hideTabs: [
+            "@manifest-editor/overview",
+            "@manifest-editor/technical-properties",
+            "@manifest-editor/linking-properties",
+            "@manifest-editor/nav-place-editor",
+            "@manifest-editor/canvas-structural",
+            "@manifest-editor/descriptive-properties",
+            "@manifest-editor/overview-canvas-editor",
+            "@manifest-editor/metadata"
+          ]
+        }
+      }
+    },
+    leftPanels: [
+      //
+      exhibitionGridLeftPanel
+    ],
+    annotations: [
+      //
+      tourStepAnnotations
+    ],
+    leftPanelIds: ["left-panel-manifest"],
+    canvasEditors: [
+      //
+      imageBlockEditor,
+      youtubeMainEdtior,
+      infoBlockEditor
+    ],
+    editors: [exhibitionCanvasEditor, customBehaviourEditor, exhibitionSummaryEdtior, exhibitionTourSteps],
+    creators: [
+      infoBoxCreator,
+      imageSlideBottomCreator,
+      imageSlideCreator,
+      imageSlideLeftCreator,
+      imageSlideRightCreator,
+      youtubeSlideCreator
+    ]
+  }
+);