@manifest-editor/shell 1.3.0 → 1.4.0

package/dist/index.js

@@ -464,6 +464,7 @@ import { createContext as createContext5, memo, useContext as useContext5, useEf
 
 // src/PreviewContext/PreviewContext.hooks.ts
 import { useMemo as useMemo4 } from "react";
+import { useVault } from "react-iiif-vault";
 
 // src/PreviewContext/previews/ExternalManifestUrlPreview.ts
 var ExternalManifestUrlPreview = class {
@@ -637,7 +638,6 @@ var IIIFPreviewService = class {
 };
 
 // src/PreviewContext/PreviewContext.hooks.ts
-import { useVault } from "react-iiif-vault";
 function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
   const resource = useAppResource();
   const instanceId = useAppResourceInstance();
@@ -709,8 +709,8 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
   async function selectPreview(id) {
     const selectedHandler = handlerMap[id];
     if (selectedHandler && instanceId) {
-      await activatePreview(id);
       dispatch({ type: "selectPreview", payload: id });
+      await activatePreview(id);
     }
   }
   async function getPreviewLink() {
@@ -762,13 +762,13 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
             dispatch({ type: "activatePreview", payload: contextualPreview.id });
           } else {
             Object.assign(context, existing?.data || {});
-            dispatch({ type: "activatePreview", payload: id });
+            dispatch({ type: "activatePreview", payload: existing.id });
           }
         }
         const created = await selectedHandler.createPreview(instanceId, resource, vault, context);
         if (created) {
           previewActions.setPreview(created);
-          dispatch({ type: "activatePreview", payload: id });
+          dispatch({ type: "activatePreview", payload: created.id });
         }
       }
     }
@@ -1083,20 +1083,13 @@ var ButtonEmpty = styled3.div`
 
 // src/PreviewButton/PreviewButton.tsx
 import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
-function PreviewButton({
-  downloadEnabled,
-  fileName
-}) {
+function PreviewButton({ downloadEnabled, fileName }) {
   const { active, configs, actions, selected } = usePreviewContext();
   const vault = useVault2();
   const config = useConfig();
   const resource = useAppResource();
-  const configsToShow = configs.filter(
-    (c) => c.type === "external-manifest-preview"
-  );
-  const { isOpen, buttonProps, itemProps } = useDropdownMenu(
-    configsToShow.length
-  );
+  const configsToShow = configs.filter((c) => c.type === "external-manifest-preview");
+  const { isOpen, buttonProps, itemProps } = useDropdownMenu(configsToShow.length);
   if (configsToShow.length === 0) {
     return /* @__PURE__ */ jsx8(ButtonEmpty, { children: "Preview not available" });
   }
@@ -1108,17 +1101,9 @@ function PreviewButton({
         label: "Download manifest",
         getData: () => {
           if (config.export && config.export.version === 2) {
-            return JSON.stringify(
-              vault.toPresentation2(resource),
-              null,
-              2
-            );
+            return JSON.stringify(vault.toPresentation2(resource), null, 2);
           }
-          return JSON.stringify(
-            vault.toPresentation3(resource),
-            null,
-            2
-          );
+          return JSON.stringify(vault.toPresentation3(resource), null, 2);
         }
       }
     ) }) : null,
@@ -1133,7 +1118,6 @@ function PreviewButton({
                 const found = configs.find((c) => c.id === defaultPreviewId);
                 if (found) {
                   actions.selectPreview(found.id);
-                  actions.updatePreviews();
                   return;
                 }
               }
@@ -1148,29 +1132,17 @@ function PreviewButton({
       /* @__PURE__ */ jsx8(MenuContainer, { $open: isOpen, children: configsToShow.map((config2, key) => {
         const inactive = active.indexOf(config2.id) === -1;
         return /* @__PURE__ */ jsxs2(MenuItem, { ...itemProps[key], children: [
-          /* @__PURE__ */ jsx8(
-            MenuItemStatus,
-            {
-              $status: inactive ? "available" : config2.id === selected ? "active" : "configured"
-            }
-          ),
+          /* @__PURE__ */ jsx8(MenuItemStatus, { $status: inactive ? "available" : config2.id === selected ? "active" : "configured" }),
           /* @__PURE__ */ jsx8(
             MenuItemLabel,
             {
               onClick: () => {
                 actions.selectPreview(config2.id);
-                actions.updatePreviews();
               },
               children: config2.label
             }
           ),
-          !inactive ? /* @__PURE__ */ jsx8(
-            MenuItemClose,
-            {
-              onClick: () => actions.deletePreview(config2.id),
-              children: /* @__PURE__ */ jsx8(CloseIcon, {})
-            }
-          ) : null
+          !inactive ? /* @__PURE__ */ jsx8(MenuItemClose, { onClick: () => actions.deletePreview(config2.id), children: /* @__PURE__ */ jsx8(CloseIcon, {}) }) : null
         ] }, config2.id);
       }) })
     ] })
@@ -1626,31 +1598,17 @@ function AtlasStoreProvider({
 
 // src/BaseCreator/BaseCreator.tsx
 import { toRef as toRef3 } from "@iiif/parser";
-import { CreatorGrid } from "@manifest-editor/components";
+import {
+  CreatorGrid,
+  ErrorMessage as ErrorMessage2,
+  GridIcon,
+  IconButton as IconButton2,
+  ModalBackSlot,
+  Spinner
+} from "@manifest-editor/components";
 import {
   matchBasedOnResource as matchBasedOnResource2
 } from "@manifest-editor/creator-api";
-
-// ../ui/madoc/components/icons/Spinner.tsx
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
-function Spinner(props) {
-  return /* @__PURE__ */ jsx13("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ jsxs4("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ jsx13("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ jsx13("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx13(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 18 18",
-        to: "360 18 18",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
-}
-
-// src/BaseCreator/BaseCreator.tsx
 import { Suspense, memo as memo3, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef3, useState as useState5 } from "react";
 import { useVault as useVault4 } from "react-iiif-vault";
 
@@ -1682,11 +1640,11 @@ function useLayoutProvider() {
 import styled6 from "styled-components";
 
 // ../ui/icons/StarIcon.tsx
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-var StarIcon = (props) => /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
-  /* @__PURE__ */ jsx14("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx14("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx14(
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var StarIcon = (props) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
+  /* @__PURE__ */ jsx13("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx13("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx13(
     "path",
     {
       d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
@@ -1696,10 +1654,10 @@ var StarIcon = (props) => /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.o
 ] });
 
 // ../ui/icons/BackIcon.tsx
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var BackIcon = ({ style }) => /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1rem", viewBox: "0 0 24 24", width: "1rem", fill: "#000000", style, children: [
-  /* @__PURE__ */ jsx15("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx15("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var BackIcon = ({ style }) => /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1rem", viewBox: "0 0 24 24", width: "1rem", fill: "#000000", style, children: [
+  /* @__PURE__ */ jsx14("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx14("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
 ] });
 
 // src/Layout/components/ModularPanel.tsx
@@ -1718,13 +1676,13 @@ var PaddedSidebarContainer = styled4.div`
 // src/Layout/components/PanelError.tsx
 import { ErrorMessage } from "@manifest-editor/components";
 import { useState as useState3 } from "react";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function PanelError(props) {
   let error = props.error.toString();
   const [isFixing, setIsFixing] = useState3(false);
-  return /* @__PURE__ */ jsxs7(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsx16(ErrorMessage, { className: "mb-2", children: error }),
-    /* @__PURE__ */ jsx16(CalltoButton, { onClick: props.resetErrorBoundary, children: "Try again" })
+  return /* @__PURE__ */ jsxs6(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ jsx15(ErrorMessage, { className: "mb-2", children: error }),
+    /* @__PURE__ */ jsx15(CalltoButton, { onClick: props.resetErrorBoundary, children: "Try again" })
   ] });
 }
 
@@ -1848,7 +1806,7 @@ import useDropdownMenu2 from "react-accessible-dropdown-menu-hook";
 var OverrideScrollbar = "ModularPanel_OverrideScrollbar";
 
 // src/Layout/components/ModularPanel.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var LayoutTitleReactContext = createContext10(null);
 function useSetCustomTitle() {
   return useContext10(LayoutTitleReactContext);
@@ -1945,7 +1903,7 @@ var ModulePanelButton = styled6.button`
 var ModulePanelSpacer = styled6.div`
   flex: 1 1 0px;
 `;
-var ModularPanelLabel = styled6.h2`
+var ModularPanelLabel = styled6.div`
   font-size: 0.875em;
   flex: 1 1 0px;
   padding-left: 1em;
@@ -2023,16 +1981,16 @@ function ModularPanel({
   if (!panel || !state.current) {
     return null;
   }
-  const backButton = panel.backAction || state.stack.length ? /* @__PURE__ */ jsx17(ModulePanelButton, { onClick: backAction, children: /* @__PURE__ */ jsx17(BackIcon, {}) }) : null;
-  const closeButton = /* @__PURE__ */ jsx17(ModulePanelButton, { onClick: close || actions.close, children: /* @__PURE__ */ jsx17(CloseIcon, {}) });
-  return /* @__PURE__ */ jsx17(LayoutTitleReactContext.Provider, { value: _setCustomTitle, children: /* @__PURE__ */ jsxs8(ModularPanelWrapper, { "data-state": transition, "data-flipped": isLeft, style, "data-header": !noHeader, children: [
-    noHeader ? null : /* @__PURE__ */ jsxs8(ModularPanelHeader, { "data-tabs": !!tabs, "data-error": didError, children: [
-      /* @__PURE__ */ jsxs8(Dropdown, { style: { display: "flex", height: "100%" }, children: [
+  const backButton = panel.backAction || state.stack.length ? /* @__PURE__ */ jsx16(ModulePanelButton, { onClick: backAction, children: /* @__PURE__ */ jsx16(BackIcon, {}) }) : null;
+  const closeButton = /* @__PURE__ */ jsx16(ModulePanelButton, { onClick: close || actions.close, children: /* @__PURE__ */ jsx16(CloseIcon, {}) });
+  return /* @__PURE__ */ jsx16(LayoutTitleReactContext.Provider, { value: _setCustomTitle, children: /* @__PURE__ */ jsxs7(ModularPanelWrapper, { "data-state": transition, "data-flipped": isLeft, style, "data-header": !noHeader, children: [
+    noHeader ? null : /* @__PURE__ */ jsxs7(ModularPanelHeader, { "data-tabs": !!tabs, "data-error": didError, children: [
+      /* @__PURE__ */ jsxs7(Dropdown, { style: { display: "flex", height: "100%" }, children: [
         panel.renderBackAction ? panel.renderBackAction({ backAction, fallback: backButton }) : backButton,
-        switchablePanels.length ? /* @__PURE__ */ jsxs8(DropdownMenu, { $open: isOpen, style: { left: "0.5em" }, children: [
-          /* @__PURE__ */ jsx17(DropdownLabel, { children: "All panels" }),
-          /* @__PURE__ */ jsx17(DropdownDivider, {}),
-          switchablePanels.map((newPanel, i) => /* @__PURE__ */ jsx17(
+        switchablePanels.length ? /* @__PURE__ */ jsxs7(DropdownMenu, { $open: isOpen, style: { left: "0.5em" }, children: [
+          /* @__PURE__ */ jsx16(DropdownLabel, { children: "All panels" }),
+          /* @__PURE__ */ jsx16(DropdownDivider, {}),
+          switchablePanels.map((newPanel, i) => /* @__PURE__ */ jsx16(
             DropdownItem,
             {
               ...itemProps[i],
@@ -2044,11 +2002,11 @@ function ModularPanel({
           ))
         ] }) : null
       ] }),
-      customTitle ? /* @__PURE__ */ jsx17(ModularPanelLabel, { children: customTitle }) : hideHeader ? /* @__PURE__ */ jsx17(ModulePanelSpacer, {}) : /* @__PURE__ */ jsx17(ModularPanelLabel, { children: panel.label }),
-      pinnable ? state.pinned ? /* @__PURE__ */ jsx17(ModulePanelButton, { onClick: pinActions.unpin, children: /* @__PURE__ */ jsx17(StarIcon, { fill: "orange" }) }) : /* @__PURE__ */ jsx17(ModulePanelButton, { onClick: () => pinActions.pin({ id: panel.id, state: state.state }), children: /* @__PURE__ */ jsx17(StarIcon, { fill: "#ddd" }) }) : null,
+      customTitle ? /* @__PURE__ */ jsx16(ModularPanelLabel, { children: customTitle }) : hideHeader ? /* @__PURE__ */ jsx16(ModulePanelSpacer, {}) : /* @__PURE__ */ jsx16(ModularPanelLabel, { children: panel.label }),
+      pinnable ? state.pinned ? /* @__PURE__ */ jsx16(ModulePanelButton, { onClick: pinActions.unpin, children: /* @__PURE__ */ jsx16(StarIcon, { fill: "orange" }) }) : /* @__PURE__ */ jsx16(ModulePanelButton, { onClick: () => pinActions.pin({ id: panel.id, state: state.state }), children: /* @__PURE__ */ jsx16(StarIcon, { fill: "#ddd" }) }) : null,
       panel.renderCloseAction ? panel.renderCloseAction({ closeAction: close || actions.close, fallback: closeButton }) : closeButton
     ] }),
-    /* @__PURE__ */ jsx17(ModularPanelContent, { className: OverrideScrollbar, children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16(ModularPanelContent, { className: OverrideScrollbar, children: /* @__PURE__ */ jsx16(
       ErrorBoundary,
       {
         onError: () => setDidError(true),
@@ -2105,15 +2063,13 @@ function createDownload(data, fileName, fileType = "text/json") {
   a.remove();
 }
 async function copyToClipboard(json) {
-  return navigator.clipboard.writeText(
-    typeof json === "string" ? json : JSON.stringify(json, null, 2)
-  );
+  return navigator.clipboard.writeText(typeof json === "string" ? json : JSON.stringify(json, null, 2));
 }
 function randomId() {
   return `${Math.random().toString(36).substr(2)}-${Date.now().toString(36)}`;
 }
 function mapApp(input, map) {
-  const { default: metadata, ...props } = input;
+  const { default: metadata, config, ...props } = input;
   const app = {
     metadata,
     layout: {
@@ -2121,7 +2077,8 @@ function mapApp(input, map) {
       rightPanels: [],
       centerPanels: [],
       ...props
-    }
+    },
+    config
   };
   return map ? map(app) : app;
 }
@@ -2144,35 +2101,17 @@ function extendApp(app, metadata, extensions) {
         }),
         ...extensions?.leftPanels || []
       ],
-      annotations: [
-        ...extensions?.annotations || [],
-        ...app.layout.annotations || []
-      ],
-      canvasEditors: [
-        ...extensions?.canvasEditors || [],
-        ...app.layout.canvasEditors || []
-      ],
-      creators: [
-        ...extensions?.creators || [],
-        ...app.layout.creators || []
-      ],
+      annotations: [...extensions?.annotations || [], ...app.layout.annotations || []],
+      canvasEditors: [...extensions?.canvasEditors || [], ...app.layout.canvasEditors || []],
+      creators: [...extensions?.creators || [], ...app.layout.creators || []],
       editors: [
         //
         ...extensions?.editors || [],
         ...app.layout.editors || []
       ],
-      rightPanels: [
-        ...app.layout.rightPanels || [],
-        ...extensions?.rightPanels || []
-      ],
-      centerPanels: [
-        ...app.layout.centerPanels || [],
-        ...extensions?.centerPanels || []
-      ],
-      modals: [
-        ...app.layout.modals || [],
-        ...extensions?.modalPanels || []
-      ]
+      rightPanels: [...app.layout.rightPanels || [], ...extensions?.rightPanels || []],
+      centerPanels: [...app.layout.centerPanels || [], ...extensions?.centerPanels || []],
+      modals: [...app.layout.modals || [], ...extensions?.modalPanels || []]
     }
   };
 }
@@ -2345,7 +2284,7 @@ function createPreviewVault(homepageCollectionId = "vault://homepage-collection.
 }
 
 // src/PreviewVault/PreviewVault.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function usePreviewVault() {
   return useContext11(PreviewVaultReactContext);
 }
@@ -2367,11 +2306,11 @@ function PreviewVaultContext(props) {
   useEffect7(() => {
     return unsubscribe;
   }, []);
-  return /* @__PURE__ */ jsx18(PreviewVaultAddHistory.Provider, { value: { addHistory, clearHistory }, children: /* @__PURE__ */ jsx18(PreviewVaultReactContext.Provider, { value: vault, children: props.children }) });
+  return /* @__PURE__ */ jsx17(PreviewVaultAddHistory.Provider, { value: { addHistory, clearHistory }, children: /* @__PURE__ */ jsx17(PreviewVaultReactContext.Provider, { value: vault, children: props.children }) });
 }
 function PreviewVaultBoundary({ children }) {
   const vault = usePreviewVault();
-  return /* @__PURE__ */ jsx18(VaultProvider2, { vault, children });
+  return /* @__PURE__ */ jsx17(VaultProvider2, { vault, children });
 }
 
 // src/BaseCreator/BaseCreator.hooks.tsx
@@ -2472,11 +2411,12 @@ function useInlineCreator() {
 }
 
 // src/BaseCreator/BaseCreator.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var RenderCreator = memo3(function RenderCreator2(props) {
   const vault = useVault4();
   const { edit, modal } = useLayoutActions();
   const [isCreating, setIsCreating] = useState5(false);
+  const [error, setError] = useState5(null);
   const creator = useInlineCreator();
   const isCreatingRef = useRef3(false);
   const canvasSelector = props.resource.initialData?.selector;
@@ -2492,18 +2432,32 @@ var RenderCreator = memo3(function RenderCreator2(props) {
     initialData: props.resource.initialData
   };
   const runCreate = (payload) => {
-    if (isCreating || isCreatingRef.current)
-      return;
-    setIsCreating(true);
-    isCreatingRef.current = true;
-    creator.create(props.creator.id, payload, options).then((ref) => {
-      modal.popStack();
-      edit(ref, {
-        parent: toRef3(props.resource.parent),
-        property: props.resource.property,
-        index: props.resource.index
+    try {
+      if (isCreating || isCreatingRef.current)
+        return;
+      setIsCreating(true);
+      isCreatingRef.current = true;
+      creator.create(props.creator.id, payload, options).catch((err) => {
+        setError(err?.message || "Unknown error");
+        return null;
+      }).then(async (ref) => {
+        if (!ref)
+          return;
+        const singleRef = Array.isArray(ref) ? ref[0] : ref;
+        setIsCreating(false);
+        modal.popStack();
+        modal.close();
+        if (singleRef) {
+          edit(singleRef, {
+            parent: toRef3(props.resource.parent),
+            property: props.resource.property,
+            index: props.resource.index
+          });
+        }
       });
-    });
+    } catch (err) {
+      setError(err?.message || "Unknown error");
+    }
   };
   const validate = async () => {
     return true;
@@ -2513,19 +2467,21 @@ var RenderCreator = memo3(function RenderCreator2(props) {
       runCreate({});
     }
   }, [props.creator]);
-  useEffect8(() => {
-    if (isCreating) {
-      modal.popStack();
-      modal.close();
-    }
-  });
+  if (error) {
+    return /* @__PURE__ */ jsx18("div", { className: "flex flex-col items-center p-4", children: /* @__PURE__ */ jsx18(ErrorMessage2, { children: error }) });
+  }
+  const spinner = /* @__PURE__ */ jsx18("div", { className: "flex flex-col items-center py-8", children: /* @__PURE__ */ jsxs8("div", { className: "flex gap-2 items-center", children: [
+    /* @__PURE__ */ jsx18(Spinner, {}),
+    " ",
+    /* @__PURE__ */ jsx18("span", { children: "Loading" })
+  ] }) });
   if (isCreating) {
-    return null;
+    return spinner;
   }
   if (!props.creator.render) {
-    return /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Button, { onClick: () => runCreate({}), children: "Create" }) });
+    return /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18(Button, { onClick: () => runCreate({}), children: "Create" }) });
   }
-  return /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsx19(Suspense, { fallback: /* @__PURE__ */ jsx19(Spinner, {}), children: props.creator.render({
+  return /* @__PURE__ */ jsx18(Fragment2, { children: /* @__PURE__ */ jsx18(Suspense, { fallback: spinner, children: props.creator.render({
     vault,
     runCreate,
     validate,
@@ -2535,9 +2491,7 @@ var RenderCreator = memo3(function RenderCreator2(props) {
 function BaseCreator(props) {
   const app = useApp();
   const vault = useVault4();
-  const [currentId, setCurrentId] = useState5(
-    props.resource.initialCreator || ""
-  );
+  const [currentId, setCurrentId] = useState5(props.resource.initialCreator || "");
   const set = useSetCustomTitle();
   const supported = useMemo12(
     () => matchBasedOnResource2(props.resource, app.layout.creators || [], {
@@ -2555,19 +2509,33 @@ function BaseCreator(props) {
     }
   });
   if (supported.length === 0) {
-    return /* @__PURE__ */ jsx19("div", { children: "Not currently supported" });
+    return /* @__PURE__ */ jsx18("div", { children: "Not currently supported" });
   }
+  const backButton = /* @__PURE__ */ jsx18(ModalBackSlot, { children: /* @__PURE__ */ jsx18(
+    IconButton2,
+    {
+      root: document.getElementById("headlessui-portal-root") || void 0,
+      label: "Back to Add content options",
+      className: "group",
+      placement: "right",
+      onPress: () => setCurrentId(""),
+      children: /* @__PURE__ */ jsx18(GridIcon, { className: "text-2xl opacity-50 group-hover:opacity-70" })
+    }
+  ) });
   if (current) {
     const shouldHideModal = current.hiddenModal;
     if (shouldHideModal) {
-      return /* @__PURE__ */ jsx19(RenderCreator, { creator: current, resource: props.resource });
-    }
-    return /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx19("div", { className: "bg-me-gray-100 p-2", children: /* @__PURE__ */ jsx19(Button, { onClick: () => setCurrentId(""), children: "Back" }) }),
-      /* @__PURE__ */ jsx19("div", { className: "p-2 py-6", children: /* @__PURE__ */ jsx19(RenderCreator, { creator: current, resource: props.resource }) })
+      return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+        backButton,
+        /* @__PURE__ */ jsx18(RenderCreator, { creator: current, resource: props.resource })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs8("div", { children: [
+      backButton,
+      /* @__PURE__ */ jsx18("div", { className: "p-2 py-6", children: /* @__PURE__ */ jsx18(RenderCreator, { creator: current, resource: props.resource }) })
     ] });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     CreatorGrid,
     {
       label: "Select a type",
@@ -2583,13 +2551,13 @@ function BaseCreator(props) {
 }
 
 // src/BaseCreator/index.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var baseCreator = {
   id: "@manifest-editor/creator",
   label: "Add content",
   options: { hideHeader: true, tabs: false },
   render(state) {
-    return /* @__PURE__ */ jsx20(BaseCreator, { resource: state });
+    return /* @__PURE__ */ jsx19(BaseCreator, { resource: state });
   }
 };
 
@@ -2696,7 +2664,7 @@ function filterStack(newStackWithDuplicates, current) {
 import { EditorInstance } from "@manifest-editor/editor-api";
 import { useResourceContext, useVault as useVault5 } from "react-iiif-vault";
 import { toRef as toRef5 } from "@iiif/parser";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var defaultState = { stack: [], current: null, create: null };
 var EditingStackContext = createContext12(defaultState);
 var EditingStackActionsContext = createContext12({
@@ -2836,16 +2804,16 @@ function EditingStack(props) {
     return { edit, updateCurrent, close, back, create: create2 };
   }, []);
   const { instanceId } = useAppInstance();
-  return /* @__PURE__ */ jsx21(EditingStackActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx21(EditingStackContext.Provider, { value: state, children: props.children }) }, instanceId);
+  return /* @__PURE__ */ jsx20(EditingStackActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx20(EditingStackContext.Provider, { value: state, children: props.children }) }, instanceId);
 }
 
 // src/BaseEditor/BaseEditor.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function BaseEditorBackButton({ fallback, backAction }) {
   const stack = useEditingResourceStack();
   const { back } = useEditingStack();
   if (stack.length) {
-    return /* @__PURE__ */ jsx22(ModulePanelButton, { onClick: back, children: /* @__PURE__ */ jsx22(BackIcon, {}) });
+    return /* @__PURE__ */ jsx21(ModulePanelButton, { onClick: back, children: /* @__PURE__ */ jsx21(BackIcon, {}) });
   }
   return fallback;
 }
@@ -2853,22 +2821,20 @@ function BaseEditorCloseButton({ closeAction, fallback }) {
   const stack = useEditingResourceStack();
   const current = useEditingResource();
   if (current || stack.length) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx21(
       ModulePanelButton,
       {
         onClick: () => {
           closeAction();
         },
-        children: /* @__PURE__ */ jsx22(CloseIcon, {})
+        children: /* @__PURE__ */ jsx21(CloseIcon, {})
       }
     );
   }
   return fallback;
 }
 function editBasedOnResource(resource, list, options, config) {
-  const filteredList = list.filter(
-    (l) => l.resourceType === resource.resource.source.type
-  );
+  const filteredList = list.filter((l) => l.resourceType === resource.resource.source.type);
   if (filteredList.length === 0) {
     return null;
   }
@@ -2916,9 +2882,7 @@ function editBasedOnResource(resource, list, options, config) {
   }
   return null;
 }
-function BaseEditor({
-  currentTab = void 0
-}) {
+function BaseEditor({ currentTab = void 0 }) {
   const resource = useEditingResource();
   const currentResourceContext = useContext13(ResourceReactContext);
   const app = useApp();
@@ -2948,7 +2912,7 @@ function BaseEditor({
     if (!resource) {
       return children;
     }
-    return /* @__PURE__ */ jsx22(ResourceReactContext.Provider, { value: newResourceContext, children });
+    return /* @__PURE__ */ jsx21(ResourceReactContext.Provider, { value: newResourceContext, children });
   }
   const match = useMemo14(() => {
     if (!resource) {
@@ -2956,28 +2920,19 @@ function BaseEditor({
     }
     const editors = app.layout.editors || [];
     const resources = app.layout.resources || [];
-    const mappedResources = resources.map(
-      (resource2) => {
-        if (typeof resource2 === "string") {
-          return {
-            id: "@default/" + resource2,
-            label: resource2,
-            resourceType: resource2,
-            auto: true,
-            editors: editors.filter(
-              (e) => e.supports.resourceTypes.includes(resource2)
-            )
-          };
-        }
-        return resource2;
+    const mappedResources = resources.map((resource2) => {
+      if (typeof resource2 === "string") {
+        return {
+          id: "@default/" + resource2,
+          label: resource2,
+          resourceType: resource2,
+          auto: true,
+          editors: editors.filter((e) => e.supports.resourceTypes.includes(resource2))
+        };
       }
-    );
-    return editBasedOnResource(
-      resource,
-      mappedResources,
-      { edit: true, vault },
-      resourceConfig
-    );
+      return resource2;
+    });
+    return editBasedOnResource(resource, mappedResources, { edit: true, vault }, resourceConfig);
   }, [resource, app]);
   useEffect10(() => {
     set(match?.label || "");
@@ -2993,17 +2948,15 @@ function BaseEditor({
     return null;
   }
   if (resourceConfig.singleTab) {
-    const first = (match?.editors || []).find(
-      (editor) => editor.id === resourceConfig.singleTab
-    );
+    const first = (match?.editors || []).find((editor) => editor.id === resourceConfig.singleTab);
     if (first) {
       return wrap(
-        /* @__PURE__ */ jsx22("div", { className: "w-full", children: first.component(resourceConfig) })
+        /* @__PURE__ */ jsx21("div", { className: "w-full", children: first.component(resourceConfig) }, resource.resource.source?.id)
       );
     }
   }
   return wrap(
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx21(
       SidebarTabs,
       {
         menuId: resource.resource.source.id,
@@ -3025,20 +2978,20 @@ function BaseEditor({
 }
 
 // src/BaseEditor/index.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var baseEditor = {
   id: "@manifest-editor/editor",
   label: "Editor",
   options: { hideHeader: true, tabs: true, minWidth: 400 },
-  renderBackAction: ({ backAction, fallback }) => /* @__PURE__ */ jsx23(BaseEditorBackButton, { backAction, fallback }),
-  renderCloseAction: ({ closeAction, fallback }) => /* @__PURE__ */ jsx23(BaseEditorCloseButton, { closeAction, fallback }),
+  renderBackAction: ({ backAction, fallback }) => /* @__PURE__ */ jsx22(BaseEditorBackButton, { backAction, fallback }),
+  renderCloseAction: ({ closeAction, fallback }) => /* @__PURE__ */ jsx22(BaseEditorCloseButton, { closeAction, fallback }),
   render({ currentTab }) {
-    return /* @__PURE__ */ jsx23(BaseEditor, { currentTab });
+    return /* @__PURE__ */ jsx22(BaseEditor, { currentTab });
   }
 };
 
 // src/ConfigContext/ConfigEditor.tsx
-import { Sidebar, SidebarHeader, SidebarContent, Form, ActionButton } from "@manifest-editor/components";
+import { ActionButton, Form, Sidebar, SidebarContent, SidebarHeader } from "@manifest-editor/components";
 
 // src/hooks/use-decay-state.ts
 import { useMemo as useMemo15, useRef as useRef4, useState as useState6 } from "react";
@@ -3070,9 +3023,10 @@ function useDecayState(time) {
 }
 
 // src/ConfigContext/ConfigEditor.tsx
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 function ConfigEditor() {
   const previews = usePreviewContext();
+  const resource = useAppResource();
   const config = useConfig();
   const setConfig = useSaveConfig();
   const [isSaved, saveState] = useDecayState(2e3);
@@ -3097,13 +3051,13 @@ function ConfigEditor() {
     saveState.set();
     saveState.clear();
   }
-  return /* @__PURE__ */ jsxs10(Sidebar, { children: [
-    /* @__PURE__ */ jsx24(SidebarHeader, { title: "Workspace configuration" }),
-    isSaved ? /* @__PURE__ */ jsx24("div", { className: "bg-me-primary-500 text-white p-3 text-sm", children: "Changes saved" }) : null,
-    /* @__PURE__ */ jsx24(SidebarContent, { className: "p-4", children: /* @__PURE__ */ jsxs10(Form.Form, { onSubmit, className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsxs10(Form.InputContainer, { children: [
-        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "defaultLanguage", children: "Default Language" }),
-        /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs9(Sidebar, { children: [
+    /* @__PURE__ */ jsx23(SidebarHeader, { title: "Workspace configuration" }),
+    isSaved ? /* @__PURE__ */ jsx23("div", { className: "bg-me-primary-500 text-white p-3 text-sm", children: "Changes saved" }) : null,
+    /* @__PURE__ */ jsx23(SidebarContent, { className: "p-4", children: /* @__PURE__ */ jsxs9(Form.Form, { onSubmit, className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs9(Form.InputContainer, { children: [
+        /* @__PURE__ */ jsx23(Form.Label, { htmlFor: "defaultLanguage", children: "Default Language" }),
+        /* @__PURE__ */ jsx23(
           Form.Input,
           {
             type: "text",
@@ -3113,9 +3067,9 @@ function ConfigEditor() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs10(Form.InputContainer, { children: [
-        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "availableLanguages", children: "Available Languages" }),
-        /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsxs9(Form.InputContainer, { children: [
+        /* @__PURE__ */ jsx23(Form.Label, { htmlFor: "availableLanguages", children: "Available Languages" }),
+        /* @__PURE__ */ jsx23(
           Form.Input,
           {
             type: "text",
@@ -3125,8 +3079,8 @@ function ConfigEditor() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsxs9(Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ jsx23(
           Form.Input,
           {
             type: "checkbox",
@@ -3135,10 +3089,10 @@ function ConfigEditor() {
             defaultChecked: config.i18n?.advancedLanguageMode || false
           }
         ),
-        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "advancedLanguageMode", children: "Advanced Language Mode" })
+        /* @__PURE__ */ jsx23(Form.Label, { htmlFor: "advancedLanguageMode", children: "Advanced Language Mode" })
       ] }),
-      /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsxs9(Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ jsx23(
           Form.Input,
           {
             type: "checkbox",
@@ -3147,10 +3101,10 @@ function ConfigEditor() {
             defaultChecked: config.i18n?.textGranularityEnabled || false
           }
         ),
-        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "textGranularityEnabled", children: "Enable text granularity" })
+        /* @__PURE__ */ jsx23(Form.Label, { htmlFor: "textGranularityEnabled", children: "Enable text granularity" })
       ] }),
-      /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsxs9(Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ jsx23(
           Form.Input,
           {
             type: "checkbox",
@@ -3159,16 +3113,20 @@ function ConfigEditor() {
             defaultChecked: config.export?.version === 2
           }
         ),
-        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "isVersion2", children: "Export Presentation 2 Manifests" })
+        /* @__PURE__ */ jsxs9(Form.Label, { htmlFor: "isVersion2", children: [
+          "Export Presentation 2 ",
+          resource.type,
+          "s"
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs10(Form.InputContainer, { children: [
-        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "defaultPreview", children: "Default preview" }),
-        /* @__PURE__ */ jsx24("div", { children: previews.configs.map((preview, key) => {
+      /* @__PURE__ */ jsxs9(Form.InputContainer, { children: [
+        /* @__PURE__ */ jsx23(Form.Label, { htmlFor: "defaultPreview", children: "Default preview" }),
+        /* @__PURE__ */ jsx23("div", { children: previews.configs.map((preview, key) => {
           if (preview.type === "iiif-preview-service") {
             return null;
           }
-          return /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, children: [
-            /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsxs9(Form.InputContainer, { horizontal: true, children: [
+            /* @__PURE__ */ jsx23(
               Form.Input,
               {
                 type: "radio",
@@ -3178,19 +3136,19 @@ function ConfigEditor() {
                 defaultChecked: !config.defaultPreview ? key === 0 : config.defaultPreview === preview.id
               }
             ),
-            /* @__PURE__ */ jsx24("label", { htmlFor: preview.id, children: preview.label })
+            /* @__PURE__ */ jsx23("label", { htmlFor: preview.id, children: preview.label })
           ] }, preview.id);
         }) })
       ] }),
-      /* @__PURE__ */ jsx24(
+      resource.type === "Manifest" ? /* @__PURE__ */ jsx23(
         "a",
         {
           className: "text-sm text-me-primary-500 hover:underline hover:text-me-primary-600",
           href: window.location.pathname.includes("/exhibition") ? window.location.pathname.replace("/exhibition", "") || "/" : `${window.location.pathname}/exhibition`,
           children: window.location.pathname.includes("/exhibition") ? "Return to Manifest Editor" : "Go to Exhibition Editor"
         }
-      ),
-      /* @__PURE__ */ jsx24("div", { className: "mt-5", children: /* @__PURE__ */ jsx24(ActionButton, { type: "submit", children: "Save changes" }) })
+      ) : null,
+      /* @__PURE__ */ jsx23("div", { className: "mt-5", children: /* @__PURE__ */ jsx23(ActionButton, { type: "submit", children: "Save changes" }) })
     ] }) })
   ] });
 }
@@ -3208,12 +3166,12 @@ var CenterPanelContainer_default = {
 };
 
 // ../ui/ui/CenterPanelContainer/CenterPanelContainer.tsx
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 function CenterPanelContainer(props) {
-  return /* @__PURE__ */ jsxs11("div", { className: CenterPanelContainer_default.CenterPanelContainer, children: [
-    props.title || props.close ? /* @__PURE__ */ jsxs11("div", { className: CenterPanelContainer_default.CenterPanelHeader, children: [
-      props.title ? /* @__PURE__ */ jsx25("h2", { className: CenterPanelContainer_default.CenterPanelTitle, children: props.title }) : null,
-      props.close ? /* @__PURE__ */ jsx25(Button, { className: CenterPanelContainer_default.CenterPanelClose, onClick: props.close, children: /* @__PURE__ */ jsx25(CloseIcon, {}) }) : null
+  return /* @__PURE__ */ jsxs10("div", { className: CenterPanelContainer_default.CenterPanelContainer, children: [
+    props.title || props.close ? /* @__PURE__ */ jsxs10("div", { className: CenterPanelContainer_default.CenterPanelHeader, children: [
+      props.title ? /* @__PURE__ */ jsx24("h2", { className: CenterPanelContainer_default.CenterPanelTitle, children: props.title }) : null,
+      props.close ? /* @__PURE__ */ jsx24(Button, { className: CenterPanelContainer_default.CenterPanelClose, onClick: props.close, children: /* @__PURE__ */ jsx24(CloseIcon, {}) }) : null
     ] }) : null,
     props.children
   ] });
@@ -3230,7 +3188,7 @@ import {
   useRef as useRef5,
   useState as useState7
 } from "react";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
 var AccordionContainer = styled7.div`
   flex: 1;
   display: flex;
@@ -3585,16 +3543,16 @@ var AccordionItem = forwardRef(function AccordionItem2(props, ref) {
       setScrolled(false);
     }
   };
-  return /* @__PURE__ */ jsxs12(ItemRow, { "data-large": props.large, "data-open": open, children: [
-    /* @__PURE__ */ jsxs12(ItemHeading, { "data-open": open, children: [
-      props.icon ? /* @__PURE__ */ jsx26(ItemIcon, { onClick: toggle, children: props.icon }) : null,
-      /* @__PURE__ */ jsxs12(ItemLabel, { ref: btn, onClick: toggle, "aria-expanded": open, "aria-controls": `accordion-${id}`, children: [
+  return /* @__PURE__ */ jsxs11(ItemRow, { "data-large": props.large, "data-open": open, children: [
+    /* @__PURE__ */ jsxs11(ItemHeading, { "data-open": open, children: [
+      props.icon ? /* @__PURE__ */ jsx25(ItemIcon, { onClick: toggle, children: props.icon }) : null,
+      /* @__PURE__ */ jsxs11(ItemLabel, { ref: btn, onClick: toggle, "aria-expanded": open, "aria-controls": `accordion-${id}`, children: [
         props.label,
-        props.description ? /* @__PURE__ */ jsx26(ItemDescription, { children: props.description }) : null
+        props.description ? /* @__PURE__ */ jsx25(ItemDescription, { children: props.description }) : null
       ] }),
-      /* @__PURE__ */ jsx26(ItemCollapse, { onClick: toggle, children: /* @__PURE__ */ jsx26(DownIcon, { width: "1em", height: "1em", rotate: open ? 0 : 180 }) })
+      /* @__PURE__ */ jsx25(ItemCollapse, { onClick: toggle, children: /* @__PURE__ */ jsx25(DownIcon, { width: "1em", height: "1em", rotate: open ? 0 : 180 }) })
     ] }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx25(
       ItemBody,
       {
         "aria-labelledby": `accordion-${id}`,
@@ -3606,7 +3564,7 @@ var AccordionItem = forwardRef(function AccordionItem2(props, ref) {
         $initial: !open,
         "data-scrolled": scrolled,
         hidden: !open,
-        children: /* @__PURE__ */ jsx26(ItemBodyInner, { children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx25(ItemBodyInner, { children: /* @__PURE__ */ jsx25(
           ItemBodyPadding,
           {
             "data-max-height": !!maxHeight,
@@ -3621,13 +3579,13 @@ var AccordionItem = forwardRef(function AccordionItem2(props, ref) {
 });
 function Accordion(props) {
   const { getItemProps, onKeyDown } = useAccordionItems(props.items.length, props.singleMode);
-  return /* @__PURE__ */ jsx26(AccordionContainer, { onKeyDown, children: props.items.map((item, key) => /* @__PURE__ */ jsx26(AccordionItem, { overflow: props.overflow, maxHeight: props.maxHeight, ...item, ...getItemProps(key), children: item.children }, key)) });
+  return /* @__PURE__ */ jsx25(AccordionContainer, { onKeyDown, children: props.items.map((item, key) => /* @__PURE__ */ jsx25(AccordionItem, { overflow: props.overflow, maxHeight: props.maxHeight, ...item, ...getItemProps(key), children: item.children }, key)) });
 }
 
 // ../ui/icons/DownloadIcon.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function DownloadIcon() {
-  return /* @__PURE__ */ jsx27("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", viewBox: "0 -960 960 960", width: "48", children: /* @__PURE__ */ jsx27("path", { d: "M220-160q-24 0-42-18t-18-42v-143h60v143h520v-143h60v143q0 24-18 42t-42 18H220Zm260-153L287-506l43-43 120 120v-371h60v371l120-120 43 43-193 193Z" }) });
+  return /* @__PURE__ */ jsx26("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", viewBox: "0 -960 960 960", width: "48", children: /* @__PURE__ */ jsx26("path", { d: "M220-160q-24 0-42-18t-18-42v-143h60v143h520v-143h60v143q0 24-18 42t-42 18H220Zm260-153L287-506l43-43 120 120v-371h60v371l120-120 43 43-193 193Z" }) });
 }
 
 // ../ui/atoms/ButtonRow.tsx
@@ -3657,7 +3615,7 @@ var ButtonRow = styled8.div`
 `;
 
 // src/ExportPanel/ExportPanel.tsx
-import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 function ExportPanel(props) {
   const manifest = useManifest();
   const vault = useVault7();
@@ -3668,7 +3626,7 @@ function ExportPanel(props) {
   const version2 = useMemo17(() => {
     return JSON.stringify(vault.toPresentation2(manifest), null, 2);
   }, [manifest, vault]);
-  return /* @__PURE__ */ jsx28(CenterPanelContainer, { title: "Export manifest", close: actions.centerPanel.popStack, children: /* @__PURE__ */ jsx28("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx27(CenterPanelContainer, { title: "Export manifest", close: actions.centerPanel.popStack, children: /* @__PURE__ */ jsx27("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ jsx27(
     Accordion,
     {
       items: [
@@ -3679,12 +3637,12 @@ function ExportPanel(props) {
           large: true,
           initialOpen: true,
           overflow: true,
-          icon: /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version3, "manifest.json"), children: /* @__PURE__ */ jsx28(DownloadIcon, {}) }),
-          children: /* @__PURE__ */ jsxs13("div", { style: { maxWidth: "100%" }, children: [
-            /* @__PURE__ */ jsx28("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation3(manifest), null, 2) }),
-            /* @__PURE__ */ jsxs13(ButtonRow, { "data-sticky": "true", children: [
-              /* @__PURE__ */ jsx28(Button, { onClick: () => copyToClipboard(version3), children: "Copy to clipboard" }),
-              /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version3, "manifest.json"), children: "Download" })
+          icon: /* @__PURE__ */ jsx27(Button, { onClick: () => createDownload(version3, "manifest.json"), children: /* @__PURE__ */ jsx27(DownloadIcon, {}) }),
+          children: /* @__PURE__ */ jsxs12("div", { style: { maxWidth: "100%" }, children: [
+            /* @__PURE__ */ jsx27("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation3(manifest), null, 2) }),
+            /* @__PURE__ */ jsxs12(ButtonRow, { "data-sticky": "true", children: [
+              /* @__PURE__ */ jsx27(Button, { onClick: () => copyToClipboard(version3), children: "Copy to clipboard" }),
+              /* @__PURE__ */ jsx27(Button, { onClick: () => createDownload(version3, "manifest.json"), children: "Download" })
             ] })
           ] })
         },
@@ -3693,12 +3651,12 @@ function ExportPanel(props) {
           description: 'Download this version by clicking the "Download" button.',
           maxHeight: 400,
           large: true,
-          icon: /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version2, "manifest.json"), children: /* @__PURE__ */ jsx28(DownloadIcon, {}) }),
-          children: /* @__PURE__ */ jsxs13("div", { style: { maxWidth: "100%" }, children: [
-            /* @__PURE__ */ jsx28("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation2(manifest), null, 2) }),
-            /* @__PURE__ */ jsxs13(ButtonRow, { "data-sticky": "true", children: [
-              /* @__PURE__ */ jsx28(Button, { onClick: () => copyToClipboard(version2), children: "Copy to clipboard" }),
-              /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version2, "manifest.json"), children: "Download" })
+          icon: /* @__PURE__ */ jsx27(Button, { onClick: () => createDownload(version2, "manifest.json"), children: /* @__PURE__ */ jsx27(DownloadIcon, {}) }),
+          children: /* @__PURE__ */ jsxs12("div", { style: { maxWidth: "100%" }, children: [
+            /* @__PURE__ */ jsx27("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation2(manifest), null, 2) }),
+            /* @__PURE__ */ jsxs12(ButtonRow, { "data-sticky": "true", children: [
+              /* @__PURE__ */ jsx27(Button, { onClick: () => copyToClipboard(version2), children: "Copy to clipboard" }),
+              /* @__PURE__ */ jsx27(Button, { onClick: () => createDownload(version2, "manifest.json"), children: "Download" })
             ] })
           ] })
         }
@@ -3710,6 +3668,36 @@ function ExportPanel(props) {
 // src/Layout/Layout.tsx
 import { Modal, PanelSideMenu as PanelSideMenu2 } from "@manifest-editor/components";
 
+// ../ui/madoc/components/icons/Spinner.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+function Spinner2(props) {
+  return /* @__PURE__ */ jsx28(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 42 42",
+      xmlns: "http://www.w3.org/2000/svg",
+      stroke: "currentColor",
+      ...props,
+      children: /* @__PURE__ */ jsxs13("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+        /* @__PURE__ */ jsx28("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+        /* @__PURE__ */ jsx28("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx28(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 18 18",
+            to: "360 18 18",
+            dur: "1s",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
 // ../ui/ui/GhostBlocks/GhostBlocks.module.css
 var GhostBlocks_default = {
   ghostLoadingBlock: "GhostBlocks_ghostLoadingBlock",
@@ -4539,7 +4527,7 @@ var Layout = memo4(function Layout2(props) {
           justifyContent: "center",
           alignItems: "center"
         },
-        children: /* @__PURE__ */ jsx32(Spinner, { stroke: "rgba(0,0,0,.3)", fontSize: "2em" })
+        children: /* @__PURE__ */ jsx32(Spinner2, { stroke: "rgba(0,0,0,.3)", fontSize: "2em" })
       }
     ) : state.centerPanel.open ? centerPanel ? renderHelper(
       centerPanel.render(