@manifest-editor/shell 1.2.0 → 1.3.0

package/dist/index.js

@@ -5,24 +5,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// src/AppContext/AppContext.tsx
-import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo } from "react";
-
-// ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
-var isProduction = false;
-var prefix = "Invariant failed";
-function invariant(condition, message) {
-  if (condition) {
-    return;
-  }
-  if (isProduction) {
-    throw new Error(prefix);
-  }
-  var provided = typeof message === "function" ? message() : message;
-  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-  throw new Error(value);
-}
-
 // ../ui/madoc/use-local-storage.ts
 import { useEffect, useRef, useState } from "react";
 import mitt from "mitt";
@@ -96,33 +78,133 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/AppContext/AppContext.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useMemo as useMemo2
+} from "react";
+
+// ../../node_modules/.pnpm/tiny-invariant@1.3.3/node_modules/tiny-invariant/dist/esm/tiny-invariant.js
+var isProduction = false;
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  if (isProduction) {
+    throw new Error(prefix);
+  }
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+  throw new Error(value);
+}
+
+// src/ConfigContext/ConfigContext.tsx
+import { createContext, useCallback, useContext, useMemo, useState as useState2 } from "react";
 import { jsx } from "react/jsx-runtime";
-var PrimeAppReactContext = createContext(null);
-var AppReactContext = createContext(null);
-var AppStateReactContext = createContext({
+var DEFAULT_CONFIG = {
+  previews: [],
+  behaviorPresets: [
+    "auto-advance",
+    "no-auto-advance",
+    "repeat",
+    "no-repeat",
+    "unordered",
+    "individuals",
+    "continuous",
+    "paged",
+    "non-paged",
+    "facing-pages",
+    "multi-part",
+    "together",
+    "sequence",
+    "thumbnail-nav",
+    "no-nav",
+    "hidden"
+  ],
+  defaultPreview: null,
+  editorConfig: {},
+  newTemplates: null,
+  i18n: {
+    advancedLanguageMode: false,
+    availableLanguages: ["en", "cy", "nl", "fr"],
+    defaultLanguage: "en"
+  },
+  editorFeatureFlags: {
+    enableMultiImageCanvases: true,
+    enableMultiMediaCanvases: true
+  },
+  uploadBackends: [],
+  export: {
+    baseIdentifier: null,
+    version: 3
+  }
+};
+var ConfigReactContext = createContext(DEFAULT_CONFIG);
+var SaveConfigReactContext = createContext(() => {
+});
+function useConfig() {
+  return useContext(ConfigReactContext);
+}
+function useSaveConfig() {
+  return useContext(SaveConfigReactContext);
+}
+function ConfigProvider({
+  children,
+  config,
+  saveConfig
+}) {
+  const [runtimeConfig, setRuntimeConfig] = useState2(null);
+  const resolvedConfig = useMemo(
+    () => ({
+      ...DEFAULT_CONFIG,
+      ...config || {},
+      ...runtimeConfig || {}
+    }),
+    [config, runtimeConfig]
+  );
+  const memoSaveConfig = useCallback(
+    (config2) => {
+      setRuntimeConfig(config2);
+      if (saveConfig) {
+        saveConfig(config2);
+      }
+    },
+    [config]
+  );
+  return /* @__PURE__ */ jsx(SaveConfigReactContext.Provider, { value: memoSaveConfig, children: /* @__PURE__ */ jsx(ConfigReactContext.Provider, { value: resolvedConfig, children }) });
+}
+
+// src/AppContext/AppContext.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PrimeAppReactContext = createContext2(null);
+var AppReactContext = createContext2(null);
+var AppStateReactContext = createContext2({
   state: null,
   setState: () => {
   }
 });
 function useAppInstance() {
-  const ctx = useContext(AppReactContext);
+  const ctx = useContext2(AppReactContext);
   invariant(ctx, "Hook useAppInstance must be used inside <AppProvider />");
   return ctx;
 }
 function useApp() {
-  const app = useContext(PrimeAppReactContext);
+  const app = useContext2(PrimeAppReactContext);
   invariant(app, "Hook useApp must be used inside <AppProvider />");
   return app;
 }
 function useAppState() {
-  return useContext(AppStateReactContext);
+  return useContext2(AppStateReactContext);
 }
 function AppStateProvider(props) {
   const [state, _setState, stateRef] = useLocalStorage(
     `app-state/${props.appId}/${props.instanceId}`,
     props.initialState || {}
   );
-  const setState = useCallback((partial) => {
+  const setState = useCallback2((partial) => {
     const existing = stateRef.current ? JSON.parse(stateRef.current || "{}") : {};
     const partialState = (typeof partial === "function" ? partial(existing) : partial) || {};
     _setState({
@@ -135,8 +217,11 @@ function AppStateProvider(props) {
       setState(props.args);
     }
   }, [props.appId]);
-  const ctx = useMemo(() => ({ state: state || {}, setState }), [setState, state]);
-  return /* @__PURE__ */ jsx(AppStateReactContext.Provider, { value: ctx, children: props.children });
+  const ctx = useMemo2(
+    () => ({ state: state || {}, setState }),
+    [setState, state]
+  );
+  return /* @__PURE__ */ jsx2(AppStateReactContext.Provider, { value: ctx, children: props.children });
 }
 function AppProvider({
   instanceId,
@@ -146,17 +231,29 @@ function AppProvider({
   children,
   initialState
 }) {
-  const ctx = useMemo(() => ({ instanceId, appId, args }), [instanceId, appId, args]);
-  const _initialState = useMemo(() => initialState || {}, [instanceId]);
-  return /* @__PURE__ */ jsx(PrimeAppReactContext.Provider, { value: definition, children: /* @__PURE__ */ jsx(AppReactContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(AppStateProvider, { instanceId: ctx.instanceId, appId: ctx.appId, args: ctx.args, initialState: _initialState, children }) }) });
+  const ctx = useMemo2(
+    () => ({ instanceId, appId, args }),
+    [instanceId, appId, args]
+  );
+  const _initialState = useMemo2(() => initialState || {}, [instanceId]);
+  return /* @__PURE__ */ jsx2(ConfigProvider, { config: definition.config || {}, children: /* @__PURE__ */ jsx2(PrimeAppReactContext.Provider, { value: definition, children: /* @__PURE__ */ jsx2(AppReactContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx2(
+    AppStateProvider,
+    {
+      instanceId: ctx.instanceId,
+      appId: ctx.appId,
+      args: ctx.args,
+      initialState: _initialState,
+      children
+    }
+  ) }) }) });
 }
 
 // src/AppContext/MultiAppContext.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var MultiAppContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3, useMemo as useMemo3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MultiAppContext = createContext3(null);
 function useApps() {
-  const ctx = useContext2(MultiAppContext);
+  const ctx = useContext3(MultiAppContext);
   invariant(ctx, "Hook useApps must be used inside <MultiAppProvider />");
   return ctx;
 }
@@ -186,7 +283,7 @@ function MultiAppProvider({
       changeApp({ id: collectionApp });
     }
   };
-  const ctx = useMemo2(
+  const ctx = useMemo3(
     () => ({
       currentApp: currentApp || { id: defaultApp },
       initialApp: initialApp || { id: defaultApp },
@@ -200,14 +297,14 @@ function MultiAppProvider({
   if (!currentApp || !currentFullApp) {
     return null;
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     AppProvider,
     {
       appId: currentApp.id,
       definition: currentFullApp,
       instanceId: currentApp.id + instanceId,
       args: currentApp.args,
-      children: /* @__PURE__ */ jsx2(MultiAppContext.Provider, { value: ctx, children })
+      children: /* @__PURE__ */ jsx3(MultiAppContext.Provider, { value: ctx, children })
     }
   );
 }
@@ -284,11 +381,89 @@ var ContextButton = styled.button`
   letter-spacing: -0.42px;
 `;
 
+// src/PreviewButton/PreviewButton.tsx
+import { DownloadButton } from "@manifest-editor/components";
+
+// ../ui/icons/CloseIcon.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var CloseIcon = ({ height = 16 }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", height, viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+  /* @__PURE__ */ jsx4("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx4("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" })
+] });
+
+// ../ui/icons/DownIcon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DownIcon = ({ rotate = 0, ...props }) => /* @__PURE__ */ jsx5(
+  "svg",
+  {
+    version: "1.2",
+    xmlns: "http://www.w3.org/2000/svg",
+    overflow: "visible",
+    preserveAspectRatio: "none",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    style: {
+      fill: "rgba(0, 0, 0, 0.6)",
+      transform: `rotate(${rotate}deg)`,
+      transition: "transform 0.2s"
+    },
+    ...props,
+    children: /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: "M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+
+// src/PreviewButton/PreviewButton.tsx
+import useDropdownMenu from "react-accessible-dropdown-menu-hook";
+import { useVault as useVault2 } from "react-iiif-vault";
+
+// src/AppResourceProvider/AppResourceProvider.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { CollectionContext, ManifestContext, VaultProvider, useExistingVault } from "react-iiif-vault";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var AppResourceReactProvider = createContext4(null);
+var AppResourceInstanceReactProvider = createContext4(null);
+function useAppResourceInstance() {
+  const ctx = useContext4(AppResourceInstanceReactProvider);
+  const resource = useContext4(AppResourceReactProvider);
+  const instanceId = ctx || resource?.id;
+  invariant(instanceId, "useResourceInstance can only be called from inside <ResourceProvider />");
+  return instanceId;
+}
+function useAppResource() {
+  const ctx = useContext4(AppResourceReactProvider);
+  invariant(ctx, "useResource can only be called from inside <ResourceProvider />");
+  return ctx;
+}
+function AppResourceInstanceProvider({ id, children }) {
+  if (!id) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx6(AppResourceInstanceReactProvider.Provider, { value: id, children });
+}
+function AppResourceProvider({ resource, children }) {
+  const vault = useExistingVault();
+  let inner = children;
+  if (resource && resource.type === "Manifest") {
+    inner = /* @__PURE__ */ jsx6(VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ jsx6(ManifestContext, { manifest: resource.id || "", children }) });
+  }
+  if (resource && resource.type === "Collection") {
+    inner = /* @__PURE__ */ jsx6(VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ jsx6(CollectionContext, { collection: resource.id || "", children }) });
+  }
+  return /* @__PURE__ */ jsx6(AppResourceReactProvider.Provider, { value: resource, children: inner });
+}
+
 // src/PreviewContext/PreviewContext.tsx
-import { createContext as createContext4, memo, useContext as useContext4, useEffect as useEffect3, useMemo as useMemo4, useReducer } from "react";
+import { createContext as createContext5, memo, useContext as useContext5, useEffect as useEffect3, useMemo as useMemo5, useReducer } from "react";
 
 // src/PreviewContext/PreviewContext.hooks.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/PreviewContext/previews/ExternalManifestUrlPreview.ts
 var ExternalManifestUrlPreview = class {
@@ -463,49 +638,11 @@ var IIIFPreviewService = class {
 
 // src/PreviewContext/PreviewContext.hooks.ts
 import { useVault } from "react-iiif-vault";
-
-// src/AppResourceProvider/AppResourceProvider.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { CollectionContext, ManifestContext, VaultProvider, useExistingVault } from "react-iiif-vault";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var AppResourceReactProvider = createContext3(null);
-var AppResourceInstanceReactProvider = createContext3(null);
-function useAppResourceInstance() {
-  const ctx = useContext3(AppResourceInstanceReactProvider);
-  const resource = useContext3(AppResourceReactProvider);
-  const instanceId = ctx || resource?.id;
-  invariant(instanceId, "useResourceInstance can only be called from inside <ResourceProvider />");
-  return instanceId;
-}
-function useAppResource() {
-  const ctx = useContext3(AppResourceReactProvider);
-  invariant(ctx, "useResource can only be called from inside <ResourceProvider />");
-  return ctx;
-}
-function AppResourceInstanceProvider({ id, children }) {
-  if (!id) {
-    return children;
-  }
-  return /* @__PURE__ */ jsx3(AppResourceInstanceReactProvider.Provider, { value: id, children });
-}
-function AppResourceProvider({ resource, children }) {
-  const vault = useExistingVault();
-  let inner = children;
-  if (resource && resource.type === "Manifest") {
-    inner = /* @__PURE__ */ jsx3(VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ jsx3(ManifestContext, { manifest: resource.id || "", children }) });
-  }
-  if (resource && resource.type === "Collection") {
-    inner = /* @__PURE__ */ jsx3(VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ jsx3(CollectionContext, { collection: resource.id || "", children }) });
-  }
-  return /* @__PURE__ */ jsx3(AppResourceReactProvider.Provider, { value: resource, children: inner });
-}
-
-// src/PreviewContext/PreviewContext.hooks.ts
 function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
   const resource = useAppResource();
   const instanceId = useAppResourceInstance();
   const vault = useVault();
-  const previewActions = useMemo3(
+  const previewActions = useMemo4(
     () => ({
       setPreview: (preview) => {
         if (!preview)
@@ -518,7 +655,7 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
     }),
     [setPreviews, instanceId]
   );
-  const [handlerMap, providesMap] = useMemo3(() => {
+  const [handlerMap, providesMap] = useMemo4(() => {
     const map = {};
     const providesMap2 = {};
     for (const handler of handlers) {
@@ -636,7 +773,7 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
       }
     }
   }
-  return useMemo3(
+  return useMemo4(
     () => ({ selectPreview, deletePreview, focusPreview, activatePreview, updatePreviews, getPreviewLink }),
     // Dispatch has a stable identity.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -644,7 +781,7 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
   );
 }
 function usePreviewHandlers(configs) {
-  return useMemo3(() => {
+  return useMemo4(() => {
     const handlers = [];
     for (const config of configs) {
       switch (config.type) {
@@ -697,9 +834,9 @@ function getDefaultPreviewState() {
 }
 
 // src/PreviewContext/PreviewContext.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var PreviewReactContext = createContext4(null);
-var AvailablePreviewReactContext = createContext4([]);
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PreviewReactContext = createContext5(null);
+var AvailablePreviewReactContext = createContext5([]);
 var PreviewProvider = memo(function PreviewProvider2({
   children,
   configs = []
@@ -709,7 +846,7 @@ var PreviewProvider = memo(function PreviewProvider2({
   const [previews, setPreviews] = useLocalStorage(`preview-${instanceId}`, []);
   const [state, dispatch] = useReducer(previewContextReducer, void 0, getDefaultPreviewState);
   const actions = usePreviewActions(state, dispatch, handlers, previews, setPreviews);
-  const context = useMemo4(
+  const context = useMemo5(
     () => ({ configs, actions, handlers, ...state }),
     [actions, configs, handlers, state]
   );
@@ -729,13 +866,13 @@ var PreviewProvider = memo(function PreviewProvider2({
       }
     }
   }, [instanceId]);
-  return /* @__PURE__ */ jsx4(AvailablePreviewReactContext.Provider, { value: previews, children: /* @__PURE__ */ jsx4(PreviewReactContext.Provider, { value: context, children }) });
+  return /* @__PURE__ */ jsx7(AvailablePreviewReactContext.Provider, { value: previews, children: /* @__PURE__ */ jsx7(PreviewReactContext.Provider, { value: context, children }) });
 });
 function usePreviews() {
-  return useContext4(AvailablePreviewReactContext);
+  return useContext5(AvailablePreviewReactContext);
 }
 function usePreviewContext() {
-  const ctx = useContext4(PreviewReactContext);
+  const ctx = useContext5(PreviewReactContext);
   invariant(ctx, "usePreviewContext() can only be called from inside <PreviewProvider />");
   return ctx;
 }
@@ -945,147 +1082,44 @@ var ButtonEmpty = styled3.div`
 `;
 
 // src/PreviewButton/PreviewButton.tsx
-import useDropdownMenu from "react-accessible-dropdown-menu-hook";
-
-// ../ui/icons/DownIcon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var DownIcon = ({ rotate = 0, ...props }) => /* @__PURE__ */ jsx5(
-  "svg",
-  {
-    version: "1.2",
-    xmlns: "http://www.w3.org/2000/svg",
-    overflow: "visible",
-    preserveAspectRatio: "none",
-    viewBox: "0 0 24 24",
-    width: "1em",
-    height: "1em",
-    style: {
-      fill: "rgba(0, 0, 0, 0.6)",
-      transform: `rotate(${rotate}deg)`,
-      transition: "transform 0.2s"
-    },
-    ...props,
-    children: /* @__PURE__ */ jsx5(
-      "path",
+import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+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
+  );
+  if (configsToShow.length === 0) {
+    return /* @__PURE__ */ jsx8(ButtonEmpty, { children: "Preview not available" });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    downloadEnabled ? /* @__PURE__ */ jsx8("div", { className: "mr-4", children: /* @__PURE__ */ jsx8(
+      DownloadButton,
       {
-        d: "M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0z",
-        fill: "currentColor"
-      }
-    )
-  }
-);
-
-// ../ui/icons/CloseIcon.tsx
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
-var CloseIcon = ({ height = 16 }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", height, viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
-  /* @__PURE__ */ jsx6("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx6("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" })
-] });
-
-// src/PreviewButton/PreviewButton.tsx
-import { useVault as useVault2 } from "react-iiif-vault";
-import { DownloadButton } from "@manifest-editor/components";
-
-// src/ConfigContext/ConfigContext.tsx
-import { createContext as createContext5, useCallback as useCallback2, useContext as useContext5, useMemo as useMemo5, useState as useState2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var DEFAULT_CONFIG = {
-  previews: [],
-  behaviorPresets: [
-    "auto-advance",
-    "no-auto-advance",
-    "repeat",
-    "no-repeat",
-    "unordered",
-    "individuals",
-    "continuous",
-    "paged",
-    "non-paged",
-    "facing-pages",
-    "multi-part",
-    "together",
-    "sequence",
-    "thumbnail-nav",
-    "no-nav",
-    "hidden"
-  ],
-  defaultPreview: null,
-  editorConfig: {},
-  newTemplates: null,
-  i18n: {
-    advancedLanguageMode: false,
-    availableLanguages: ["en", "cy", "nl", "fr"],
-    defaultLanguage: "en"
-  },
-  editorFeatureFlags: {
-    enableMultiImageCanvases: true,
-    enableMultiMediaCanvases: true
-  },
-  uploadBackends: [],
-  export: {
-    baseIdentifier: null,
-    version: 3
-  }
-};
-var ConfigReactContext = createContext5(DEFAULT_CONFIG);
-var SaveConfigReactContext = createContext5(() => {
-});
-function useConfig() {
-  return useContext5(ConfigReactContext);
-}
-function useSaveConfig() {
-  return useContext5(SaveConfigReactContext);
-}
-function ConfigProvider({
-  children,
-  config,
-  saveConfig
-}) {
-  const [runtimeConfig, setRuntimeConfig] = useState2(null);
-  const resolvedConfig = useMemo5(
-    () => ({
-      ...DEFAULT_CONFIG,
-      ...config || {},
-      ...runtimeConfig || {}
-    }),
-    [config, runtimeConfig]
-  );
-  const memoSaveConfig = useCallback2(
-    (config2) => {
-      setRuntimeConfig(config2);
-      if (saveConfig) {
-        saveConfig(config2);
-      }
-    },
-    [config]
-  );
-  return /* @__PURE__ */ jsx7(SaveConfigReactContext.Provider, { value: memoSaveConfig, children: /* @__PURE__ */ jsx7(ConfigReactContext.Provider, { value: resolvedConfig, children }) });
-}
-
-// src/PreviewButton/PreviewButton.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
-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);
-  if (configsToShow.length === 0) {
-    return /* @__PURE__ */ jsx8(ButtonEmpty, { children: "Preview not available" });
-  }
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    downloadEnabled ? /* @__PURE__ */ jsx8("div", { className: "mr-4", children: /* @__PURE__ */ jsx8(
-      DownloadButton,
-      {
-        fileName: fileName || "manifest.json",
-        label: "Download manifest",
-        getData: () => {
-          if (config.export && config.export.version === 2) {
-            return JSON.stringify(vault.toPresentation2(resource), null, 2);
-          }
-          return JSON.stringify(vault.toPresentation3(resource), null, 2);
-        }
+        fileName: fileName || "manifest.json",
+        label: "Download manifest",
+        getData: () => {
+          if (config.export && config.export.version === 2) {
+            return JSON.stringify(
+              vault.toPresentation2(resource),
+              null,
+              2
+            );
+          }
+          return JSON.stringify(
+            vault.toPresentation3(resource),
+            null,
+            2
+          );
+        }
       }
     ) }) : null,
     /* @__PURE__ */ jsxs2(ButtonContainer, { children: [
@@ -1098,7 +1132,6 @@ function PreviewButton({ downloadEnabled, fileName }) {
               if (defaultPreviewId) {
                 const found = configs.find((c) => c.id === defaultPreviewId);
                 if (found) {
-                  console.log(found, { defaultPreviewId });
                   actions.selectPreview(found.id);
                   actions.updatePreviews();
                   return;
@@ -1115,9 +1148,29 @@ function PreviewButton({ downloadEnabled, fileName }) {
       /* @__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(MenuItemLabel, { onClick: () => actions.selectPreview(config2.id), children: config2.label }),
-          !inactive ? /* @__PURE__ */ jsx8(MenuItemClose, { onClick: () => actions.deletePreview(config2.id), children: /* @__PURE__ */ jsx8(CloseIcon, {}) }) : null
+          /* @__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
         ] }, config2.id);
       }) })
     ] })
@@ -1158,17 +1211,432 @@ function AppMenuProvider({ children, menu }) {
   return /* @__PURE__ */ jsx10(ReactAppMenuContext.Provider, { value: menu, children });
 }
 
+// src/AtlasStore/AtlasStoreProvider.tsx
+import { createContext as createContext8, useContext as useContext8, useMemo as useMemo6 } from "react";
+
+// src/AtlasStore/AtlasStore.ts
+import { createHelper } from "polygon-editor";
+import { createStore } from "zustand/vanilla";
+
+// src/AtlasStore/polygon-to-bounding-box.ts
+function polygonToBoundingBox(polygon) {
+  if (!polygon) {
+    return null;
+  }
+  if (polygon.points.length > 2) {
+    const x1 = Math.min(...polygon.points.map((p) => p[0]));
+    const y1 = Math.min(...polygon.points.map((p) => p[1]));
+    const x2 = Math.max(0, ...polygon.points.map((p) => p[0]));
+    const y2 = Math.max(0, ...polygon.points.map((p) => p[1]));
+    return {
+      x: x1,
+      y: y1,
+      width: x2 - x1,
+      height: y2 - y1
+    };
+  }
+  return null;
+}
+
+// src/AtlasStore/AtlasStore.ts
+function polygonToTarget(polygon) {
+  if (!polygon)
+    return null;
+  return {
+    type: "SvgSelector",
+    value: `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><path d='M${polygon.points.map((p) => p.join(",")).join(" ")}${polygon.open ? "" : " Z"}' /></g></svg>`
+  };
+}
+function requestToAnnotationResponse(request) {
+  if (request.type === "polygon") {
+    return {
+      polygon: {
+        points: request.points || [],
+        open: request.open || false
+      },
+      requestType: "polygon",
+      boundingBox: polygonToBoundingBox({
+        points: request.points || [],
+        open: false
+      }),
+      target: polygonToTarget({ points: request.points || [], open: false })
+    };
+  }
+  const box = request.selector;
+  if (box) {
+    const points = [
+      [box.x, box.y],
+      [box.x + box.width, box.y],
+      [box.x + box.width, box.y + box.height],
+      [box.x, box.y + box.height]
+    ];
+    return {
+      polygon: {
+        points,
+        open: false
+      },
+      requestType: request.type,
+      boundingBox: box,
+      target: polygonToTarget({ points, open: false })
+    };
+  }
+  return {
+    polygon: { points: [], open: false },
+    requestType: request.type,
+    boundingBox: null,
+    target: null
+  };
+}
+var defaultSlowState = {
+  shapeId: null,
+  noShape: true,
+  transitioning: false,
+  actionIntentType: null,
+  transitionIntentType: null,
+  selectedPoints: [],
+  hasClosestLine: false,
+  modifiers: {
+    Alt: false,
+    Shift: false,
+    Meta: false,
+    proximity: 0
+    // default value.
+  },
+  showBoundingBox: false,
+  currentModifiers: {},
+  validIntentKeys: {},
+  pointerInsideShape: false,
+  closestPoint: null,
+  transitionModifiers: null,
+  selectedStamp: null,
+  lineMode: false,
+  lineBoxMode: false,
+  drawMode: false,
+  bezierLines: [],
+  boxMode: false,
+  fixedAspectRatio: false
+};
+function createAtlasStore({ events: events2 }) {
+  const store = createStore((set, get) => {
+    let runtime = null;
+    const onSave = (input) => {
+      set(
+        (s) => s.tool.requestId ? { polygon: { ...input, id: s.tool.requestId } } : {
+          polygon: { id: void 0, points: [], open: true }
+        }
+      );
+    };
+    const polygons = createHelper(null, onSave);
+    return {
+      mode: "explore",
+      tool: {
+        enabled: false,
+        requestId: null,
+        canvasId: null
+      },
+      requestType: null,
+      history: polygons.history,
+      polygon: null,
+      validRequestIds: [],
+      stableViewport: null,
+      canvasRelativePositions: {},
+      canvasViewports: {},
+      polygons,
+      polygonState: defaultSlowState,
+      setToolCanvasId: (canvasId) => {
+        set((state) => ({ tool: { ...state.tool, canvasId } }));
+      },
+      switchTool: {
+        draw() {
+          set({ mode: "sketch" });
+          helper.stamps.clear();
+          helper.draw.enable();
+        },
+        polygon() {
+          set({ mode: "sketch" });
+          helper.stamps.clear();
+          helper.draw.disable();
+          helper.modes.disableLineBoxMode();
+          helper.modes.disableLineMode();
+        },
+        line() {
+          set({ mode: "sketch" });
+          helper.modes.enableLineMode();
+        },
+        lineBox() {
+          set({ mode: "sketch" });
+          helper.modes.enableLineBoxMode();
+        },
+        square() {
+          set({ mode: "sketch" });
+          helper.stamps.square();
+        },
+        triangle() {
+          set({ mode: "sketch" });
+          helper.stamps.triangle();
+        },
+        hexagon() {
+          set({ mode: "sketch" });
+          helper.stamps.hexagon();
+        },
+        circle() {
+          set({ mode: "sketch" });
+          helper.stamps.circle();
+        },
+        remove() {
+          helper.key.down("Backspace");
+        }
+      },
+      reset: () => {
+        const state = get();
+        if (state.tool.requestId) {
+          state.cancelRequest(state.tool.requestId);
+        }
+      },
+      setPolygonState: (state) => set({
+        polygonState: typeof state === "function" ? state(get().polygonState) : state
+      }),
+      getRequestId: () => {
+        const requestId = Math.random().toString(36).slice(2);
+        set((state) => ({
+          validRequestIds: [...state.validRequestIds, requestId]
+        }));
+        return {
+          requestId,
+          clear: () => {
+            if (get().tool.requestId === requestId) {
+            }
+            set((state) => ({
+              tool: state.tool.requestId === requestId ? { enabled: false, requestId: null, canvasId: null } : state.tool,
+              validRequestIds: state.validRequestIds.filter((id) => id !== requestId)
+            }));
+          }
+        };
+      },
+      cancelRequest: (requestId) => {
+        set((state) => ({
+          mode: "explore",
+          tool: state.tool.requestId === requestId ? { enabled: false, requestId: null, canvasId: null } : state.tool,
+          validRequestIds: state.validRequestIds.filter((id) => id !== requestId)
+        }));
+        events2.emit("atlas.request-cancelled", { id: requestId });
+      },
+      requestAnnotation: async (request, options) => {
+        const response = requestToAnnotationResponse(request);
+        try {
+          const { points = [], open = true } = response.polygon || {};
+          const { requestId, canvasId = null, toolId } = options;
+          const state = get();
+          const isValid = state.validRequestIds.includes(requestId);
+          if (!isValid)
+            return null;
+          if (state.tool.enabled)
+            return null;
+          polygons.setShape({ id: requestId, points, open });
+          if (request.type === "box") {
+            polygons.modes.enableBoxMode();
+          }
+          if (request.type === "target") {
+            polygons.modes.enableBoxMode();
+            polygons.modes.lockAspectRatio();
+          }
+          events2.emit("atlas.annotation-request", { id: requestId });
+          set({
+            polygon: { id: requestId, points, open },
+            mode: "sketch",
+            requestType: request.type,
+            tool: {
+              enabled: true,
+              requestId,
+              canvasId
+            }
+          });
+          if (toolId) {
+            state.switchTool[toolId]?.();
+          } else if (points.length === 0) {
+            state.switchTool.square();
+          }
+          return new Promise((resolve) => {
+            const cancelHandler = (e) => {
+              if (e.id !== requestId)
+                return;
+              set({
+                mode: "explore",
+                tool: {
+                  requestId: null,
+                  enabled: false,
+                  canvasId: null
+                }
+              });
+              events2.off("atlas.request-cancelled", cancelHandler);
+              events2.off("atlas.annotation-completed", handler);
+              resolve(null);
+            };
+            const handler = (e) => {
+              if (e.id !== requestId)
+                return;
+              set({
+                mode: "explore",
+                tool: {
+                  requestId: null,
+                  enabled: false,
+                  canvasId: null
+                }
+              });
+              events2.off("atlas.annotation-completed", handler);
+              events2.off("atlas.request-cancelled", cancelHandler);
+              resolve(e);
+            };
+            events2.on("atlas.request-cancelled", cancelHandler);
+            events2.on("atlas.annotation-completed", handler);
+          });
+        } catch (err) {
+          return null;
+        }
+      },
+      completeRequest: (requestId) => {
+        if (typeof requestId === "string" && requestId) {
+          if (requestId !== get().tool.requestId) {
+            return;
+          }
+        }
+        const polygon = get().polygon;
+        if (!polygon)
+          return;
+        events2.emit("atlas.annotation-completed", {
+          id: polygon.id,
+          polygon,
+          requestType: get().requestType,
+          target: polygonToTarget(polygon),
+          canvasId: get().tool.canvasId,
+          boundingBox: polygonToBoundingBox(polygon)
+        });
+      },
+      setAtlasRuntime: (newRuntime) => {
+        runtime = newRuntime;
+        events2.emit("atlas.ready", { runtime: newRuntime });
+        runtime.world.addLayoutSubscriber((ev, data) => {
+          if (ev === "event-activation" || ev === "zoom-to" || ev === "go-home") {
+            if (runtime?._lastGoodScale && !Number.isNaN(runtime._lastGoodScale)) {
+              helper.setScale(1 / runtime._lastGoodScale);
+            }
+          }
+        });
+      },
+      clearAtlasRuntime: () => {
+        runtime = null;
+        set({ stableViewport: null });
+      },
+      setCanvasRelativePosition: (canvasId, position) => {
+        set((state) => ({
+          canvasRelativePositions: {
+            ...state.canvasRelativePositions,
+            [canvasId]: position
+          }
+        }));
+      },
+      clearCanvasRelativePosition: (canvasId) => {
+        set((state) => {
+          const newPositions = { ...state.canvasRelativePositions };
+          delete newPositions[canvasId];
+          return { canvasRelativePositions: newPositions };
+        });
+      },
+      changeMode: (mode) => {
+        set({ mode });
+      },
+      // Navigation controls
+      nudgeLeft: () => {
+      },
+      nudgeRight: () => {
+      },
+      nudgeUp: () => {
+      },
+      nudgeDown: () => {
+      },
+      zoomIn: () => {
+        runtime?.world?.zoomIn();
+      },
+      zoomOut: () => {
+        runtime?.world?.zoomOut();
+      },
+      goHome: () => {
+        runtime?.world?.goHome();
+      }
+    };
+  });
+  const helper = store.getState().polygons;
+  events2.on("atlas.annotation-request", () => {
+    helper.clock.start((state, slowState, dt) => {
+      events2.emit("atlas.polygon-render", { state, slowState, dt });
+    }, store.getState().setPolygonState);
+  });
+  events2.on("atlas.annotation-completed", () => {
+    helper.clock.stop();
+  });
+  events2.on("atlas.request-cancelled", () => {
+    helper.clock.stop();
+  });
+  return store;
+}
+
+// src/hooks/use-event.tsx
+import mitt2 from "mitt";
+import { createContext as createContext7, useContext as useContext7, useEffect as useEffect4 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var events = mitt2();
+var ReactEmitterContext = createContext7(events);
+function EventEmitterProvider({
+  children,
+  emitter
+}) {
+  return /* @__PURE__ */ jsx11(ReactEmitterContext.Provider, { value: emitter, children });
+}
+function useEmitter() {
+  return useContext7(ReactEmitterContext);
+}
+function useEvent(key, listener, deps = []) {
+  const emitter = useContext7(ReactEmitterContext);
+  useEffect4(() => {
+    const handler = (data) => {
+      listener(data);
+    };
+    emitter.on(key, handler);
+    return () => {
+      emitter.off(key, handler);
+    };
+  }, [emitter, key, ...deps]);
+}
+
+// src/AtlasStore/AtlasStoreProvider.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var AtlasStoreReactContext = createContext8(null);
+function useAtlasStore() {
+  return useContext8(AtlasStoreReactContext);
+}
+function AtlasStoreProvider({
+  children
+}) {
+  const emitter = useEmitter();
+  const value = useMemo6(() => {
+    return createAtlasStore({ events: emitter });
+  }, []);
+  return /* @__PURE__ */ jsx12(AtlasStoreReactContext.Provider, { value, children });
+}
+
 // src/BaseCreator/BaseCreator.tsx
-import { memo as memo3, Suspense, useEffect as useEffect7, useMemo as useMemo11, useRef as useRef3, useState as useState5 } from "react";
-import { useVault as useVault4 } from "react-iiif-vault";
 import { toRef as toRef3 } from "@iiif/parser";
+import { CreatorGrid } from "@manifest-editor/components";
+import {
+  matchBasedOnResource as matchBasedOnResource2
+} from "@manifest-editor/creator-api";
 
 // ../ui/madoc/components/icons/Spinner.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 function Spinner(props) {
-  return /* @__PURE__ */ jsx11("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__ */ jsx11("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ jsx11("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx11(
+  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",
@@ -1182,137 +1650,19 @@ function Spinner(props) {
   ] }) });
 }
 
-// src/highlighted-image-resources.ts
-import { create } from "zustand";
-import { useEffect as useEffect4, useMemo as useMemo6 } from "react";
-
-// src/helpers.ts
-import { toRef } from "@iiif/parser";
-async function getManifestNomalized(id) {
-  let responseData = void 0;
-  try {
-    await fetch(id).then((response) => {
-      return response.json().catch((err) => {
-        console.error(`'${err}' happened!`);
-      });
-    }).then((data) => {
-      responseData = { ...data };
-    });
-  } catch (error) {
-    console.log(error);
-  }
-  return responseData;
-}
-function createActionIdentity(type, property, parent) {
-  return `create_${type}_${property}_${toRef(parent)?.type || "unknown"}`;
-}
-function createDownload(data, fileName, fileType = "text/json") {
-  const blob = data instanceof Blob ? data : new Blob([data], { type: fileType });
-  const a = document.createElement("a");
-  a.download = fileName;
-  a.href = window.URL.createObjectURL(blob);
-  const clickEvt = new MouseEvent("click", {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  a.dispatchEvent(clickEvt);
-  a.remove();
-}
-async function copyToClipboard(json) {
-  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 app = {
-    metadata,
-    layout: {
-      leftPanels: [],
-      rightPanels: [],
-      centerPanels: [],
-      ...props
-    }
-  };
-  return map ? map(app) : app;
-}
-
-// src/highlighted-image-resources.ts
-var useHighlightedImageResource = create((set) => ({
-  regions: {},
-  resources: [],
-  setRegion: (id, region) => {
-    set((ex) => ({ ...ex.regions, regions: { [id]: region || null } }));
-  },
-  setHighlight: (id) => {
-    set({ resources: Array.isArray(id) ? id : [id] });
-  },
-  highlight: (id) => {
-    set((s) => {
-      if (s.resources.indexOf(id) !== -1) {
-        return s;
-      }
-      return { resources: [...s.resources, id] };
-    });
-  },
-  clearHighlight: (id) => {
-    set((s) => ({ resources: s.resources.filter((item) => item !== id) }));
-  }
-}));
-function useTemporaryHighlight(newValue) {
-  const id = useMemo6(() => randomId(), []);
-  const value = useHighlightedImageResource((s) => s.regions[id]);
-  const setRegion = useHighlightedImageResource((s) => s.setRegion);
-  useEffect4(() => {
-    if (value && newValue) {
-      if (value !== newValue && (value.x !== newValue.x || value.y !== newValue.y || value.width !== newValue.width || value.height !== newValue.height)) {
-        setRegion(id, newValue || null);
-      }
-    } else {
-      setRegion(id, newValue || null);
-    }
-  }, [value]);
-  useEffect4(() => {
-    return () => setRegion(id, null);
-  }, []);
-}
-function useHoverHighlightImageResource(id) {
-  const highlight = useHighlightedImageResource((s) => s.highlight);
-  const clear = useHighlightedImageResource((s) => s.clearHighlight);
-  useEffect4(() => {
-    return () => {
-      if (id) {
-        clear(id);
-      }
-    };
-  }, [clear, id]);
-  return useMemo6(() => {
-    return {
-      onMouseEnter() {
-        if (id) {
-          highlight(id);
-        }
-      },
-      onMouseLeave() {
-        if (id) {
-          clear(id);
-        }
-      }
-    };
-  }, [id, highlight, clear]);
-}
+// 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";
 
 // src/Layout/Layout.context.tsx
-import { createContext as createContext7, useContext as useContext7, useMemo as useMemo7 } from "react";
-var LayoutActionsReactContext = createContext7(null);
-var LayoutStateReactContext = createContext7(null);
+import { createContext as createContext9, useContext as useContext9, useMemo as useMemo7 } from "react";
+var LayoutActionsReactContext = createContext9(null);
+var LayoutStateReactContext = createContext9(null);
 function useLayoutState() {
-  return useContext7(LayoutStateReactContext);
+  return useContext9(LayoutStateReactContext);
 }
 function useLayoutActions() {
-  return useContext7(LayoutActionsReactContext);
+  return useContext9(LayoutActionsReactContext);
 }
 function useAvailableLayouts() {
   const app = useApp();
@@ -1321,22 +1671,22 @@ function useAvailableLayouts() {
 function useLayoutProvider() {
   const app = useApp();
   const layout = app.layout;
-  const actions = useContext7(LayoutActionsReactContext);
-  const state = useContext7(LayoutStateReactContext);
+  const actions = useContext9(LayoutActionsReactContext);
+  const state = useContext9(LayoutStateReactContext);
   return useMemo7(() => {
     return { actions, state, ...layout };
   }, [app, state]);
 }
 
 // src/Layout/components/ModularPanel.tsx
-import styled8 from "styled-components";
+import styled6 from "styled-components";
 
 // ../ui/icons/StarIcon.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+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__ */ jsx12("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx12("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx12(
+  /* @__PURE__ */ jsx14("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx14("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ jsx14(
     "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",
@@ -1346,15 +1696,15 @@ var StarIcon = (props) => /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.o
 ] });
 
 // ../ui/icons/BackIcon.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+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__ */ jsx13("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ jsx13("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+  /* @__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" })
 ] });
 
 // src/Layout/components/ModularPanel.tsx
 import { ErrorBoundary } from "react-error-boundary";
-import { createContext as createContext8, useCallback as useCallback3, useContext as useContext8, useEffect as useEffect5, useMemo as useMemo8, useRef as useRef2, useState as useState4 } from "react";
+import { createContext as createContext10, useCallback as useCallback3, useContext as useContext10, useEffect as useEffect5, useMemo as useMemo8, useRef as useRef2, useState as useState4 } from "react";
 
 // ../ui/atoms/PaddedSidebarContainer.tsx
 import styled4 from "styled-components";
@@ -1365,70 +1715,16 @@ var PaddedSidebarContainer = styled4.div`
   overflow: visible;
 `;
 
-// ../ui/madoc/components/callouts/ErrorMessage.tsx
-import styled6 from "styled-components";
-
-// ../ui/madoc/components/callouts/BaseMessage.tsx
-import styled5, { css as css2 } from "styled-components";
-var BaseMessage = styled5.div`
-  background: #000;
-  color: #fff;
-  width: 100%;
-  padding: 0.5em 1em;
-  line-height: 1.9em;
-  display: flex;
-
-  a {
-    color: #fff;
-  }
-
-  svg {
-    fill: #fff;
-    margin: 0 0.5em;
-    vertical-align: text-bottom;
-  }
-
-  ${(props) => props.$small && css2`
-      font-size: 0.75em;
-      padding: 0.25em 0.5em;
-      line-height: 1.6em;
-    `}
-
-  ${(props) => props.$wide && css2`
-      margin-left: -2em;
-      margin-right: -2em;
-      width: auto;
-      svg {
-        height: 0.8em;
-        vertical-align: baseline;
-      }
-    `}
-
-  ${(props) => props.$margin && css2`
-      margin-bottom: 1em;
-    `}
-
-  ${(props) => props.$banner && css2`
-      border-radius: 5px;
-      box-shadow: 0 3px 15px 0 rgb(0 0 0 / 16%);
-    `}
-`;
-
-// ../ui/madoc/components/callouts/ErrorMessage.tsx
-var ErrorMessage = styled6(BaseMessage)`
-  background: #c74158;
-  color: #fff;
-`;
-
 // src/Layout/components/PanelError.tsx
+import { ErrorMessage } from "@manifest-editor/components";
 import { useState as useState3 } from "react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function PanelError(props) {
   let error = props.error.toString();
   const [isFixing, setIsFixing] = useState3(false);
   return /* @__PURE__ */ jsxs7(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ jsx14(ErrorMessage, { $margin: true, children: error }),
-    /* @__PURE__ */ jsx14(CalltoButton, { onClick: props.resetErrorBoundary, children: "Try again" })
+    /* @__PURE__ */ jsx16(ErrorMessage, { className: "mb-2", children: error }),
+    /* @__PURE__ */ jsx16(CalltoButton, { onClick: props.resetErrorBoundary, children: "Try again" })
   ] });
 }
 
@@ -1455,12 +1751,12 @@ function renderHelper(htmlOrReact) {
 import { ReactVaultContext } from "react-iiif-vault";
 
 // ../ui/atoms/Dropdown.tsx
-import styled7, { css as css3 } from "styled-components";
-var Dropdown = styled7.div`
+import styled5, { css as css2 } from "styled-components";
+var Dropdown = styled5.div`
   position: relative;
   display: inline-block;
 `;
-var DropdownContent = styled7.div`
+var DropdownContent = styled5.div`
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -1476,7 +1772,7 @@ var DropdownContent = styled7.div`
     }
   }
 `;
-var DropdownItem = styled7.button`
+var DropdownItem = styled5.button`
   padding: 0 ${(props) => props.theme.padding.small || "0.5rem"};
   color: ${(props) => props.theme.color.main || "none"};
   background-color: ${(props) => props.theme.color.white || "white"};
@@ -1495,7 +1791,7 @@ var DropdownItem = styled7.button`
     background-color: ${(props) => props.theme.color.lightgrey || "lightgrey"};
   }
 
-  ${(props) => props.$active && css3`
+  ${(props) => props.$active && css2`
       background: #b84c74;
       color: #fff;
       &:hover {
@@ -1504,7 +1800,7 @@ var DropdownItem = styled7.button`
       }
     `}
 `;
-var DropdownMenu = styled7.div`
+var DropdownMenu = styled5.div`
   display: none;
   flex-direction: column;
   position: absolute;
@@ -1528,18 +1824,18 @@ var DropdownMenu = styled7.div`
     }
   }
 
-  ${(props) => props.$open && css3`
+  ${(props) => props.$open && css2`
       display: flex;
     `}
 `;
-var DropdownLabel = styled7.div`
+var DropdownLabel = styled5.div`
   color: #999;
   text-transform: uppercase;
   font-weight: 600;
   padding: 0.7em;
   font-size: 0.875em;
 `;
-var DropdownDivider = styled7.div`
+var DropdownDivider = styled5.div`
   height: 1px;
   margin: 0 0.5em;
   background: #eee;
@@ -1552,12 +1848,12 @@ import useDropdownMenu2 from "react-accessible-dropdown-menu-hook";
 var OverrideScrollbar = "ModularPanel_OverrideScrollbar";
 
 // src/Layout/components/ModularPanel.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var LayoutTitleReactContext = createContext8(null);
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var LayoutTitleReactContext = createContext10(null);
 function useSetCustomTitle() {
-  return useContext8(LayoutTitleReactContext);
+  return useContext10(LayoutTitleReactContext);
 }
-var ModularPanelWrapper = styled8.div`
+var ModularPanelWrapper = styled6.div`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -1610,7 +1906,7 @@ var ModularPanelWrapper = styled8.div`
     transform: translateX(100%);
   }
 `;
-var ModularPanelHeader = styled8.div`
+var ModularPanelHeader = styled6.div`
   background: #fff;
   display: flex;
   height: 2.8em;
@@ -1633,7 +1929,7 @@ var ModularPanelHeader = styled8.div`
     box-shadow: inset 0 -5px 10px 0 rgba(255, 255, 255, 0.5);
   }
 `;
-var ModulePanelButton = styled8.button`
+var ModulePanelButton = styled6.button`
   border: none;
   background: transparent;
   padding: 0 0.4em;
@@ -1646,17 +1942,17 @@ var ModulePanelButton = styled8.button`
     font-size: 1.2em;
   }
 `;
-var ModulePanelSpacer = styled8.div`
+var ModulePanelSpacer = styled6.div`
   flex: 1 1 0px;
 `;
-var ModularPanelLabel = styled8.h2`
+var ModularPanelLabel = styled6.h2`
   font-size: 0.875em;
   flex: 1 1 0px;
   padding-left: 1em;
   text-align: center;
   align-self: center;
 `;
-var ModularPanelContent = styled8.div`
+var ModularPanelContent = styled6.div`
   flex: 1 1 0px;
   display: flex;
 
@@ -1680,7 +1976,7 @@ function ModularPanel({
   style,
   noHeader
 }) {
-  const vault = useContext8(ReactVaultContext) || null;
+  const vault = useContext10(ReactVaultContext) || null;
   const [didError, setDidError] = useState4(false);
   const appState = useAppState();
   const layout = useLayoutProvider();
@@ -1727,16 +2023,16 @@ function ModularPanel({
   if (!panel || !state.current) {
     return null;
   }
-  const backButton = panel.backAction || state.stack.length ? /* @__PURE__ */ jsx15(ModulePanelButton, { onClick: backAction, children: /* @__PURE__ */ jsx15(BackIcon, {}) }) : null;
-  const closeButton = /* @__PURE__ */ jsx15(ModulePanelButton, { onClick: close || actions.close, children: /* @__PURE__ */ jsx15(CloseIcon, {}) });
-  return /* @__PURE__ */ jsx15(LayoutTitleReactContext.Provider, { value: _setCustomTitle, children: /* @__PURE__ */ jsxs8(ModularPanelWrapper, { "data-state": transition, "data-flipped": isLeft, style, "data-header": !noHeader, children: [
+  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: [
         panel.renderBackAction ? panel.renderBackAction({ backAction, fallback: backButton }) : backButton,
         switchablePanels.length ? /* @__PURE__ */ jsxs8(DropdownMenu, { $open: isOpen, style: { left: "0.5em" }, children: [
-          /* @__PURE__ */ jsx15(DropdownLabel, { children: "All panels" }),
-          /* @__PURE__ */ jsx15(DropdownDivider, {}),
-          switchablePanels.map((newPanel, i) => /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx17(DropdownLabel, { children: "All panels" }),
+          /* @__PURE__ */ jsx17(DropdownDivider, {}),
+          switchablePanels.map((newPanel, i) => /* @__PURE__ */ jsx17(
             DropdownItem,
             {
               ...itemProps[i],
@@ -1748,11 +2044,11 @@ function ModularPanel({
           ))
         ] }) : null
       ] }),
-      customTitle ? /* @__PURE__ */ jsx15(ModularPanelLabel, { children: customTitle }) : hideHeader ? /* @__PURE__ */ jsx15(ModulePanelSpacer, {}) : /* @__PURE__ */ jsx15(ModularPanelLabel, { children: panel.label }),
-      pinnable ? state.pinned ? /* @__PURE__ */ jsx15(ModulePanelButton, { onClick: pinActions.unpin, children: /* @__PURE__ */ jsx15(StarIcon, { fill: "orange" }) }) : /* @__PURE__ */ jsx15(ModulePanelButton, { onClick: () => pinActions.pin({ id: panel.id, state: state.state }), children: /* @__PURE__ */ jsx15(StarIcon, { fill: "#ddd" }) }) : 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,
       panel.renderCloseAction ? panel.renderCloseAction({ closeAction: close || actions.close, fallback: closeButton }) : closeButton
     ] }),
-    /* @__PURE__ */ jsx15(ModularPanelContent, { className: OverrideScrollbar, children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(ModularPanelContent, { className: OverrideScrollbar, children: /* @__PURE__ */ jsx17(
       ErrorBoundary,
       {
         onError: () => setDidError(true),
@@ -1767,18 +2063,193 @@ function ModularPanel({
           )
         )
       }
-    ) })
-  ] }) });
+    ) })
+  ] }) });
+}
+
+// src/highlighted-image-resources.ts
+import { create } from "zustand";
+import { useEffect as useEffect6, useMemo as useMemo9 } from "react";
+
+// src/helpers.ts
+import { toRef } from "@iiif/parser";
+async function getManifestNomalized(id) {
+  let responseData = void 0;
+  try {
+    await fetch(id).then((response) => {
+      return response.json().catch((err) => {
+        console.error(`'${err}' happened!`);
+      });
+    }).then((data) => {
+      responseData = { ...data };
+    });
+  } catch (error) {
+    console.log(error);
+  }
+  return responseData;
+}
+function createActionIdentity(type, property, parent) {
+  return `create_${type}_${property}_${toRef(parent)?.type || "unknown"}`;
+}
+function createDownload(data, fileName, fileType = "text/json") {
+  const blob = data instanceof Blob ? data : new Blob([data], { type: fileType });
+  const a = document.createElement("a");
+  a.download = fileName;
+  a.href = window.URL.createObjectURL(blob);
+  const clickEvt = new MouseEvent("click", {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  a.dispatchEvent(clickEvt);
+  a.remove();
+}
+async function copyToClipboard(json) {
+  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 app = {
+    metadata,
+    layout: {
+      leftPanels: [],
+      rightPanels: [],
+      centerPanels: [],
+      ...props
+    }
+  };
+  return map ? map(app) : app;
+}
+function extendApp(app, metadata, extensions) {
+  return {
+    ...app,
+    metadata,
+    config: {
+      ...app.config || {},
+      ...extensions.config || {}
+    },
+    layout: {
+      ...app.layout,
+      leftPanels: [
+        ...(app.layout.leftPanels || []).filter((panel) => {
+          if (extensions?.leftPanelIds) {
+            return extensions.leftPanelIds.includes(panel.id);
+          }
+          return true;
+        }),
+        ...extensions?.leftPanels || []
+      ],
+      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 || []
+      ]
+    }
+  };
+}
+
+// src/highlighted-image-resources.ts
+var useHighlightedImageResource = create((set) => ({
+  regions: {},
+  resources: [],
+  setRegion: (id, region) => {
+    set((ex) => ({ ...ex.regions, regions: { [id]: region || null } }));
+  },
+  setHighlight: (id) => {
+    set({ resources: Array.isArray(id) ? id : [id] });
+  },
+  highlight: (id) => {
+    set((s) => {
+      if (s.resources.indexOf(id) !== -1) {
+        return s;
+      }
+      return { resources: [...s.resources, id] };
+    });
+  },
+  clearHighlight: (id) => {
+    set((s) => ({ resources: s.resources.filter((item) => item !== id) }));
+  }
+}));
+function useTemporaryHighlight(newValue) {
+  const id = useMemo9(() => randomId(), []);
+  const value = useHighlightedImageResource((s) => s.regions[id]);
+  const setRegion = useHighlightedImageResource((s) => s.setRegion);
+  useEffect6(() => {
+    if (value && newValue) {
+      if (value !== newValue && (value.x !== newValue.x || value.y !== newValue.y || value.width !== newValue.width || value.height !== newValue.height)) {
+        setRegion(id, newValue || null);
+      }
+    } else {
+      setRegion(id, newValue || null);
+    }
+  }, [value]);
+  useEffect6(() => {
+    return () => setRegion(id, null);
+  }, []);
+}
+function useHoverHighlightImageResource(id) {
+  const highlight = useHighlightedImageResource((s) => s.highlight);
+  const clear = useHighlightedImageResource((s) => s.clearHighlight);
+  useEffect6(() => {
+    return () => {
+      if (id) {
+        clear(id);
+      }
+    };
+  }, [clear, id]);
+  return useMemo9(() => {
+    return {
+      onMouseEnter() {
+        if (id) {
+          highlight(id);
+        }
+      },
+      onMouseLeave() {
+        if (id) {
+          clear(id);
+        }
+      }
+    };
+  }, [id, highlight, clear]);
 }
 
 // src/BaseCreator/BaseCreator.hooks.tsx
-import { Creator } from "@manifest-editor/creator-api";
-import { useCallback as useCallback4, useMemo as useMemo10 } from "react";
-import { useVault as useVault3 } from "react-iiif-vault";
 import { toRef as toRef2 } from "@iiif/parser";
+import { Creator, matchBasedOnResource } from "@manifest-editor/creator-api";
+import { useCallback as useCallback4, useMemo as useMemo11 } from "react";
+import { useVault as useVault3 } from "react-iiif-vault";
 
 // src/PreviewVault/PreviewVault.tsx
-import { createContext as createContext9, useContext as useContext9, useEffect as useEffect6, useMemo as useMemo9 } from "react";
+import { createContext as createContext11, useContext as useContext11, useEffect as useEffect7, useMemo as useMemo10 } from "react";
 import { Vault as Vault2 } from "@iiif/helpers/vault";
 import { VaultProvider as VaultProvider2 } from "react-iiif-vault";
 
@@ -1874,12 +2345,12 @@ function createPreviewVault(homepageCollectionId = "vault://homepage-collection.
 }
 
 // src/PreviewVault/PreviewVault.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function usePreviewVault() {
-  return useContext9(PreviewVaultReactContext);
+  return useContext11(PreviewVaultReactContext);
 }
-var PreviewVaultReactContext = createContext9(new Vault2());
-var PreviewVaultAddHistory = createContext9({
+var PreviewVaultReactContext = createContext11(new Vault2());
+var PreviewVaultAddHistory = createContext11({
   addHistory: (id, type) => {
   },
   clearHistory: () => {
@@ -1887,112 +2358,121 @@ var PreviewVaultAddHistory = createContext9({
 });
 var HOMEPAGE_COLLECTION = "manifest-editor://homepage-collection.json";
 function usePreviewHistory() {
-  return useContext9(PreviewVaultAddHistory);
+  return useContext11(PreviewVaultAddHistory);
 }
 function PreviewVaultContext(props) {
-  const { vault, unsubscribe, addHistory, clearHistory } = useMemo9(() => {
+  const { vault, unsubscribe, addHistory, clearHistory } = useMemo10(() => {
     return createPreviewVault(HOMEPAGE_COLLECTION);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     return unsubscribe;
   }, []);
-  return /* @__PURE__ */ jsx16(PreviewVaultAddHistory.Provider, { value: { addHistory, clearHistory }, children: /* @__PURE__ */ jsx16(PreviewVaultReactContext.Provider, { value: vault, children: props.children }) });
+  return /* @__PURE__ */ jsx18(PreviewVaultAddHistory.Provider, { value: { addHistory, clearHistory }, children: /* @__PURE__ */ jsx18(PreviewVaultReactContext.Provider, { value: vault, children: props.children }) });
 }
 function PreviewVaultBoundary({ children }) {
   const vault = usePreviewVault();
-  return /* @__PURE__ */ jsx16(VaultProvider2, { vault, children });
+  return /* @__PURE__ */ jsx18(VaultProvider2, { vault, children });
 }
 
 // src/BaseCreator/BaseCreator.hooks.tsx
-function matchBasedOnResource(resource, list, options) {
-  const supported = [];
-  if (list.length === 0) {
-    return [];
-  }
-  const parent = toRef2(resource.parent);
-  const property = resource.property;
-  for (const def of list) {
-    if (parent && property) {
-      if (def.supports.parentTypes) {
-        if (!def.supports.parentTypes.includes(parent.type)) {
-          continue;
-        }
-      }
-      if (def.supports.parentFields) {
-        if (!def.supports.parentFields.includes(property)) {
-          continue;
-        }
-      }
-      if (def.supports.parentFieldMap) {
-        const type = def.supports.parentFieldMap[parent.type];
-        if (!type || !type.includes(property)) {
-          continue;
-        }
-      }
-      if (def.supports.disallowPainting && resource.isPainting) {
-        continue;
-      }
-      if (def.supports.custom) {
-        const isValid = def.supports.custom({ property, resource: parent, atIndex: resource.index }, options.vault);
-        if (!isValid) {
-          continue;
-        }
-      }
-      if (!def.supports.initialData && Object.keys(resource.initialData || {}).length !== 0) {
-        continue;
-      }
-      if (def.resourceType !== resource.type) {
-        if (!(def.additionalTypes || []).includes(resource.type)) {
-          continue;
-        }
-      }
-      supported.push(def);
-    }
-  }
-  return supported;
-}
 function useCreator(parent, property, type, target, options) {
   const vault = useVault3();
   const app = useApp();
   const { create: create2, edit } = useLayoutActions();
-  const supported = useMemo10(
-    () => matchBasedOnResource({ type, parent, index: 0, property }, app.layout.creators || [], { vault }),
+  const supported = useMemo11(
+    () => matchBasedOnResource(
+      { type, parent, index: 0, property },
+      app.layout.creators || [],
+      { vault }
+    ),
     [parent, property, app.layout.creators, type, vault]
   );
   const canCreate = parent && supported.length !== 0;
   const wrappedCreate = useCallback4(
     (index, initialData) => {
       if (parent) {
-        create2({ type, parent: toRef2(parent), property, index, target, initialData, ...options || {} });
+        create2({
+          type,
+          parent: toRef2(parent),
+          property,
+          index,
+          target,
+          initialData,
+          ...options || {}
+        });
+      }
+    },
+    [create2, parent, property, type, options, target]
+  );
+  const wrappedFilteredCreate = useCallback4(
+    (filter, index, initialData) => {
+      if (parent) {
+        create2({
+          type,
+          filter,
+          parent: toRef2(parent),
+          property,
+          index,
+          target,
+          initialData,
+          ...options || {}
+        });
       }
     },
-    [create2, parent, property, type]
+    [create2, parent, property, type, options, target]
   );
   const wrappedEdit = useCallback4(
     (resource, index) => {
-      edit(resource, parent ? { parent: toRef2(parent), property, index } : void 0);
+      edit(
+        resource,
+        parent ? { parent: toRef2(parent), property, index } : void 0
+      );
     },
     [edit, parent, property]
   );
-  const buttonProps = useMemo10(() => {
+  const wrappedCreator = useCallback4(
+    (initialCreator, initialData) => {
+      if (parent) {
+        create2({
+          type,
+          initialCreator,
+          parent: toRef2(parent),
+          property,
+          target,
+          initialData,
+          ...options || {}
+        });
+      }
+    },
+    [type, property, parent, target, create2, options]
+  );
+  const buttonProps = useMemo11(() => {
     return {
       "data-action-id": createActionIdentity(type, property, parent)
     };
-  }, []);
-  return [canCreate, { create: wrappedCreate, edit: wrappedEdit, buttonProps }];
+  }, [type, property, parent]);
+  return [
+    canCreate,
+    {
+      create: wrappedCreate,
+      edit: wrappedEdit,
+      createFiltered: wrappedFilteredCreate,
+      creator: wrappedCreator,
+      buttonProps
+    }
+  ];
 }
 function useInlineCreator() {
   const vault = useVault3();
   const previewVault = usePreviewVault();
   const app = useApp();
-  return useMemo10(() => {
+  return useMemo11(() => {
     return new Creator(vault, app.layout.creators || [], previewVault);
   }, [app.layout.creators, vault]);
 }
 
 // src/BaseCreator/BaseCreator.tsx
-import { CreatorGrid } from "@manifest-editor/components";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var RenderCreator = memo3(function RenderCreator2(props) {
   const vault = useVault4();
   const { edit, modal } = useLayoutActions();
@@ -2028,12 +2508,12 @@ var RenderCreator = memo3(function RenderCreator2(props) {
   const validate = async () => {
     return true;
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (!props.creator.render && !isCreating) {
       runCreate({});
     }
   }, [props.creator]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isCreating) {
       modal.popStack();
       modal.close();
@@ -2043,9 +2523,9 @@ var RenderCreator = memo3(function RenderCreator2(props) {
     return null;
   }
   if (!props.creator.render) {
-    return /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(Button, { onClick: () => runCreate({}), children: "Create" }) });
+    return /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Button, { onClick: () => runCreate({}), children: "Create" }) });
   }
-  return /* @__PURE__ */ jsx17(Fragment2, { children: /* @__PURE__ */ jsx17(Suspense, { fallback: /* @__PURE__ */ jsx17(Spinner, {}), children: props.creator.render({
+  return /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsx19(Suspense, { fallback: /* @__PURE__ */ jsx19(Spinner, {}), children: props.creator.render({
     vault,
     runCreate,
     validate,
@@ -2055,31 +2535,39 @@ var RenderCreator = memo3(function RenderCreator2(props) {
 function BaseCreator(props) {
   const app = useApp();
   const vault = useVault4();
-  const [currentId, setCurrentId] = useState5("");
+  const [currentId, setCurrentId] = useState5(
+    props.resource.initialCreator || ""
+  );
   const set = useSetCustomTitle();
-  const supported = useMemo11(
-    () => matchBasedOnResource(props.resource, app.layout.creators || [], { vault }),
+  const supported = useMemo12(
+    () => matchBasedOnResource2(props.resource, app.layout.creators || [], {
+      vault
+    }),
     [props.resource, app.layout.creators, vault]
   );
   if (supported.length === 1 && !currentId) {
     setCurrentId(supported[0].id);
   }
   const current = supported.find((t) => t.id === currentId);
-  useEffect7(() => {
+  useEffect8(() => {
     if (current) {
-      set && set(current.label);
+      set?.(current.label);
     }
   });
   if (supported.length === 0) {
-    return /* @__PURE__ */ jsx17("div", { children: "Not currently supported" });
+    return /* @__PURE__ */ jsx19("div", { children: "Not currently supported" });
   }
   if (current) {
+    const shouldHideModal = current.hiddenModal;
+    if (shouldHideModal) {
+      return /* @__PURE__ */ jsx19(RenderCreator, { creator: current, resource: props.resource });
+    }
     return /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx17("div", { className: "bg-me-gray-100 p-2", children: /* @__PURE__ */ jsx17(Button, { onClick: () => setCurrentId(""), children: "Back" }) }),
-      /* @__PURE__ */ jsx17("div", { className: "p-2 py-6", children: /* @__PURE__ */ jsx17(RenderCreator, { creator: current, resource: props.resource }) })
+      /* @__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__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     CreatorGrid,
     {
       label: "Select a type",
@@ -2095,22 +2583,23 @@ function BaseCreator(props) {
 }
 
 // src/BaseCreator/index.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var baseCreator = {
   id: "@manifest-editor/creator",
   label: "Add content",
   options: { hideHeader: true, tabs: false },
   render(state) {
-    return /* @__PURE__ */ jsx18(BaseCreator, { resource: state });
+    return /* @__PURE__ */ jsx20(BaseCreator, { resource: state });
   }
 };
 
 // src/BaseEditor/BaseEditor.tsx
-import { useMemo as useMemo13, useEffect as useEffect9 } from "react";
-import { useVault as useVault6 } from "react-iiif-vault";
+import { SidebarTabs } from "@manifest-editor/components";
+import { useContext as useContext13, useEffect as useEffect10, useMemo as useMemo14 } from "react";
+import { ResourceReactContext, useVault as useVault6 } from "react-iiif-vault";
 
 // src/EditingStack/EditingStack.tsx
-import { createContext as createContext10, useCallback as useCallback5, useContext as useContext10, useEffect as useEffect8, useMemo as useMemo12, useReducer as useReducer2 } from "react";
+import { createContext as createContext12, useCallback as useCallback5, useContext as useContext12, useEffect as useEffect9, useMemo as useMemo13, useReducer as useReducer2 } from "react";
 
 // src/EditingStack/EditingStack.reducer.ts
 import { toRef as toRef4 } from "@iiif/parser";
@@ -2207,10 +2696,10 @@ 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 jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultState = { stack: [], current: null, create: null };
-var EditingStackContext = createContext10(defaultState);
-var EditingStackActionsContext = createContext10({
+var EditingStackContext = createContext12(defaultState);
+var EditingStackActionsContext = createContext12({
   edit() {
   },
   close() {
@@ -2225,29 +2714,29 @@ var EditingStackActionsContext = createContext10({
   }
 });
 function useEditingStack() {
-  return useContext10(EditingStackActionsContext);
+  return useContext12(EditingStackActionsContext);
 }
 function useEditingResource() {
-  return useContext10(EditingStackContext).current;
+  return useContext12(EditingStackContext).current;
 }
 function useEditingResourceStack() {
-  return useContext10(EditingStackContext).stack;
+  return useContext12(EditingStackContext).stack;
 }
 function useCreatingResource() {
-  return useContext10(EditingStackContext).create;
+  return useContext12(EditingStackContext).create;
 }
 function useManifestEditor() {
   const { manifest } = useResourceContext();
   const vault = useVault5();
   const [key, invalidate] = useReducer2((i) => i + 1, 0);
   invariant(manifest, "Manifest not found");
-  const editor = useMemo12(() => {
+  const editor = useMemo13(() => {
     return new EditorInstance({
       reference: { id: manifest, type: "Manifest" },
       vault
     });
   }, [manifest, vault]);
-  useEffect8(() => {
+  useEffect9(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2259,13 +2748,13 @@ function useCollectionEditor() {
   const vault = useVault5();
   const [key, invalidate] = useReducer2((i) => i + 1, 0);
   invariant(collection, "Collection not found");
-  const editor = useMemo12(() => {
+  const editor = useMemo13(() => {
     return new EditorInstance({
       reference: { id: collection, type: "Collection" },
       vault
     });
   }, [collection, vault]);
-  useEffect8(() => {
+  useEffect9(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2276,14 +2765,14 @@ function useGenericEditor(ref, ctx = {}) {
   const vault = useVault5();
   const [key, invalidate] = useReducer2((i) => i + 1, 0);
   invariant(ref, "Resource not found");
-  const editor = useMemo12(() => {
+  const editor = useMemo13(() => {
     return new EditorInstance({
       reference: toRef5(ref),
       vault,
       context: { resource: ref, parent: ctx.parent, index: ctx.index, parentProperty: ctx.parentProperty }
     });
   }, [ref, vault]);
-  useEffect8(() => {
+  useEffect9(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2300,13 +2789,13 @@ function useEditor() {
   const vault = useVault5();
   const [key, invalidate] = useReducer2((i) => i + 1, 0);
   invariant(resource, "No resource selected");
-  const editor = useMemo12(() => {
+  const editor = useMemo13(() => {
     return new EditorInstance({
       reference: resource.resource.source || resource.resource,
       vault
     });
   }, [resource, vault]);
-  useEffect8(() => {
+  useEffect9(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2319,7 +2808,7 @@ function EditingStack(props) {
   const dispatch = useCallback5((action) => {
     _dispatch(action);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     return vault.on("@iiif/REMOVE_REFERENCE", (payload) => {
       const action = payload.action;
       const parent = { id: action.payload.id, type: action.payload.type };
@@ -2343,21 +2832,20 @@ function EditingStack(props) {
       dispatch({ type: "create", payload: { resource: null } });
     };
   }, []);
-  const actions = useMemo12(() => {
+  const actions = useMemo13(() => {
     return { edit, updateCurrent, close, back, create: create2 };
   }, []);
   const { instanceId } = useAppInstance();
-  return /* @__PURE__ */ jsx19(EditingStackActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx19(EditingStackContext.Provider, { value: state, children: props.children }) }, instanceId);
+  return /* @__PURE__ */ jsx21(EditingStackActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx21(EditingStackContext.Provider, { value: state, children: props.children }) }, instanceId);
 }
 
 // src/BaseEditor/BaseEditor.tsx
-import { SidebarTabs } from "@manifest-editor/components";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function BaseEditorBackButton({ fallback, backAction }) {
   const stack = useEditingResourceStack();
   const { back } = useEditingStack();
   if (stack.length) {
-    return /* @__PURE__ */ jsx20(ModulePanelButton, { onClick: back, children: /* @__PURE__ */ jsx20(BackIcon, {}) });
+    return /* @__PURE__ */ jsx22(ModulePanelButton, { onClick: back, children: /* @__PURE__ */ jsx22(BackIcon, {}) });
   }
   return fallback;
 }
@@ -2365,20 +2853,22 @@ function BaseEditorCloseButton({ closeAction, fallback }) {
   const stack = useEditingResourceStack();
   const current = useEditingResource();
   if (current || stack.length) {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx22(
       ModulePanelButton,
       {
         onClick: () => {
           closeAction();
         },
-        children: /* @__PURE__ */ jsx20(CloseIcon, {})
+        children: /* @__PURE__ */ jsx22(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;
   }
@@ -2426,74 +2916,124 @@ 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();
   const vault = useVault6();
   const { change } = useLayoutActions();
   const set = useSetCustomTitle();
   const { editorConfig } = useConfig();
   const resourceConfig = (resource?.resource.source?.type ? editorConfig[resource?.resource.source?.type] : editorConfig.All) || {};
-  const match = useMemo13(() => {
+  const newResourceContext = useMemo14(() => {
+    const newCtx = { ...currentResourceContext };
+    const id = resource?.resource.source.id;
+    const type = resource?.resource.source.type;
+    const mapping = {
+      Collection: "collection",
+      Manifest: "manifest",
+      Range: "range",
+      Canvas: "canvas",
+      Annotation: "annotation",
+      AnnotationPage: "annotationPage"
+    };
+    if (type && mapping[type]) {
+      newCtx[mapping[type]] = id;
+    }
+    return newCtx;
+  }, [resource, currentResourceContext]);
+  function wrap(children) {
+    if (!resource) {
+      return children;
+    }
+    return /* @__PURE__ */ jsx22(ResourceReactContext.Provider, { value: newResourceContext, children });
+  }
+  const match = useMemo14(() => {
     if (!resource) {
       return null;
     }
     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))
-        };
+    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;
       }
-      return resource2;
-    });
-    return editBasedOnResource(resource, mappedResources, { edit: true, vault }, resourceConfig);
+    );
+    return editBasedOnResource(
+      resource,
+      mappedResources,
+      { edit: true, vault },
+      resourceConfig
+    );
   }, [resource, app]);
-  useEffect9(() => {
+  useEffect10(() => {
     set(match?.label || "");
   });
+  useEffect10(() => {
+    const availableKeys = match?.editors.map((editor, key) => editor.id + key) || [];
+    const currentKey = availableKeys.find((key) => key === currentTab);
+    if (!currentKey) {
+      change("@manifest-editor/editor", { currentTab: availableKeys[0] });
+    }
+  }, [match?.editors, currentTab, change]);
   if (!resource || !match) {
     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 /* @__PURE__ */ jsx20("div", { className: "w-full", children: first.component(resourceConfig) });
+      return wrap(
+        /* @__PURE__ */ jsx22("div", { className: "w-full", children: first.component(resourceConfig) })
+      );
     }
   }
-  return /* @__PURE__ */ jsx20(
-    SidebarTabs,
-    {
-      menuId: resource.resource.source.id,
-      menu: (match?.editors || []).map((editor, key) => {
-        return {
-          id: editor.id + key,
-          label: editor.label,
-          renderComponent: () => editor.component(resourceConfig)
-        };
-      }),
-      selectedKey: currentTab,
-      onSelectionChange: (p) => change("@manifest-editor/editor", { currentTab: p })
-    },
-    resource.resource.source?.id
+  return wrap(
+    /* @__PURE__ */ jsx22(
+      SidebarTabs,
+      {
+        menuId: resource.resource.source.id,
+        menu: (match?.editors || []).map((editor, key) => {
+          return {
+            id: editor.id + key,
+            label: editor.label,
+            renderComponent: () => editor.component(resourceConfig)
+          };
+        }),
+        selectedKey: currentTab,
+        onSelectionChange: (p) => {
+          change("@manifest-editor/editor", { currentTab: p });
+        }
+      },
+      resource.resource.source?.id
+    )
   );
 }
 
 // src/BaseEditor/index.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var baseEditor = {
   id: "@manifest-editor/editor",
   label: "Editor",
   options: { hideHeader: true, tabs: true, minWidth: 400 },
-  renderBackAction: ({ backAction, fallback }) => /* @__PURE__ */ jsx21(BaseEditorBackButton, { backAction, fallback }),
-  renderCloseAction: ({ closeAction, fallback }) => /* @__PURE__ */ jsx21(BaseEditorCloseButton, { closeAction, fallback }),
+  renderBackAction: ({ backAction, fallback }) => /* @__PURE__ */ jsx23(BaseEditorBackButton, { backAction, fallback }),
+  renderCloseAction: ({ closeAction, fallback }) => /* @__PURE__ */ jsx23(BaseEditorCloseButton, { closeAction, fallback }),
   render({ currentTab }) {
-    return /* @__PURE__ */ jsx21(BaseEditor, { currentTab });
+    return /* @__PURE__ */ jsx23(BaseEditor, { currentTab });
   }
 };
 
@@ -2501,7 +3041,7 @@ var baseEditor = {
 import { Sidebar, SidebarHeader, SidebarContent, Form, ActionButton } from "@manifest-editor/components";
 
 // src/hooks/use-decay-state.ts
-import { useMemo as useMemo14, useRef as useRef4, useState as useState6 } from "react";
+import { useMemo as useMemo15, useRef as useRef4, useState as useState6 } from "react";
 function useDecayState(time) {
   const [active, _setActive] = useState6(false);
   const lastTimeout = useRef4();
@@ -2526,11 +3066,11 @@ function useDecayState(time) {
     }
     _setActive(true);
   }
-  return useMemo14(() => [active, { set, clear }], [active]);
+  return useMemo15(() => [active, { set, clear }], [active]);
 }
 
 // src/ConfigContext/ConfigEditor.tsx
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 function ConfigEditor() {
   const previews = usePreviewContext();
   const config = useConfig();
@@ -2558,12 +3098,12 @@ function ConfigEditor() {
     saveState.clear();
   }
   return /* @__PURE__ */ jsxs10(Sidebar, { children: [
-    /* @__PURE__ */ jsx22(SidebarHeader, { title: "Workspace configuration" }),
-    isSaved ? /* @__PURE__ */ jsx22("div", { className: "bg-me-primary-500 text-white p-3 text-sm", children: "Changes saved" }) : null,
-    /* @__PURE__ */ jsx22(SidebarContent, { className: "p-4", children: /* @__PURE__ */ jsxs10(Form.Form, { onSubmit, className: "flex flex-col gap-3", 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__ */ jsx22(Form.Label, { htmlFor: "defaultLanguage", children: "Default Language" }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "defaultLanguage", children: "Default Language" }),
+        /* @__PURE__ */ jsx24(
           Form.Input,
           {
             type: "text",
@@ -2574,8 +3114,8 @@ function ConfigEditor() {
         )
       ] }),
       /* @__PURE__ */ jsxs10(Form.InputContainer, { children: [
-        /* @__PURE__ */ jsx22(Form.Label, { htmlFor: "availableLanguages", children: "Available Languages" }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "availableLanguages", children: "Available Languages" }),
+        /* @__PURE__ */ jsx24(
           Form.Input,
           {
             type: "text",
@@ -2586,7 +3126,7 @@ function ConfigEditor() {
         )
       ] }),
       /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           Form.Input,
           {
             type: "checkbox",
@@ -2595,10 +3135,22 @@ function ConfigEditor() {
             defaultChecked: config.i18n?.advancedLanguageMode || false
           }
         ),
-        /* @__PURE__ */ jsx22(Form.Label, { htmlFor: "advancedLanguageMode", children: "Advanced Language Mode" })
+        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "advancedLanguageMode", children: "Advanced Language Mode" })
       ] }),
       /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
+          Form.Input,
+          {
+            type: "checkbox",
+            name: "textGranularityEnabled",
+            id: "textGranularityEnabled",
+            defaultChecked: config.i18n?.textGranularityEnabled || false
+          }
+        ),
+        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "textGranularityEnabled", children: "Enable text granularity" })
+      ] }),
+      /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ jsx24(
           Form.Input,
           {
             type: "checkbox",
@@ -2607,16 +3159,16 @@ function ConfigEditor() {
             defaultChecked: config.export?.version === 2
           }
         ),
-        /* @__PURE__ */ jsx22(Form.Label, { htmlFor: "isVersion2", children: "Export Presentation 2 Manifests" })
+        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "isVersion2", children: "Export Presentation 2 Manifests" })
       ] }),
       /* @__PURE__ */ jsxs10(Form.InputContainer, { children: [
-        /* @__PURE__ */ jsx22(Form.Label, { htmlFor: "defaultPreview", children: "Default preview" }),
-        /* @__PURE__ */ jsx22("div", { children: previews.configs.map((preview, key) => {
+        /* @__PURE__ */ jsx24(Form.Label, { htmlFor: "defaultPreview", children: "Default preview" }),
+        /* @__PURE__ */ jsx24("div", { children: previews.configs.map((preview, key) => {
           if (preview.type === "iiif-preview-service") {
             return null;
           }
           return /* @__PURE__ */ jsxs10(Form.InputContainer, { horizontal: true, children: [
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx24(
               Form.Input,
               {
                 type: "radio",
@@ -2626,17 +3178,25 @@ function ConfigEditor() {
                 defaultChecked: !config.defaultPreview ? key === 0 : config.defaultPreview === preview.id
               }
             ),
-            /* @__PURE__ */ jsx22("label", { htmlFor: preview.id, children: preview.label })
+            /* @__PURE__ */ jsx24("label", { htmlFor: preview.id, children: preview.label })
           ] }, preview.id);
         }) })
       ] }),
-      /* @__PURE__ */ jsx22("div", { className: "mt-5", children: /* @__PURE__ */ jsx22(ActionButton, { type: "submit", children: "Save changes" }) })
+      /* @__PURE__ */ jsx24(
+        "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" }) })
     ] }) })
   ] });
 }
 
 // src/ExportPanel/ExportPanel.tsx
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 import { useManifest, useVault as useVault7 } from "react-iiif-vault";
 
 // ../ui/ui/CenterPanelContainer/CenterPanelContainer.module.css
@@ -2648,37 +3208,37 @@ var CenterPanelContainer_default = {
 };
 
 // ../ui/ui/CenterPanelContainer/CenterPanelContainer.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs11 } 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__ */ jsx23("h2", { className: CenterPanelContainer_default.CenterPanelTitle, children: props.title }) : null,
-      props.close ? /* @__PURE__ */ jsx23(Button, { className: CenterPanelContainer_default.CenterPanelClose, onClick: props.close, children: /* @__PURE__ */ jsx23(CloseIcon, {}) }) : null
+      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
     ] }) : null,
     props.children
   ] });
 }
 
 // ../ui/atoms/Accordion.tsx
-import styled9 from "styled-components";
+import styled7 from "styled-components";
 import {
   createRef,
   forwardRef,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useImperativeHandle,
-  useMemo as useMemo15,
+  useMemo as useMemo16,
   useRef as useRef5,
   useState as useState7
 } from "react";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
-var AccordionContainer = styled9.div`
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var AccordionContainer = styled7.div`
   flex: 1;
   display: flex;
   width: 100%;
   flex-direction: column;
   position: relative;
 `;
-var ItemRow = styled9.div`
+var ItemRow = styled7.div`
   background: #fff;
   position: relative;
   border-bottom: 1px solid #d0d0d0;
@@ -2697,12 +3257,12 @@ var ItemRow = styled9.div`
     //justify-content: center;
   }
 `;
-var ItemDescription = styled9.p`
+var ItemDescription = styled7.p`
   font-size: 0.9em;
   color: #777;
   font-weight: 400;
 `;
-var ItemLabel = styled9.button`
+var ItemLabel = styled7.button`
   color: inherit;
   text-rendering: geometricPrecision;
   border: none;
@@ -2745,7 +3305,7 @@ var ItemLabel = styled9.button`
     }
   }
 `;
-var ItemCollapse = styled9.div`
+var ItemCollapse = styled7.div`
   font-size: 1.4em;
   padding-right: 0.3em;
   display: flex;
@@ -2755,7 +3315,7 @@ var ItemCollapse = styled9.div`
     font-size: 2em;
   }
 `;
-var ItemIcon = styled9.div`
+var ItemIcon = styled7.div`
   width: 2em;
   align-items: center;
   //padding-top: 0.5em;
@@ -2769,12 +3329,12 @@ var ItemIcon = styled9.div`
     color: #999;
   }
 `;
-var ItemBodyInner = styled9.div`
+var ItemBodyInner = styled7.div`
   min-height: 0;
   overflow: visible;
   display: flex;
 `;
-var ItemBodyPadding = styled9.div`
+var ItemBodyPadding = styled7.div`
   min-height: 0;
   overflow: visible;
   flex: 1;
@@ -2788,7 +3348,7 @@ var ItemBodyPadding = styled9.div`
     overflow-y: auto;
   }
 `;
-var ItemBody = styled9.section`
+var ItemBody = styled7.section`
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;
@@ -2817,7 +3377,7 @@ var ItemBody = styled9.section`
     box-shadow: inset 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
   }
 `;
-var ItemHeading = styled9.div`
+var ItemHeading = styled7.div`
   position: sticky;
   display: flex;
   top: 0;
@@ -2857,7 +3417,7 @@ var ItemHeading = styled9.div`
 var noop = () => void 0;
 var keyIdIndex = 0;
 function useId() {
-  return useMemo15(() => keyIdIndex++, []);
+  return useMemo16(() => keyIdIndex++, []);
 }
 function useAccordionItems(itemsLength, singleMode = false) {
   const [elRefs, setElRefs] = useState7([]);
@@ -2929,7 +3489,7 @@ function useAccordionItems(itemsLength, singleMode = false) {
       }
     }
   };
-  useEffect10(() => {
+  useEffect11(() => {
     setElRefs(
       (elRefs_) => Array(itemsLength).fill(0).map((_, i) => elRefs_[i] || createRef())
     );
@@ -3027,14 +3587,14 @@ var AccordionItem = forwardRef(function AccordionItem2(props, ref) {
   };
   return /* @__PURE__ */ jsxs12(ItemRow, { "data-large": props.large, "data-open": open, children: [
     /* @__PURE__ */ jsxs12(ItemHeading, { "data-open": open, children: [
-      props.icon ? /* @__PURE__ */ jsx24(ItemIcon, { onClick: toggle, children: props.icon }) : null,
+      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: [
         props.label,
-        props.description ? /* @__PURE__ */ jsx24(ItemDescription, { children: props.description }) : null
+        props.description ? /* @__PURE__ */ jsx26(ItemDescription, { children: props.description }) : null
       ] }),
-      /* @__PURE__ */ jsx24(ItemCollapse, { onClick: toggle, children: /* @__PURE__ */ jsx24(DownIcon, { width: "1em", height: "1em", rotate: open ? 0 : 180 }) })
+      /* @__PURE__ */ jsx26(ItemCollapse, { onClick: toggle, children: /* @__PURE__ */ jsx26(DownIcon, { width: "1em", height: "1em", rotate: open ? 0 : 180 }) })
     ] }),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx26(
       ItemBody,
       {
         "aria-labelledby": `accordion-${id}`,
@@ -3046,7 +3606,7 @@ var AccordionItem = forwardRef(function AccordionItem2(props, ref) {
         $initial: !open,
         "data-scrolled": scrolled,
         hidden: !open,
-        children: /* @__PURE__ */ jsx24(ItemBodyInner, { children: /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsx26(ItemBodyInner, { children: /* @__PURE__ */ jsx26(
           ItemBodyPadding,
           {
             "data-max-height": !!maxHeight,
@@ -3061,18 +3621,18 @@ var AccordionItem = forwardRef(function AccordionItem2(props, ref) {
 });
 function Accordion(props) {
   const { getItemProps, onKeyDown } = useAccordionItems(props.items.length, props.singleMode);
-  return /* @__PURE__ */ jsx24(AccordionContainer, { onKeyDown, children: props.items.map((item, key) => /* @__PURE__ */ jsx24(AccordionItem, { overflow: props.overflow, maxHeight: props.maxHeight, ...item, ...getItemProps(key), children: item.children }, key)) });
+  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)) });
 }
 
 // ../ui/icons/DownloadIcon.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function DownloadIcon() {
-  return /* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", viewBox: "0 -960 960 960", width: "48", children: /* @__PURE__ */ jsx25("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__ */ 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" }) });
 }
 
 // ../ui/atoms/ButtonRow.tsx
-import styled10 from "styled-components";
-var ButtonRow = styled10.div`
+import styled8 from "styled-components";
+var ButtonRow = styled8.div`
   padding: 0.3em;
 
   display: flex;
@@ -3097,18 +3657,18 @@ var ButtonRow = styled10.div`
 `;
 
 // src/ExportPanel/ExportPanel.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
 function ExportPanel(props) {
   const manifest = useManifest();
   const vault = useVault7();
   const actions = useLayoutActions();
-  const version3 = useMemo16(() => {
+  const version3 = useMemo17(() => {
     return JSON.stringify(vault.toPresentation3(manifest), null, 2);
   }, [manifest, vault]);
-  const version2 = useMemo16(() => {
+  const version2 = useMemo17(() => {
     return JSON.stringify(vault.toPresentation2(manifest), null, 2);
   }, [manifest, vault]);
-  return /* @__PURE__ */ jsx26(CenterPanelContainer, { title: "Export manifest", close: actions.centerPanel.popStack, children: /* @__PURE__ */ jsx26("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(CenterPanelContainer, { title: "Export manifest", close: actions.centerPanel.popStack, children: /* @__PURE__ */ jsx28("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ jsx28(
     Accordion,
     {
       items: [
@@ -3119,12 +3679,12 @@ function ExportPanel(props) {
           large: true,
           initialOpen: true,
           overflow: true,
-          icon: /* @__PURE__ */ jsx26(Button, { onClick: () => createDownload(version3, "manifest.json"), children: /* @__PURE__ */ jsx26(DownloadIcon, {}) }),
+          icon: /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version3, "manifest.json"), children: /* @__PURE__ */ jsx28(DownloadIcon, {}) }),
           children: /* @__PURE__ */ jsxs13("div", { style: { maxWidth: "100%" }, children: [
-            /* @__PURE__ */ jsx26("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation3(manifest), null, 2) }),
+            /* @__PURE__ */ jsx28("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation3(manifest), null, 2) }),
             /* @__PURE__ */ jsxs13(ButtonRow, { "data-sticky": "true", children: [
-              /* @__PURE__ */ jsx26(Button, { onClick: () => copyToClipboard(version3), children: "Copy to clipboard" }),
-              /* @__PURE__ */ jsx26(Button, { onClick: () => createDownload(version3, "manifest.json"), children: "Download" })
+              /* @__PURE__ */ jsx28(Button, { onClick: () => copyToClipboard(version3), children: "Copy to clipboard" }),
+              /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version3, "manifest.json"), children: "Download" })
             ] })
           ] })
         },
@@ -3133,12 +3693,12 @@ function ExportPanel(props) {
           description: 'Download this version by clicking the "Download" button.',
           maxHeight: 400,
           large: true,
-          icon: /* @__PURE__ */ jsx26(Button, { onClick: () => createDownload(version2, "manifest.json"), children: /* @__PURE__ */ jsx26(DownloadIcon, {}) }),
+          icon: /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version2, "manifest.json"), children: /* @__PURE__ */ jsx28(DownloadIcon, {}) }),
           children: /* @__PURE__ */ jsxs13("div", { style: { maxWidth: "100%" }, children: [
-            /* @__PURE__ */ jsx26("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation2(manifest), null, 2) }),
+            /* @__PURE__ */ jsx28("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation2(manifest), null, 2) }),
             /* @__PURE__ */ jsxs13(ButtonRow, { "data-sticky": "true", children: [
-              /* @__PURE__ */ jsx26(Button, { onClick: () => copyToClipboard(version2), children: "Copy to clipboard" }),
-              /* @__PURE__ */ jsx26(Button, { onClick: () => createDownload(version2, "manifest.json"), children: "Download" })
+              /* @__PURE__ */ jsx28(Button, { onClick: () => copyToClipboard(version2), children: "Copy to clipboard" }),
+              /* @__PURE__ */ jsx28(Button, { onClick: () => createDownload(version2, "manifest.json"), children: "Download" })
             ] })
           ] })
         }
@@ -3147,6 +3707,9 @@ function ExportPanel(props) {
   ) }) });
 }
 
+// src/Layout/Layout.tsx
+import { Modal, PanelSideMenu as PanelSideMenu2 } from "@manifest-editor/components";
+
 // ../ui/ui/GhostBlocks/GhostBlocks.module.css
 var GhostBlocks_default = {
   ghostLoadingBlock: "GhostBlocks_ghostLoadingBlock",
@@ -3155,40 +3718,60 @@ var GhostBlocks_default = {
 };
 
 // ../ui/ui/GhostBlocks/GhostBlocks.tsx
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function GhostBlocks() {
   return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsx27("div", { "data-header": "true", className: GhostBlocks_default.ghostLoadingBlock }),
+    /* @__PURE__ */ jsx29("div", { "data-header": "true", className: GhostBlocks_default.ghostLoadingBlock }),
     /* @__PURE__ */ jsxs14("div", { className: GhostBlocks_default.ghostBlockList, children: [
-      /* @__PURE__ */ jsx27("div", { className: GhostBlocks_default.ghostLoadingBlock }),
-      /* @__PURE__ */ jsx27("div", { className: GhostBlocks_default.ghostLoadingBlock }),
-      /* @__PURE__ */ jsx27("div", { className: GhostBlocks_default.ghostLoadingBlock }),
-      /* @__PURE__ */ jsx27("div", { className: GhostBlocks_default.ghostLoadingBlock })
+      /* @__PURE__ */ jsx29("div", { className: GhostBlocks_default.ghostLoadingBlock }),
+      /* @__PURE__ */ jsx29("div", { className: GhostBlocks_default.ghostLoadingBlock }),
+      /* @__PURE__ */ jsx29("div", { className: GhostBlocks_default.ghostLoadingBlock }),
+      /* @__PURE__ */ jsx29("div", { className: GhostBlocks_default.ghostLoadingBlock })
     ] })
   ] });
 }
 
 // src/Layout/Layout.tsx
-import { memo as memo4, useContext as useContext11, useLayoutEffect as useLayoutEffect3 } from "react";
+import { memo as memo4, useContext as useContext14, useLayoutEffect as useLayoutEffect3 } from "react";
 import { ReactVaultContext as ReactVaultContext2 } from "react-iiif-vault";
 import { Transition } from "react-transition-group";
 import equal from "shallowequal";
 
+// src/hooks/use-match-media.ts
+import { useState as useState8, useLayoutEffect } from "react";
+function useMatchMedia(queries, defaultValues = []) {
+  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+  if (typeof window === "undefined")
+    return initialValues;
+  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+  const getValue2 = () => {
+    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
+    return matchedQueries;
+  };
+  const [value, setValue] = useState8(getValue2);
+  useLayoutEffect(() => {
+    const handler = () => setValue(getValue2);
+    mediaQueryLists.forEach((mql) => mql.addListener(handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+  }, []);
+  return value;
+}
+
 // src/Layout/Layout.mobile.tsx
-import styled11, { css as css5 } from "styled-components";
-var Container2 = styled11.div`
+import styled9, { css as css4 } from "styled-components";
+var Container2 = styled9.div`
   position: relative;
   display: flex;
   flex: 1;
   overflow: hidden;
   flex-direction: column;
 `;
-var CenterPanel = styled11.div`
+var CenterPanel = styled9.div`
   flex: 1;
   position: relative;
   z-index: 7;
 `;
-var MobileBar = styled11.div`
+var MobileBar = styled9.div`
   display: flex;
   justify-content: space-around;
   width: 100%;
@@ -3197,7 +3780,7 @@ var MobileBar = styled11.div`
   padding: 0.5em;
   height: 3.4rem;
 `;
-var LeftBarButton = styled11.button`
+var LeftBarButton = styled9.button`
   //background: red;
   padding: 0.5em 1em;
   width: 32%;
@@ -3206,7 +3789,7 @@ var LeftBarButton = styled11.button`
   border: none;
   background: #ffffff;
 `;
-var PreviewBarButton = styled11.button`
+var PreviewBarButton = styled9.button`
   padding: 0.5em 1em;
   width: 32%;
 
@@ -3216,13 +3799,13 @@ var PreviewBarButton = styled11.button`
   border: 1px solid rgba(0, 0, 0, 0.21);
   color: #ffffff;
 `;
-var DrawerContainer = styled11.div`
+var DrawerContainer = styled9.div`
   position: relative;
   width: 32%;
   margin: 0 0.75em;
   z-index: 9;
 `;
-var DrawerButton = styled11.button`
+var DrawerButton = styled9.button`
   padding: 0.4em 1em 0.65em;
   position: absolute;
   width: 100%;
@@ -3242,7 +3825,7 @@ var DrawerButton = styled11.button`
     font-size: 1.8em;
   }
 `;
-var DrawerBody = styled11.div`
+var DrawerBody = styled9.div`
   background: #fff;
   display: flex;
   position: absolute;
@@ -3259,7 +3842,7 @@ var DrawerBody = styled11.div`
   transition:
     0.3s transform ease-in-out,
     0.3s box-shadow;
-  ${(props) => props.$open && css5`
+  ${(props) => props.$open && css4`
       box-shadow:
         0 -5px 15px 0 rgba(0, 0, 0, 0.1),
         0 -3px 5px 0 rgba(0, 0, 0, 0.1);
@@ -3273,7 +3856,7 @@ var DrawerBody = styled11.div`
     font-size: 1.1em;
   }
 `;
-var LeftPanel = styled11.div`
+var LeftPanel = styled9.div`
   position: absolute;
   transform: translateX(-100%);
   background: #fff;
@@ -3283,11 +3866,11 @@ var LeftPanel = styled11.div`
   z-index: 10;
   overflow-y: auto;
   transition: 0.5s transform;
-  ${(props) => props.$open && css5`
+  ${(props) => props.$open && css4`
       transform: translateX(0);
     `}
 `;
-var Lightbox = styled11.div`
+var Lightbox = styled9.div`
   background: rgba(0, 0, 0, 0.4);
   pointer-events: none;
   position: absolute;
@@ -3299,15 +3882,15 @@ var Lightbox = styled11.div`
   opacity: 0;
   transition: opacity 0.5s;
 
-  ${(props) => props.$open && css5`
+  ${(props) => props.$open && css4`
       pointer-events: visible;
       opacity: 1;
     `}
 `;
 
 // src/Layout/Layout.styles.ts
-import styled12, { css as css6 } from "styled-components";
-var OuterWrapper = styled12.div`
+import styled10, { css as css5 } from "styled-components";
+var OuterWrapper = styled10.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -3317,19 +3900,19 @@ var OuterWrapper = styled12.div`
   min-width: 0;
   overflow: hidden;
 `;
-var Header2 = styled12.header`
+var Header2 = styled10.header`
   //box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.04), 0 1px 0 0 rgba(0, 0, 0, 0.17);
   z-index: 200;
 `;
-var Footer = styled12.div`
+var Footer = styled10.div`
   background: #fff;
 `;
-var Main = styled12.div`
+var Main = styled10.div`
   display: flex;
   flex: 1 1 0;
   min-height: 0;
 `;
-var LeftPanel2 = styled12.div`
+var LeftPanel2 = styled10.div`
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -3337,29 +3920,29 @@ var LeftPanel2 = styled12.div`
   max-width: 720px;
   align-items: flex-end;
 
-  ${(props) => props.$motion ? css6`
+  ${(props) => props.$motion ? css5`
           transition: max-width 400ms;
         ` : ""}
 
   ${(props) => {
   switch (props.$state) {
     case "entering":
-      return css6`
+      return css5`
           max-width: ${props.$width};
         `;
     case "exiting":
-      return css6`
+      return css5`
           max-width: 0;
         `;
     case "unmounted":
     case "exited":
-      return css6`
+      return css5`
           max-width: 0;
         `;
   }
 }}
 `;
-var CenterPanel2 = styled12.div`
+var CenterPanel2 = styled10.div`
   flex: 1 1 0;
   background: #e3e7f0;
   // background: #efefef;
@@ -3379,7 +3962,7 @@ var CenterPanel2 = styled12.div`
     min-width: 0;
   }
 `;
-var RightPanel = styled12.div`
+var RightPanel = styled10.div`
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -3391,22 +3974,22 @@ var RightPanel = styled12.div`
   ${(props) => {
   switch (props.$state) {
     case "entering":
-      return css6`
+      return css5`
           max-width: ${props.$width};
         `;
     case "exiting":
-      return css6`
+      return css5`
           max-width: 0;
         `;
     case "unmounted":
     case "exited":
-      return css6`
+      return css5`
           max-width: 0;
         `;
   }
 }}
 `;
-var PanelContainer = styled12.div`
+var PanelContainer = styled10.div`
   display: flex;
   flex: 1;
   height: 100%;
@@ -3417,14 +4000,14 @@ var PanelContainer = styled12.div`
   ${(props) => {
   switch (props.$menu) {
     case "top":
-      return css6`
+      return css5`
           flex-direction: column;
           ${PanelMenu} {
             flex-direction: column;
           }
         `;
     case "left":
-      return css6`
+      return css5`
           flex-direction: row;
           ${PanelMenu} {
             flex-direction: row;
@@ -3432,14 +4015,14 @@ var PanelContainer = styled12.div`
         `;
     default:
     case "bottom":
-      return css6`
+      return css5`
           flex-direction: column-reverse;
           ${PanelMenu} {
             flex-direction: column;
           }
         `;
     case "right":
-      return css6`
+      return css5`
           flex-direction: row-reverse;
           ${PanelMenu} {
             flex-direction: row;
@@ -3448,7 +4031,7 @@ var PanelContainer = styled12.div`
   }
 }}
 `;
-var PanelSideMenu = styled12.div`
+var PanelSideMenu = styled10.div`
   background: #fff;
   border-top: 1px solid #e3e7f0;
   border-right: 1px solid #e3e7f0;
@@ -3459,7 +4042,7 @@ var PanelSideMenu = styled12.div`
   padding: 0.3em;
   gap: 0.3em; */
 `;
-var PanelSideMenuItem = styled12.button`
+var PanelSideMenuItem = styled10.button`
   cursor: pointer;
   aspect-ratio: 1;
   width: 3em;
@@ -3487,17 +4070,17 @@ var PanelSideMenuItem = styled12.button`
     color: #999;
   }
 `;
-var PanelMenu = styled12.div`
+var PanelMenu = styled10.div`
   display: flex;
   box-shadow:
     0 -3px 2px 0 rgba(0, 0, 0, 0.04),
     0 -1px 0 0 rgba(0, 0, 0, 0.17);
 
-  ${(props) => !props.$open && (props.$position === "top" || props.$position === "bottom") ? css6`
+  ${(props) => !props.$open && (props.$position === "top" || props.$position === "bottom") ? css5`
           display: none;
         ` : ""}
 `;
-var PanelContent = styled12.div`
+var PanelContent = styled10.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -3506,25 +4089,25 @@ var PanelContent = styled12.div`
 `;
 
 // src/Layout/components/HandleControls.tsx
-import styled13 from "styled-components";
+import styled11 from "styled-components";
 import { forwardRef as forwardRef2 } from "react";
 
 // ../ui/icons/ResetIcon.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var ResetIcon = (props) => /* @__PURE__ */ jsxs15("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
-  /* @__PURE__ */ jsx28("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-  /* @__PURE__ */ jsx28("path", { d: "M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 2.97-2.17 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93 0-4.42-3.58-8-8-8zM6 13c0-1.65.67-3.15 1.76-4.24L6.34 7.34A8.014 8.014 0 0 0 4 13c0 4.08 3.05 7.44 7 7.93v-2.02c-2.83-.48-5-2.94-5-5.91z" })
+  /* @__PURE__ */ jsx30("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+  /* @__PURE__ */ jsx30("path", { d: "M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6 0 2.97-2.17 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93 0-4.42-3.58-8-8-8zM6 13c0-1.65.67-3.15 1.76-4.24L6.34 7.34A8.014 8.014 0 0 0 4 13c0 4.08 3.05 7.44 7 7.93v-2.02c-2.83-.48-5-2.94-5-5.91z" })
 ] });
 
 // src/Layout/components/HandleControls.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
-var HandleContainer = styled13.div`
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+var HandleContainer = styled11.div`
   position: relative;
   width: 1px;
   background: rgba(0, 0, 0, 0.2);
   z-index: 50;
 `;
-var HandleControl = styled13(ButtonReset)`
+var HandleControl = styled11(ButtonReset)`
   transition:
     opacity 300ms,
     transform 300ms;
@@ -3537,7 +4120,7 @@ var HandleControl = styled13(ButtonReset)`
     outline: 2px solid salmon;
   }
 `;
-var ResizeHandle = styled13(HandleControl)`
+var ResizeHandle = styled11(HandleControl)`
   position: relative;
   background: #fff;
   height: 40px;
@@ -3546,7 +4129,7 @@ var ResizeHandle = styled13(HandleControl)`
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   user-select: none;
 `;
-var IconControl = styled13(HandleControl)`
+var IconControl = styled11(HandleControl)`
   background: #fff;
   width: 30px;
   height: 30px;
@@ -3561,7 +4144,7 @@ var IconControl = styled13(HandleControl)`
     fill: #9999;
   }
 `;
-var OpenControl = styled13(HandleControl)`
+var OpenControl = styled11(HandleControl)`
   position: relative;
   display: flex;
   opacity: 1;
@@ -3589,7 +4172,7 @@ var OpenControl = styled13(HandleControl)`
     font-size: 1.5em;
   }
 `;
-var InnerHandleContainer = styled13.div`
+var InnerHandleContainer = styled11.div`
   background: rgba(0, 0, 0, 0);
   position: absolute;
   width: 21px;
@@ -3618,7 +4201,7 @@ var InnerHandleContainer = styled13.div`
     }
   }
 `;
-var UnscaledContainer = styled13.div`
+var UnscaledContainer = styled11.div`
   background: rgba(0, 0, 0, 0);
   position: absolute;
   pointer-events: none;
@@ -3630,7 +4213,7 @@ var UnscaledContainer = styled13.div`
 `;
 var HandleControls = forwardRef2(function HandleControls2({ dir, open, actions, reset }, ref) {
   return /* @__PURE__ */ jsxs16(HandleContainer, { onClick: () => actions.open(), children: [
-    /* @__PURE__ */ jsx29(UnscaledContainer, { $open: open, $dir: dir, children: !open ? /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx31(UnscaledContainer, { $open: open, $dir: dir, children: !open ? /* @__PURE__ */ jsx31(
       OpenControl,
       {
         $dir: dir,
@@ -3638,42 +4221,42 @@ var HandleControls = forwardRef2(function HandleControls2({ dir, open, actions,
           e.stopPropagation();
           actions.open();
         },
-        children: /* @__PURE__ */ jsx29(DownIcon, { rotate: dir === "right" ? 90 : 270 })
+        children: /* @__PURE__ */ jsx31(DownIcon, { rotate: dir === "right" ? 90 : 270 })
       }
     ) : null }),
     /* @__PURE__ */ jsxs16(InnerHandleContainer, { ref, $open: open, $dir: dir, children: [
-      open ? /* @__PURE__ */ jsx29(
+      open ? /* @__PURE__ */ jsx31(
         IconControl,
         {
           onClick: (e) => {
             e.stopPropagation();
             actions.close();
           },
-          children: /* @__PURE__ */ jsx29(CloseIcon, {})
+          children: /* @__PURE__ */ jsx31(CloseIcon, {})
         }
       ) : null,
-      reset && open ? /* @__PURE__ */ jsx29(
+      reset && open ? /* @__PURE__ */ jsx31(
         IconControl,
         {
           onClick: (e) => {
             e.stopPropagation();
             reset();
           },
-          children: /* @__PURE__ */ jsx29(ResetIcon, {})
+          children: /* @__PURE__ */ jsx31(ResetIcon, {})
         }
       ) : null,
-      open ? /* @__PURE__ */ jsx29(ResizeHandle, {}) : null
+      open ? /* @__PURE__ */ jsx31(ResizeHandle, {}) : null
     ] })
   ] });
 });
 
 // src/Layout/components/use-resize-layouts.tsx
-import { useRef as useRef6, useState as useState8 } from "react";
+import { useRef as useRef6, useState as useState9 } from "react";
 
 // ../ui/madoc/use-event-handler.ts
-import { useLayoutEffect } from "react";
+import { useLayoutEffect as useLayoutEffect2 } from "react";
 function useEventHandler(ref, name, callback, deps = []) {
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const current = ref.current;
     if (current) {
       current.addEventListener(name, callback);
@@ -3703,7 +4286,7 @@ function useResizeLayout(name, options = {}) {
   const otherDiv = useRef6(null);
   const resizer = useRef6(null);
   const newPct = useRef6(0.5);
-  const [isDragging, setIsDragging] = useState8(false);
+  const [isDragging, setIsDragging] = useState9(false);
   const isEventDragging = useRef6(false);
   const isEventTimeout = useRef6(0);
   const startPos = useRef6({ x: 0, y: 0 });
@@ -3811,39 +4394,34 @@ function useResizeLayout(name, options = {}) {
   };
 }
 
-// src/hooks/use-match-media.ts
-import { useState as useState9, useLayoutEffect as useLayoutEffect2 } from "react";
-function useMatchMedia(queries, defaultValues = []) {
-  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
-  if (typeof window === "undefined")
-    return initialValues;
-  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-  const getValue2 = () => {
-    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
-    return matchedQueries;
-  };
-  const [value, setValue] = useState9(getValue2);
-  useLayoutEffect2(() => {
-    const handler = () => setValue(getValue2);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  return value;
-}
-
 // src/Layout/Layout.tsx
-import { Modal, PanelSideMenu as PanelSideMenu2 } from "@manifest-editor/components";
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var Layout = memo4(function Layout2(props) {
   const appState = useAppState();
   const layout = useLayoutProvider();
-  const { vault: _vault } = useContext11(ReactVaultContext2);
+  const { vault: _vault } = useContext14(ReactVaultContext2);
   const vault = _vault || void 0;
-  const { loading, state, leftPanels, centerPanels, rightPanels, modals = [], actions } = layout;
-  const leftPanel = leftPanels.find((panel) => panel.id === state.leftPanel.current);
-  const rightPanel = rightPanels.find((panel) => panel.id === state.rightPanel.current);
-  const centerPanel = centerPanels.find((panel) => panel.id === state.centerPanel.current);
-  const modalToRender = modals.find((panel) => panel.id === state.modal.current);
+  const {
+    loading,
+    state,
+    leftPanels,
+    centerPanels,
+    rightPanels,
+    modals = [],
+    actions
+  } = layout;
+  const leftPanel = leftPanels.find(
+    (panel) => panel.id === state.leftPanel.current
+  );
+  const rightPanel = rightPanels.find(
+    (panel) => panel.id === state.rightPanel.current
+  );
+  const centerPanel = centerPanels.find(
+    (panel) => panel.id === state.centerPanel.current
+  );
+  const modalToRender = modals.find(
+    (panel) => panel.id === state.modal.current
+  );
   const enableMotion = true;
   const pinnedRightPanel = state.pinnedRightPanel.pinned ? rightPanels.find((panel) => panel.id === state.pinnedRightPanel.current) : void 0;
   const [mobile] = useMatchMedia(["(max-width: 1020px)"]);
@@ -3898,7 +4476,7 @@ var Layout = memo4(function Layout2(props) {
   if (loading) {
     return null;
   }
-  const renderLeftPanel = (transition) => /* @__PURE__ */ jsx30(
+  const renderLeftPanel = (transition) => /* @__PURE__ */ jsx32(
     PanelContainer,
     {
       $menu: props.leftPanelMenuPosition || "bottom",
@@ -3908,8 +4486,8 @@ var Layout = memo4(function Layout2(props) {
         width: state.leftPanel.open || transition !== "exited" ? leftPanelResizer.widthB : void 0,
         minWidth: leftPanel?.options?.minWidth
       },
-      children: isLoading ? /* @__PURE__ */ jsx30(PanelContent, { children: /* @__PURE__ */ jsx30(GhostBlocks, {}) }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
-        props.leftPanelMenu ? /* @__PURE__ */ jsx30(
+      children: isLoading ? /* @__PURE__ */ jsx32(PanelContent, { children: /* @__PURE__ */ jsx32(GhostBlocks, {}) }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
+        props.leftPanelMenu ? /* @__PURE__ */ jsx32(
           PanelMenu,
           {
             $open: state.leftPanel.open && transition !== "exited",
@@ -3917,7 +4495,7 @@ var Layout = memo4(function Layout2(props) {
             children: props.leftPanelMenu
           }
         ) : null,
-        /* @__PURE__ */ jsx30(PanelContent, { children: state.leftPanel.open || transition !== "exited" ? /* @__PURE__ */ jsx30(Fragment4, { children: leftPanel ? /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(PanelContent, { children: state.leftPanel.open || transition !== "exited" ? /* @__PURE__ */ jsx32(Fragment4, { children: leftPanel ? /* @__PURE__ */ jsx32(
           ModularPanel,
           {
             isLeft: true,
@@ -3935,7 +4513,7 @@ var Layout = memo4(function Layout2(props) {
     if (!modalToRender || state.modal.open === false) {
       return null;
     }
-    return /* @__PURE__ */ jsx30(Modal, { title: modalToRender.label, onClose: () => actions.modal.close(), children: renderHelper(
+    return /* @__PURE__ */ jsx32(Modal, { title: modalToRender.label, onClose: () => actions.modal.close(), children: renderHelper(
       modalToRender.render(
         state.modal.state || modalToRender.defaultState || {},
         { ...layout, current: actions.modal, vault },
@@ -3944,8 +4522,26 @@ var Layout = memo4(function Layout2(props) {
     ) });
   };
   const renderCenterPanel = () => /* @__PURE__ */ jsxs17(PanelContainer, { $menu: props.centerPanelMenuPosition || "top", children: [
-    props.centerPanelMenu ? /* @__PURE__ */ jsx30(PanelMenu, { $open: state.centerPanel.open, $position: props.centerPanelMenuPosition || "top", children: props.centerPanelMenu }) : null,
-    /* @__PURE__ */ jsx30(PanelContent, { children: isLoading ? /* @__PURE__ */ jsx30("div", { style: { display: "flex", flex: 1, justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ jsx30(Spinner, { stroke: "rgba(0,0,0,.3)", fontSize: "2em" }) }) : state.centerPanel.open ? centerPanel ? renderHelper(
+    props.centerPanelMenu ? /* @__PURE__ */ jsx32(
+      PanelMenu,
+      {
+        $open: state.centerPanel.open,
+        $position: props.centerPanelMenuPosition || "top",
+        children: props.centerPanelMenu
+      }
+    ) : null,
+    /* @__PURE__ */ jsx32(PanelContent, { children: isLoading ? /* @__PURE__ */ jsx32(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx32(Spinner, { stroke: "rgba(0,0,0,.3)", fontSize: "2em" })
+      }
+    ) : state.centerPanel.open ? centerPanel ? renderHelper(
       centerPanel.render(
         state.centerPanel.state || centerPanel.defaultState || {},
         { ...layout, current: actions.centerPanel, vault },
@@ -3953,7 +4549,7 @@ var Layout = memo4(function Layout2(props) {
       )
     ) : null : null })
   ] });
-  const renderRightPanel = (transition) => /* @__PURE__ */ jsx30(
+  const renderRightPanel = (transition) => /* @__PURE__ */ jsx32(
     PanelContainer,
     {
       $menu: props.rightPanelMenuPosition || "bottom",
@@ -3963,10 +4559,17 @@ var Layout = memo4(function Layout2(props) {
         width: state.rightPanel.open || transition !== "exited" ? rightPanelResizer.widthB : void 0,
         minWidth: rightPanel?.options?.minWidth
       },
-      children: isLoading ? /* @__PURE__ */ jsx30(PanelContent, { children: /* @__PURE__ */ jsx30(GhostBlocks, {}) }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
-        props.rightPanelMenu ? /* @__PURE__ */ jsx30(PanelMenu, { $open: state.rightPanel.open, $position: props.rightPanelMenuPosition || "bottom", children: props.rightPanelMenu }) : null,
-        /* @__PURE__ */ jsx30(PanelContent, { children: state.rightPanel.open || transition !== "exited" ? /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          showRightPanel ? /* @__PURE__ */ jsx30(
+      children: isLoading ? /* @__PURE__ */ jsx32(PanelContent, { children: /* @__PURE__ */ jsx32(GhostBlocks, {}) }) : /* @__PURE__ */ jsxs17(Fragment4, { children: [
+        props.rightPanelMenu ? /* @__PURE__ */ jsx32(
+          PanelMenu,
+          {
+            $open: state.rightPanel.open,
+            $position: props.rightPanelMenuPosition || "bottom",
+            children: props.rightPanelMenu
+          }
+        ) : null,
+        /* @__PURE__ */ jsx32(PanelContent, { children: state.rightPanel.open || transition !== "exited" ? /* @__PURE__ */ jsxs17(Fragment4, { children: [
+          showRightPanel ? /* @__PURE__ */ jsx32(
             ModularPanel,
             {
               panel: rightPanel,
@@ -3976,7 +4579,7 @@ var Layout = memo4(function Layout2(props) {
               available: rightPanels
             }
           ) : null,
-          pinnedRightPanel ? /* @__PURE__ */ jsx30(
+          pinnedRightPanel ? /* @__PURE__ */ jsx32(
             ModularPanel,
             {
               panel: pinnedRightPanel,
@@ -3993,21 +4596,21 @@ var Layout = memo4(function Layout2(props) {
     return /* @__PURE__ */ jsxs17(OuterWrapper, { children: [
       props.hideHeader ? null : /* @__PURE__ */ jsxs17(Header2, { children: [
         props.header || null,
-        props.menu ? /* @__PURE__ */ jsx30("menu", { children: props.menu }) : null
+        props.menu ? /* @__PURE__ */ jsx32("menu", { children: props.menu }) : null
       ] }),
-      /* @__PURE__ */ jsx30(Main, { children: /* @__PURE__ */ jsxs17(Container2, { children: [
-        /* @__PURE__ */ jsx30(CenterPanel, { children: renderCenterPanel() }),
+      /* @__PURE__ */ jsx32(Main, { children: /* @__PURE__ */ jsxs17(Container2, { children: [
+        /* @__PURE__ */ jsx32(CenterPanel, { children: renderCenterPanel() }),
         /* @__PURE__ */ jsxs17(MobileBar, { children: [
-          leftPanels.length > 0 ? /* @__PURE__ */ jsx30(LeftBarButton, { onClick: actions.leftPanel.toggle, children: leftPanel?.label }) : null,
-          rightPanels.length > 0 ? /* @__PURE__ */ jsx30(DrawerContainer, { children: /* @__PURE__ */ jsxs17(DrawerButton, { onClick: actions.rightPanel.toggle, children: [
-            /* @__PURE__ */ jsx30(DownIcon, { rotate: 180 }),
+          leftPanels.length > 0 ? /* @__PURE__ */ jsx32(LeftBarButton, { onClick: actions.leftPanel.toggle, children: leftPanel?.label }) : null,
+          rightPanels.length > 0 ? /* @__PURE__ */ jsx32(DrawerContainer, { children: /* @__PURE__ */ jsxs17(DrawerButton, { onClick: actions.rightPanel.toggle, children: [
+            /* @__PURE__ */ jsx32(DownIcon, { rotate: 180 }),
             rightPanel?.label
           ] }) }) : null,
-          /* @__PURE__ */ jsx30(PreviewBarButton, { children: "Preview" })
+          /* @__PURE__ */ jsx32(PreviewBarButton, { children: "Preview" })
         ] }),
-        rightPanels.length > 0 ? /* @__PURE__ */ jsx30(DrawerBody, { $open: state.rightPanel.open, children: renderRightPanel() }) : null,
-        leftPanels.length > 0 ? /* @__PURE__ */ jsx30(LeftPanel, { $open: state.leftPanel.open, children: renderLeftPanel() }) : null,
-        leftPanels.length > 0 || rightPanels.length > 0 ? /* @__PURE__ */ jsx30(
+        rightPanels.length > 0 ? /* @__PURE__ */ jsx32(DrawerBody, { $open: state.rightPanel.open, children: renderRightPanel() }) : null,
+        leftPanels.length > 0 ? /* @__PURE__ */ jsx32(LeftPanel, { $open: state.leftPanel.open, children: renderLeftPanel() }) : null,
+        leftPanels.length > 0 || rightPanels.length > 0 ? /* @__PURE__ */ jsx32(
           Lightbox,
           {
             $open: state.leftPanel.open || state.rightPanel.open,
@@ -4023,7 +4626,7 @@ var Layout = memo4(function Layout2(props) {
   return /* @__PURE__ */ jsxs17(OuterWrapper, { className: `manifest-editor ${props.className}`, children: [
     props.hideHeader ? null : /* @__PURE__ */ jsxs17(Header2, { children: [
       props.header || null,
-      props.menu ? /* @__PURE__ */ jsx30("menu", { children: props.menu }) : null
+      props.menu ? /* @__PURE__ */ jsx32("menu", { children: props.menu }) : null
     ] }),
     /* @__PURE__ */ jsxs17(
       Main,
@@ -4033,7 +4636,7 @@ var Layout = memo4(function Layout2(props) {
           rightPanelResizer.refs.container.current = div;
         },
         children: [
-          leftPanels.length > 0 ? /* @__PURE__ */ jsx30(
+          leftPanels.length > 0 ? /* @__PURE__ */ jsx32(
             PanelSideMenu2,
             {
               current: state.leftPanel.current,
@@ -4053,44 +4656,76 @@ var Layout = memo4(function Layout2(props) {
               open: state.leftPanel.open
             }
           ) : null,
-          leftPanels.length > 0 ? /* @__PURE__ */ jsx30(Transition, { in: state.leftPanel.open, timeout: enableMotion ? 400 : 0, unmountOnExit: false, children: (transition) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-            /* @__PURE__ */ jsx30(LeftPanel2, { $width: leftPanelResizer.widthB, $state: transition, $motion: enableMotion, children: renderLeftPanel(transition) }),
-            /* @__PURE__ */ jsx30(
-              HandleControls,
-              {
-                ref: leftPanelResizer.refs.resizer,
-                reset: resetLeftPanel,
-                dir: "left",
-                transition,
-                open: state.leftPanel.open || transition !== "exited",
-                actions: actions.leftPanel
-              }
-            )
-          ] }) }) : null,
-          /* @__PURE__ */ jsx30(CenterPanel2, { children: renderCenterPanel() }),
-          rightPanels.length > 0 ? /* @__PURE__ */ jsx30(Transition, { in: state.rightPanel.open, timeout: enableMotion ? 400 : 0, unmountOnExit: false, children: (transition) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-            /* @__PURE__ */ jsx30(
-              HandleControls,
-              {
-                ref: rightPanelResizer.refs.resizer,
-                dir: "right",
-                reset: resetRightPanel,
-                open: state.rightPanel.open,
-                actions: actions.rightPanel
-              }
-            ),
-            /* @__PURE__ */ jsx30(RightPanel, { $width: rightPanelResizer.widthB, $state: transition, $motion: enableMotion, children: renderRightPanel(transition) })
-          ] }) }) : null
+          leftPanels.length > 0 ? /* @__PURE__ */ jsx32(
+            Transition,
+            {
+              in: state.leftPanel.open,
+              timeout: enableMotion ? 400 : 0,
+              unmountOnExit: false,
+              children: (transition) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+                /* @__PURE__ */ jsx32(
+                  LeftPanel2,
+                  {
+                    $width: leftPanelResizer.widthB,
+                    $state: transition,
+                    $motion: enableMotion,
+                    children: renderLeftPanel(transition)
+                  }
+                ),
+                /* @__PURE__ */ jsx32(
+                  HandleControls,
+                  {
+                    ref: leftPanelResizer.refs.resizer,
+                    reset: resetLeftPanel,
+                    dir: "left",
+                    transition,
+                    open: state.leftPanel.open || transition !== "exited",
+                    actions: actions.leftPanel
+                  }
+                )
+              ] })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx32(CenterPanel2, { children: renderCenterPanel() }),
+          rightPanels.length > 0 ? /* @__PURE__ */ jsx32(
+            Transition,
+            {
+              in: state.rightPanel.open,
+              timeout: enableMotion ? 400 : 0,
+              unmountOnExit: false,
+              children: (transition) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+                /* @__PURE__ */ jsx32(
+                  HandleControls,
+                  {
+                    ref: rightPanelResizer.refs.resizer,
+                    dir: "right",
+                    reset: resetRightPanel,
+                    open: state.rightPanel.open,
+                    actions: actions.rightPanel
+                  }
+                ),
+                /* @__PURE__ */ jsx32(
+                  RightPanel,
+                  {
+                    $width: rightPanelResizer.widthB,
+                    $state: transition,
+                    $motion: enableMotion,
+                    children: renderRightPanel(transition)
+                  }
+                )
+              ] })
+            }
+          ) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx30(Footer, { children: props.footer || null }),
-    /* @__PURE__ */ jsx30(Fragment4, { children: renderModal() })
+    /* @__PURE__ */ jsx32(Footer, { children: props.footer || null }),
+    /* @__PURE__ */ jsx32(Fragment4, { children: renderModal() })
   ] });
 });
 
 // src/Layout/Layout.hooks.ts
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 function usePanelActions(panel, dispatch) {
   function popStack() {
     dispatch({ type: "popStack", panel, payload: void 0 });
@@ -4125,7 +4760,7 @@ function usePanelActions(panel, dispatch) {
   function unpin() {
     dispatch({ type: "unpin", panel, payload: void 0 });
   }
-  return useMemo17(
+  return useMemo18(
     () => ({
       popStack,
       change,
@@ -4291,14 +4926,14 @@ function getDefaultLayoutState() {
 }
 
 // src/ResourceEditingContext/ResourceEditingContext.tsx
-import { createContext as createContext11, useContext as useContext12, useMemo as useMemo18 } from "react";
+import { createContext as createContext13, useContext as useContext15, useMemo as useMemo19 } from "react";
 import { useVault as useVault8, useVaultSelector } from "react-iiif-vault";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var ResourceEditingReactContext = createContext11({
+import { jsx as jsx33 } from "react/jsx-runtime";
+var ResourceEditingReactContext = createContext13({
   resource: null
 });
 function useEditingContext() {
-  return useContext12(ResourceEditingReactContext);
+  return useContext15(ResourceEditingReactContext);
 }
 function useResource() {
   const vault = useVault8();
@@ -4319,10 +4954,10 @@ function ResourceEditingProvider({
   children
 }) {
   const { id, type } = resource || {};
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     ResourceEditingReactContext.Provider,
     {
-      value: useMemo18(
+      value: useMemo19(
         () => ({
           // Current resource.
           resource: id && type ? { id, type } : null
@@ -4334,9 +4969,12 @@ function ResourceEditingProvider({
   );
 }
 
+// src/ShellContext/ShellContext.tsx
+import { ImageServiceLoader } from "@atlas-viewer/iiif-image-api";
+
 // ../ui/atoms/ErrorBoundary.tsx
 import { Component } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var ErrorBoundary2 = class extends Component {
   constructor() {
     super(...arguments);
@@ -4353,19 +4991,21 @@ var ErrorBoundary2 = class extends Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsx32("h1", { children: "Sorry.. there was an error" });
+      return /* @__PURE__ */ jsx34("h1", { children: "Sorry.. there was an error" });
     }
     return this.props.children;
   }
 };
 
 // src/ShellContext/ShellContext.tsx
+import { useMemo as useMemo21 } from "react";
+import { ImageServiceLoaderContext } from "react-iiif-vault";
 import { ThemeProvider } from "styled-components";
 
 // src/Layout/Layout.context-internal.tsx
 import { isSpecificResource } from "@iiif/parser";
-import { memo as memo5, useMemo as useMemo19, useReducer as useReducer3 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { memo as memo5, useMemo as useMemo20, useReducer as useReducer3 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function parse(args, _state) {
   if (typeof args === "string") {
     return { id: args, state: _state };
@@ -4375,12 +5015,19 @@ function parse(args, _state) {
 var LayoutProvider = memo5(function LayoutProvider2(props) {
   const app = useApp();
   const available = app.layout;
-  const [state, dispatch] = useReducer3(layoutReducer, void 0, getDefaultLayoutState);
+  const [state, dispatch] = useReducer3(
+    layoutReducer,
+    void 0,
+    getDefaultLayoutState
+  );
   const actions = {
     centerPanel: usePanelActions("centerPanel", dispatch),
     leftPanel: usePanelActions("leftPanel", dispatch),
     rightPanel: usePanelActions("rightPanel", dispatch),
-    pinnedRightPanel: usePanelActions("pinnedRightPanel", dispatch),
+    pinnedRightPanel: usePanelActions(
+      "pinnedRightPanel",
+      dispatch
+    ),
     modal: usePanelActions("modal", dispatch),
     editingStack: useEditingStack()
   };
@@ -4403,7 +5050,10 @@ var LayoutProvider = memo5(function LayoutProvider2(props) {
     const { id, state: state2, stacked } = parse(args, _state);
     const [found, actions2, pinnable] = find(id);
     if (pinnable && found.options?.openPinned) {
-      pinnable.pin({ id, state: { ...found.defaultState || {}, ...state2 || {} } });
+      pinnable.pin({
+        id,
+        state: { ...found.defaultState || {}, ...state2 || {} }
+      });
     } else {
       actions2.open({
         id,
@@ -4440,7 +5090,11 @@ var LayoutProvider = memo5(function LayoutProvider2(props) {
     const [, actions2] = find(id);
     actions2.toggle();
   }
-  function edit(resource, context = {}, { reset, property, stacked } = {}) {
+  function edit(resource, context = {}, {
+    reset,
+    property,
+    stacked
+  } = {}) {
     const toEdit = {
       resource: isSpecificResource(resource) ? resource : {
         type: "SpecificResource",
@@ -4460,7 +5114,7 @@ var LayoutProvider = memo5(function LayoutProvider2(props) {
   }
   function create2(resource) {
     actions.editingStack.create(resource, {});
-    if (available.modals && available.modals.find((e) => e.id === "@manifest-editor/creator")) {
+    if (available.modals?.find((e) => e.id === "@manifest-editor/creator")) {
       actions.modal.open({
         id: "@manifest-editor/creator",
         stacked: true,
@@ -4485,7 +5139,13 @@ var LayoutProvider = memo5(function LayoutProvider2(props) {
     edit,
     create: create2
   };
-  return /* @__PURE__ */ jsx33(LayoutActionsReactContext.Provider, { value: useMemo19(() => ({ ...actions, ...otherActions }), [available]), children: /* @__PURE__ */ jsx33(LayoutStateReactContext.Provider, { value: state, children: props.children }) });
+  return /* @__PURE__ */ jsx35(
+    LayoutActionsReactContext.Provider,
+    {
+      value: useMemo20(() => ({ ...actions, ...otherActions }), [available]),
+      children: /* @__PURE__ */ jsx35(LayoutStateReactContext.Provider, { value: state, children: props.children })
+    }
+  );
 });
 
 // src/ShellContext/default-theme.ts
@@ -4534,13 +5194,11 @@ var defaultTheme = {
 };
 
 // src/ShellContext/ShellContext.tsx
-import { ImageServiceLoaderContext } from "react-iiif-vault";
-import { ImageServiceLoader } from "@atlas-viewer/iiif-image-api";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var previewConfigs = [
   {
     id: "universal-viewer",
-    config: { url: "https://uv-v4.netlify.app/#?iiifManifestId={manifestId}" },
+    config: { url: "https://universalviewer.dev/#?iiifManifestId={manifestId}" },
     type: "external-manifest-preview",
     label: "Universal viewer"
   },
@@ -4581,17 +5239,32 @@ function ShellProvider({
   resource,
   editing
 }) {
-  return /* @__PURE__ */ jsx34(ErrorBoundary2, { children: /* @__PURE__ */ jsx34(ImageServiceLoaderContext.Provider, { value: imageServiceLoader, children: /* @__PURE__ */ jsx34(AppResourceProvider, { resource, children: /* @__PURE__ */ jsx34(PreviewVaultContext, { children: /* @__PURE__ */ jsx34(ThemeProvider, { theme: theme || defaultTheme, children: /* @__PURE__ */ jsx34(ConfigProvider, { config, saveConfig, children: /* @__PURE__ */ jsx34(EditingStack, { children: /* @__PURE__ */ jsx34(LayoutProvider, { children: /* @__PURE__ */ jsx34(PreviewProvider, { previews: previews || [], configs: config?.previews || previewConfigs, children }) }) }) }) }) }) }) }) });
+  const existingConfig = useConfig();
+  const mergedConfig = useMemo21(() => {
+    return {
+      ...existingConfig,
+      ...config,
+      previews: config?.previews || existingConfig.previews || previewConfigs
+    };
+  }, [existingConfig, config]);
+  return /* @__PURE__ */ jsx36(ErrorBoundary2, { children: /* @__PURE__ */ jsx36(ImageServiceLoaderContext.Provider, { value: imageServiceLoader, children: /* @__PURE__ */ jsx36(AppResourceProvider, { resource, children: /* @__PURE__ */ jsx36(PreviewVaultContext, { children: /* @__PURE__ */ jsx36(ThemeProvider, { theme: theme || defaultTheme, children: /* @__PURE__ */ jsx36(ConfigProvider, { config: mergedConfig, saveConfig, children: /* @__PURE__ */ jsx36(EditingStack, { children: /* @__PURE__ */ jsx36(LayoutProvider, { children: /* @__PURE__ */ jsx36(
+    PreviewProvider,
+    {
+      previews: previews || [],
+      configs: mergedConfig.previews,
+      children: /* @__PURE__ */ jsx36(AtlasStoreProvider, { children })
+    }
+  ) }) }) }) }) }) }) }) });
 }
 
 // src/TaskBridge/TaskBridge.tsx
-import mitt2 from "mitt";
-import { createContext as createContext12, useCallback as useCallback6, useContext as useContext13, useEffect as useEffect12, useMemo as useMemo20, useReducer as useReducer4 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import mitt3 from "mitt";
+import { createContext as createContext14, useCallback as useCallback6, useContext as useContext16, useEffect as useEffect13, useMemo as useMemo22, useReducer as useReducer4 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var tempGlobalState = {};
-var DispatchReactContext = createContext12("global");
+var DispatchReactContext = createContext14("global");
 function useCurrentDispatchId() {
-  return useContext13(DispatchReactContext);
+  return useContext16(DispatchReactContext);
 }
 function createDeferred() {
   let res = void 0;
@@ -4605,14 +5278,14 @@ function createDeferred() {
 function useTask(name) {
   const id = useCurrentDispatchId();
   const [, invalidate] = useReducer4((r) => r + 1, 0);
-  const task = useMemo20(() => {
+  const task = useMemo22(() => {
     if (!tempGlobalState[id]) {
       tempGlobalState[id] = {};
     }
     if (!tempGlobalState[id][name]) {
       tempGlobalState[id][name] = {
         name,
-        emitter: mitt2(),
+        emitter: mitt3(),
         status: "idle",
         promise: Promise.resolve(),
         abort: new AbortController(),
@@ -4630,7 +5303,7 @@ function useTask(name) {
 }
 function useTaskEvent(task, name, _cb) {
   const cb = useCallback6(() => _cb(task), [_cb]);
-  useEffect12(() => {
+  useEffect13(() => {
     const em = task.emitter;
     em.on(name, cb);
     return () => em.off(name, cb);
@@ -4679,12 +5352,12 @@ function useTaskRunner(name, onRun) {
   return [completeTask, taskDetails, rejectTask];
 }
 function TaskBridge({ children }) {
-  return /* @__PURE__ */ jsx35(DispatchReactContext.Provider, { value: useMemo20(() => `id-${Date.now()}`, []), children });
+  return /* @__PURE__ */ jsx37(DispatchReactContext.Provider, { value: useMemo22(() => `id-${Date.now()}`, []), children });
 }
 
 // src/Universal/UniversalCopyPaste.tsx
-import { useCallback as useCallback7, useMemo as useMemo21 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useMemo as useMemo23 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function analyse(t) {
   return false;
 }
@@ -4709,7 +5382,7 @@ function UniversalCopyTarget({
   const onPasteReference = _onPasteReference || onReference;
   const onPasteLink = _onPasteLink || onLink;
   const onPasteAnalysis = _onPasteAnalysis || onAnalysis;
-  const reference = useMemo21(() => {
+  const reference = useMemo23(() => {
     return _ref;
   }, [_ref?.id, _ref?.type]);
   const onCopy = useCallback7(
@@ -4830,7 +5503,7 @@ function UniversalCopyTarget({
       e.dataTransfer.dropEffect = "copy";
     }
   }, []);
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx38(
     Component2,
     {
       onCopy,
@@ -5030,11 +5703,11 @@ async function getImageDimensions(url) {
 }
 
 // src/hooks/use-save-vault.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 import { useDebounce } from "tiny-use-debounce";
 function useSaveVault(vault, saveChanges, saveInterval, enabled = true) {
   const debounceSaveChanges = useDebounce(saveChanges, saveInterval);
-  useEffect13(() => {
+  useEffect14(() => {
     if (typeof window === "undefined") {
       return () => void 0;
     }
@@ -5044,24 +5717,156 @@ function useSaveVault(vault, saveChanges, saveInterval, enabled = true) {
       window.removeEventListener("beforeunload", saveChanges);
     };
   }, [saveChanges]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (vault && enabled) {
       return vault.subscribe(debounceSaveChanges, true);
     }
   }, [debounceSaveChanges, vault, enabled]);
 }
+
+// src/hooks/use-svg-tools.tsx
+import { useMemo as useMemo24 } from "react";
+import { useStore } from "zustand";
+function useSvgTools() {
+  const store = useAtlasStore();
+  const switchTool = useStore(store, (s) => s.switchTool);
+  const state = useStore(store, (s) => s.polygons.state.slowState);
+  return useMemo24(
+    () => ({
+      // Draw tool.
+      draw: {
+        active: !state.lineMode && !state.selectedStamp && state.drawMode,
+        enable: switchTool.draw
+      },
+      // Polygon.
+      polygon: {
+        active: !state.lineMode && !state.selectedStamp && !state.drawMode,
+        enable: switchTool.polygon
+      },
+      // Line
+      line: {
+        active: state.lineMode && !state.lineBoxMode,
+        enable: switchTool.line
+      },
+      // Line box.
+      lineBox: {
+        active: state.lineBoxMode,
+        enable: switchTool.lineBox
+      },
+      // Square.
+      square: {
+        active: state.selectedStamp?.id === "square",
+        enable: switchTool.square
+      },
+      // Triangle.
+      triangle: {
+        active: state.selectedStamp?.id === "triangle",
+        enable: switchTool.triangle
+      },
+      // Hexagon.
+      hexagon: {
+        active: state.selectedStamp?.id === "hexagon",
+        enable: switchTool.hexagon
+      },
+      // Circle
+      circle: {
+        active: state.selectedStamp?.id === "circle40",
+        enable: switchTool.circle
+      },
+      // Delete
+      remove: {
+        active: state.showBoundingBox,
+        enable: switchTool.remove
+      }
+    }),
+    [state, switchTool]
+  );
+}
+
+// src/hooks/use-request-annotation.ts
+import { useCallback as useCallback8, useEffect as useEffect15, useState as useState10 } from "react";
+import { useStore as useStore2 } from "zustand";
+function useRequestAnnotation(opts) {
+  const [id, setId] = useState10(0);
+  const store = useAtlasStore();
+  const { tool, getRequestId, requestAnnotation, completeRequest, cancelRequest } = useStore2(store, (s) => ({
+    getRequestId: s.getRequestId,
+    requestAnnotation: s.requestAnnotation,
+    completeRequest: s.completeRequest,
+    cancelRequest: s.cancelRequest,
+    tool: s.tool
+  }));
+  const [isPending, setIsPending] = useState10(false);
+  const [data, setData] = useState10(null);
+  const [requestId, setRequestId] = useState10(null);
+  const busy = tool.enabled && tool.requestId !== requestId;
+  const mutateAsync = useCallback8(
+    async (request, options) => {
+      if (requestId) {
+        setIsPending(true);
+        const response = await requestAnnotation(request, {
+          ...options,
+          requestId
+        });
+        if (response) {
+          opts?.onSuccess?.(response);
+          setId((i) => i + 1);
+          setIsPending(false);
+          setData(response);
+          return response;
+        }
+        const resp = {
+          id: requestId,
+          cancelled: true,
+          ...requestToAnnotationResponse(request)
+        };
+        opts?.onSuccess?.(resp);
+        setData(resp);
+        setId((i) => i + 1);
+        setIsPending(false);
+        return resp;
+      }
+      return null;
+    },
+    [opts?.onSuccess, requestAnnotation, requestId]
+  );
+  const reset = useCallback8(() => {
+    setData(null);
+    setIsPending(false);
+  }, []);
+  useEffect15(() => {
+    const request = getRequestId();
+    setRequestId(request.requestId);
+    return () => {
+      request.clear();
+    };
+  }, [id]);
+  return {
+    id,
+    busy,
+    isPending,
+    requestAnnotation: mutateAsync,
+    cancelRequest: () => requestId ? cancelRequest(requestId) : void 0,
+    completeRequest: () => requestId ? completeRequest(requestId) : void 0,
+    reset,
+    data
+  };
+}
 export {
   AppHeader,
   AppMenuProvider,
   AppProvider,
   AppResourceInstanceProvider,
   AppResourceProvider,
+  AtlasStoreProvider,
+  AtlasStoreReactContext,
   BaseEditor,
   BaseEditorBackButton,
   BaseEditorCloseButton,
   ConfigEditor,
   ConfigProvider,
   EditingStack,
+  EventEmitterProvider,
   ExportPanel,
   HOMEPAGE_COLLECTION,
   HandleContainer,
@@ -5079,7 +5884,9 @@ export {
   PreviewVaultBoundary,
   PreviewVaultContext,
   PrimeAppReactContext,
+  ReactEmitterContext,
   ResourceEditingProvider,
+  ResourceEditingReactContext,
   ShellProvider,
   TaskBridge,
   UniversalCopyTarget,
@@ -5089,10 +5896,12 @@ export {
   baseEditor,
   copyToClipboard,
   createActionIdentity,
+  createAtlasStore,
   createDownload,
   createPreviewVault,
   detectMedia,
   editBasedOnResource,
+  extendApp,
   getDefaultLayoutState,
   getDefaultPanelState,
   getFormat,
@@ -5101,10 +5910,11 @@ export {
   isPinnableState,
   layoutReducer,
   mapApp,
-  matchBasedOnResource,
   panelSizing,
+  polygonToBoundingBox,
   randomId,
   renderHelper,
+  requestToAnnotationResponse,
   useAnnotationPageEditor,
   useApp,
   useAppInstance,
@@ -5114,6 +5924,7 @@ export {
   useAppResourceInstance,
   useAppState,
   useApps,
+  useAtlasStore,
   useAvailableLayouts,
   useCollectionEditor,
   useConfig,
@@ -5125,6 +5936,8 @@ export {
   useEditingResourceStack,
   useEditingStack,
   useEditor,
+  useEmitter,
+  useEvent,
   useGenericEditor,
   useHighlightedImageResource,
   useHoverHighlightImageResource,
@@ -5133,16 +5946,19 @@ export {
   useLayoutProvider,
   useLayoutState,
   useManifestEditor,
+  useMatchMedia,
   useOptionalResource,
   usePanelActions,
   usePreviewContext,
   usePreviewHistory,
   usePreviewVault,
   usePreviews,
+  useRequestAnnotation,
   useResource,
   useSaveConfig,
   useSaveVault,
   useSetCustomTitle,
+  useSvgTools,
   useTask,
   useTaskDispatch,
   useTaskEvent,