@manifest-editor/shell 1.2.0 → 1.3.1

package/dist/index.cjs

@@ -40,12 +40,15 @@ __export(src_exports, {
   AppProvider: () => AppProvider,
   AppResourceInstanceProvider: () => AppResourceInstanceProvider,
   AppResourceProvider: () => AppResourceProvider,
+  AtlasStoreProvider: () => AtlasStoreProvider,
+  AtlasStoreReactContext: () => AtlasStoreReactContext,
   BaseEditor: () => BaseEditor,
   BaseEditorBackButton: () => BaseEditorBackButton,
   BaseEditorCloseButton: () => BaseEditorCloseButton,
   ConfigEditor: () => ConfigEditor,
   ConfigProvider: () => ConfigProvider,
   EditingStack: () => EditingStack,
+  EventEmitterProvider: () => EventEmitterProvider,
   ExportPanel: () => ExportPanel,
   HOMEPAGE_COLLECTION: () => HOMEPAGE_COLLECTION,
   HandleContainer: () => HandleContainer,
@@ -63,7 +66,9 @@ __export(src_exports, {
   PreviewVaultBoundary: () => PreviewVaultBoundary,
   PreviewVaultContext: () => PreviewVaultContext,
   PrimeAppReactContext: () => PrimeAppReactContext,
+  ReactEmitterContext: () => ReactEmitterContext,
   ResourceEditingProvider: () => ResourceEditingProvider,
+  ResourceEditingReactContext: () => ResourceEditingReactContext,
   ShellProvider: () => ShellProvider,
   TaskBridge: () => TaskBridge,
   UniversalCopyTarget: () => UniversalCopyTarget,
@@ -73,10 +78,12 @@ __export(src_exports, {
   baseEditor: () => baseEditor,
   copyToClipboard: () => copyToClipboard,
   createActionIdentity: () => createActionIdentity,
+  createAtlasStore: () => createAtlasStore,
   createDownload: () => createDownload,
   createPreviewVault: () => createPreviewVault,
   detectMedia: () => detectMedia,
   editBasedOnResource: () => editBasedOnResource,
+  extendApp: () => extendApp,
   getDefaultLayoutState: () => getDefaultLayoutState,
   getDefaultPanelState: () => getDefaultPanelState,
   getFormat: () => getFormat,
@@ -85,10 +92,11 @@ __export(src_exports, {
   isPinnableState: () => isPinnableState,
   layoutReducer: () => layoutReducer,
   mapApp: () => mapApp,
-  matchBasedOnResource: () => matchBasedOnResource,
   panelSizing: () => panelSizing,
+  polygonToBoundingBox: () => polygonToBoundingBox,
   randomId: () => randomId,
   renderHelper: () => renderHelper,
+  requestToAnnotationResponse: () => requestToAnnotationResponse,
   useAnnotationPageEditor: () => useAnnotationPageEditor,
   useApp: () => useApp,
   useAppInstance: () => useAppInstance,
@@ -98,6 +106,7 @@ __export(src_exports, {
   useAppResourceInstance: () => useAppResourceInstance,
   useAppState: () => useAppState,
   useApps: () => useApps,
+  useAtlasStore: () => useAtlasStore,
   useAvailableLayouts: () => useAvailableLayouts,
   useCollectionEditor: () => useCollectionEditor,
   useConfig: () => useConfig,
@@ -109,6 +118,8 @@ __export(src_exports, {
   useEditingResourceStack: () => useEditingResourceStack,
   useEditingStack: () => useEditingStack,
   useEditor: () => useEditor,
+  useEmitter: () => useEmitter,
+  useEvent: () => useEvent,
   useGenericEditor: () => useGenericEditor,
   useHighlightedImageResource: () => useHighlightedImageResource,
   useHoverHighlightImageResource: () => useHoverHighlightImageResource,
@@ -117,16 +128,19 @@ __export(src_exports, {
   useLayoutProvider: () => useLayoutProvider,
   useLayoutState: () => useLayoutState,
   useManifestEditor: () => useManifestEditor,
+  useMatchMedia: () => useMatchMedia,
   useOptionalResource: () => useOptionalResource,
   usePanelActions: () => usePanelActions,
   usePreviewContext: () => usePreviewContext,
   usePreviewHistory: () => usePreviewHistory,
   usePreviewVault: () => usePreviewVault,
   usePreviews: () => usePreviews,
+  useRequestAnnotation: () => useRequestAnnotation,
   useResource: () => useResource,
   useSaveConfig: () => useSaveConfig,
   useSaveVault: () => useSaveVault,
   useSetCustomTitle: () => useSetCustomTitle,
+  useSvgTools: () => useSvgTools,
   useTask: () => useTask,
   useTaskDispatch: () => useTaskDispatch,
   useTaskEvent: () => useTaskEvent,
@@ -135,24 +149,6 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/AppContext/AppContext.tsx
-var import_react2 = require("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
 var import_react = require("react");
 var import_mitt = __toESM(require("mitt"), 1);
@@ -226,33 +222,127 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/AppContext/AppContext.tsx
+var import_react3 = require("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
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var PrimeAppReactContext = (0, import_react2.createContext)(null);
-var AppReactContext = (0, import_react2.createContext)(null);
-var AppStateReactContext = (0, import_react2.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 = (0, import_react2.createContext)(DEFAULT_CONFIG);
+var SaveConfigReactContext = (0, import_react2.createContext)(() => {
+});
+function useConfig() {
+  return (0, import_react2.useContext)(ConfigReactContext);
+}
+function useSaveConfig() {
+  return (0, import_react2.useContext)(SaveConfigReactContext);
+}
+function ConfigProvider({
+  children,
+  config,
+  saveConfig
+}) {
+  const [runtimeConfig, setRuntimeConfig] = (0, import_react2.useState)(null);
+  const resolvedConfig = (0, import_react2.useMemo)(
+    () => ({
+      ...DEFAULT_CONFIG,
+      ...config || {},
+      ...runtimeConfig || {}
+    }),
+    [config, runtimeConfig]
+  );
+  const memoSaveConfig = (0, import_react2.useCallback)(
+    (config2) => {
+      setRuntimeConfig(config2);
+      if (saveConfig) {
+        saveConfig(config2);
+      }
+    },
+    [config]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaveConfigReactContext.Provider, { value: memoSaveConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigReactContext.Provider, { value: resolvedConfig, children }) });
+}
+
+// src/AppContext/AppContext.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PrimeAppReactContext = (0, import_react3.createContext)(null);
+var AppReactContext = (0, import_react3.createContext)(null);
+var AppStateReactContext = (0, import_react3.createContext)({
   state: null,
   setState: () => {
   }
 });
 function useAppInstance() {
-  const ctx = (0, import_react2.useContext)(AppReactContext);
+  const ctx = (0, import_react3.useContext)(AppReactContext);
   invariant(ctx, "Hook useAppInstance must be used inside <AppProvider />");
   return ctx;
 }
 function useApp() {
-  const app = (0, import_react2.useContext)(PrimeAppReactContext);
+  const app = (0, import_react3.useContext)(PrimeAppReactContext);
   invariant(app, "Hook useApp must be used inside <AppProvider />");
   return app;
 }
 function useAppState() {
-  return (0, import_react2.useContext)(AppStateReactContext);
+  return (0, import_react3.useContext)(AppStateReactContext);
 }
 function AppStateProvider(props) {
   const [state, _setState, stateRef] = useLocalStorage(
     `app-state/${props.appId}/${props.instanceId}`,
     props.initialState || {}
   );
-  const setState = (0, import_react2.useCallback)((partial) => {
+  const setState = (0, import_react3.useCallback)((partial) => {
     const existing = stateRef.current ? JSON.parse(stateRef.current || "{}") : {};
     const partialState = (typeof partial === "function" ? partial(existing) : partial) || {};
     _setState({
@@ -260,13 +350,16 @@ function AppStateProvider(props) {
       ...partialState
     });
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (props.args) {
       setState(props.args);
     }
   }, [props.appId]);
-  const ctx = (0, import_react2.useMemo)(() => ({ state: state || {}, setState }), [setState, state]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppStateReactContext.Provider, { value: ctx, children: props.children });
+  const ctx = (0, import_react3.useMemo)(
+    () => ({ state: state || {}, setState }),
+    [setState, state]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AppStateReactContext.Provider, { value: ctx, children: props.children });
 }
 function AppProvider({
   instanceId,
@@ -276,17 +369,29 @@ function AppProvider({
   children,
   initialState
 }) {
-  const ctx = (0, import_react2.useMemo)(() => ({ instanceId, appId, args }), [instanceId, appId, args]);
-  const _initialState = (0, import_react2.useMemo)(() => initialState || {}, [instanceId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrimeAppReactContext.Provider, { value: definition, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppReactContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppStateProvider, { instanceId: ctx.instanceId, appId: ctx.appId, args: ctx.args, initialState: _initialState, children }) }) });
+  const ctx = (0, import_react3.useMemo)(
+    () => ({ instanceId, appId, args }),
+    [instanceId, appId, args]
+  );
+  const _initialState = (0, import_react3.useMemo)(() => initialState || {}, [instanceId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ConfigProvider, { config: definition.config || {}, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimeAppReactContext.Provider, { value: definition, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AppReactContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    AppStateProvider,
+    {
+      instanceId: ctx.instanceId,
+      appId: ctx.appId,
+      args: ctx.args,
+      initialState: _initialState,
+      children
+    }
+  ) }) }) });
 }
 
 // src/AppContext/MultiAppContext.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var MultiAppContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MultiAppContext = (0, import_react4.createContext)(null);
 function useApps() {
-  const ctx = (0, import_react3.useContext)(MultiAppContext);
+  const ctx = (0, import_react4.useContext)(MultiAppContext);
   invariant(ctx, "Hook useApps must be used inside <MultiAppProvider />");
   return ctx;
 }
@@ -316,7 +421,7 @@ function MultiAppProvider({
       changeApp({ id: collectionApp });
     }
   };
-  const ctx = (0, import_react3.useMemo)(
+  const ctx = (0, import_react4.useMemo)(
     () => ({
       currentApp: currentApp || { id: defaultApp },
       initialApp: initialApp || { id: defaultApp },
@@ -330,14 +435,14 @@ function MultiAppProvider({
   if (!currentApp || !currentFullApp) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     AppProvider,
     {
       appId: currentApp.id,
       definition: currentFullApp,
       instanceId: currentApp.id + instanceId,
       args: currentApp.args,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MultiAppContext.Provider, { value: ctx, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MultiAppContext.Provider, { value: ctx, children })
     }
   );
 }
@@ -414,11 +519,90 @@ var ContextButton = import_styled_components.default.button`
   letter-spacing: -0.42px;
 `;
 
+// src/PreviewButton/PreviewButton.tsx
+var import_components = require("@manifest-editor/components");
+
+// ../ui/icons/CloseIcon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CloseIcon = ({ height = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height, viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+] });
+
+// ../ui/icons/DownIcon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DownIcon = ({ rotate = 0, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "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__ */ (0, import_jsx_runtime5.jsx)(
+      "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
+var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"), 1);
+var import_react_iiif_vault3 = require("react-iiif-vault");
+
+// src/AppResourceProvider/AppResourceProvider.tsx
+var import_react5 = require("react");
+var import_react_iiif_vault = require("react-iiif-vault");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AppResourceReactProvider = (0, import_react5.createContext)(null);
+var AppResourceInstanceReactProvider = (0, import_react5.createContext)(null);
+function useAppResourceInstance() {
+  const ctx = (0, import_react5.useContext)(AppResourceInstanceReactProvider);
+  const resource = (0, import_react5.useContext)(AppResourceReactProvider);
+  const instanceId = ctx || resource?.id;
+  invariant(instanceId, "useResourceInstance can only be called from inside <ResourceProvider />");
+  return instanceId;
+}
+function useAppResource() {
+  const ctx = (0, import_react5.useContext)(AppResourceReactProvider);
+  invariant(ctx, "useResource can only be called from inside <ResourceProvider />");
+  return ctx;
+}
+function AppResourceInstanceProvider({ id, children }) {
+  if (!id) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppResourceInstanceReactProvider.Provider, { value: id, children });
+}
+function AppResourceProvider({ resource, children }) {
+  const vault = (0, import_react_iiif_vault.useExistingVault)();
+  let inner = children;
+  if (resource && resource.type === "Manifest") {
+    inner = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_iiif_vault.VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_iiif_vault.ManifestContext, { manifest: resource.id || "", children }) });
+  }
+  if (resource && resource.type === "Collection") {
+    inner = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_iiif_vault.VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_iiif_vault.CollectionContext, { collection: resource.id || "", children }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppResourceReactProvider.Provider, { value: resource, children: inner });
+}
+
 // src/PreviewContext/PreviewContext.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/PreviewContext/PreviewContext.hooks.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
+var import_react_iiif_vault2 = require("react-iiif-vault");
 
 // src/PreviewContext/previews/ExternalManifestUrlPreview.ts
 var ExternalManifestUrlPreview = class {
@@ -591,51 +775,12 @@ var IIIFPreviewService = class {
   }
 };
 
-// src/PreviewContext/PreviewContext.hooks.ts
-var import_react_iiif_vault2 = require("react-iiif-vault");
-
-// src/AppResourceProvider/AppResourceProvider.tsx
-var import_react4 = require("react");
-var import_react_iiif_vault = require("react-iiif-vault");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var AppResourceReactProvider = (0, import_react4.createContext)(null);
-var AppResourceInstanceReactProvider = (0, import_react4.createContext)(null);
-function useAppResourceInstance() {
-  const ctx = (0, import_react4.useContext)(AppResourceInstanceReactProvider);
-  const resource = (0, import_react4.useContext)(AppResourceReactProvider);
-  const instanceId = ctx || resource?.id;
-  invariant(instanceId, "useResourceInstance can only be called from inside <ResourceProvider />");
-  return instanceId;
-}
-function useAppResource() {
-  const ctx = (0, import_react4.useContext)(AppResourceReactProvider);
-  invariant(ctx, "useResource can only be called from inside <ResourceProvider />");
-  return ctx;
-}
-function AppResourceInstanceProvider({ id, children }) {
-  if (!id) {
-    return children;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AppResourceInstanceReactProvider.Provider, { value: id, children });
-}
-function AppResourceProvider({ resource, children }) {
-  const vault = (0, import_react_iiif_vault.useExistingVault)();
-  let inner = children;
-  if (resource && resource.type === "Manifest") {
-    inner = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_iiif_vault.VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_iiif_vault.ManifestContext, { manifest: resource.id || "", children }) });
-  }
-  if (resource && resource.type === "Collection") {
-    inner = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_iiif_vault.VaultProvider, { vault: vault || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_iiif_vault.CollectionContext, { collection: resource.id || "", children }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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 = (0, import_react_iiif_vault2.useVault)();
-  const previewActions = (0, import_react5.useMemo)(
+  const previewActions = (0, import_react6.useMemo)(
     () => ({
       setPreview: (preview) => {
         if (!preview)
@@ -648,7 +793,7 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
     }),
     [setPreviews, instanceId]
   );
-  const [handlerMap, providesMap] = (0, import_react5.useMemo)(() => {
+  const [handlerMap, providesMap] = (0, import_react6.useMemo)(() => {
     const map = {};
     const providesMap2 = {};
     for (const handler of handlers) {
@@ -702,8 +847,8 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
   async function selectPreview(id) {
     const selectedHandler = handlerMap[id];
     if (selectedHandler && instanceId) {
-      await activatePreview(id);
       dispatch({ type: "selectPreview", payload: id });
+      await activatePreview(id);
     }
   }
   async function getPreviewLink() {
@@ -755,18 +900,18 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
             dispatch({ type: "activatePreview", payload: contextualPreview.id });
           } else {
             Object.assign(context, existing?.data || {});
-            dispatch({ type: "activatePreview", payload: id });
+            dispatch({ type: "activatePreview", payload: existing.id });
           }
         }
         const created = await selectedHandler.createPreview(instanceId, resource, vault, context);
         if (created) {
           previewActions.setPreview(created);
-          dispatch({ type: "activatePreview", payload: id });
+          dispatch({ type: "activatePreview", payload: created.id });
         }
       }
     }
   }
-  return (0, import_react5.useMemo)(
+  return (0, import_react6.useMemo)(
     () => ({ selectPreview, deletePreview, focusPreview, activatePreview, updatePreviews, getPreviewLink }),
     // Dispatch has a stable identity.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -774,7 +919,7 @@ function usePreviewActions(state, dispatch, handlers, previews, setPreviews) {
   );
 }
 function usePreviewHandlers(configs) {
-  return (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     const handlers = [];
     for (const config of configs) {
       switch (config.type) {
@@ -827,23 +972,23 @@ function getDefaultPreviewState() {
 }
 
 // src/PreviewContext/PreviewContext.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var PreviewReactContext = (0, import_react6.createContext)(null);
-var AvailablePreviewReactContext = (0, import_react6.createContext)([]);
-var PreviewProvider = (0, import_react6.memo)(function PreviewProvider2({
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PreviewReactContext = (0, import_react7.createContext)(null);
+var AvailablePreviewReactContext = (0, import_react7.createContext)([]);
+var PreviewProvider = (0, import_react7.memo)(function PreviewProvider2({
   children,
   configs = []
 }) {
   const instanceId = useAppResourceInstance();
   const handlers = usePreviewHandlers(configs);
   const [previews, setPreviews] = useLocalStorage(`preview-${instanceId}`, []);
-  const [state, dispatch] = (0, import_react6.useReducer)(previewContextReducer, void 0, getDefaultPreviewState);
+  const [state, dispatch] = (0, import_react7.useReducer)(previewContextReducer, void 0, getDefaultPreviewState);
   const actions = usePreviewActions(state, dispatch, handlers, previews, setPreviews);
-  const context = (0, import_react6.useMemo)(
+  const context = (0, import_react7.useMemo)(
     () => ({ configs, actions, handlers, ...state }),
     [actions, configs, handlers, state]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     for (const preview of previews) {
       if (!state.active.includes(preview.id)) {
         const handler = handlers.find((h) => h.id === preview.id);
@@ -859,13 +1004,13 @@ var PreviewProvider = (0, import_react6.memo)(function PreviewProvider2({
       }
     }
   }, [instanceId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AvailablePreviewReactContext.Provider, { value: previews, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PreviewReactContext.Provider, { value: context, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AvailablePreviewReactContext.Provider, { value: previews, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewReactContext.Provider, { value: context, children }) });
 });
 function usePreviews() {
-  return (0, import_react6.useContext)(AvailablePreviewReactContext);
+  return (0, import_react7.useContext)(AvailablePreviewReactContext);
 }
 function usePreviewContext() {
-  const ctx = (0, import_react6.useContext)(PreviewReactContext);
+  const ctx = (0, import_react7.useContext)(PreviewReactContext);
   invariant(ctx, "usePreviewContext() can only be called from inside <PreviewProvider />");
   return ctx;
 }
@@ -1074,124 +1219,6 @@ var ButtonEmpty = import_styled_components3.default.div`
   cursor: not-allowed;
 `;
 
-// src/PreviewButton/PreviewButton.tsx
-var import_react_accessible_dropdown_menu_hook = __toESM(require("react-accessible-dropdown-menu-hook"), 1);
-
-// ../ui/icons/DownIcon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DownIcon = ({ rotate = 0, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  "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__ */ (0, import_jsx_runtime5.jsx)(
-      "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"
-      }
-    )
-  }
-);
-
-// ../ui/icons/CloseIcon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var CloseIcon = ({ height = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height, viewBox: "0 0 24 24", width: "24px", fill: "#000000", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
-] });
-
-// src/PreviewButton/PreviewButton.tsx
-var import_react_iiif_vault3 = require("react-iiif-vault");
-var import_components = require("@manifest-editor/components");
-
-// src/ConfigContext/ConfigContext.tsx
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("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 = (0, import_react7.createContext)(DEFAULT_CONFIG);
-var SaveConfigReactContext = (0, import_react7.createContext)(() => {
-});
-function useConfig() {
-  return (0, import_react7.useContext)(ConfigReactContext);
-}
-function useSaveConfig() {
-  return (0, import_react7.useContext)(SaveConfigReactContext);
-}
-function ConfigProvider({
-  children,
-  config,
-  saveConfig
-}) {
-  const [runtimeConfig, setRuntimeConfig] = (0, import_react7.useState)(null);
-  const resolvedConfig = (0, import_react7.useMemo)(
-    () => ({
-      ...DEFAULT_CONFIG,
-      ...config || {},
-      ...runtimeConfig || {}
-    }),
-    [config, runtimeConfig]
-  );
-  const memoSaveConfig = (0, import_react7.useCallback)(
-    (config2) => {
-      setRuntimeConfig(config2);
-      if (saveConfig) {
-        saveConfig(config2);
-      }
-    },
-    [config]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SaveConfigReactContext.Provider, { value: memoSaveConfig, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfigReactContext.Provider, { value: resolvedConfig, children }) });
-}
-
 // src/PreviewButton/PreviewButton.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function PreviewButton({ downloadEnabled, fileName }) {
@@ -1228,9 +1255,7 @@ 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;
                 }
               }
@@ -1246,7 +1271,15 @@ function PreviewButton({ downloadEnabled, fileName }) {
         const inactive = active.indexOf(config2.id) === -1;
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(MenuItem, { ...itemProps[key], children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItemStatus, { $status: inactive ? "available" : config2.id === selected ? "active" : "configured" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItemLabel, { onClick: () => actions.selectPreview(config2.id), children: config2.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            MenuItemLabel,
+            {
+              onClick: () => {
+                actions.selectPreview(config2.id);
+              },
+              children: config2.label
+            }
+          ),
           !inactive ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItemClose, { onClick: () => actions.deletePreview(config2.id), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) }) : null
         ] }, config2.id);
       }) })
@@ -1288,161 +1321,456 @@ function AppMenuProvider({ children, menu }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ReactAppMenuContext.Provider, { value: menu, children });
 }
 
-// src/BaseCreator/BaseCreator.tsx
-var import_react17 = require("react");
-var import_react_iiif_vault7 = require("react-iiif-vault");
-var import_parser3 = require("@iiif/parser");
-
-// ../ui/madoc/components/icons/Spinner.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function Spinner(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 18 18",
-        to: "360 18 18",
-        dur: "1s",
-        repeatCount: "indefinite"
-      }
-    ) })
-  ] }) });
-}
+// src/AtlasStore/AtlasStoreProvider.tsx
+var import_react11 = require("react");
 
-// src/highlighted-image-resources.ts
-var import_zustand = require("zustand");
-var import_react10 = require("react");
+// src/AtlasStore/AtlasStore.ts
+var import_polygon_editor = require("polygon-editor");
+var import_vanilla = require("zustand/vanilla");
 
-// src/helpers.ts
-var import_parser = require("@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);
+// src/AtlasStore/polygon-to-bounding-box.ts
+function polygonToBoundingBox(polygon) {
+  if (!polygon) {
+    return null;
   }
-  return responseData;
-}
-function createActionIdentity(type, property, parent) {
-  return `create_${type}_${property}_${(0, import_parser.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)}`;
+  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;
 }
-function mapApp(input, map) {
-  const { default: metadata, ...props } = input;
-  const app = {
-    metadata,
-    layout: {
-      leftPanels: [],
-      rightPanels: [],
-      centerPanels: [],
-      ...props
-    }
+
+// 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>`
   };
-  return map ? map(app) : app;
 }
-
-// src/highlighted-image-resources.ts
-var useHighlightedImageResource = (0, import_zustand.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 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 })
+    };
   }
-}));
-function useTemporaryHighlight(newValue) {
-  const id = (0, import_react10.useMemo)(() => randomId(), []);
-  const value = useHighlightedImageResource((s) => s.regions[id]);
-  const setRegion = useHighlightedImageResource((s) => s.setRegion);
-  (0, import_react10.useEffect)(() => {
-    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]);
-  (0, import_react10.useEffect)(() => {
-    return () => setRegion(id, null);
-  }, []);
+  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
+  };
 }
-function useHoverHighlightImageResource(id) {
-  const highlight = useHighlightedImageResource((s) => s.highlight);
-  const clear = useHighlightedImageResource((s) => s.clearHighlight);
-  (0, import_react10.useEffect)(() => {
-    return () => {
-      if (id) {
-        clear(id);
-      }
+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 = (0, import_vanilla.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 }
+        }
+      );
     };
-  }, [clear, id]);
-  return (0, import_react10.useMemo)(() => {
+    const polygons = (0, import_polygon_editor.createHelper)(null, onSave);
     return {
-      onMouseEnter() {
-        if (id) {
-          highlight(id);
+      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");
         }
       },
-      onMouseLeave() {
-        if (id) {
-          clear(id);
+      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();
       }
     };
-  }, [id, highlight, clear]);
+  });
+  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
+var import_mitt2 = __toESM(require("mitt"), 1);
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var events = (0, import_mitt2.default)();
+var ReactEmitterContext = (0, import_react10.createContext)(events);
+function EventEmitterProvider({
+  children,
+  emitter
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ReactEmitterContext.Provider, { value: emitter, children });
+}
+function useEmitter() {
+  return (0, import_react10.useContext)(ReactEmitterContext);
+}
+function useEvent(key, listener, deps = []) {
+  const emitter = (0, import_react10.useContext)(ReactEmitterContext);
+  (0, import_react10.useEffect)(() => {
+    const handler = (data) => {
+      listener(data);
+    };
+    emitter.on(key, handler);
+    return () => {
+      emitter.off(key, handler);
+    };
+  }, [emitter, key, ...deps]);
+}
+
+// src/AtlasStore/AtlasStoreProvider.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AtlasStoreReactContext = (0, import_react11.createContext)(null);
+function useAtlasStore() {
+  return (0, import_react11.useContext)(AtlasStoreReactContext);
+}
+function AtlasStoreProvider({
+  children
+}) {
+  const emitter = useEmitter();
+  const value = (0, import_react11.useMemo)(() => {
+    return createAtlasStore({ events: emitter });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AtlasStoreReactContext.Provider, { value, children });
+}
+
+// src/BaseCreator/BaseCreator.tsx
+var import_parser3 = require("@iiif/parser");
+var import_components4 = require("@manifest-editor/components");
+var import_creator_api2 = require("@manifest-editor/creator-api");
+
+// ../ui/madoc/components/icons/Spinner.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Spinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "1em", height: "1em", viewBox: "0 0 42 42", xmlns: "http://www.w3.org/2000/svg", stroke: "#fff", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { transform: "translate(2 2)", strokeWidth: 5, fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { strokeOpacity: 0.5, cx: 18, cy: 18, r: 18 }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 18 18",
+        to: "360 18 18",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ) })
+  ] }) });
 }
 
+// src/BaseCreator/BaseCreator.tsx
+var import_react19 = require("react");
+var import_react_iiif_vault7 = require("react-iiif-vault");
+
 // src/Layout/Layout.context.tsx
-var import_react11 = require("react");
-var LayoutActionsReactContext = (0, import_react11.createContext)(null);
-var LayoutStateReactContext = (0, import_react11.createContext)(null);
+var import_react12 = require("react");
+var LayoutActionsReactContext = (0, import_react12.createContext)(null);
+var LayoutStateReactContext = (0, import_react12.createContext)(null);
 function useLayoutState() {
-  return (0, import_react11.useContext)(LayoutStateReactContext);
+  return (0, import_react12.useContext)(LayoutStateReactContext);
 }
 function useLayoutActions() {
-  return (0, import_react11.useContext)(LayoutActionsReactContext);
+  return (0, import_react12.useContext)(LayoutActionsReactContext);
 }
 function useAvailableLayouts() {
   const app = useApp();
@@ -1451,22 +1779,22 @@ function useAvailableLayouts() {
 function useLayoutProvider() {
   const app = useApp();
   const layout = app.layout;
-  const actions = (0, import_react11.useContext)(LayoutActionsReactContext);
-  const state = (0, import_react11.useContext)(LayoutStateReactContext);
-  return (0, import_react11.useMemo)(() => {
+  const actions = (0, import_react12.useContext)(LayoutActionsReactContext);
+  const state = (0, import_react12.useContext)(LayoutStateReactContext);
+  return (0, import_react12.useMemo)(() => {
     return { actions, state, ...layout };
   }, [app, state]);
 }
 
 // src/Layout/components/ModularPanel.tsx
-var import_styled_components8 = __toESM(require("styled-components"), 1);
+var import_styled_components6 = __toESM(require("styled-components"), 1);
 
 // ../ui/icons/StarIcon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var StarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var StarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "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",
@@ -1476,15 +1804,15 @@ var StarIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg",
 ] });
 
 // ../ui/icons/BackIcon.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var BackIcon = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1rem", viewBox: "0 0 24 24", width: "1rem", fill: "#000000", style, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var BackIcon = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1rem", viewBox: "0 0 24 24", width: "1rem", fill: "#000000", style, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M0 0h24v24H0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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
 var import_react_error_boundary = require("react-error-boundary");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // ../ui/atoms/PaddedSidebarContainer.tsx
 var import_styled_components4 = __toESM(require("styled-components"), 1);
@@ -1495,75 +1823,21 @@ var PaddedSidebarContainer = import_styled_components4.default.div`
   overflow: visible;
 `;
 
-// ../ui/madoc/components/callouts/ErrorMessage.tsx
-var import_styled_components6 = __toESM(require("styled-components"), 1);
-
-// ../ui/madoc/components/callouts/BaseMessage.tsx
-var import_styled_components5 = __toESM(require("styled-components"), 1);
-var BaseMessage = import_styled_components5.default.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 && import_styled_components5.css`
-      font-size: 0.75em;
-      padding: 0.25em 0.5em;
-      line-height: 1.6em;
-    `}
-
-  ${(props) => props.$wide && import_styled_components5.css`
-      margin-left: -2em;
-      margin-right: -2em;
-      width: auto;
-      svg {
-        height: 0.8em;
-        vertical-align: baseline;
-      }
-    `}
-
-  ${(props) => props.$margin && import_styled_components5.css`
-      margin-bottom: 1em;
-    `}
-
-  ${(props) => props.$banner && import_styled_components5.css`
-      border-radius: 5px;
-      box-shadow: 0 3px 15px 0 rgb(0 0 0 / 16%);
-    `}
-`;
-
-// ../ui/madoc/components/callouts/ErrorMessage.tsx
-var ErrorMessage = (0, import_styled_components6.default)(BaseMessage)`
-  background: #c74158;
-  color: #fff;
-`;
-
 // src/Layout/components/PanelError.tsx
-var import_react12 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_components3 = require("@manifest-editor/components");
+var import_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function PanelError(props) {
   let error = props.error.toString();
-  const [isFixing, setIsFixing] = (0, import_react12.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(PaddedSidebarContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, { $margin: true, children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CalltoButton, { onClick: props.resetErrorBoundary, children: "Try again" })
+  const [isFixing, setIsFixing] = (0, import_react13.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PaddedSidebarContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components3.ErrorMessage, { className: "mb-2", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalltoButton, { onClick: props.resetErrorBoundary, children: "Try again" })
   ] });
 }
 
 // src/Layout/Layout.helpers.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function isPinnableState(t) {
   return t && t.pinnable;
 }
@@ -1576,7 +1850,7 @@ function panelSizing({
 }
 function renderHelper(htmlOrReact) {
   if (typeof htmlOrReact === "string") {
-    return (0, import_react13.createElement)("div", { dangerouslySetInnerHTML: { __html: htmlOrReact } });
+    return (0, import_react14.createElement)("div", { dangerouslySetInnerHTML: { __html: htmlOrReact } });
   }
   return htmlOrReact;
 }
@@ -1585,12 +1859,12 @@ function renderHelper(htmlOrReact) {
 var import_react_iiif_vault4 = require("react-iiif-vault");
 
 // ../ui/atoms/Dropdown.tsx
-var import_styled_components7 = __toESM(require("styled-components"), 1);
-var Dropdown = import_styled_components7.default.div`
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var Dropdown = import_styled_components5.default.div`
   position: relative;
   display: inline-block;
 `;
-var DropdownContent = import_styled_components7.default.div`
+var DropdownContent = import_styled_components5.default.div`
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -1606,7 +1880,7 @@ var DropdownContent = import_styled_components7.default.div`
     }
   }
 `;
-var DropdownItem = import_styled_components7.default.button`
+var DropdownItem = import_styled_components5.default.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"};
@@ -1625,7 +1899,7 @@ var DropdownItem = import_styled_components7.default.button`
     background-color: ${(props) => props.theme.color.lightgrey || "lightgrey"};
   }
 
-  ${(props) => props.$active && import_styled_components7.css`
+  ${(props) => props.$active && import_styled_components5.css`
       background: #b84c74;
       color: #fff;
       &:hover {
@@ -1634,7 +1908,7 @@ var DropdownItem = import_styled_components7.default.button`
       }
     `}
 `;
-var DropdownMenu = import_styled_components7.default.div`
+var DropdownMenu = import_styled_components5.default.div`
   display: none;
   flex-direction: column;
   position: absolute;
@@ -1658,18 +1932,18 @@ var DropdownMenu = import_styled_components7.default.div`
     }
   }
 
-  ${(props) => props.$open && import_styled_components7.css`
+  ${(props) => props.$open && import_styled_components5.css`
       display: flex;
     `}
 `;
-var DropdownLabel = import_styled_components7.default.div`
+var DropdownLabel = import_styled_components5.default.div`
   color: #999;
   text-transform: uppercase;
   font-weight: 600;
   padding: 0.7em;
   font-size: 0.875em;
 `;
-var DropdownDivider = import_styled_components7.default.div`
+var DropdownDivider = import_styled_components5.default.div`
   height: 1px;
   margin: 0 0.5em;
   background: #eee;
@@ -1682,12 +1956,12 @@ var import_react_accessible_dropdown_menu_hook2 = __toESM(require("react-accessi
 var OverrideScrollbar = "ModularPanel_OverrideScrollbar";
 
 // src/Layout/components/ModularPanel.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var LayoutTitleReactContext = (0, import_react14.createContext)(null);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var LayoutTitleReactContext = (0, import_react15.createContext)(null);
 function useSetCustomTitle() {
-  return (0, import_react14.useContext)(LayoutTitleReactContext);
+  return (0, import_react15.useContext)(LayoutTitleReactContext);
 }
-var ModularPanelWrapper = import_styled_components8.default.div`
+var ModularPanelWrapper = import_styled_components6.default.div`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -1740,7 +2014,7 @@ var ModularPanelWrapper = import_styled_components8.default.div`
     transform: translateX(100%);
   }
 `;
-var ModularPanelHeader = import_styled_components8.default.div`
+var ModularPanelHeader = import_styled_components6.default.div`
   background: #fff;
   display: flex;
   height: 2.8em;
@@ -1763,7 +2037,7 @@ var ModularPanelHeader = import_styled_components8.default.div`
     box-shadow: inset 0 -5px 10px 0 rgba(255, 255, 255, 0.5);
   }
 `;
-var ModulePanelButton = import_styled_components8.default.button`
+var ModulePanelButton = import_styled_components6.default.button`
   border: none;
   background: transparent;
   padding: 0 0.4em;
@@ -1776,17 +2050,17 @@ var ModulePanelButton = import_styled_components8.default.button`
     font-size: 1.2em;
   }
 `;
-var ModulePanelSpacer = import_styled_components8.default.div`
+var ModulePanelSpacer = import_styled_components6.default.div`
   flex: 1 1 0px;
 `;
-var ModularPanelLabel = import_styled_components8.default.h2`
+var ModularPanelLabel = import_styled_components6.default.h2`
   font-size: 0.875em;
   flex: 1 1 0px;
   padding-left: 1em;
   text-align: center;
   align-self: center;
 `;
-var ModularPanelContent = import_styled_components8.default.div`
+var ModularPanelContent = import_styled_components6.default.div`
   flex: 1 1 0px;
   display: flex;
 
@@ -1810,32 +2084,32 @@ function ModularPanel({
   style,
   noHeader
 }) {
-  const vault = (0, import_react14.useContext)(import_react_iiif_vault4.ReactVaultContext) || null;
-  const [didError, setDidError] = (0, import_react14.useState)(false);
+  const vault = (0, import_react15.useContext)(import_react_iiif_vault4.ReactVaultContext) || null;
+  const [didError, setDidError] = (0, import_react15.useState)(false);
   const appState = useAppState();
   const layout = useLayoutProvider();
   const { tabs, pinnable, hideHeader } = panel?.options || {};
   const resetKeys = [appState.state.canvasId, panel?.id];
-  const switchablePanels = (0, import_react14.useMemo)(() => {
+  const switchablePanels = (0, import_react15.useMemo)(() => {
     return (available || []).filter((p) => !p.requiresState);
   }, [available]);
   const { itemProps, isOpen, setIsOpen } = (0, import_react_accessible_dropdown_menu_hook2.default)(switchablePanels.length);
-  const [customTitle, setCustomTitle] = (0, import_react14.useState)("");
-  const setCustomTitleRef = (0, import_react14.useRef)();
-  (0, import_react14.useEffect)(() => setDidError(false), resetKeys);
-  (0, import_react14.useEffect)(() => setCustomTitle(""), [panel]);
-  (0, import_react14.useEffect)(() => {
+  const [customTitle, setCustomTitle] = (0, import_react15.useState)("");
+  const setCustomTitleRef = (0, import_react15.useRef)();
+  (0, import_react15.useEffect)(() => setDidError(false), resetKeys);
+  (0, import_react15.useEffect)(() => setCustomTitle(""), [panel]);
+  (0, import_react15.useEffect)(() => {
     setCustomTitleRef.current = setCustomTitle;
     return () => {
       setCustomTitleRef.current = void 0;
     };
   }, []);
-  const _setCustomTitle = (0, import_react14.useCallback)((title) => {
+  const _setCustomTitle = (0, import_react15.useCallback)((title) => {
     if (setCustomTitleRef.current) {
       setCustomTitleRef.current(title);
     }
   }, []);
-  const backAction = (0, import_react14.useCallback)(
+  const backAction = (0, import_react15.useCallback)(
     (e) => {
       const originalCallback = panel ? state.stack.length ? actions.popStack : panel.backAction ? () => panel && panel.backAction && panel.backAction(state, { ...layout, current: actions }, appState) : null : null;
       if (e && (!originalCallback || e.metaKey) && switchablePanels.length) {
@@ -1857,16 +2131,16 @@ function ModularPanel({
   if (!panel || !state.current) {
     return null;
   }
-  const backButton = panel.backAction || state.stack.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModulePanelButton, { onClick: backAction, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BackIcon, {}) }) : null;
-  const closeButton = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModulePanelButton, { onClick: close || actions.close, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseIcon, {}) });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LayoutTitleReactContext.Provider, { value: _setCustomTitle, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ModularPanelWrapper, { "data-state": transition, "data-flipped": isLeft, style, "data-header": !noHeader, children: [
-    noHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ModularPanelHeader, { "data-tabs": !!tabs, "data-error": didError, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dropdown, { style: { display: "flex", height: "100%" }, children: [
+  const backButton = panel.backAction || state.stack.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModulePanelButton, { onClick: backAction, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BackIcon, {}) }) : null;
+  const closeButton = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModulePanelButton, { onClick: close || actions.close, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LayoutTitleReactContext.Provider, { value: _setCustomTitle, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ModularPanelWrapper, { "data-state": transition, "data-flipped": isLeft, style, "data-header": !noHeader, children: [
+    noHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ModularPanelHeader, { "data-tabs": !!tabs, "data-error": didError, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Dropdown, { style: { display: "flex", height: "100%" }, children: [
         panel.renderBackAction ? panel.renderBackAction({ backAction, fallback: backButton }) : backButton,
-        switchablePanels.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DropdownMenu, { $open: isOpen, style: { left: "0.5em" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownLabel, { children: "All panels" }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DropdownDivider, {}),
-          switchablePanels.map((newPanel, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        switchablePanels.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownMenu, { $open: isOpen, style: { left: "0.5em" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownLabel, { children: "All panels" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownDivider, {}),
+          switchablePanels.map((newPanel, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             DropdownItem,
             {
               ...itemProps[i],
@@ -1878,11 +2152,11 @@ function ModularPanel({
           ))
         ] }) : null
       ] }),
-      customTitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModularPanelLabel, { children: customTitle }) : hideHeader ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModulePanelSpacer, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModularPanelLabel, { children: panel.label }),
-      pinnable ? state.pinned ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModulePanelButton, { onClick: pinActions.unpin, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StarIcon, { fill: "orange" }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModulePanelButton, { onClick: () => pinActions.pin({ id: panel.id, state: state.state }), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StarIcon, { fill: "#ddd" }) }) : null,
+      customTitle ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModularPanelLabel, { children: customTitle }) : hideHeader ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModulePanelSpacer, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModularPanelLabel, { children: panel.label }),
+      pinnable ? state.pinned ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModulePanelButton, { onClick: pinActions.unpin, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StarIcon, { fill: "orange" }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModulePanelButton, { onClick: () => pinActions.pin({ id: panel.id, state: state.state }), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StarIcon, { fill: "#ddd" }) }) : null,
       panel.renderCloseAction ? panel.renderCloseAction({ closeAction: close || actions.close, fallback: closeButton }) : closeButton
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModularPanelContent, { className: OverrideScrollbar, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ModularPanelContent, { className: OverrideScrollbar, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_react_error_boundary.ErrorBoundary,
       {
         onError: () => setDidError(true),
@@ -1901,14 +2175,189 @@ function ModularPanel({
   ] }) });
 }
 
+// src/highlighted-image-resources.ts
+var import_zustand = require("zustand");
+var import_react16 = require("react");
+
+// src/helpers.ts
+var import_parser = require("@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}_${(0, import_parser.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 = (0, import_zustand.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 = (0, import_react16.useMemo)(() => randomId(), []);
+  const value = useHighlightedImageResource((s) => s.regions[id]);
+  const setRegion = useHighlightedImageResource((s) => s.setRegion);
+  (0, import_react16.useEffect)(() => {
+    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]);
+  (0, import_react16.useEffect)(() => {
+    return () => setRegion(id, null);
+  }, []);
+}
+function useHoverHighlightImageResource(id) {
+  const highlight = useHighlightedImageResource((s) => s.highlight);
+  const clear = useHighlightedImageResource((s) => s.clearHighlight);
+  (0, import_react16.useEffect)(() => {
+    return () => {
+      if (id) {
+        clear(id);
+      }
+    };
+  }, [clear, id]);
+  return (0, import_react16.useMemo)(() => {
+    return {
+      onMouseEnter() {
+        if (id) {
+          highlight(id);
+        }
+      },
+      onMouseLeave() {
+        if (id) {
+          clear(id);
+        }
+      }
+    };
+  }, [id, highlight, clear]);
+}
+
 // src/BaseCreator/BaseCreator.hooks.tsx
+var import_parser2 = require("@iiif/parser");
 var import_creator_api = require("@manifest-editor/creator-api");
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_react_iiif_vault6 = require("react-iiif-vault");
-var import_parser2 = require("@iiif/parser");
 
 // src/PreviewVault/PreviewVault.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 var import_vault2 = require("@iiif/helpers/vault");
 var import_react_iiif_vault5 = require("react-iiif-vault");
 
@@ -1998,12 +2447,12 @@ function createPreviewVault(homepageCollectionId = "vault://homepage-collection.
 }
 
 // src/PreviewVault/PreviewVault.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function usePreviewVault() {
-  return (0, import_react15.useContext)(PreviewVaultReactContext);
+  return (0, import_react17.useContext)(PreviewVaultReactContext);
 }
-var PreviewVaultReactContext = (0, import_react15.createContext)(new import_vault2.Vault());
-var PreviewVaultAddHistory = (0, import_react15.createContext)({
+var PreviewVaultReactContext = (0, import_react17.createContext)(new import_vault2.Vault());
+var PreviewVaultAddHistory = (0, import_react17.createContext)({
   addHistory: (id, type) => {
   },
   clearHistory: () => {
@@ -2011,118 +2460,127 @@ var PreviewVaultAddHistory = (0, import_react15.createContext)({
 });
 var HOMEPAGE_COLLECTION = "manifest-editor://homepage-collection.json";
 function usePreviewHistory() {
-  return (0, import_react15.useContext)(PreviewVaultAddHistory);
+  return (0, import_react17.useContext)(PreviewVaultAddHistory);
 }
 function PreviewVaultContext(props) {
-  const { vault, unsubscribe, addHistory, clearHistory } = (0, import_react15.useMemo)(() => {
+  const { vault, unsubscribe, addHistory, clearHistory } = (0, import_react17.useMemo)(() => {
     return createPreviewVault(HOMEPAGE_COLLECTION);
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     return unsubscribe;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PreviewVaultAddHistory.Provider, { value: { addHistory, clearHistory }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PreviewVaultReactContext.Provider, { value: vault, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PreviewVaultAddHistory.Provider, { value: { addHistory, clearHistory }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PreviewVaultReactContext.Provider, { value: vault, children: props.children }) });
 }
 function PreviewVaultBoundary({ children }) {
   const vault = usePreviewVault();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_iiif_vault5.VaultProvider, { vault, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_iiif_vault5.VaultProvider, { vault, children });
 }
 
 // src/BaseCreator/BaseCreator.hooks.tsx
-function matchBasedOnResource(resource, list, options) {
-  const supported = [];
-  if (list.length === 0) {
-    return [];
-  }
-  const parent = (0, import_parser2.toRef)(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 = (0, import_react_iiif_vault6.useVault)();
   const app = useApp();
   const { create: create2, edit } = useLayoutActions();
-  const supported = (0, import_react16.useMemo)(
-    () => matchBasedOnResource({ type, parent, index: 0, property }, app.layout.creators || [], { vault }),
+  const supported = (0, import_react18.useMemo)(
+    () => (0, import_creator_api.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 = (0, import_react16.useCallback)(
+  const wrappedCreate = (0, import_react18.useCallback)(
     (index, initialData) => {
       if (parent) {
-        create2({ type, parent: (0, import_parser2.toRef)(parent), property, index, target, initialData, ...options || {} });
+        create2({
+          type,
+          parent: (0, import_parser2.toRef)(parent),
+          property,
+          index,
+          target,
+          initialData,
+          ...options || {}
+        });
+      }
+    },
+    [create2, parent, property, type, options, target]
+  );
+  const wrappedFilteredCreate = (0, import_react18.useCallback)(
+    (filter, index, initialData) => {
+      if (parent) {
+        create2({
+          type,
+          filter,
+          parent: (0, import_parser2.toRef)(parent),
+          property,
+          index,
+          target,
+          initialData,
+          ...options || {}
+        });
       }
     },
-    [create2, parent, property, type]
+    [create2, parent, property, type, options, target]
   );
-  const wrappedEdit = (0, import_react16.useCallback)(
+  const wrappedEdit = (0, import_react18.useCallback)(
     (resource, index) => {
-      edit(resource, parent ? { parent: (0, import_parser2.toRef)(parent), property, index } : void 0);
+      edit(
+        resource,
+        parent ? { parent: (0, import_parser2.toRef)(parent), property, index } : void 0
+      );
+    },
+    [edit, parent, property]
+  );
+  const wrappedCreator = (0, import_react18.useCallback)(
+    (initialCreator, initialData) => {
+      if (parent) {
+        create2({
+          type,
+          initialCreator,
+          parent: (0, import_parser2.toRef)(parent),
+          property,
+          target,
+          initialData,
+          ...options || {}
+        });
+      }
     },
-    [edit, parent, property]
+    [type, property, parent, target, create2, options]
   );
-  const buttonProps = (0, import_react16.useMemo)(() => {
+  const buttonProps = (0, import_react18.useMemo)(() => {
     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 = (0, import_react_iiif_vault6.useVault)();
   const previewVault = usePreviewVault();
   const app = useApp();
-  return (0, import_react16.useMemo)(() => {
+  return (0, import_react18.useMemo)(() => {
     return new import_creator_api.Creator(vault, app.layout.creators || [], previewVault);
   }, [app.layout.creators, vault]);
 }
 
 // src/BaseCreator/BaseCreator.tsx
-var import_components3 = require("@manifest-editor/components");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var RenderCreator = (0, import_react17.memo)(function RenderCreator2(props) {
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var RenderCreator = (0, import_react19.memo)(function RenderCreator2(props) {
   const vault = (0, import_react_iiif_vault7.useVault)();
   const { edit, modal } = useLayoutActions();
-  const [isCreating, setIsCreating] = (0, import_react17.useState)(false);
+  const [isCreating, setIsCreating] = (0, import_react19.useState)(false);
   const creator = useInlineCreator();
-  const isCreatingRef = (0, import_react17.useRef)(false);
+  const isCreatingRef = (0, import_react19.useRef)(false);
   const canvasSelector = props.resource.initialData?.selector;
   useTemporaryHighlight(canvasSelector);
   const options = {
@@ -2152,12 +2610,12 @@ var RenderCreator = (0, import_react17.memo)(function RenderCreator2(props) {
   const validate = async () => {
     return true;
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!props.creator.render && !isCreating) {
       runCreate({});
     }
   }, [props.creator]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isCreating) {
       modal.popStack();
       modal.close();
@@ -2167,9 +2625,9 @@ var RenderCreator = (0, import_react17.memo)(function RenderCreator2(props) {
     return null;
   }
   if (!props.creator.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { onClick: () => runCreate({}), children: "Create" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { onClick: () => runCreate({}), children: "Create" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}), children: props.creator.render({
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Spinner, {}), children: props.creator.render({
     vault,
     runCreate,
     validate,
@@ -2179,32 +2637,40 @@ var RenderCreator = (0, import_react17.memo)(function RenderCreator2(props) {
 function BaseCreator(props) {
   const app = useApp();
   const vault = (0, import_react_iiif_vault7.useVault)();
-  const [currentId, setCurrentId] = (0, import_react17.useState)("");
+  const [currentId, setCurrentId] = (0, import_react19.useState)(
+    props.resource.initialCreator || ""
+  );
   const set = useSetCustomTitle();
-  const supported = (0, import_react17.useMemo)(
-    () => matchBasedOnResource(props.resource, app.layout.creators || [], { vault }),
+  const supported = (0, import_react19.useMemo)(
+    () => (0, import_creator_api2.matchBasedOnResource)(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);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (current) {
-      set && set(current.label);
+      set?.(current.label);
     }
   });
   if (supported.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: "Not currently supported" });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Not currently supported" });
   }
   if (current) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "bg-me-gray-100 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { onClick: () => setCurrentId(""), children: "Back" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "p-2 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RenderCreator, { creator: current, resource: props.resource }) })
+    const shouldHideModal = current.hiddenModal;
+    if (shouldHideModal) {
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderCreator, { creator: current, resource: props.resource });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "bg-me-gray-100 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { onClick: () => setCurrentId(""), children: "Back" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "p-2 py-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderCreator, { creator: current, resource: props.resource }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_components3.CreatorGrid,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_components4.CreatorGrid,
     {
       label: "Select a type",
       items: supported.map((item) => ({
@@ -2219,22 +2685,23 @@ function BaseCreator(props) {
 }
 
 // src/BaseCreator/index.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var baseCreator = {
   id: "@manifest-editor/creator",
   label: "Add content",
   options: { hideHeader: true, tabs: false },
   render(state) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BaseCreator, { resource: state });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BaseCreator, { resource: state });
   }
 };
 
 // src/BaseEditor/BaseEditor.tsx
-var import_react19 = require("react");
+var import_components5 = require("@manifest-editor/components");
+var import_react21 = require("react");
 var import_react_iiif_vault9 = require("react-iiif-vault");
 
 // src/EditingStack/EditingStack.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/EditingStack/EditingStack.reducer.ts
 var import_parser4 = require("@iiif/parser");
@@ -2331,10 +2798,10 @@ function filterStack(newStackWithDuplicates, current) {
 var import_editor_api = require("@manifest-editor/editor-api");
 var import_react_iiif_vault8 = require("react-iiif-vault");
 var import_parser5 = require("@iiif/parser");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var defaultState = { stack: [], current: null, create: null };
-var EditingStackContext = (0, import_react18.createContext)(defaultState);
-var EditingStackActionsContext = (0, import_react18.createContext)({
+var EditingStackContext = (0, import_react20.createContext)(defaultState);
+var EditingStackActionsContext = (0, import_react20.createContext)({
   edit() {
   },
   close() {
@@ -2349,29 +2816,29 @@ var EditingStackActionsContext = (0, import_react18.createContext)({
   }
 });
 function useEditingStack() {
-  return (0, import_react18.useContext)(EditingStackActionsContext);
+  return (0, import_react20.useContext)(EditingStackActionsContext);
 }
 function useEditingResource() {
-  return (0, import_react18.useContext)(EditingStackContext).current;
+  return (0, import_react20.useContext)(EditingStackContext).current;
 }
 function useEditingResourceStack() {
-  return (0, import_react18.useContext)(EditingStackContext).stack;
+  return (0, import_react20.useContext)(EditingStackContext).stack;
 }
 function useCreatingResource() {
-  return (0, import_react18.useContext)(EditingStackContext).create;
+  return (0, import_react20.useContext)(EditingStackContext).create;
 }
 function useManifestEditor() {
   const { manifest } = (0, import_react_iiif_vault8.useResourceContext)();
   const vault = (0, import_react_iiif_vault8.useVault)();
-  const [key, invalidate] = (0, import_react18.useReducer)((i) => i + 1, 0);
+  const [key, invalidate] = (0, import_react20.useReducer)((i) => i + 1, 0);
   invariant(manifest, "Manifest not found");
-  const editor = (0, import_react18.useMemo)(() => {
+  const editor = (0, import_react20.useMemo)(() => {
     return new import_editor_api.EditorInstance({
       reference: { id: manifest, type: "Manifest" },
       vault
     });
   }, [manifest, vault]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2381,15 +2848,15 @@ function useManifestEditor() {
 function useCollectionEditor() {
   const { collection } = (0, import_react_iiif_vault8.useResourceContext)();
   const vault = (0, import_react_iiif_vault8.useVault)();
-  const [key, invalidate] = (0, import_react18.useReducer)((i) => i + 1, 0);
+  const [key, invalidate] = (0, import_react20.useReducer)((i) => i + 1, 0);
   invariant(collection, "Collection not found");
-  const editor = (0, import_react18.useMemo)(() => {
+  const editor = (0, import_react20.useMemo)(() => {
     return new import_editor_api.EditorInstance({
       reference: { id: collection, type: "Collection" },
       vault
     });
   }, [collection, vault]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2398,16 +2865,16 @@ function useCollectionEditor() {
 }
 function useGenericEditor(ref, ctx = {}) {
   const vault = (0, import_react_iiif_vault8.useVault)();
-  const [key, invalidate] = (0, import_react18.useReducer)((i) => i + 1, 0);
+  const [key, invalidate] = (0, import_react20.useReducer)((i) => i + 1, 0);
   invariant(ref, "Resource not found");
-  const editor = (0, import_react18.useMemo)(() => {
+  const editor = (0, import_react20.useMemo)(() => {
     return new import_editor_api.EditorInstance({
       reference: (0, import_parser5.toRef)(ref),
       vault,
       context: { resource: ref, parent: ctx.parent, index: ctx.index, parentProperty: ctx.parentProperty }
     });
   }, [ref, vault]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2422,15 +2889,15 @@ function useAnnotationPageEditor() {
 function useEditor() {
   const resource = useEditingResource();
   const vault = (0, import_react_iiif_vault8.useVault)();
-  const [key, invalidate] = (0, import_react18.useReducer)((i) => i + 1, 0);
+  const [key, invalidate] = (0, import_react20.useReducer)((i) => i + 1, 0);
   invariant(resource, "No resource selected");
-  const editor = (0, import_react18.useMemo)(() => {
+  const editor = (0, import_react20.useMemo)(() => {
     return new import_editor_api.EditorInstance({
       reference: resource.resource.source || resource.resource,
       vault
     });
   }, [resource, vault]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return editor.observe.start(invalidate);
   }, [editor]);
   editor.observe.key = `${key}`;
@@ -2439,11 +2906,11 @@ function useEditor() {
 }
 function EditingStack(props) {
   const vault = (0, import_react_iiif_vault8.useVault)();
-  const [state, _dispatch] = (0, import_react18.useReducer)(editingStackReducer, defaultState);
-  const dispatch = (0, import_react18.useCallback)((action) => {
+  const [state, _dispatch] = (0, import_react20.useReducer)(editingStackReducer, defaultState);
+  const dispatch = (0, import_react20.useCallback)((action) => {
     _dispatch(action);
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     return vault.on("@iiif/REMOVE_REFERENCE", (payload) => {
       const action = payload.action;
       const parent = { id: action.payload.id, type: action.payload.type };
@@ -2451,37 +2918,36 @@ function EditingStack(props) {
       _dispatch({ type: "syncRemoval", payload: { resource: { parent, resource } } });
     });
   }, [vault]);
-  const edit = (0, import_react18.useCallback)(
+  const edit = (0, import_react20.useCallback)(
     (resource, reset = false) => dispatch({ type: "edit", payload: { resource, reset } }),
     []
   );
-  const updateCurrent = (0, import_react18.useCallback)(
+  const updateCurrent = (0, import_react20.useCallback)(
     (resource) => dispatch({ type: "updateCurrent", payload: { resource } }),
     []
   );
-  const close = (0, import_react18.useCallback)(() => dispatch({ type: "close" }), []);
-  const back = (0, import_react18.useCallback)(() => dispatch({ type: "back" }), []);
-  const create2 = (0, import_react18.useCallback)((resource, options) => {
+  const close = (0, import_react20.useCallback)(() => dispatch({ type: "close" }), []);
+  const back = (0, import_react20.useCallback)(() => dispatch({ type: "back" }), []);
+  const create2 = (0, import_react20.useCallback)((resource, options) => {
     dispatch({ type: "create", payload: { resource, options } });
     return () => {
       dispatch({ type: "create", payload: { resource: null } });
     };
   }, []);
-  const actions = (0, import_react18.useMemo)(() => {
+  const actions = (0, import_react20.useMemo)(() => {
     return { edit, updateCurrent, close, back, create: create2 };
   }, []);
   const { instanceId } = useAppInstance();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EditingStackActionsContext.Provider, { value: actions, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EditingStackContext.Provider, { value: state, children: props.children }) }, instanceId);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EditingStackActionsContext.Provider, { value: actions, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(EditingStackContext.Provider, { value: state, children: props.children }) }, instanceId);
 }
 
 // src/BaseEditor/BaseEditor.tsx
-var import_components4 = require("@manifest-editor/components");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function BaseEditorBackButton({ fallback, backAction }) {
   const stack = useEditingResourceStack();
   const { back } = useEditingStack();
   if (stack.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ModulePanelButton, { onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BackIcon, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ModulePanelButton, { onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BackIcon, {}) });
   }
   return fallback;
 }
@@ -2489,20 +2955,22 @@ function BaseEditorCloseButton({ closeAction, fallback }) {
   const stack = useEditingResourceStack();
   const current = useEditingResource();
   if (current || stack.length) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ModulePanelButton,
       {
         onClick: () => {
           closeAction();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CloseIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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;
   }
@@ -2550,86 +3018,136 @@ function editBasedOnResource(resource, list, options, config) {
   }
   return null;
 }
-function BaseEditor({ currentTab = void 0 }) {
+function BaseEditor({
+  currentTab = void 0
+}) {
   const resource = useEditingResource();
+  const currentResourceContext = (0, import_react21.useContext)(import_react_iiif_vault9.ResourceReactContext);
   const app = useApp();
   const vault = (0, import_react_iiif_vault9.useVault)();
   const { change } = useLayoutActions();
   const set = useSetCustomTitle();
   const { editorConfig } = useConfig();
   const resourceConfig = (resource?.resource.source?.type ? editorConfig[resource?.resource.source?.type] : editorConfig.All) || {};
-  const match = (0, import_react19.useMemo)(() => {
+  const newResourceContext = (0, import_react21.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime22.jsx)(import_react_iiif_vault9.ResourceReactContext.Provider, { value: newResourceContext, children });
+  }
+  const match = (0, import_react21.useMemo)(() => {
     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]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     set(match?.label || "");
   });
+  (0, import_react21.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full", children: first.component(resourceConfig) });
+      return wrap(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full", children: first.component(resourceConfig) })
+      );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_components4.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__ */ (0, import_jsx_runtime22.jsx)(
+      import_components5.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
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var baseEditor = {
   id: "@manifest-editor/editor",
   label: "Editor",
   options: { hideHeader: true, tabs: true, minWidth: 400 },
-  renderBackAction: ({ backAction, fallback }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BaseEditorBackButton, { backAction, fallback }),
-  renderCloseAction: ({ closeAction, fallback }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BaseEditorCloseButton, { closeAction, fallback }),
+  renderBackAction: ({ backAction, fallback }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BaseEditorBackButton, { backAction, fallback }),
+  renderCloseAction: ({ closeAction, fallback }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BaseEditorCloseButton, { closeAction, fallback }),
   render({ currentTab }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BaseEditor, { currentTab });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BaseEditor, { currentTab });
   }
 };
 
 // src/ConfigContext/ConfigEditor.tsx
-var import_components5 = require("@manifest-editor/components");
+var import_components6 = require("@manifest-editor/components");
 
 // src/hooks/use-decay-state.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 function useDecayState(time) {
-  const [active, _setActive] = (0, import_react20.useState)(false);
-  const lastTimeout = (0, import_react20.useRef)();
-  const focusCount = (0, import_react20.useRef)(0);
+  const [active, _setActive] = (0, import_react22.useState)(false);
+  const lastTimeout = (0, import_react22.useRef)();
+  const focusCount = (0, import_react22.useRef)(0);
   function clear(existing) {
     focusCount.current--;
     if (existing && focusCount.current !== 0) {
@@ -2650,11 +3168,11 @@ function useDecayState(time) {
     }
     _setActive(true);
   }
-  return (0, import_react20.useMemo)(() => [active, { set, clear }], [active]);
+  return (0, import_react22.useMemo)(() => [active, { set, clear }], [active]);
 }
 
 // src/ConfigContext/ConfigEditor.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ConfigEditor() {
   const previews = usePreviewContext();
   const config = useConfig();
@@ -2681,14 +3199,14 @@ function ConfigEditor() {
     saveState.set();
     saveState.clear();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Sidebar, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.SidebarHeader, { title: "Workspace configuration" }),
-    isSaved ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-me-primary-500 text-white p-3 text-sm", children: "Changes saved" }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.SidebarContent, { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.Form, { onSubmit, className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.InputContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.Form.Label, { htmlFor: "defaultLanguage", children: "Default Language" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_components5.Form.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Sidebar, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.SidebarHeader, { title: "Workspace configuration" }),
+    isSaved ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-me-primary-500 text-white p-3 text-sm", children: "Changes saved" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.SidebarContent, { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.Form, { onSubmit, className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.Form.Label, { htmlFor: "defaultLanguage", children: "Default Language" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_components6.Form.Input,
           {
             type: "text",
             name: "defaultLanguage",
@@ -2697,10 +3215,10 @@ function ConfigEditor() {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.InputContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.Form.Label, { htmlFor: "availableLanguages", children: "Available Languages" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_components5.Form.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.Form.Label, { htmlFor: "availableLanguages", children: "Available Languages" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_components6.Form.Input,
           {
             type: "text",
             name: "availableLanguages",
@@ -2709,9 +3227,9 @@ function ConfigEditor() {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_components5.Form.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_components6.Form.Input,
           {
             type: "checkbox",
             name: "advancedLanguageMode",
@@ -2719,11 +3237,23 @@ function ConfigEditor() {
             defaultChecked: config.i18n?.advancedLanguageMode || false
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.Form.Label, { htmlFor: "advancedLanguageMode", children: "Advanced Language Mode" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.Form.Label, { htmlFor: "advancedLanguageMode", children: "Advanced Language Mode" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_components6.Form.Input,
+          {
+            type: "checkbox",
+            name: "textGranularityEnabled",
+            id: "textGranularityEnabled",
+            defaultChecked: config.i18n?.textGranularityEnabled || false
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.Form.Label, { htmlFor: "textGranularityEnabled", children: "Enable text granularity" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.InputContainer, { horizontal: true, className: "my-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_components5.Form.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { horizontal: true, className: "my-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_components6.Form.Input,
           {
             type: "checkbox",
             name: "isVersion2",
@@ -2731,17 +3261,17 @@ function ConfigEditor() {
             defaultChecked: config.export?.version === 2
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.Form.Label, { htmlFor: "isVersion2", children: "Export Presentation 2 Manifests" })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.Form.Label, { htmlFor: "isVersion2", children: "Export Presentation 2 Manifests" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.InputContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.Form.Label, { htmlFor: "defaultPreview", children: "Default preview" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: previews.configs.map((preview, key) => {
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.Form.Label, { htmlFor: "defaultPreview", children: "Default preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: previews.configs.map((preview, key) => {
           if (preview.type === "iiif-preview-service") {
             return null;
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_components5.Form.InputContainer, { horizontal: true, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-              import_components5.Form.Input,
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_components6.Form.InputContainer, { horizontal: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_components6.Form.Input,
               {
                 type: "radio",
                 id: preview.id,
@@ -2750,17 +3280,25 @@ function ConfigEditor() {
                 defaultChecked: !config.defaultPreview ? key === 0 : config.defaultPreview === preview.id
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { htmlFor: preview.id, children: preview.label })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { htmlFor: preview.id, children: preview.label })
           ] }, preview.id);
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mt-5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_components5.ActionButton, { type: "submit", children: "Save changes" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        "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__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_components6.ActionButton, { type: "submit", children: "Save changes" }) })
     ] }) })
   ] });
 }
 
 // src/ExportPanel/ExportPanel.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_react_iiif_vault10 = require("react-iiif-vault");
 
 // ../ui/ui/CenterPanelContainer/CenterPanelContainer.module.css
@@ -2772,29 +3310,29 @@ var CenterPanelContainer_default = {
 };
 
 // ../ui/ui/CenterPanelContainer/CenterPanelContainer.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function CenterPanelContainer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: CenterPanelContainer_default.CenterPanelContainer, children: [
-    props.title || props.close ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: CenterPanelContainer_default.CenterPanelHeader, children: [
-      props.title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: CenterPanelContainer_default.CenterPanelTitle, children: props.title }) : null,
-      props.close ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { className: CenterPanelContainer_default.CenterPanelClose, onClick: props.close, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseIcon, {}) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: CenterPanelContainer_default.CenterPanelContainer, children: [
+    props.title || props.close ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: CenterPanelContainer_default.CenterPanelHeader, children: [
+      props.title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: CenterPanelContainer_default.CenterPanelTitle, children: props.title }) : null,
+      props.close ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: CenterPanelContainer_default.CenterPanelClose, onClick: props.close, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon, {}) }) : null
     ] }) : null,
     props.children
   ] });
 }
 
 // ../ui/atoms/Accordion.tsx
-var import_styled_components9 = __toESM(require("styled-components"), 1);
-var import_react21 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var AccordionContainer = import_styled_components9.default.div`
+var import_styled_components7 = __toESM(require("styled-components"), 1);
+var import_react23 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var AccordionContainer = import_styled_components7.default.div`
   flex: 1;
   display: flex;
   width: 100%;
   flex-direction: column;
   position: relative;
 `;
-var ItemRow = import_styled_components9.default.div`
+var ItemRow = import_styled_components7.default.div`
   background: #fff;
   position: relative;
   border-bottom: 1px solid #d0d0d0;
@@ -2813,12 +3351,12 @@ var ItemRow = import_styled_components9.default.div`
     //justify-content: center;
   }
 `;
-var ItemDescription = import_styled_components9.default.p`
+var ItemDescription = import_styled_components7.default.p`
   font-size: 0.9em;
   color: #777;
   font-weight: 400;
 `;
-var ItemLabel = import_styled_components9.default.button`
+var ItemLabel = import_styled_components7.default.button`
   color: inherit;
   text-rendering: geometricPrecision;
   border: none;
@@ -2861,7 +3399,7 @@ var ItemLabel = import_styled_components9.default.button`
     }
   }
 `;
-var ItemCollapse = import_styled_components9.default.div`
+var ItemCollapse = import_styled_components7.default.div`
   font-size: 1.4em;
   padding-right: 0.3em;
   display: flex;
@@ -2871,7 +3409,7 @@ var ItemCollapse = import_styled_components9.default.div`
     font-size: 2em;
   }
 `;
-var ItemIcon = import_styled_components9.default.div`
+var ItemIcon = import_styled_components7.default.div`
   width: 2em;
   align-items: center;
   //padding-top: 0.5em;
@@ -2885,12 +3423,12 @@ var ItemIcon = import_styled_components9.default.div`
     color: #999;
   }
 `;
-var ItemBodyInner = import_styled_components9.default.div`
+var ItemBodyInner = import_styled_components7.default.div`
   min-height: 0;
   overflow: visible;
   display: flex;
 `;
-var ItemBodyPadding = import_styled_components9.default.div`
+var ItemBodyPadding = import_styled_components7.default.div`
   min-height: 0;
   overflow: visible;
   flex: 1;
@@ -2904,7 +3442,7 @@ var ItemBodyPadding = import_styled_components9.default.div`
     overflow-y: auto;
   }
 `;
-var ItemBody = import_styled_components9.default.section`
+var ItemBody = import_styled_components7.default.section`
   display: grid;
   grid-template-rows: 0fr;
   overflow: hidden;
@@ -2933,7 +3471,7 @@ var ItemBody = import_styled_components9.default.section`
     box-shadow: inset 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
   }
 `;
-var ItemHeading = import_styled_components9.default.div`
+var ItemHeading = import_styled_components7.default.div`
   position: sticky;
   display: flex;
   top: 0;
@@ -2973,11 +3511,11 @@ var ItemHeading = import_styled_components9.default.div`
 var noop = () => void 0;
 var keyIdIndex = 0;
 function useId() {
-  return (0, import_react21.useMemo)(() => keyIdIndex++, []);
+  return (0, import_react23.useMemo)(() => keyIdIndex++, []);
 }
 function useAccordionItems(itemsLength, singleMode = false) {
-  const [elRefs, setElRefs] = (0, import_react21.useState)([]);
-  const current = (0, import_react21.useRef)(-1);
+  const [elRefs, setElRefs] = (0, import_react23.useState)([]);
+  const current = (0, import_react23.useRef)(-1);
   const onKeyDown = (e) => {
     const currentEl = document.activeElement;
     const currentIndex = elRefs.findIndex((r) => r.current?.button?.current === currentEl);
@@ -3045,9 +3583,9 @@ function useAccordionItems(itemsLength, singleMode = false) {
       }
     }
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     setElRefs(
-      (elRefs_) => Array(itemsLength).fill(0).map((_, i) => elRefs_[i] || (0, import_react21.createRef)())
+      (elRefs_) => Array(itemsLength).fill(0).map((_, i) => elRefs_[i] || (0, import_react23.createRef)())
     );
   }, [itemsLength]);
   const getItemProps = (key) => {
@@ -3103,19 +3641,19 @@ function useAccordionItems(itemsLength, singleMode = false) {
     getItemProps
   };
 }
-var AccordionItem = (0, import_react21.forwardRef)(function AccordionItem2(props, ref) {
-  const content = (0, import_react21.useRef)(null);
-  const btn = (0, import_react21.useRef)(null);
+var AccordionItem = (0, import_react23.forwardRef)(function AccordionItem2(props, ref) {
+  const content = (0, import_react23.useRef)(null);
+  const btn = (0, import_react23.useRef)(null);
   const id = useId();
-  const [open, setIsOpen] = (0, import_react21.useState)(props.initialOpen || false);
+  const [open, setIsOpen] = (0, import_react23.useState)(props.initialOpen || false);
   const onChange = props.onChange || noop;
   const toggle = () => {
     onChange(!open);
     setIsOpen((o) => !o);
   };
   const maxHeight = props.maxHeight;
-  const [scrolled, setScrolled] = (0, import_react21.useState)(false);
-  (0, import_react21.useImperativeHandle)(ref, () => ({
+  const [scrolled, setScrolled] = (0, import_react23.useState)(false);
+  (0, import_react23.useImperativeHandle)(ref, () => ({
     open() {
       onChange(true);
       setIsOpen(true);
@@ -3141,16 +3679,16 @@ var AccordionItem = (0, import_react21.forwardRef)(function AccordionItem2(props
       setScrolled(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ItemRow, { "data-large": props.large, "data-open": open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ItemHeading, { "data-open": open, children: [
-      props.icon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemIcon, { onClick: toggle, children: props.icon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(ItemLabel, { ref: btn, onClick: toggle, "aria-expanded": open, "aria-controls": `accordion-${id}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ItemRow, { "data-large": props.large, "data-open": open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ItemHeading, { "data-open": open, children: [
+      props.icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItemIcon, { onClick: toggle, children: props.icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ItemLabel, { ref: btn, onClick: toggle, "aria-expanded": open, "aria-controls": `accordion-${id}`, children: [
         props.label,
-        props.description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemDescription, { children: props.description }) : null
+        props.description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItemDescription, { children: props.description }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemCollapse, { onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DownIcon, { width: "1em", height: "1em", rotate: open ? 0 : 180 }) })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItemCollapse, { onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DownIcon, { width: "1em", height: "1em", rotate: open ? 0 : 180 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ItemBody,
       {
         "aria-labelledby": `accordion-${id}`,
@@ -3162,7 +3700,7 @@ var AccordionItem = (0, import_react21.forwardRef)(function AccordionItem2(props
         $initial: !open,
         "data-scrolled": scrolled,
         hidden: !open,
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemBodyInner, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItemBodyInner, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           ItemBodyPadding,
           {
             "data-max-height": !!maxHeight,
@@ -3177,18 +3715,18 @@ var AccordionItem = (0, import_react21.forwardRef)(function AccordionItem2(props
 });
 function Accordion(props) {
   const { getItemProps, onKeyDown } = useAccordionItems(props.items.length, props.singleMode);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AccordionContainer, { onKeyDown, children: props.items.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AccordionItem, { overflow: props.overflow, maxHeight: props.maxHeight, ...item, ...getItemProps(key), children: item.children }, key)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AccordionContainer, { onKeyDown, children: props.items.map((item, key) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AccordionItem, { overflow: props.overflow, maxHeight: props.maxHeight, ...item, ...getItemProps(key), children: item.children }, key)) });
 }
 
 // ../ui/icons/DownloadIcon.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function DownloadIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", viewBox: "0 -960 960 960", width: "48", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime27.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48", viewBox: "0 -960 960 960", width: "48", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("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
-var import_styled_components10 = __toESM(require("styled-components"), 1);
-var ButtonRow = import_styled_components10.default.div`
+var import_styled_components8 = __toESM(require("styled-components"), 1);
+var ButtonRow = import_styled_components8.default.div`
   padding: 0.3em;
 
   display: flex;
@@ -3213,18 +3751,18 @@ var ButtonRow = import_styled_components10.default.div`
 `;
 
 // src/ExportPanel/ExportPanel.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ExportPanel(props) {
   const manifest = (0, import_react_iiif_vault10.useManifest)();
   const vault = (0, import_react_iiif_vault10.useVault)();
   const actions = useLayoutActions();
-  const version3 = (0, import_react22.useMemo)(() => {
+  const version3 = (0, import_react24.useMemo)(() => {
     return JSON.stringify(vault.toPresentation3(manifest), null, 2);
   }, [manifest, vault]);
-  const version2 = (0, import_react22.useMemo)(() => {
+  const version2 = (0, import_react24.useMemo)(() => {
     return JSON.stringify(vault.toPresentation2(manifest), null, 2);
   }, [manifest, vault]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CenterPanelContainer, { title: "Export manifest", close: actions.centerPanel.popStack, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CenterPanelContainer, { title: "Export manifest", close: actions.centerPanel.popStack, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { flex: 1, overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Accordion,
     {
       items: [
@@ -3235,12 +3773,12 @@ function ExportPanel(props) {
           large: true,
           initialOpen: true,
           overflow: true,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onClick: () => createDownload(version3, "manifest.json"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DownloadIcon, {}) }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { maxWidth: "100%" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation3(manifest), null, 2) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ButtonRow, { "data-sticky": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onClick: () => copyToClipboard(version3), children: "Copy to clipboard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onClick: () => createDownload(version3, "manifest.json"), children: "Download" })
+          icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: () => createDownload(version3, "manifest.json"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DownloadIcon, {}) }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { maxWidth: "100%" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation3(manifest), null, 2) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ButtonRow, { "data-sticky": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: () => copyToClipboard(version3), children: "Copy to clipboard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: () => createDownload(version3, "manifest.json"), children: "Download" })
             ] })
           ] })
         },
@@ -3249,12 +3787,12 @@ function ExportPanel(props) {
           description: 'Download this version by clicking the "Download" button.',
           maxHeight: 400,
           large: true,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onClick: () => createDownload(version2, "manifest.json"), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DownloadIcon, {}) }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: { maxWidth: "100%" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation2(manifest), null, 2) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ButtonRow, { "data-sticky": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onClick: () => copyToClipboard(version2), children: "Copy to clipboard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { onClick: () => createDownload(version2, "manifest.json"), children: "Download" })
+          icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: () => createDownload(version2, "manifest.json"), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DownloadIcon, {}) }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { maxWidth: "100%" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("pre", { style: { whiteSpace: "pre-wrap" }, children: JSON.stringify(vault.toPresentation2(manifest), null, 2) }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ButtonRow, { "data-sticky": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: () => copyToClipboard(version2), children: "Copy to clipboard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { onClick: () => createDownload(version2, "manifest.json"), children: "Download" })
             ] })
           ] })
         }
@@ -3263,6 +3801,9 @@ function ExportPanel(props) {
   ) }) });
 }
 
+// src/Layout/Layout.tsx
+var import_components7 = require("@manifest-editor/components");
+
 // ../ui/ui/GhostBlocks/GhostBlocks.module.css
 var GhostBlocks_default = {
   ghostLoadingBlock: "GhostBlocks_ghostLoadingBlock",
@@ -3271,40 +3812,60 @@ var GhostBlocks_default = {
 };
 
 // ../ui/ui/GhostBlocks/GhostBlocks.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function GhostBlocks() {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { "data-header": "true", className: GhostBlocks_default.ghostLoadingBlock }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: GhostBlocks_default.ghostBlockList, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "data-header": "true", className: GhostBlocks_default.ghostLoadingBlock }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: GhostBlocks_default.ghostBlockList, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: GhostBlocks_default.ghostLoadingBlock })
     ] })
   ] });
 }
 
 // src/Layout/Layout.tsx
-var import_react27 = require("react");
+var import_react29 = require("react");
 var import_react_iiif_vault11 = require("react-iiif-vault");
 var import_react_transition_group = require("react-transition-group");
 var import_shallowequal = __toESM(require("shallowequal"), 1);
 
+// src/hooks/use-match-media.ts
+var import_react25 = require("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] = (0, import_react25.useState)(getValue2);
+  (0, import_react25.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
-var import_styled_components11 = __toESM(require("styled-components"), 1);
-var Container2 = import_styled_components11.default.div`
+var import_styled_components9 = __toESM(require("styled-components"), 1);
+var Container2 = import_styled_components9.default.div`
   position: relative;
   display: flex;
   flex: 1;
   overflow: hidden;
   flex-direction: column;
 `;
-var CenterPanel = import_styled_components11.default.div`
+var CenterPanel = import_styled_components9.default.div`
   flex: 1;
   position: relative;
   z-index: 7;
 `;
-var MobileBar = import_styled_components11.default.div`
+var MobileBar = import_styled_components9.default.div`
   display: flex;
   justify-content: space-around;
   width: 100%;
@@ -3313,7 +3874,7 @@ var MobileBar = import_styled_components11.default.div`
   padding: 0.5em;
   height: 3.4rem;
 `;
-var LeftBarButton = import_styled_components11.default.button`
+var LeftBarButton = import_styled_components9.default.button`
   //background: red;
   padding: 0.5em 1em;
   width: 32%;
@@ -3322,7 +3883,7 @@ var LeftBarButton = import_styled_components11.default.button`
   border: none;
   background: #ffffff;
 `;
-var PreviewBarButton = import_styled_components11.default.button`
+var PreviewBarButton = import_styled_components9.default.button`
   padding: 0.5em 1em;
   width: 32%;
 
@@ -3332,13 +3893,13 @@ var PreviewBarButton = import_styled_components11.default.button`
   border: 1px solid rgba(0, 0, 0, 0.21);
   color: #ffffff;
 `;
-var DrawerContainer = import_styled_components11.default.div`
+var DrawerContainer = import_styled_components9.default.div`
   position: relative;
   width: 32%;
   margin: 0 0.75em;
   z-index: 9;
 `;
-var DrawerButton = import_styled_components11.default.button`
+var DrawerButton = import_styled_components9.default.button`
   padding: 0.4em 1em 0.65em;
   position: absolute;
   width: 100%;
@@ -3358,7 +3919,7 @@ var DrawerButton = import_styled_components11.default.button`
     font-size: 1.8em;
   }
 `;
-var DrawerBody = import_styled_components11.default.div`
+var DrawerBody = import_styled_components9.default.div`
   background: #fff;
   display: flex;
   position: absolute;
@@ -3375,7 +3936,7 @@ var DrawerBody = import_styled_components11.default.div`
   transition:
     0.3s transform ease-in-out,
     0.3s box-shadow;
-  ${(props) => props.$open && import_styled_components11.css`
+  ${(props) => props.$open && import_styled_components9.css`
       box-shadow:
         0 -5px 15px 0 rgba(0, 0, 0, 0.1),
         0 -3px 5px 0 rgba(0, 0, 0, 0.1);
@@ -3389,7 +3950,7 @@ var DrawerBody = import_styled_components11.default.div`
     font-size: 1.1em;
   }
 `;
-var LeftPanel = import_styled_components11.default.div`
+var LeftPanel = import_styled_components9.default.div`
   position: absolute;
   transform: translateX(-100%);
   background: #fff;
@@ -3399,11 +3960,11 @@ var LeftPanel = import_styled_components11.default.div`
   z-index: 10;
   overflow-y: auto;
   transition: 0.5s transform;
-  ${(props) => props.$open && import_styled_components11.css`
+  ${(props) => props.$open && import_styled_components9.css`
       transform: translateX(0);
     `}
 `;
-var Lightbox = import_styled_components11.default.div`
+var Lightbox = import_styled_components9.default.div`
   background: rgba(0, 0, 0, 0.4);
   pointer-events: none;
   position: absolute;
@@ -3415,15 +3976,15 @@ var Lightbox = import_styled_components11.default.div`
   opacity: 0;
   transition: opacity 0.5s;
 
-  ${(props) => props.$open && import_styled_components11.css`
+  ${(props) => props.$open && import_styled_components9.css`
       pointer-events: visible;
       opacity: 1;
     `}
 `;
 
 // src/Layout/Layout.styles.ts
-var import_styled_components12 = __toESM(require("styled-components"), 1);
-var OuterWrapper = import_styled_components12.default.div`
+var import_styled_components10 = __toESM(require("styled-components"), 1);
+var OuterWrapper = import_styled_components10.default.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -3433,19 +3994,19 @@ var OuterWrapper = import_styled_components12.default.div`
   min-width: 0;
   overflow: hidden;
 `;
-var Header2 = import_styled_components12.default.header`
+var Header2 = import_styled_components10.default.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 = import_styled_components12.default.div`
+var Footer = import_styled_components10.default.div`
   background: #fff;
 `;
-var Main = import_styled_components12.default.div`
+var Main = import_styled_components10.default.div`
   display: flex;
   flex: 1 1 0;
   min-height: 0;
 `;
-var LeftPanel2 = import_styled_components12.default.div`
+var LeftPanel2 = import_styled_components10.default.div`
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -3453,29 +4014,29 @@ var LeftPanel2 = import_styled_components12.default.div`
   max-width: 720px;
   align-items: flex-end;
 
-  ${(props) => props.$motion ? import_styled_components12.css`
+  ${(props) => props.$motion ? import_styled_components10.css`
           transition: max-width 400ms;
         ` : ""}
 
   ${(props) => {
   switch (props.$state) {
     case "entering":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           max-width: ${props.$width};
         `;
     case "exiting":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           max-width: 0;
         `;
     case "unmounted":
     case "exited":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           max-width: 0;
         `;
   }
 }}
 `;
-var CenterPanel2 = import_styled_components12.default.div`
+var CenterPanel2 = import_styled_components10.default.div`
   flex: 1 1 0;
   background: #e3e7f0;
   // background: #efefef;
@@ -3495,7 +4056,7 @@ var CenterPanel2 = import_styled_components12.default.div`
     min-width: 0;
   }
 `;
-var RightPanel = import_styled_components12.default.div`
+var RightPanel = import_styled_components10.default.div`
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -3507,22 +4068,22 @@ var RightPanel = import_styled_components12.default.div`
   ${(props) => {
   switch (props.$state) {
     case "entering":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           max-width: ${props.$width};
         `;
     case "exiting":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           max-width: 0;
         `;
     case "unmounted":
     case "exited":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           max-width: 0;
         `;
   }
 }}
 `;
-var PanelContainer = import_styled_components12.default.div`
+var PanelContainer = import_styled_components10.default.div`
   display: flex;
   flex: 1;
   height: 100%;
@@ -3533,14 +4094,14 @@ var PanelContainer = import_styled_components12.default.div`
   ${(props) => {
   switch (props.$menu) {
     case "top":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           flex-direction: column;
           ${PanelMenu} {
             flex-direction: column;
           }
         `;
     case "left":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           flex-direction: row;
           ${PanelMenu} {
             flex-direction: row;
@@ -3548,14 +4109,14 @@ var PanelContainer = import_styled_components12.default.div`
         `;
     default:
     case "bottom":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           flex-direction: column-reverse;
           ${PanelMenu} {
             flex-direction: column;
           }
         `;
     case "right":
-      return import_styled_components12.css`
+      return import_styled_components10.css`
           flex-direction: row-reverse;
           ${PanelMenu} {
             flex-direction: row;
@@ -3564,7 +4125,7 @@ var PanelContainer = import_styled_components12.default.div`
   }
 }}
 `;
-var PanelSideMenu = import_styled_components12.default.div`
+var PanelSideMenu = import_styled_components10.default.div`
   background: #fff;
   border-top: 1px solid #e3e7f0;
   border-right: 1px solid #e3e7f0;
@@ -3575,7 +4136,7 @@ var PanelSideMenu = import_styled_components12.default.div`
   padding: 0.3em;
   gap: 0.3em; */
 `;
-var PanelSideMenuItem = import_styled_components12.default.button`
+var PanelSideMenuItem = import_styled_components10.default.button`
   cursor: pointer;
   aspect-ratio: 1;
   width: 3em;
@@ -3603,17 +4164,17 @@ var PanelSideMenuItem = import_styled_components12.default.button`
     color: #999;
   }
 `;
-var PanelMenu = import_styled_components12.default.div`
+var PanelMenu = import_styled_components10.default.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") ? import_styled_components12.css`
+  ${(props) => !props.$open && (props.$position === "top" || props.$position === "bottom") ? import_styled_components10.css`
           display: none;
         ` : ""}
 `;
-var PanelContent = import_styled_components12.default.div`
+var PanelContent = import_styled_components10.default.div`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -3622,25 +4183,25 @@ var PanelContent = import_styled_components12.default.div`
 `;
 
 // src/Layout/components/HandleControls.tsx
-var import_styled_components13 = __toESM(require("styled-components"), 1);
-var import_react23 = require("react");
+var import_styled_components11 = __toESM(require("styled-components"), 1);
+var import_react26 = require("react");
 
 // ../ui/icons/ResetIcon.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var ResetIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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" })
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var ResetIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", width: "1em", viewBox: "0 0 24 24", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var HandleContainer = import_styled_components13.default.div`
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var HandleContainer = import_styled_components11.default.div`
   position: relative;
   width: 1px;
   background: rgba(0, 0, 0, 0.2);
   z-index: 50;
 `;
-var HandleControl = (0, import_styled_components13.default)(ButtonReset)`
+var HandleControl = (0, import_styled_components11.default)(ButtonReset)`
   transition:
     opacity 300ms,
     transform 300ms;
@@ -3653,7 +4214,7 @@ var HandleControl = (0, import_styled_components13.default)(ButtonReset)`
     outline: 2px solid salmon;
   }
 `;
-var ResizeHandle = (0, import_styled_components13.default)(HandleControl)`
+var ResizeHandle = (0, import_styled_components11.default)(HandleControl)`
   position: relative;
   background: #fff;
   height: 40px;
@@ -3662,7 +4223,7 @@ var ResizeHandle = (0, import_styled_components13.default)(HandleControl)`
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
   user-select: none;
 `;
-var IconControl = (0, import_styled_components13.default)(HandleControl)`
+var IconControl = (0, import_styled_components11.default)(HandleControl)`
   background: #fff;
   width: 30px;
   height: 30px;
@@ -3677,7 +4238,7 @@ var IconControl = (0, import_styled_components13.default)(HandleControl)`
     fill: #9999;
   }
 `;
-var OpenControl = (0, import_styled_components13.default)(HandleControl)`
+var OpenControl = (0, import_styled_components11.default)(HandleControl)`
   position: relative;
   display: flex;
   opacity: 1;
@@ -3705,7 +4266,7 @@ var OpenControl = (0, import_styled_components13.default)(HandleControl)`
     font-size: 1.5em;
   }
 `;
-var InnerHandleContainer = import_styled_components13.default.div`
+var InnerHandleContainer = import_styled_components11.default.div`
   background: rgba(0, 0, 0, 0);
   position: absolute;
   width: 21px;
@@ -3734,7 +4295,7 @@ var InnerHandleContainer = import_styled_components13.default.div`
     }
   }
 `;
-var UnscaledContainer = import_styled_components13.default.div`
+var UnscaledContainer = import_styled_components11.default.div`
   background: rgba(0, 0, 0, 0);
   position: absolute;
   pointer-events: none;
@@ -3744,9 +4305,9 @@ var UnscaledContainer = import_styled_components13.default.div`
   bottom: 0;
   z-index: 51; // This will always be quite high.
 `;
-var HandleControls = (0, import_react23.forwardRef)(function HandleControls2({ dir, open, actions, reset }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(HandleContainer, { onClick: () => actions.open(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UnscaledContainer, { $open: open, $dir: dir, children: !open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var HandleControls = (0, import_react26.forwardRef)(function HandleControls2({ dir, open, actions, reset }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(HandleContainer, { onClick: () => actions.open(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UnscaledContainer, { $open: open, $dir: dir, children: !open ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       OpenControl,
       {
         $dir: dir,
@@ -3754,42 +4315,42 @@ var HandleControls = (0, import_react23.forwardRef)(function HandleControls2({ d
           e.stopPropagation();
           actions.open();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DownIcon, { rotate: dir === "right" ? 90 : 270 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DownIcon, { rotate: dir === "right" ? 90 : 270 })
       }
     ) : null }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(InnerHandleContainer, { ref, $open: open, $dir: dir, children: [
-      open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(InnerHandleContainer, { ref, $open: open, $dir: dir, children: [
+      open ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         IconControl,
         {
           onClick: (e) => {
             e.stopPropagation();
             actions.close();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, {})
         }
       ) : null,
-      reset && open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      reset && open ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         IconControl,
         {
           onClick: (e) => {
             e.stopPropagation();
             reset();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ResetIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ResetIcon, {})
         }
       ) : null,
-      open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ResizeHandle, {}) : null
+      open ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ResizeHandle, {}) : null
     ] })
   ] });
 });
 
 // src/Layout/components/use-resize-layouts.tsx
-var import_react25 = require("react");
+var import_react28 = require("react");
 
 // ../ui/madoc/use-event-handler.ts
-var import_react24 = require("react");
+var import_react27 = require("react");
 function useEventHandler(ref, name, callback, deps = []) {
-  (0, import_react24.useLayoutEffect)(() => {
+  (0, import_react27.useLayoutEffect)(() => {
     const current = ref.current;
     if (current) {
       current.addEventListener(name, callback);
@@ -3814,15 +4375,15 @@ function getMaxWidthPct(container, defaultMaxWidthPct, maxWidthPct, maxWidthPixe
   return defaultMaxWidthPct;
 }
 function useResizeLayout(name, options = {}) {
-  const container = (0, import_react25.useRef)(null);
-  const resizableDiv = (0, import_react25.useRef)(null);
-  const otherDiv = (0, import_react25.useRef)(null);
-  const resizer = (0, import_react25.useRef)(null);
-  const newPct = (0, import_react25.useRef)(0.5);
-  const [isDragging, setIsDragging] = (0, import_react25.useState)(false);
-  const isEventDragging = (0, import_react25.useRef)(false);
-  const isEventTimeout = (0, import_react25.useRef)(0);
-  const startPos = (0, import_react25.useRef)({ x: 0, y: 0 });
+  const container = (0, import_react28.useRef)(null);
+  const resizableDiv = (0, import_react28.useRef)(null);
+  const otherDiv = (0, import_react28.useRef)(null);
+  const resizer = (0, import_react28.useRef)(null);
+  const newPct = (0, import_react28.useRef)(0.5);
+  const [isDragging, setIsDragging] = (0, import_react28.useState)(false);
+  const isEventDragging = (0, import_react28.useRef)(false);
+  const isEventTimeout = (0, import_react28.useRef)(0);
+  const startPos = (0, import_react28.useRef)({ x: 0, y: 0 });
   const [{ widthA, widthB }, setWidths] = useLocalStorage(`resize-layout/${name}`, {
     widthA: "auto",
     widthB: `${panelSizing({
@@ -3927,39 +4488,34 @@ function useResizeLayout(name, options = {}) {
   };
 }
 
-// src/hooks/use-match-media.ts
-var import_react26 = require("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] = (0, import_react26.useState)(getValue2);
-  (0, import_react26.useLayoutEffect)(() => {
-    const handler = () => setValue(getValue2);
-    mediaQueryLists.forEach((mql) => mql.addListener(handler));
-    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-  }, []);
-  return value;
-}
-
 // src/Layout/Layout.tsx
-var import_components6 = require("@manifest-editor/components");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Layout = (0, import_react27.memo)(function Layout2(props) {
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var Layout = (0, import_react29.memo)(function Layout2(props) {
   const appState = useAppState();
   const layout = useLayoutProvider();
-  const { vault: _vault } = (0, import_react27.useContext)(import_react_iiif_vault11.ReactVaultContext);
+  const { vault: _vault } = (0, import_react29.useContext)(import_react_iiif_vault11.ReactVaultContext);
   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)"]);
@@ -3991,13 +4547,13 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
       fallback: 320
     })
   }) : void 0;
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     if (mobile && state.leftPanel.open && state.rightPanel.open) {
       actions.leftPanel.close();
       actions.rightPanel.close();
     }
   }, [mobile]);
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     if (centerPanel && centerPanel.onMount) {
       return centerPanel.onMount(
         state.centerPanel.state || centerPanel.defaultState || {},
@@ -4006,7 +4562,7 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
       );
     }
   }, [state.centerPanel.current]);
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react29.useLayoutEffect)(() => {
     rightPanels.length && actions.rightPanel.change({ id: rightPanels[0].id });
     leftPanels.length && actions.leftPanel.change({ id: leftPanels[0].id });
     centerPanels.length && actions.centerPanel.change({ id: centerPanels[0].id });
@@ -4014,7 +4570,7 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
   if (loading) {
     return null;
   }
-  const renderLeftPanel = (transition) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const renderLeftPanel = (transition) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     PanelContainer,
     {
       $menu: props.leftPanelMenuPosition || "bottom",
@@ -4024,8 +4580,8 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
         width: state.leftPanel.open || transition !== "exited" ? leftPanelResizer.widthB : void 0,
         minWidth: leftPanel?.options?.minWidth
       },
-      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelContent, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostBlocks, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        props.leftPanelMenu ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelContent, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GhostBlocks, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        props.leftPanelMenu ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           PanelMenu,
           {
             $open: state.leftPanel.open && transition !== "exited",
@@ -4033,7 +4589,7 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
             children: props.leftPanelMenu
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelContent, { children: state.leftPanel.open || transition !== "exited" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: leftPanel ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelContent, { children: state.leftPanel.open || transition !== "exited" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: leftPanel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           ModularPanel,
           {
             isLeft: true,
@@ -4051,7 +4607,7 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
     if (!modalToRender || state.modal.open === false) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_components6.Modal, { title: modalToRender.label, onClose: () => actions.modal.close(), children: renderHelper(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_components7.Modal, { title: modalToRender.label, onClose: () => actions.modal.close(), children: renderHelper(
       modalToRender.render(
         state.modal.state || modalToRender.defaultState || {},
         { ...layout, current: actions.modal, vault },
@@ -4059,9 +4615,27 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
       )
     ) });
   };
-  const renderCenterPanel = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(PanelContainer, { $menu: props.centerPanelMenuPosition || "top", children: [
-    props.centerPanelMenu ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelMenu, { $open: state.centerPanel.open, $position: props.centerPanelMenuPosition || "top", children: props.centerPanelMenu }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelContent, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: { display: "flex", flex: 1, justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Spinner, { stroke: "rgba(0,0,0,.3)", fontSize: "2em" }) }) : state.centerPanel.open ? centerPanel ? renderHelper(
+  const renderCenterPanel = () => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(PanelContainer, { $menu: props.centerPanelMenuPosition || "top", children: [
+    props.centerPanelMenu ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      PanelMenu,
+      {
+        $open: state.centerPanel.open,
+        $position: props.centerPanelMenuPosition || "top",
+        children: props.centerPanelMenu
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelContent, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(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 },
@@ -4069,7 +4643,7 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
       )
     ) : null : null })
   ] });
-  const renderRightPanel = (transition) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const renderRightPanel = (transition) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     PanelContainer,
     {
       $menu: props.rightPanelMenuPosition || "bottom",
@@ -4079,10 +4653,17 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
         width: state.rightPanel.open || transition !== "exited" ? rightPanelResizer.widthB : void 0,
         minWidth: rightPanel?.options?.minWidth
       },
-      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelContent, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(GhostBlocks, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        props.rightPanelMenu ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelMenu, { $open: state.rightPanel.open, $position: props.rightPanelMenuPosition || "bottom", children: props.rightPanelMenu }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelContent, { children: state.rightPanel.open || transition !== "exited" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          showRightPanel ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelContent, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GhostBlocks, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        props.rightPanelMenu ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          PanelMenu,
+          {
+            $open: state.rightPanel.open,
+            $position: props.rightPanelMenuPosition || "bottom",
+            children: props.rightPanelMenu
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PanelContent, { children: state.rightPanel.open || transition !== "exited" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          showRightPanel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             ModularPanel,
             {
               panel: rightPanel,
@@ -4092,7 +4673,7 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
               available: rightPanels
             }
           ) : null,
-          pinnedRightPanel ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          pinnedRightPanel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             ModularPanel,
             {
               panel: pinnedRightPanel,
@@ -4106,24 +4687,24 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
     }
   );
   if (mobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(OuterWrapper, { children: [
-      props.hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Header2, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(OuterWrapper, { children: [
+      props.hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Header2, { children: [
         props.header || null,
-        props.menu ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("menu", { children: props.menu }) : null
+        props.menu ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("menu", { children: props.menu }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Main, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Container2, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CenterPanel, { children: renderCenterPanel() }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileBar, { children: [
-          leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LeftBarButton, { onClick: actions.leftPanel.toggle, children: leftPanel?.label }) : null,
-          rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DrawerButton, { onClick: actions.rightPanel.toggle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DownIcon, { rotate: 180 }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Main, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Container2, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CenterPanel, { children: renderCenterPanel() }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(MobileBar, { children: [
+          leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LeftBarButton, { onClick: actions.leftPanel.toggle, children: leftPanel?.label }) : null,
+          rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DrawerContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DrawerButton, { onClick: actions.rightPanel.toggle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DownIcon, { rotate: 180 }),
             rightPanel?.label
           ] }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PreviewBarButton, { children: "Preview" })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PreviewBarButton, { children: "Preview" })
         ] }),
-        rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawerBody, { $open: state.rightPanel.open, children: renderRightPanel() }) : null,
-        leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LeftPanel, { $open: state.leftPanel.open, children: renderLeftPanel() }) : null,
-        leftPanels.length > 0 || rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DrawerBody, { $open: state.rightPanel.open, children: renderRightPanel() }) : null,
+        leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LeftPanel, { $open: state.leftPanel.open, children: renderLeftPanel() }) : null,
+        leftPanels.length > 0 || rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Lightbox,
           {
             $open: state.leftPanel.open || state.rightPanel.open,
@@ -4136,12 +4717,12 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(OuterWrapper, { className: `manifest-editor ${props.className}`, children: [
-    props.hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Header2, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(OuterWrapper, { className: `manifest-editor ${props.className}`, children: [
+    props.hideHeader ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Header2, { children: [
       props.header || null,
-      props.menu ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("menu", { children: props.menu }) : null
+      props.menu ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("menu", { children: props.menu }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       Main,
       {
         ref: (div) => {
@@ -4149,8 +4730,8 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
           rightPanelResizer.refs.container.current = div;
         },
         children: [
-          leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_components6.PanelSideMenu,
+          leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_components7.PanelSideMenu,
             {
               current: state.leftPanel.current,
               items: leftPanels.map((panel) => ({
@@ -4169,44 +4750,76 @@ var Layout = (0, import_react27.memo)(function Layout2(props) {
               open: state.leftPanel.open
             }
           ) : null,
-          leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_transition_group.Transition, { in: state.leftPanel.open, timeout: enableMotion ? 400 : 0, unmountOnExit: false, children: (transition) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LeftPanel2, { $width: leftPanelResizer.widthB, $state: transition, $motion: enableMotion, children: renderLeftPanel(transition) }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              HandleControls,
-              {
-                ref: leftPanelResizer.refs.resizer,
-                reset: resetLeftPanel,
-                dir: "left",
-                transition,
-                open: state.leftPanel.open || transition !== "exited",
-                actions: actions.leftPanel
-              }
-            )
-          ] }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CenterPanel2, { children: renderCenterPanel() }),
-          rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_transition_group.Transition, { in: state.rightPanel.open, timeout: enableMotion ? 400 : 0, unmountOnExit: false, children: (transition) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              HandleControls,
-              {
-                ref: rightPanelResizer.refs.resizer,
-                dir: "right",
-                reset: resetRightPanel,
-                open: state.rightPanel.open,
-                actions: actions.rightPanel
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RightPanel, { $width: rightPanelResizer.widthB, $state: transition, $motion: enableMotion, children: renderRightPanel(transition) })
-          ] }) }) : null
+          leftPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_react_transition_group.Transition,
+            {
+              in: state.leftPanel.open,
+              timeout: enableMotion ? 400 : 0,
+              unmountOnExit: false,
+              children: (transition) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  LeftPanel2,
+                  {
+                    $width: leftPanelResizer.widthB,
+                    $state: transition,
+                    $motion: enableMotion,
+                    children: renderLeftPanel(transition)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  HandleControls,
+                  {
+                    ref: leftPanelResizer.refs.resizer,
+                    reset: resetLeftPanel,
+                    dir: "left",
+                    transition,
+                    open: state.leftPanel.open || transition !== "exited",
+                    actions: actions.leftPanel
+                  }
+                )
+              ] })
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CenterPanel2, { children: renderCenterPanel() }),
+          rightPanels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_react_transition_group.Transition,
+            {
+              in: state.rightPanel.open,
+              timeout: enableMotion ? 400 : 0,
+              unmountOnExit: false,
+              children: (transition) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  HandleControls,
+                  {
+                    ref: rightPanelResizer.refs.resizer,
+                    dir: "right",
+                    reset: resetRightPanel,
+                    open: state.rightPanel.open,
+                    actions: actions.rightPanel
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  RightPanel,
+                  {
+                    $width: rightPanelResizer.widthB,
+                    $state: transition,
+                    $motion: enableMotion,
+                    children: renderRightPanel(transition)
+                  }
+                )
+              ] })
+            }
+          ) : null
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Footer, { children: props.footer || null }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: renderModal() })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Footer, { children: props.footer || null }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: renderModal() })
   ] });
 });
 
 // src/Layout/Layout.hooks.ts
-var import_react28 = require("react");
+var import_react30 = require("react");
 function usePanelActions(panel, dispatch) {
   function popStack() {
     dispatch({ type: "popStack", panel, payload: void 0 });
@@ -4241,7 +4854,7 @@ function usePanelActions(panel, dispatch) {
   function unpin() {
     dispatch({ type: "unpin", panel, payload: void 0 });
   }
-  return (0, import_react28.useMemo)(
+  return (0, import_react30.useMemo)(
     () => ({
       popStack,
       change,
@@ -4407,14 +5020,14 @@ function getDefaultLayoutState() {
 }
 
 // src/ResourceEditingContext/ResourceEditingContext.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_react_iiif_vault12 = require("react-iiif-vault");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ResourceEditingReactContext = (0, import_react29.createContext)({
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ResourceEditingReactContext = (0, import_react31.createContext)({
   resource: null
 });
 function useEditingContext() {
-  return (0, import_react29.useContext)(ResourceEditingReactContext);
+  return (0, import_react31.useContext)(ResourceEditingReactContext);
 }
 function useResource() {
   const vault = (0, import_react_iiif_vault12.useVault)();
@@ -4435,10 +5048,10 @@ function ResourceEditingProvider({
   children
 }) {
   const { id, type } = resource || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     ResourceEditingReactContext.Provider,
     {
-      value: (0, import_react29.useMemo)(
+      value: (0, import_react31.useMemo)(
         () => ({
           // Current resource.
           resource: id && type ? { id, type } : null
@@ -4450,10 +5063,13 @@ function ResourceEditingProvider({
   );
 }
 
+// src/ShellContext/ShellContext.tsx
+var import_iiif_image_api = require("@atlas-viewer/iiif-image-api");
+
 // ../ui/atoms/ErrorBoundary.tsx
-var import_react30 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var ErrorBoundary2 = class extends import_react30.Component {
+var import_react32 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ErrorBoundary2 = class extends import_react32.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "state", {
@@ -4469,34 +5085,43 @@ var ErrorBoundary2 = class extends import_react30.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { children: "Sorry.. there was an error" });
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h1", { children: "Sorry.. there was an error" });
     }
     return this.props.children;
   }
 };
 
 // src/ShellContext/ShellContext.tsx
-var import_styled_components14 = require("styled-components");
+var import_react34 = require("react");
+var import_react_iiif_vault13 = require("react-iiif-vault");
+var import_styled_components12 = require("styled-components");
 
 // src/Layout/Layout.context-internal.tsx
 var import_parser6 = require("@iiif/parser");
-var import_react31 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function parse(args, _state) {
   if (typeof args === "string") {
     return { id: args, state: _state };
   }
   return args;
 }
-var LayoutProvider = (0, import_react31.memo)(function LayoutProvider2(props) {
+var LayoutProvider = (0, import_react33.memo)(function LayoutProvider2(props) {
   const app = useApp();
   const available = app.layout;
-  const [state, dispatch] = (0, import_react31.useReducer)(layoutReducer, void 0, getDefaultLayoutState);
+  const [state, dispatch] = (0, import_react33.useReducer)(
+    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()
   };
@@ -4519,7 +5144,10 @@ var LayoutProvider = (0, import_react31.memo)(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,
@@ -4556,7 +5184,11 @@ var LayoutProvider = (0, import_react31.memo)(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: (0, import_parser6.isSpecificResource)(resource) ? resource : {
         type: "SpecificResource",
@@ -4576,7 +5208,7 @@ var LayoutProvider = (0, import_react31.memo)(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,
@@ -4601,7 +5233,13 @@ var LayoutProvider = (0, import_react31.memo)(function LayoutProvider2(props) {
     edit,
     create: create2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LayoutActionsReactContext.Provider, { value: (0, import_react31.useMemo)(() => ({ ...actions, ...otherActions }), [available]), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LayoutStateReactContext.Provider, { value: state, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    LayoutActionsReactContext.Provider,
+    {
+      value: (0, import_react33.useMemo)(() => ({ ...actions, ...otherActions }), [available]),
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LayoutStateReactContext.Provider, { value: state, children: props.children })
+    }
+  );
 });
 
 // src/ShellContext/default-theme.ts
@@ -4650,13 +5288,11 @@ var defaultTheme = {
 };
 
 // src/ShellContext/ShellContext.tsx
-var import_react_iiif_vault13 = require("react-iiif-vault");
-var import_iiif_image_api = require("@atlas-viewer/iiif-image-api");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("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"
   },
@@ -4697,17 +5333,32 @@ function ShellProvider({
   resource,
   editing
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorBoundary2, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_iiif_vault13.ImageServiceLoaderContext.Provider, { value: imageServiceLoader, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppResourceProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PreviewVaultContext, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_styled_components14.ThemeProvider, { theme: theme || defaultTheme, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ConfigProvider, { config, saveConfig, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditingStack, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PreviewProvider, { previews: previews || [], configs: config?.previews || previewConfigs, children }) }) }) }) }) }) }) }) });
+  const existingConfig = useConfig();
+  const mergedConfig = (0, import_react34.useMemo)(() => {
+    return {
+      ...existingConfig,
+      ...config,
+      previews: config?.previews || existingConfig.previews || previewConfigs
+    };
+  }, [existingConfig, config]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorBoundary2, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_iiif_vault13.ImageServiceLoaderContext.Provider, { value: imageServiceLoader, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppResourceProvider, { resource, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PreviewVaultContext, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_styled_components12.ThemeProvider, { theme: theme || defaultTheme, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ConfigProvider, { config: mergedConfig, saveConfig, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EditingStack, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    PreviewProvider,
+    {
+      previews: previews || [],
+      configs: mergedConfig.previews,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AtlasStoreProvider, { children })
+    }
+  ) }) }) }) }) }) }) }) });
 }
 
 // src/TaskBridge/TaskBridge.tsx
-var import_mitt2 = __toESM(require("mitt"), 1);
-var import_react32 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_mitt3 = __toESM(require("mitt"), 1);
+var import_react35 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var tempGlobalState = {};
-var DispatchReactContext = (0, import_react32.createContext)("global");
+var DispatchReactContext = (0, import_react35.createContext)("global");
 function useCurrentDispatchId() {
-  return (0, import_react32.useContext)(DispatchReactContext);
+  return (0, import_react35.useContext)(DispatchReactContext);
 }
 function createDeferred() {
   let res = void 0;
@@ -4720,15 +5371,15 @@ function createDeferred() {
 }
 function useTask(name) {
   const id = useCurrentDispatchId();
-  const [, invalidate] = (0, import_react32.useReducer)((r) => r + 1, 0);
-  const task = (0, import_react32.useMemo)(() => {
+  const [, invalidate] = (0, import_react35.useReducer)((r) => r + 1, 0);
+  const task = (0, import_react35.useMemo)(() => {
     if (!tempGlobalState[id]) {
       tempGlobalState[id] = {};
     }
     if (!tempGlobalState[id][name]) {
       tempGlobalState[id][name] = {
         name,
-        emitter: (0, import_mitt2.default)(),
+        emitter: (0, import_mitt3.default)(),
         status: "idle",
         promise: Promise.resolve(),
         abort: new AbortController(),
@@ -4745,8 +5396,8 @@ function useTask(name) {
   return task;
 }
 function useTaskEvent(task, name, _cb) {
-  const cb = (0, import_react32.useCallback)(() => _cb(task), [_cb]);
-  (0, import_react32.useEffect)(() => {
+  const cb = (0, import_react35.useCallback)(() => _cb(task), [_cb]);
+  (0, import_react35.useEffect)(() => {
     const em = task.emitter;
     em.on(name, cb);
     return () => em.off(name, cb);
@@ -4795,12 +5446,12 @@ function useTaskRunner(name, onRun) {
   return [completeTask, taskDetails, rejectTask];
 }
 function TaskBridge({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DispatchReactContext.Provider, { value: (0, import_react32.useMemo)(() => `id-${Date.now()}`, []), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DispatchReactContext.Provider, { value: (0, import_react35.useMemo)(() => `id-${Date.now()}`, []), children });
 }
 
 // src/Universal/UniversalCopyPaste.tsx
-var import_react33 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function analyse(t) {
   return false;
 }
@@ -4825,10 +5476,10 @@ function UniversalCopyTarget({
   const onPasteReference = _onPasteReference || onReference;
   const onPasteLink = _onPasteLink || onLink;
   const onPasteAnalysis = _onPasteAnalysis || onAnalysis;
-  const reference = (0, import_react33.useMemo)(() => {
+  const reference = (0, import_react36.useMemo)(() => {
     return _ref;
   }, [_ref?.id, _ref?.type]);
-  const onCopy = (0, import_react33.useCallback)(
+  const onCopy = (0, import_react36.useCallback)(
     function onCopy2(e) {
       if (e.defaultPrevented) {
         return;
@@ -4848,7 +5499,7 @@ function UniversalCopyTarget({
     },
     [reference]
   );
-  const onPaste = (0, import_react33.useCallback)(async function onPaste2(e) {
+  const onPaste = (0, import_react36.useCallback)(async function onPaste2(e) {
     if (e.defaultPrevented) {
       return;
     }
@@ -4895,7 +5546,7 @@ function UniversalCopyTarget({
       }
     }
   }, []);
-  const onDragStart = (0, import_react33.useCallback)(function onPaste2(e) {
+  const onDragStart = (0, import_react36.useCallback)(function onPaste2(e) {
     if (e.defaultPrevented) {
       return;
     }
@@ -4913,7 +5564,7 @@ function UniversalCopyTarget({
       }
     }
   }, []);
-  const onDrop = (0, import_react33.useCallback)(async function onDrop2(e) {
+  const onDrop = (0, import_react36.useCallback)(async function onDrop2(e) {
     e.preventDefault();
     if (e.dataTransfer) {
       if (onDropReference) {
@@ -4940,13 +5591,13 @@ function UniversalCopyTarget({
       }
     }
   }, []);
-  const onDragOver = (0, import_react33.useCallback)((e) => {
+  const onDragOver = (0, import_react36.useCallback)((e) => {
     e.preventDefault();
     if (e.dataTransfer) {
       e.dataTransfer.dropEffect = "copy";
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Component2,
     {
       onCopy,
@@ -5146,11 +5797,11 @@ async function getImageDimensions(url) {
 }
 
 // src/hooks/use-save-vault.ts
-var import_react34 = require("react");
+var import_react37 = require("react");
 var import_tiny_use_debounce = require("tiny-use-debounce");
 function useSaveVault(vault, saveChanges, saveInterval, enabled = true) {
   const debounceSaveChanges = (0, import_tiny_use_debounce.useDebounce)(saveChanges, saveInterval);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (typeof window === "undefined") {
       return () => void 0;
     }
@@ -5160,10 +5811,139 @@ function useSaveVault(vault, saveChanges, saveInterval, enabled = true) {
       window.removeEventListener("beforeunload", saveChanges);
     };
   }, [saveChanges]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (vault && enabled) {
       return vault.subscribe(debounceSaveChanges, true);
     }
   }, [debounceSaveChanges, vault, enabled]);
 }
+
+// src/hooks/use-svg-tools.tsx
+var import_react38 = require("react");
+var import_zustand2 = require("zustand");
+function useSvgTools() {
+  const store = useAtlasStore();
+  const switchTool = (0, import_zustand2.useStore)(store, (s) => s.switchTool);
+  const state = (0, import_zustand2.useStore)(store, (s) => s.polygons.state.slowState);
+  return (0, import_react38.useMemo)(
+    () => ({
+      // 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
+var import_react39 = require("react");
+var import_zustand3 = require("zustand");
+function useRequestAnnotation(opts) {
+  const [id, setId] = (0, import_react39.useState)(0);
+  const store = useAtlasStore();
+  const { tool, getRequestId, requestAnnotation, completeRequest, cancelRequest } = (0, import_zustand3.useStore)(store, (s) => ({
+    getRequestId: s.getRequestId,
+    requestAnnotation: s.requestAnnotation,
+    completeRequest: s.completeRequest,
+    cancelRequest: s.cancelRequest,
+    tool: s.tool
+  }));
+  const [isPending, setIsPending] = (0, import_react39.useState)(false);
+  const [data, setData] = (0, import_react39.useState)(null);
+  const [requestId, setRequestId] = (0, import_react39.useState)(null);
+  const busy = tool.enabled && tool.requestId !== requestId;
+  const mutateAsync = (0, import_react39.useCallback)(
+    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 = (0, import_react39.useCallback)(() => {
+    setData(null);
+    setIsPending(false);
+  }, []);
+  (0, import_react39.useEffect)(() => {
+    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
+  };
+}
 //# sourceMappingURL=index.cjs.map