@reacteditor/core 0.0.9 → 0.0.11

package/dist/no-external.js

@@ -3165,6 +3165,7 @@ var init_default_app_state = __esm({
       ui: {
         leftSideBarVisible: true,
         rightSideBarVisible: true,
+        navBarVisible: true,
         arrayState: {},
         itemSelector: null,
         componentList: {},
@@ -5402,11 +5403,11 @@ function RichTextRender({
 }) {
   const { tiptap = {}, options } = field;
   const { extensions = [] } = tiptap;
-  const loadedExtensions = (0, import_react59.useMemo)(
+  const loadedExtensions = (0, import_react60.useMemo)(
     () => [EditorRichText.configure(options), ...extensions],
     [field, extensions]
   );
-  const normalized = (0, import_react59.useMemo)(() => {
+  const normalized = (0, import_react60.useMemo)(() => {
     if (typeof content === "object" && (content == null ? void 0 : content.type) === "doc") {
       return content;
     }
@@ -5424,23 +5425,23 @@ function RichTextRender({
     }
     return { type: "doc", content: [] };
   }, [content, loadedExtensions]);
-  const html = (0, import_react59.useMemo)(() => {
+  const html = (0, import_react60.useMemo)(() => {
     return (0, import_html.generateHTML)(normalized, loadedExtensions);
   }, [normalized, loadedExtensions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: getClassName24(), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "rich-text", dangerouslySetInnerHTML: { __html: html } }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: getClassName25(), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "rich-text", dangerouslySetInnerHTML: { __html: html } }) });
 }
-var import_html, import_react59, import_jsx_runtime60, getClassName24;
+var import_html, import_react60, import_jsx_runtime61, getClassName25;
 var init_Render = __esm({
   "components/RichTextEditor/components/Render.tsx"() {
     "use strict";
     init_react_import();
     import_html = require("@tiptap/html");
-    import_react59 = require("react");
+    import_react60 = require("react");
     init_get_class_name_factory();
     init_styles_module6();
     init_extension();
-    import_jsx_runtime60 = require("react/jsx-runtime");
-    getClassName24 = get_class_name_factory_default("RichTextEditor", styles_module_default14);
+    import_jsx_runtime61 = require("react/jsx-runtime");
+    getClassName25 = get_class_name_factory_default("RichTextEditor", styles_module_default14);
   }
 });
 
@@ -5449,6 +5450,8 @@ var no_external_exports = {};
 __export(no_external_exports, {
   Action: () => Action,
   ActionBar: () => ActionBar,
+  App: () => App,
+  AppProvider: () => AppProvider,
   AutoField: () => AutoField,
   Button: () => Button,
   ComponentList: () => ComponentList,
@@ -5461,9 +5464,11 @@ __export(no_external_exports, {
   Render: () => Render,
   RichTextMenu: () => RichTextMenu,
   Separator: () => Separator,
+  appConfigContext: () => appConfigContext,
   blocksPlugin: () => blocksPlugin,
   createUseEditor: () => createUseEditor,
   fieldsPlugin: () => fieldsPlugin,
+  getRouteProps: () => getRouteProps,
   legacySideBarPlugin: () => legacySideBarPlugin,
   migrate: () => migrate,
   outlinePlugin: () => outlinePlugin,
@@ -5472,11 +5477,15 @@ __export(no_external_exports, {
   registerOverlayPortal: () => registerOverlayPortal,
   renderContext: () => renderContext,
   resolveAllData: () => resolveAllData,
+  resolveRouteFromString: () => resolveRouteFromString,
   setDeep: () => setDeep,
   transformProps: () => transformProps,
+  useApp: () => useApp,
   useEditor: () => useEditor2,
   useGetEditor: () => useGetEditor,
   usePropsContext: () => usePropsContext,
+  useRouteParams: () => useRouteParams,
+  useStableValue: () => useStableValue,
   walkTree: () => walkTree
 });
 module.exports = __toCommonJS(no_external_exports);
@@ -7904,16 +7913,245 @@ function AutoField(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(fieldContextStore.Provider, { value: { [id]: props.value }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AutoFieldPublicInternal, __spreadProps(__spreadValues({}, props), { id })) });
 }
 
+// components/App/index.ts
+init_react_import();
+
+// components/App/App.tsx
+init_react_import();
+var import_react_router3 = require("react-router");
+
+// components/Editor/index.tsx
+init_react_import();
+var import_react95 = require("react");
+init_store();
+
+// components/Editor/components/Fields/index.tsx
+init_react_import();
+init_Loader();
+init_root_droppable_id();
+
+// lib/get-selector-for-id.ts
+init_react_import();
+var getSelectorForId = (state, id) => {
+  const node = state.indexes.nodes[id];
+  if (!node) return;
+  const zoneCompound = `${node.parentId}:${node.zone}`;
+  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
+  return { zone: zoneCompound, index };
+};
+
+// components/Editor/components/Fields/index.tsx
+init_store();
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
+init_react_import();
+var styles_module_default16 = { "EditorFields": "_EditorFields_3dnua_1", "EditorFields--isLoading": "_EditorFields--isLoading_3dnua_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_3dnua_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_3dnua_25", "EditorFields-field": "_EditorFields-field_3dnua_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_3dnua_36", "EditorFields-syncButton": "_EditorFields-syncButton_3dnua_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_3dnua_78" };
+
+// components/Editor/components/Fields/index.tsx
+init_lib();
+var import_react50 = require("react");
+init_fields();
+var import_shallow4 = require("zustand/react/shallow");
+init_lucide_react();
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var getClassName22 = get_class_name_factory_default("EditorFields", styles_module_default16);
+var DefaultFields = ({
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children });
+};
+var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
+  const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
+  const { data, ui } = state;
+  const { itemSelector } = ui;
+  const rootProps = data.root.props || data.root;
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
+  if (selectedItem && itemSelector) {
+    const resolved = yield resolveComponentData2(
+      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
+    dispatch({
+      type: "replace",
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
+    return;
+  }
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (yield resolveComponentData2(
+        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
+        "replace"
+      )).node,
+      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
+      recordHistory: true
+    });
+    return;
+  }
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
+});
+var FieldsChildInner = ({ fieldName }) => {
+  const field = useAppStore((s) => s.fields.fields[fieldName]);
+  const isReadOnly = useAppStore(
+    (s) => ((s.selectedItem ? s.selectedItem.readOnly : s.state.data.root.readOnly) || {})[fieldName]
+  );
+  const id = useAppStore((s) => {
+    if (!field) return null;
+    return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
+  });
+  const permissions = useAppStore(
+    (0, import_shallow4.useShallow)((s) => {
+      const { selectedItem, permissions: permissions2 } = s;
+      return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
+    })
+  );
+  const appStore = useAppStoreApi();
+  const onChange = (0, import_react50.useCallback)(createOnChange(fieldName, appStore), [
+    fieldName
+  ]);
+  const { visible = true } = field != null ? field : {};
+  const fieldStore = (0, import_react50.useContext)(fieldContextStore.ctx);
+  (0, import_react50.useEffect)(() => {
+    return appStore.subscribe(
+      (s) => {
+        var _a;
+        const data = s.getCurrentData();
+        return (_a = data.props) == null ? void 0 : _a[fieldName];
+      },
+      (value) => {
+        fieldStore.setState({ [fieldName]: value });
+      }
+    );
+  }, [appStore, fieldStore]);
+  if (!field || !id || !visible) return null;
+  if (field.type === "slot") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: getClassName22("field"), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    AutoFieldPrivate,
+    {
+      field,
+      name: fieldName,
+      id,
+      readOnly: !permissions.edit || isReadOnly,
+      onChange
+    }
+  ) }, id);
+};
+var FieldsChild = ({ fieldName }) => {
+  const appStore = useAppStoreApi();
+  const initialValue = (0, import_react50.useMemo)(() => {
+    var _a;
+    const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
+    return { [fieldName]: value };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FieldsChildInner, { fieldName }) });
+};
+var FieldsChildMemo = (0, import_react50.memo)(FieldsChild);
+var GlobalSyncButton = () => {
+  const appStore = useAppStoreApi();
+  const selectedItem = useAppStore((s) => s.selectedItem);
+  const isGlobalType = useAppStore(
+    (s) => {
+      var _a;
+      return selectedItem ? ((_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.global) === true : false;
+    }
+  );
+  if (!selectedItem || !isGlobalType) return null;
+  const isUnlinked = selectedItem.synced === false;
+  const onClick = () => __async(null, null, function* () {
+    const { dispatch, state, resolveComponentData: resolveComponentData2 } = appStore.getState();
+    const latestSelector = getSelectorForId(state, selectedItem.props.id);
+    if (!latestSelector) return;
+    const resolved = yield resolveComponentData2(
+      __spreadProps(__spreadValues({}, selectedItem), { synced: isUnlinked ? true : false }),
+      "replace"
+    );
+    dispatch({
+      type: "replace",
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node
+    });
+  });
+  const syncButtonClass = [
+    getClassName22("syncButton"),
+    isUnlinked ? styles_module_default16["EditorFields-syncButton--unlinked"] : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("button", { type: "button", className: syncButtonClass, onClick, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Link, { size: 14 }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
+  ] });
+};
+var FieldsInternal = ({ wrapFields = true }) => {
+  const overrides = useAppStore((s) => s.overrides);
+  const componentResolving = useAppStore((s) => {
+    var _a, _b;
+    const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
+    return (loadingCount != null ? loadingCount : 0) > 0;
+  });
+  const itemSelector = useAppStore((0, import_shallow4.useShallow)((s) => s.state.ui.itemSelector));
+  const id = useAppStore((s) => {
+    var _a;
+    return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
+  });
+  const appStore = useAppStoreApi();
+  useRegisterFieldsSlice(appStore, id);
+  const fieldsLoading = useAppStore((s) => s.fields.loading);
+  const fieldNames = useAppStore(
+    (0, import_shallow4.useShallow)((s) => {
+      if (s.fields.id === id) {
+        return Object.keys(s.fields.fields);
+      }
+      return [];
+    })
+  );
+  const isLoading = fieldsLoading || componentResolving;
+  const Wrapper = (0, import_react50.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    "form",
+    {
+      className: getClassName22({ wrapFields }),
+      onSubmit: (e) => {
+        e.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Wrapper, { isLoading, itemSelector, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(GlobalSyncButton, {}),
+          fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(FieldsChildMemo, { fieldName }, fieldName))
+        ] }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: getClassName22("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: getClassName22("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Loader, { size: 16 }) }) })
+      ]
+    }
+  );
+};
+var Fields = (0, import_react50.memo)(FieldsInternal);
+
+// components/Editor/components/Components/index.tsx
+init_react_import();
+init_store();
+
 // components/ComponentList/index.tsx
 init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "ComponentList": "_ComponentList_1mlcu_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1mlcu_5", "ComponentList-content": "_ComponentList-content_1mlcu_9", "ComponentList-title": "_ComponentList-title_1mlcu_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1mlcu_54" };
+var styles_module_default17 = { "ComponentList": "_ComponentList_1mlcu_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1mlcu_5", "ComponentList-content": "_ComponentList-content_1mlcu_9", "ComponentList-title": "_ComponentList-title_1mlcu_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1mlcu_54" };
 
 // components/ComponentList/index.tsx
 init_get_class_name_factory();
-var import_react74 = require("react");
+var import_react75 = require("react");
 init_lucide_react();
 init_store();
 
@@ -7922,31 +8160,31 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "Drawer": "_Drawer_146py_1", "Drawer--tile": "_Drawer--tile_146py_8", "Drawer-draggable": "_Drawer-draggable_146py_19", "Drawer-draggableBg": "_Drawer-draggableBg_146py_23", "DrawerItem-draggable": "_DrawerItem-draggable_146py_33", "DrawerItem-icon": "_DrawerItem-icon_146py_50", "DrawerItem--disabled": "_DrawerItem--disabled_146py_56", "DrawerItem": "_DrawerItem_146py_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_146py_66", "DrawerItem-name": "_DrawerItem-name_146py_91" };
+var styles_module_default18 = { "Drawer": "_Drawer_1h4db_1", "Drawer--tile": "_Drawer--tile_1h4db_8", "Drawer-draggable": "_Drawer-draggable_1h4db_19", "Drawer-draggableBg": "_Drawer-draggableBg_1h4db_23", "DrawerItem-draggable": "_DrawerItem-draggable_1h4db_33", "DrawerItem-icon": "_DrawerItem-icon_1h4db_50", "DrawerItem--disabled": "_DrawerItem--disabled_1h4db_56", "DrawerItem": "_DrawerItem_1h4db_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1h4db_66", "DrawerItem-name": "_DrawerItem-name_1h4db_91" };
 
 // components/Drawer/index.tsx
 init_get_class_name_factory();
-var import_react72 = require("react");
+var import_react73 = require("react");
 init_generate_id();
 
 // components/DragDropContext/index.tsx
 init_react_import();
-var import_react70 = require("@dnd-kit/react");
+var import_react71 = require("@dnd-kit/react");
 init_store();
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_dom4 = require("@dnd-kit/dom");
 
 // components/DropZone/index.tsx
 init_react_import();
-var import_react68 = require("react");
+var import_react69 = require("react");
 
 // components/DraggableComponent/index.tsx
 init_react_import();
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "DraggableComponent": "_DraggableComponent_ie0on_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_ie0on_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_ie0on_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_ie0on_36", "DraggableComponent--hover": "_DraggableComponent--hover_ie0on_53", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_ie0on_60", "DraggableComponent--isGlobal": "_DraggableComponent--isGlobal_ie0on_69", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_ie0on_105", "DraggableComponent-actions": "_DraggableComponent-actions_ie0on_105" };
+var styles_module_default19 = { "DraggableComponent": "_DraggableComponent_ie0on_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_ie0on_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_ie0on_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_ie0on_36", "DraggableComponent--hover": "_DraggableComponent--hover_ie0on_53", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_ie0on_60", "DraggableComponent--isGlobal": "_DraggableComponent--isGlobal_ie0on_69", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_ie0on_105", "DraggableComponent-actions": "_DraggableComponent-actions_ie0on_105" };
 
 // components/DraggableComponent/index.tsx
 init_get_class_name_factory();
@@ -7977,12 +8215,12 @@ function getDeepScrollPosition(element) {
 
 // components/DropZone/context.tsx
 init_react_import();
-var import_react50 = require("react");
+var import_react51 = require("react");
 init_store();
 var import_zustand5 = require("zustand");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var dropZoneContext = (0, import_react50.createContext)(null);
-var ZoneStoreContext = (0, import_react50.createContext)(
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var dropZoneContext = (0, import_react51.createContext)(null);
+var ZoneStoreContext = (0, import_react51.createContext)(
   (0, import_zustand5.createStore)(() => ({
     zoneDepthIndex: {},
     nextZoneDepthIndex: {},
@@ -8003,14 +8241,14 @@ var ZoneStoreProvider = ({
   children,
   store
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ZoneStoreContext.Provider, { value: store, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ZoneStoreContext.Provider, { value: store, children });
 };
 var DropZoneProvider = ({
   children,
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = (0, import_react50.useCallback)(
+  const registerZone = (0, import_react51.useCallback)(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -8019,28 +8257,28 @@ var DropZoneProvider = ({
     },
     [dispatch]
   );
-  const memoValue = (0, import_react50.useMemo)(
+  const memoValue = (0, import_react51.useMemo)(
     () => __spreadValues({
       registerZone
     }, value),
     [value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: memoValue && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(dropZoneContext.Provider, { value: memoValue, children }) });
 };
 
 // components/DraggableComponent/index.tsx
-var import_shallow4 = require("zustand/react/shallow");
+var import_shallow5 = require("zustand/react/shallow");
 init_get_item();
 var import_sortable2 = require("@dnd-kit/react/sortable");
 var import_dom3 = require("@dnd-kit/dom");
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-var import_react51 = require("react");
+var import_react52 = require("react");
 init_store();
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return (0, import_react51.useCallback)(() => {
+  return (0, import_react52.useCallback)(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -8086,8 +8324,8 @@ function assignRefs(refs, node) {
 }
 
 // components/DraggableComponent/index.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var getClassName22 = get_class_name_factory_default("DraggableComponent", styles_module_default18);
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var getClassName23 = get_class_name_factory_default("DraggableComponent", styles_module_default19);
 var DEBUG2 = false;
 var MEASURE_EVERY_MS = 100;
 var space = 8;
@@ -8098,16 +8336,16 @@ var DefaultActionBar = ({
   label,
   children,
   parentAction
-}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(ActionBar, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(ActionBar.Group, { children: [
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ActionBar, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActionBar.Label, { label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActionBar.Group, { children })
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionBar.Group, { children })
 ] });
 var DefaultOverlay = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -8140,10 +8378,10 @@ var DraggableComponent = ({
       return ((_a = s.config.components[componentType]) == null ? void 0 : _a.global) === true;
     }
   );
-  const lastMeasureRef = (0, import_react52.useRef)(0);
-  const ctx = (0, import_react52.useContext)(dropZoneContext);
-  const [localZones, setLocalZones] = (0, import_react52.useState)({});
-  const registerLocalZone = (0, import_react52.useCallback)(
+  const lastMeasureRef = (0, import_react53.useRef)(0);
+  const ctx = (0, import_react53.useContext)(dropZoneContext);
+  const [localZones, setLocalZones] = (0, import_react53.useState)({});
+  const registerLocalZone = (0, import_react53.useCallback)(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -8153,7 +8391,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = (0, import_react52.useCallback)(
+  const unregisterLocalZone = (0, import_react53.useCallback)(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -8166,23 +8404,23 @@ var DraggableComponent = ({
     [setLocalZones]
   );
   const containsActiveZone = Object.values(localZones).filter(Boolean).length > 0;
-  const path = useAppStore((0, import_shallow4.useShallow)((s) => {
+  const path = useAppStore((0, import_shallow5.useShallow)((s) => {
     var _a;
     return (_a = s.state.indexes.nodes[id]) == null ? void 0 : _a.path;
   }));
   const permissions = useAppStore(
-    (0, import_shallow4.useShallow)((s) => {
+    (0, import_shallow5.useShallow)((s) => {
       const item = getItem({ index, zone: zoneCompound }, s.state);
       return s.permissions.getPermissions({ item });
     })
   );
-  const zoneStore = (0, import_react52.useContext)(ZoneStoreContext);
-  const [dragAxis, setDragAxis] = (0, import_react52.useState)(userDragAxis || autoDragAxis);
-  const dynamicCollisionDetector = (0, import_react52.useMemo)(
+  const zoneStore = (0, import_react53.useContext)(ZoneStoreContext);
+  const [dragAxis, setDragAxis] = (0, import_react53.useState)(userDragAxis || autoDragAxis);
+  const dynamicCollisionDetector = (0, import_react53.useMemo)(
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
-  const sortablePlugins = (0, import_react52.useMemo)(
+  const sortablePlugins = (0, import_react53.useMemo)(
     () => (defaults) => [
       ...defaults,
       import_dom3.Feedback.configure({ feedback: "clone" })
@@ -8216,7 +8454,7 @@ var DraggableComponent = ({
       easing: "cubic-bezier(0.2, 0, 0, 1)"
     }
   });
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
     sortable.droppable.disabled = !isEnabled;
     sortable.draggable.disabled = !permissions.drag;
@@ -8233,9 +8471,9 @@ var DraggableComponent = ({
     }
     return cleanup;
   }, [permissions.drag, zoneCompound]);
-  const [, setRerender] = (0, import_react52.useState)(0);
-  const ref = (0, import_react52.useRef)(null);
-  const refSetter = (0, import_react52.useCallback)(
+  const [, setRerender] = (0, import_react53.useState)(0);
+  const ref = (0, import_react53.useRef)(null);
+  const refSetter = (0, import_react53.useCallback)(
     (el) => {
       sortableRef(el);
       if (ref.current !== el) {
@@ -8248,14 +8486,14 @@ var DraggableComponent = ({
     },
     [itemRef, sortableRef]
   );
-  const [portalEl, setPortalEl] = (0, import_react52.useState)();
-  (0, import_react52.useEffect)(() => {
+  const [portalEl, setPortalEl] = (0, import_react53.useState)();
+  (0, import_react53.useEffect)(() => {
     var _a, _b, _c;
     setPortalEl(
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-editor-preview]")) != null ? _c : document.body
     );
   }, [iframe.enabled]);
-  const getStyle = (0, import_react52.useCallback)(() => {
+  const getStyle = (0, import_react53.useCallback)(() => {
     var _a, _b;
     if (!ref.current) return;
     const el = ref.current;
@@ -8287,23 +8525,23 @@ var DraggableComponent = ({
     };
     return style2;
   }, [iframe.enabled]);
-  const [style, setStyle] = (0, import_react52.useState)();
-  const lastRectRef = (0, import_react52.useRef)(null);
-  const syncRafRef = (0, import_react52.useRef)(null);
-  const sync = (0, import_react52.useCallback)(() => {
+  const [style, setStyle] = (0, import_react53.useState)();
+  const lastRectRef = (0, import_react53.useRef)(null);
+  const syncRafRef = (0, import_react53.useRef)(null);
+  const sync = (0, import_react53.useCallback)(() => {
     setStyle(getStyle());
     if (itemRef) {
       assignRefs([itemRef], ref.current);
     }
   }, [getStyle, itemRef]);
-  const scheduleSync = (0, import_react52.useCallback)(() => {
+  const scheduleSync = (0, import_react53.useCallback)(() => {
     if (syncRafRef.current != null) return;
     syncRafRef.current = requestAnimationFrame(() => {
       syncRafRef.current = null;
       sync();
     });
   }, [sync]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     return () => {
       if (syncRafRef.current != null) {
         cancelAnimationFrame(syncRafRef.current);
@@ -8311,7 +8549,7 @@ var DraggableComponent = ({
       }
     };
   }, []);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (ref.current) {
       const observer = new ResizeObserver(() => {
         scheduleSync();
@@ -8324,37 +8562,37 @@ var DraggableComponent = ({
   }, [scheduleSync, itemRef]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
   const unregisterNode = useAppStore((s) => s.nodes.unregisterNode);
-  const hideOverlay = (0, import_react52.useCallback)(() => {
+  const hideOverlay = (0, import_react53.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = (0, import_react52.useCallback)(() => {
+  const showOverlay = (0, import_react53.useCallback)(() => {
     setIsVisible(true);
   }, []);
-  const nodeHandleRef = (0, import_react52.useRef)({
+  const nodeHandleRef = (0, import_react53.useRef)({
     sync: () => null,
     hideOverlay: () => null,
     showOverlay: () => null
   });
-  (0, import_react52.useLayoutEffect)(() => {
+  (0, import_react53.useLayoutEffect)(() => {
     nodeHandleRef.current.sync = sync;
     nodeHandleRef.current.hideOverlay = hideOverlay;
     nodeHandleRef.current.showOverlay = showOverlay;
   }, [hideOverlay, showOverlay, sync]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     registerNode(id, nodeHandleRef.current);
     return () => {
       unregisterNode(id);
     };
   }, [id, registerNode, unregisterNode]);
-  const CustomActionBar = (0, import_react52.useMemo)(
+  const CustomActionBar = (0, import_react53.useMemo)(
     () => overrides.actionBar || DefaultActionBar,
     [overrides.actionBar]
   );
-  const CustomOverlay = (0, import_react52.useMemo)(
+  const CustomOverlay = (0, import_react53.useMemo)(
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = (0, import_react52.useCallback)(
+  const onClick = (0, import_react53.useCallback)(
     (e) => {
       const userIsDragging = !!zoneStore.getState().draggedItem;
       if (userIsDragging) {
@@ -8383,7 +8621,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id, isSelected, fullScreenCanvas]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = (0, import_react52.useCallback)(() => {
+  const onSelectParent = (0, import_react53.useCallback)(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -8404,26 +8642,26 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = (0, import_react52.useCallback)(() => {
+  const onDuplicate = (0, import_react53.useCallback)(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = (0, import_react52.useCallback)(() => {
+  const onDelete = (0, import_react53.useCallback)(() => {
     dispatch({
       type: "remove",
       index,
       zone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const [hover, setHover] = (0, import_react52.useState)(false);
+  const [hover, setHover] = (0, import_react53.useState)(false);
   const indicativeHover = useContextStore(
     ZoneStoreContext,
     (s) => s.hoveringComponent === id
   );
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!ref.current) {
       return;
     }
@@ -8468,10 +8706,10 @@ var DraggableComponent = ({
     thisIsDragging,
     inDroppableZone
   ]);
-  const [isVisible, setIsVisible] = (0, import_react52.useState)(false);
-  const [dragFinished, setDragFinished] = (0, import_react52.useState)(true);
-  const [_, startTransition] = (0, import_react52.useTransition)();
-  (0, import_react52.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react53.useState)(false);
+  const [dragFinished, setDragFinished] = (0, import_react53.useState)(true);
+  const [_, startTransition] = (0, import_react53.useTransition)();
+  (0, import_react53.useEffect)(() => {
     startTransition(() => {
       if (hover || indicativeHover || isSelected) {
         scheduleSync();
@@ -8482,7 +8720,7 @@ var DraggableComponent = ({
       }
     });
   }, [hover, indicativeHover, isSelected, iframe]);
-  const [thisWasDragging, setThisWasDragging] = (0, import_react52.useState)(false);
+  const [thisWasDragging, setThisWasDragging] = (0, import_react53.useState)(false);
   const onDragFinished = useOnDragFinished((finished) => {
     if (finished) {
       startTransition(() => {
@@ -8493,15 +8731,15 @@ var DraggableComponent = ({
       setDragFinished(false);
     }
   });
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (thisIsDragging) {
       setThisWasDragging(true);
     }
   }, [thisIsDragging]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (thisWasDragging) return onDragFinished();
   }, [thisWasDragging, onDragFinished]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!dragFinished || !(isSelected || thisIsDragging)) return;
     const el = ref.current;
     if (!el) return;
@@ -8538,7 +8776,7 @@ var DraggableComponent = ({
       cancelAnimationFrame(frame);
     };
   }, [dragFinished, isSelected, thisIsDragging, scheduleSync]);
-  const syncActionsPosition = (0, import_react52.useCallback)(
+  const syncActionsPosition = (0, import_react53.useCallback)(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -8563,7 +8801,7 @@ var DraggableComponent = ({
     },
     [zoom]
   );
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (userDragAxis) {
       setDragAxis(userDragAxis);
       return;
@@ -8577,11 +8815,11 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
-  const parentAction = (0, import_react52.useMemo)(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CornerLeftUp, { size: 16 }) }),
+  const parentAction = (0, import_react53.useMemo)(
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CornerLeftUp, { size: 16 }) }),
     [ctx == null ? void 0 : ctx.areaId]
   );
-  const nextContextValue = (0, import_react52.useMemo)(
+  const nextContextValue = (0, import_react53.useMemo)(
     () => __spreadProps(__spreadValues({}, ctx), {
       areaId: id,
       zoneCompound,
@@ -8607,12 +8845,12 @@ var DraggableComponent = ({
     }
   );
   const hasNormalActions = permissions.duplicate || permissions.delete;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropZoneProvider, { value: nextContextValue, children: [
     dragFinished && isVisible && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         "div",
         {
-          className: getClassName22({
+          className: getClassName23({
             isSelected,
             isDragging: thisIsDragging,
             hover: hover || indicativeHover,
@@ -8622,18 +8860,18 @@ var DraggableComponent = ({
           "data-editor-overlay": true,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassName22("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Loader, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Loader, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               "div",
               {
-                className: getClassName22("actionsOverlay"),
+                className: getClassName23("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoom
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   "div",
                   {
-                    className: getClassName22("actions"),
+                    className: getClassName23("actions"),
                     style: {
                       transform: `scale(${1 / zoom}`,
                       top: actionsTop / zoom,
@@ -8642,14 +8880,14 @@ var DraggableComponent = ({
                       paddingRight: actionsSide
                     },
                     ref: syncActionsPosition,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
                       CustomActionBar,
                       {
                         parentAction,
                         label: DEBUG2 ? id : label,
                         children: [
-                          richText && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                          richText && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                               LoadedRichTextMenu,
                               {
                                 editor: richText.editor,
@@ -8658,10 +8896,10 @@ var DraggableComponent = ({
                                 readOnly: false
                               }
                             ),
-                            hasNormalActions && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActionBar.Separator, {})
+                            hasNormalActions && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionBar.Separator, {})
                           ] }),
-                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Trash, { size: 16 }) })
+                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Trash, { size: 16 }) })
                         ]
                       }
                     )
@@ -8669,14 +8907,14 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassName22("overlayWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName23("overlayWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               CustomOverlay,
               {
                 componentId: id,
                 componentType,
                 hover,
                 isSelected,
-                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: getClassName22("overlay") })
+                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName23("overlay") })
               }
             ) })
           ]
@@ -8695,16 +8933,16 @@ init_lib();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "DropZone": "_DropZone_1h108_1", "DropZone--hasChildren": "_DropZone--hasChildren_1h108_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1h108_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1h108_25", "DropZone--isRootZone": "_DropZone--isRootZone_1h108_25", "DropZone--isDestination": "_DropZone--isDestination_1h108_39", "DropZone-item": "_DropZone-item_1h108_48", "DropZone-hitbox": "_DropZone-hitbox_1h108_52", "DropZone--isEnabled": "_DropZone--isEnabled_1h108_60", "DropZone--isAnimating": "_DropZone--isAnimating_1h108_70" };
+var styles_module_default20 = { "DropZone": "_DropZone_1h108_1", "DropZone--hasChildren": "_DropZone--hasChildren_1h108_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1h108_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1h108_25", "DropZone--isRootZone": "_DropZone--isRootZone_1h108_25", "DropZone--isDestination": "_DropZone--isDestination_1h108_39", "DropZone-item": "_DropZone-item_1h108_48", "DropZone-hitbox": "_DropZone-hitbox_1h108_52", "DropZone--isEnabled": "_DropZone--isEnabled_1h108_60", "DropZone--isAnimating": "_DropZone--isAnimating_1h108_70" };
 
 // components/DropZone/index.tsx
 init_store();
-var import_react69 = require("@dnd-kit/react");
+var import_react70 = require("@dnd-kit/react");
 var import_collision2 = require("@dnd-kit/collision");
 
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
-var import_react53 = require("react");
+var import_react54 = require("react");
 init_store();
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
@@ -8713,8 +8951,8 @@ var useMinEmptyHeight = ({
   ref
 }) => {
   const appStore = useAppStoreApi();
-  const [prevHeight, setPrevHeight] = (0, import_react53.useState)(0);
-  const [isAnimating, setIsAnimating] = (0, import_react53.useState)(false);
+  const [prevHeight, setPrevHeight] = (0, import_react54.useState)(0);
+  const [isAnimating, setIsAnimating] = (0, import_react54.useState)(false);
   const { draggedItem, isZone } = useContextStore(ZoneStoreContext, (s) => {
     var _a, _b;
     return {
@@ -8722,7 +8960,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  const numItems = (0, import_react53.useRef)(0);
+  const numItems = (0, import_react54.useRef)(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
       if (finished) {
@@ -8752,7 +8990,7 @@ var useMinEmptyHeight = ({
     },
     [appStore, prevHeight, zoneCompound]
   );
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (draggedItem && ref.current) {
       if (isZone) {
         const rect = ref.current.getBoundingClientRect();
@@ -8769,15 +9007,15 @@ var useMinEmptyHeight = ({
 
 // components/DropZone/lib/use-content-with-preview.ts
 init_react_import();
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
-var import_react54 = require("@dnd-kit/react");
-var import_react55 = require("react");
+var import_react55 = require("@dnd-kit/react");
+var import_react56 = require("react");
 function useRenderedCallback(callback, deps) {
-  const manager = (0, import_react54.useDragDropManager)();
-  return (0, import_react55.useCallback)(
+  const manager = (0, import_react55.useDragDropManager)();
+  return (0, import_react56.useCallback)(
     (...args) => __async(null, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -8790,14 +9028,14 @@ function useRenderedCallback(callback, deps) {
 init_insert();
 init_store();
 var useContentIdsWithPreview = (contentIds, zoneCompound) => {
-  const zoneStore = (0, import_react56.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react57.useContext)(ZoneStoreContext);
   const preview = useContextStore(
     ZoneStoreContext,
     (s) => s.previewIndex[zoneCompound]
   );
   const isDragging = useAppStore((s) => s.state.ui.isDragging);
-  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react56.useState)(contentIds);
-  const [localPreview, setLocalPreview] = (0, import_react56.useState)(
+  const [contentIdsWithPreview, setContentIdsWithPreview] = (0, import_react57.useState)(contentIds);
+  const [localPreview, setLocalPreview] = (0, import_react57.useState)(
     preview
   );
   const updateContent = useRenderedCallback(
@@ -8832,7 +9070,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
     },
     []
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     var _a;
     const s = zoneStore.getState();
     const draggedItemId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -8850,17 +9088,17 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-var import_react57 = require("react");
+var import_react58 = require("react");
 init_store();
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
 var useDragAxis = (ref, collisionAxis) => {
   const status = useAppStore((s) => s.status);
-  const [dragAxis, setDragAxis] = (0, import_react57.useState)(
+  const [dragAxis, setDragAxis] = (0, import_react58.useState)(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = (0, import_react57.useCallback)(() => {
+  const calculateDragAxis = (0, import_react58.useCallback)(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -8872,7 +9110,7 @@ var useDragAxis = (ref, collisionAxis) => {
       }
     }
   }, [ref.current]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const onViewportChange = () => {
       calculateDragAxis();
     };
@@ -8881,12 +9119,12 @@ var useDragAxis = (ref, collisionAxis) => {
       window.removeEventListener("viewportchange", onViewportChange);
     };
   }, []);
-  (0, import_react57.useEffect)(calculateDragAxis, [status, collisionAxis]);
+  (0, import_react58.useEffect)(calculateDragAxis, [status, collisionAxis]);
   return [dragAxis, calculateDragAxis];
 };
 
 // components/DropZone/index.tsx
-var import_shallow6 = require("zustand/react/shallow");
+var import_shallow7 = require("zustand/react/shallow");
 
 // components/Render/index.tsx
 init_react_import();
@@ -8897,7 +9135,7 @@ init_react_import();
 
 // lib/field-transforms/use-field-transforms.tsx
 init_react_import();
-var import_react58 = require("react");
+var import_react59 = require("react");
 init_map_fields();
 
 // lib/field-transforms/build-mappers.ts
@@ -8926,14 +9164,14 @@ function buildMappers(transforms, readOnly, forceReadOnly) {
 
 // lib/field-transforms/use-field-transforms.tsx
 function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
-  const mappers = (0, import_react58.useMemo)(
+  const mappers = (0, import_react59.useMemo)(
     () => buildMappers(transforms, readOnly, forceReadOnly),
     [transforms, readOnly, forceReadOnly]
   );
-  const transformedProps = (0, import_react58.useMemo)(() => {
+  const transformedProps = (0, import_react59.useMemo)(() => {
     return mapFields(item, mappers, config).props;
   }, [config, item, mappers]);
-  const mergedProps = (0, import_react58.useMemo)(
+  const mergedProps = (0, import_react59.useMemo)(
     () => __spreadValues(__spreadValues({}, item.props), transformedProps),
     [item.props, transformedProps]
   );
@@ -8968,29 +9206,29 @@ function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdi
 }
 
 // components/Render/index.tsx
-var import_react62 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 
 // components/SlotRender/index.tsx
 init_react_import();
-var import_shallow5 = require("zustand/react/shallow");
+var import_shallow6 = require("zustand/react/shallow");
 init_store();
 
 // components/SlotRender/server.tsx
 init_react_import();
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // components/RichTextEditor/lib/use-richtext-props.tsx
 init_react_import();
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // components/RichTextEditor/components/RenderFallback.tsx
 init_react_import();
 init_get_class_name_factory();
 init_styles_module6();
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var getClassName23 = get_class_name_factory_default("RichTextEditor", styles_module_default14);
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var getClassName24 = get_class_name_factory_default("RichTextEditor", styles_module_default14);
 function RichTextRenderFallback({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: getClassName23(), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: getClassName24(), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       className: "rich-text",
@@ -9021,7 +9259,7 @@ var mapDeep = (source, path, render) => {
 };
 
 // components/RichTextEditor/lib/use-richtext-props.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function useRichtextProps(fields, props) {
   const findAllRichtextKeys = (fields2, path = []) => {
     if (!fields2) return [];
@@ -9043,21 +9281,21 @@ function useRichtextProps(fields, props) {
     }
     return result;
   };
-  const richtextKeys = (0, import_react60.useMemo)(() => findAllRichtextKeys(fields), [fields]);
-  const richtextProps = (0, import_react60.useMemo)(() => {
+  const richtextKeys = (0, import_react61.useMemo)(() => findAllRichtextKeys(fields), [fields]);
+  const richtextProps = (0, import_react61.useMemo)(() => {
     if (!(richtextKeys == null ? void 0 : richtextKeys.length)) return {};
-    const RichTextRender3 = (0, import_react60.lazy)(
+    const RichTextRender3 = (0, import_react61.lazy)(
       () => Promise.resolve().then(() => (init_Render(), Render_exports)).then((m) => ({
         default: m.RichTextRender
       }))
     );
     let result = __spreadValues({}, props);
     for (const { path, field } of richtextKeys) {
-      result = mapDeep(result, path, (content) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-        import_react60.Suspense,
+      result = mapDeep(result, path, (content) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        import_react61.Suspense,
         {
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(RichTextRenderFallback, { content }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(RichTextRender3, { content, field })
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RichTextRenderFallback, { content }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RichTextRender3, { content, field })
         },
         generateId()
       ));
@@ -9068,17 +9306,17 @@ function useRichtextProps(fields, props) {
 }
 
 // components/SlotRender/server.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SlotRender, __spreadValues({}, props));
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var SlotRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SlotRender, __spreadValues({}, props));
 var Item3 = ({
   config,
   item,
   metadata
 }) => {
   const Component2 = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const richtextProps = useRichtextProps(Component2.fields, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Component2.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       editor: __spreadProps(__spreadValues({}, props.editor), {
@@ -9087,14 +9325,14 @@ var Item3 = ({
     })
   );
 };
-var SlotRender = (0, import_react61.forwardRef)(
+var SlotRender = (0, import_react62.forwardRef)(
   function SlotRenderInternal({ className, style, content, config, metadata, as }, ref) {
     const El = as != null ? as : "div";
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(El, { className, style, ref, children: content.map((item) => {
       if (!config.components[item.type]) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         Item3,
         {
           config,
@@ -9108,7 +9346,7 @@ var SlotRender = (0, import_react61.forwardRef)(
 );
 
 // components/SlotRender/index.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var ContextSlotRender = ({
   componentId,
   zone
@@ -9116,14 +9354,14 @@ var ContextSlotRender = ({
   const config = useAppStore((s) => s.config);
   const metadata = useAppStore((s) => s.metadata);
   const slotContent = useAppStore(
-    (0, import_shallow5.useShallow)((s) => {
+    (0, import_shallow6.useShallow)((s) => {
       var _a, _b;
       const indexes = s.state.indexes;
       const contentIds = (_b = (_a = indexes.zones[`${componentId}:${zone}`]) == null ? void 0 : _a.contentIds) != null ? _b : [];
       return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
     })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     SlotRenderPure,
     {
       content: slotContent,
@@ -9184,8 +9422,8 @@ function resolveGlobals(data, config) {
 }
 
 // components/Render/index.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var renderContext = import_react62.default.createContext({
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var renderContext = import_react63.default.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
   metadata: {}
@@ -9196,7 +9434,7 @@ function Render({
   metadata = {}
 }) {
   var _a, _b;
-  const defaultedData = (0, import_react62.useMemo)(() => {
+  const defaultedData = (0, import_react63.useMemo)(() => {
     const base = __spreadProps(__spreadValues({}, data), {
       root: data.root || {},
       content: data.content || []
@@ -9219,10 +9457,10 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const richtextProps = useRichtextProps((_a = config.root) == null ? void 0 : _a.fields, pageProps);
-  const nextContextValue = (0, import_react62.useMemo)(
+  const nextContextValue = (0, import_react63.useMemo)(
     () => ({
       mode: "render",
       depth: 0
@@ -9230,9 +9468,9 @@ function Render({
     []
   );
   if ((_b = config.root) == null ? void 0 : _b.render) {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // components/DropZone/index.tsx
@@ -9240,16 +9478,16 @@ init_flatten_node();
 
 // lib/field-transforms/use-field-transforms-tracked.tsx
 init_react_import();
-var import_react63 = require("react");
+var import_react64 = require("react");
 init_map_fields();
 function useFieldTransformsTracked(config, item, transforms, readOnly, forceReadOnly) {
-  const prevProps = (0, import_react63.useRef)(null);
-  const prevResult = (0, import_react63.useRef)(item.props);
-  const mappers = (0, import_react63.useMemo)(
+  const prevProps = (0, import_react64.useRef)(null);
+  const prevResult = (0, import_react64.useRef)(item.props);
+  const mappers = (0, import_react64.useMemo)(
     () => buildMappers(transforms, readOnly, forceReadOnly),
     [transforms, readOnly, forceReadOnly]
   );
-  const transformedProps = (0, import_react63.useMemo)(() => {
+  const transformedProps = (0, import_react64.useMemo)(() => {
     var _a, _b, _c;
     const changedProps = {};
     const componentConfig = item.type === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[item.type];
@@ -9275,7 +9513,7 @@ function useFieldTransformsTracked(config, item, transforms, readOnly, forceRead
     prevResult.current = __spreadValues(__spreadValues({}, prevResult.current), mapped);
     return prevResult.current;
   }, [config, item, mappers]);
-  const mergedProps = (0, import_react63.useMemo)(
+  const mergedProps = (0, import_react64.useMemo)(
     () => __spreadValues(__spreadValues({}, item.props), transformedProps),
     [item.props, transformedProps]
   );
@@ -9287,7 +9525,7 @@ init_react_import();
 
 // components/InlineTextField/index.tsx
 init_react_import();
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // lib/overlay-portal/index.tsx
 init_react_import();
@@ -9342,24 +9580,12 @@ init_store();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "InlineTextField": "_InlineTextField_104qp_1" };
+var styles_module_default21 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // components/InlineTextField/index.tsx
 init_lib();
-
-// lib/get-selector-for-id.ts
-init_react_import();
-var getSelectorForId = (state, id) => {
-  const node = state.indexes.nodes[id];
-  if (!node) return;
-  const zoneCompound = `${node.parentId}:${node.zone}`;
-  const index = state.indexes.zones[zoneCompound].contentIds.indexOf(id);
-  return { zone: zoneCompound, index };
-};
-
-// components/InlineTextField/index.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var getClassName25 = get_class_name_factory_default("InlineTextField", styles_module_default20);
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var getClassName26 = get_class_name_factory_default("InlineTextField", styles_module_default21);
 var InlineTextFieldInternal = ({
   propPath,
   componentId,
@@ -9368,10 +9594,10 @@ var InlineTextFieldInternal = ({
   opts = {}
 }) => {
   var _a;
-  const ref = (0, import_react64.useRef)(null);
+  const ref = (0, import_react65.useRef)(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     const appStore = appStoreApi.getState();
     const data = appStore.state.indexes.nodes[componentId].data;
     const componentConfig = appStore.getComponentConfig(data.type);
@@ -9417,12 +9643,12 @@ var InlineTextFieldInternal = ({
       };
     }
   }, [appStoreApi, ref.current, value, disableLineBreaks]);
-  const [isHovering, setIsHovering] = (0, import_react64.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react64.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  const [isHovering, setIsHovering] = (0, import_react65.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react65.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "span",
     {
-      className: getClassName25(),
+      className: getClassName26(),
       ref,
       contentEditable: isHovering || isFocused ? "plaintext-only" : "false",
       onClick: (e) => {
@@ -9455,14 +9681,14 @@ var InlineTextFieldInternal = ({
     }
   );
 };
-var InlineTextField = (0, import_react64.memo)(InlineTextFieldInternal);
+var InlineTextField = (0, import_react65.memo)(InlineTextFieldInternal);
 
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         InlineTextField,
         {
           propPath,
@@ -9477,7 +9703,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         InlineTextField,
         {
           propPath,
@@ -9491,7 +9717,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         InlineTextField,
         {
           propPath,
@@ -9508,19 +9734,19 @@ var getInlineTextTransform = () => ({
 // lib/field-transforms/default-transforms/rich-text-transform.tsx
 init_react_import();
 init_store();
-var import_react65 = require("react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var Editor3 = (0, import_react65.lazy)(
+var import_react66 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var Editor3 = (0, import_react66.lazy)(
   () => Promise.resolve().then(() => (init_Editor(), Editor_exports)).then((m) => ({
     default: m.Editor
   }))
 );
-var RichTextRender2 = (0, import_react65.lazy)(
+var RichTextRender2 = (0, import_react66.lazy)(
   () => Promise.resolve().then(() => (init_Render(), Render_exports)).then((m) => ({
     default: m.RichTextRender
   }))
 );
-var InlineEditorWrapper = (0, import_react65.memo)(
+var InlineEditorWrapper = (0, import_react66.memo)(
   ({
     value,
     componentId,
@@ -9528,7 +9754,7 @@ var InlineEditorWrapper = (0, import_react65.memo)(
     field,
     id
   }) => {
-    const portalRef = (0, import_react65.useRef)(null);
+    const portalRef = (0, import_react66.useRef)(null);
     const appStoreApi = useAppStoreApi();
     const onClickHandler = (e) => {
       e.preventDefault();
@@ -9543,14 +9769,14 @@ var InlineEditorWrapper = (0, import_react65.memo)(
       );
       appStoreApi.getState().setUi({ itemSelector });
     };
-    (0, import_react65.useEffect)(() => {
+    (0, import_react66.useEffect)(() => {
       if (!portalRef.current) return;
       const cleanup = registerOverlayPortal(portalRef.current, {
         disableDragOnFocus: true
       });
       return () => cleanup == null ? void 0 : cleanup();
     }, [portalRef.current]);
-    const handleChange = (0, import_react65.useCallback)(
+    const handleChange = (0, import_react66.useCallback)(
       (content, ui) => __async(null, null, function* () {
         var _a;
         const appStore = appStoreApi.getState();
@@ -9574,7 +9800,7 @@ var InlineEditorWrapper = (0, import_react65.memo)(
       }),
       [appStoreApi, componentId, propPath]
     );
-    const handleFocus = (0, import_react65.useCallback)(
+    const handleFocus = (0, import_react66.useCallback)(
       (editor) => {
         appStoreApi.setState({
           currentRichText: {
@@ -9589,7 +9815,7 @@ var InlineEditorWrapper = (0, import_react65.memo)(
       [field, componentId]
     );
     if (!field.contentEditable)
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react65.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RichTextRender2, { content: value, field }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react66.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RichTextRender2, { content: value, field }) });
     const editorProps = {
       content: value,
       onChange: handleChange,
@@ -9599,13 +9825,13 @@ var InlineEditorWrapper = (0, import_react65.memo)(
       id,
       name: propPath
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "div",
       {
         ref: portalRef,
         onClick: onClickHandler,
         onClickCapture: onClickCaptureHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react65.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Editor3, __spreadValues({}, editorProps)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react66.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Editor3, __spreadValues({}, editorProps)) })
       }
     );
   }
@@ -9615,10 +9841,10 @@ var getRichTextTransform = () => ({
   richtext: ({ value, componentId, field, propPath, isReadOnly }) => {
     const { contentEditable = true, tiptap } = field;
     if (contentEditable === false || isReadOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(RichTextRender2, { content: value, field });
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RichTextRender2, { content: value, field });
     }
     const id = `${componentId}_${field.type}_${propPath}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       InlineEditorWrapper,
       {
         value,
@@ -9635,7 +9861,7 @@ var getRichTextTransform = () => ({
 // components/MemoizeComponent/index.tsx
 init_react_import();
 var import_fast_equals3 = require("fast-equals");
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // lib/shallow-equal.ts
 init_react_import();
@@ -9662,14 +9888,14 @@ function shallowEqual(obj1, obj2, keysToIgnore = []) {
 }
 
 // components/MemoizeComponent/index.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var RenderComponent = ({
   Component: Component2,
   componentProps: renderProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Component2, __spreadValues({}, renderProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Component2, __spreadValues({}, renderProps));
 };
-var MemoizeComponent = (0, import_react66.memo)(RenderComponent, (prev, next) => {
+var MemoizeComponent = (0, import_react67.memo)(RenderComponent, (prev, next) => {
   let editorEquals = true;
   if ("editor" in prev.componentProps && "editor" in next.componentProps) {
     editorEquals = (0, import_fast_equals3.deepEqual)(prev.componentProps.editor, next.componentProps.editor);
@@ -9679,7 +9905,7 @@ var MemoizeComponent = (0, import_react66.memo)(RenderComponent, (prev, next) =>
 
 // components/DropZone/VirtualizedDropZone.tsx
 init_react_import();
-var import_react67 = require("react");
+var import_react68 = require("react");
 init_store();
 var import_react_virtual = require("@tanstack/react-virtual");
 
@@ -9695,7 +9921,7 @@ var getFrame = () => {
 };
 
 // components/DropZone/VirtualizedDropZone.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var ROOT_ZONE_VIRTUALIZATION_OVERSCAN = 5;
 var DEFAULT_VIRTUALIZED_ITEM_HEIGHT = 320;
 var measuredItemHeights = /* @__PURE__ */ new Map();
@@ -9719,7 +9945,7 @@ var VirtualizedDropZone = ({
     return (_b = (_a = s.selectedItem) == null ? void 0 : _a.props.id) != null ? _b : null;
   });
   const frame = getFrame();
-  const zoneStore = (0, import_react67.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react68.useContext)(ZoneStoreContext);
   const draggedItemId = useContextStore(ZoneStoreContext, (s) => {
     var _a;
     const draggedId = (_a = s.draggedItem) == null ? void 0 : _a.id;
@@ -9734,9 +9960,9 @@ var VirtualizedDropZone = ({
     return null;
   });
   const iframeWindow = frame == null ? void 0 : frame.defaultView;
-  const measureRefsRef = (0, import_react67.useRef)(/* @__PURE__ */ new Map());
+  const measureRefsRef = (0, import_react68.useRef)(/* @__PURE__ */ new Map());
   const appStoreApi = useAppStoreApi();
-  const resolveIndex = (0, import_react67.useCallback)(
+  const resolveIndex = (0, import_react68.useCallback)(
     (targetId) => {
       var _a, _b, _c, _d;
       if (!targetId || targetId === "root") {
@@ -9761,7 +9987,7 @@ var VirtualizedDropZone = ({
     },
     [appStoreApi, contentIds]
   );
-  const pinnedIndexes = (0, import_react67.useMemo)(() => {
+  const pinnedIndexes = (0, import_react68.useMemo)(() => {
     const nextPinnedIndexes = /* @__PURE__ */ new Set();
     [selectedId, draggedItemId, dragTargetParentId].forEach((targetId) => {
       const currentIndex = resolveIndex(targetId);
@@ -9771,7 +9997,7 @@ var VirtualizedDropZone = ({
     });
     return Array.from(nextPinnedIndexes).sort((a, b) => a - b);
   }, [dragTargetParentId, draggedItemId, resolveIndex, selectedId]);
-  const rangeExtractor = (0, import_react67.useCallback)(
+  const rangeExtractor = (0, import_react68.useCallback)(
     (range) => {
       const indexes = (0, import_react_virtual.defaultRangeExtractor)(range);
       pinnedIndexes.forEach((index) => {
@@ -9796,7 +10022,7 @@ var VirtualizedDropZone = ({
     rangeExtractor,
     initialOffset: () => iframeWindow ? iframeWindow.scrollY : 0
   });
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     zoneStore.getState().registerRootVirtualizer(zoneCompound, {
       resolveIndex: (targetId) => resolveIndex(targetId),
       virtualizer
@@ -9805,7 +10031,7 @@ var VirtualizedDropZone = ({
       zoneStore.getState().unregisterRootVirtualizer(zoneCompound);
     };
   }, [resolveIndex, virtualizer, zoneCompound, zoneStore]);
-  const getMeasureRef = (0, import_react67.useCallback)((componentId) => {
+  const getMeasureRef = (0, import_react68.useCallback)((componentId) => {
     const cachedRef = measureRefsRef.current.get(componentId);
     if (cachedRef) {
       return cachedRef;
@@ -9822,7 +10048,7 @@ var VirtualizedDropZone = ({
     measureRefsRef.current.set(componentId, measureRef);
     return measureRef;
   }, []);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     const validIds = new Set(contentIds);
     Array.from(measureRefsRef.current.keys()).forEach((componentId) => {
       if (!validIds.has(componentId)) {
@@ -9832,7 +10058,7 @@ var VirtualizedDropZone = ({
   }, [contentIds]);
   const virtualItems = virtualizer.getVirtualItems();
   const totalSize = virtualizer.getTotalSize();
-  const renderedItems = (0, import_react67.useMemo)(() => {
+  const renderedItems = (0, import_react68.useMemo)(() => {
     const items = [];
     let previousEnd = 0;
     let previousIndex = -1;
@@ -9842,7 +10068,7 @@ var VirtualizedDropZone = ({
       const gapSize = Math.max(virtualItem.start - previousEnd, 0);
       if (gapSize > 0) {
         items.push(
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "div",
             {
               style: { height: `${gapSize}px` }
@@ -9864,7 +10090,7 @@ var VirtualizedDropZone = ({
     const trailingGap = Math.max(totalSize - previousEnd, 0);
     if (trailingGap > 0) {
       items.push(
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           "div",
           {
             style: { height: `${trailingGap}px` }
@@ -9875,15 +10101,15 @@ var VirtualizedDropZone = ({
     }
     return items;
   }, [totalSize, virtualItems, getMeasureRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: renderedItems });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: renderedItems });
 };
 
 // components/DropZone/index.tsx
-var import_jsx_runtime70 = (
+var import_jsx_runtime71 = (
   // Safe to use this since the HTML is set by the user
   require("react/jsx-runtime")
 );
-var getClassName26 = get_class_name_factory_default("DropZone", styles_module_default19);
+var getClassName27 = get_class_name_factory_default("DropZone", styles_module_default20);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
 var InsertPreview = ({
@@ -9892,11 +10118,11 @@ var InsertPreview = ({
   override
 }) => {
   if (element) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DrawerItemInner, { name: label, children: override });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DrawerItemInner, { name: label, children: override });
 };
-var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -9908,11 +10134,11 @@ var DropZoneChild = ({
 }) => {
   var _a, _b;
   const metadata = useAppStore((s) => s.metadata);
-  const ctx = (0, import_react68.useContext)(dropZoneContext);
+  const ctx = (0, import_react69.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
-  const zoneStore = (0, import_react68.useContext)(ZoneStoreContext);
+  const zoneStore = (0, import_react69.useContext)(ZoneStoreContext);
   const nodeProps = useAppStore(
-    (0, import_shallow6.useShallow)((s) => {
+    (0, import_shallow7.useShallow)((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.flatData.props;
     })
@@ -9924,13 +10150,13 @@ var DropZoneChild = ({
     }
   );
   const nodeReadOnly = useAppStore(
-    (0, import_shallow6.useShallow)((s) => {
+    (0, import_shallow7.useShallow)((s) => {
       var _a2;
       return (_a2 = s.state.indexes.nodes[componentId]) == null ? void 0 : _a2.data.readOnly;
     })
   );
   const appStore = useAppStoreApi();
-  const item = (0, import_react68.useMemo)(() => {
+  const item = (0, import_react69.useMemo)(() => {
     if (nodeProps) {
       const expanded = expandNode({
         type: nodeType,
@@ -9952,7 +10178,7 @@ var DropZoneChild = ({
   const componentConfig = useAppStore(
     (s) => (item == null ? void 0 : item.type) ? s.config.components[item.type] : null
   );
-  const editorProps = (0, import_react68.useMemo)(
+  const editorProps = (0, import_react69.useMemo)(
     () => ({
       renderDropZone: DropZoneEditPure,
       isEditing: true,
@@ -9975,7 +10201,7 @@ var DropZoneChild = ({
     }
   );
   let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
-  const defaultsProps = (0, import_react68.useMemo)(
+  const defaultsProps = (0, import_react69.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       editor: editorProps,
       editMode: true
@@ -9983,7 +10209,7 @@ var DropZoneChild = ({
     }),
     [componentConfig == null ? void 0 : componentConfig.defaultProps, item == null ? void 0 : item.props, editorProps]
   );
-  const defaultedNode = (0, import_react68.useMemo)(
+  const defaultedNode = (0, import_react69.useMemo)(
     () => {
       var _a2;
       return { type: (_a2 = item == null ? void 0 : item.type) != null ? _a2 : nodeType, props: defaultsProps };
@@ -9993,8 +10219,8 @@ var DropZoneChild = ({
   const config = useAppStore((s) => s.config);
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
-  const combinedFieldTransforms = (0, import_react68.useMemo)(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+  const combinedFieldTransforms = (0, import_react69.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -10008,13 +10234,13 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     DraggableComponent,
     {
       id: componentId,
@@ -10032,7 +10258,7 @@ var DropZoneChild = ({
       children: (dragRef) => {
         var _a2;
         if ((componentConfig == null ? void 0 : componentConfig.inline) && !isInserting) {
-          return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             MemoizeComponent,
             {
               Component: Render2,
@@ -10042,14 +10268,14 @@ var DropZoneChild = ({
             }
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           InsertPreview,
           {
             label,
             override: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem,
             element: "element" in item && item.element ? item.element : void 0
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           MemoizeComponent,
           {
             Component: Render2,
@@ -10060,8 +10286,8 @@ var DropZoneChild = ({
     }
   );
 };
-var DropZoneChildMemo = (0, import_react68.memo)(DropZoneChild);
-var DropZoneEdit = (0, import_react68.forwardRef)(
+var DropZoneChildMemo = (0, import_react69.memo)(DropZoneChild);
+var DropZoneEdit = (0, import_react69.forwardRef)(
   function DropZoneEditInternal({
     zone,
     allow,
@@ -10072,7 +10298,7 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
     collisionAxis,
     as
   }, userRef) {
-    const ctx = (0, import_react68.useContext)(dropZoneContext);
+    const ctx = (0, import_react69.useContext)(dropZoneContext);
     const appStoreApi = useAppStoreApi();
     const {
       // These all need setting via context
@@ -10082,7 +10308,7 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
       unregisterLocalZone
     } = ctx != null ? ctx : {};
     const path = useAppStore(
-      (0, import_shallow6.useShallow)((s) => {
+      (0, import_shallow7.useShallow)((s) => {
         var _a;
         return areaId ? (_a = s.state.indexes.nodes[areaId]) == null ? void 0 : _a.path : null;
       })
@@ -10099,38 +10325,29 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
       (s) => s.nextAreaDepthIndex[areaId || ""]
     );
     const zoneContentIds = useAppStore(
-      (0, import_shallow6.useShallow)((s) => {
+      (0, import_shallow7.useShallow)((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.contentIds;
       })
     );
     const zoneType = useAppStore(
-      (0, import_shallow6.useShallow)((s) => {
+      (0, import_shallow7.useShallow)((s) => {
         var _a;
         return (_a = s.state.indexes.zones[zoneCompound]) == null ? void 0 : _a.type;
       })
     );
-    (0, import_react68.useEffect)(() => {
+    (0, import_react69.useEffect)(() => {
       if (!zoneType || zoneType === "dropzone") {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
         }
       }
     }, [zoneType, appStoreApi]);
-    (0, import_react68.useEffect)(() => {
-      if (zoneType === "dropzone") {
-        if (zoneCompound !== rootDroppableId) {
-          console.warn(
-            "DropZones have been deprecated in favor of slot fields and will be removed in a future version of Editor. Please see the migration guide: https://www.frontend.co/docs/guides/migrations/dropzones-to-slots"
-          );
-        }
-      }
-    }, [zoneType]);
-    const contentIds = (0, import_react68.useMemo)(() => {
+    const contentIds = (0, import_react69.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = (0, import_react68.useRef)(null);
-    const acceptsTarget = (0, import_react68.useCallback)(
+    const ref = (0, import_react69.useRef)(null);
+    const acceptsTarget = (0, import_react69.useCallback)(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -10168,7 +10385,7 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
       }
       return _isEnabled;
     });
-    (0, import_react68.useEffect)(() => {
+    (0, import_react69.useEffect)(() => {
       if (registerLocalZone) {
         registerLocalZone(zoneCompound, targetAccepted || isEnabled);
       }
@@ -10183,8 +10400,8 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
       zoneCompound
     );
     const isDropEnabled = isEnabled && (preview ? contentIdsWithPreview.length === 1 : contentIdsWithPreview.length === 0);
-    const zoneStore = (0, import_react68.useContext)(ZoneStoreContext);
-    (0, import_react68.useEffect)(() => {
+    const zoneStore = (0, import_react69.useContext)(ZoneStoreContext);
+    (0, import_react69.useEffect)(() => {
       const { enabledIndex } = zoneStore.getState();
       zoneStore.setState({
         enabledIndex: __spreadProps(__spreadValues({}, enabledIndex), { [zoneCompound]: isEnabled })
@@ -10203,7 +10420,7 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
         path: path || []
       }
     };
-    const { ref: dropRef } = (0, import_react69.useDroppable)(droppableConfig);
+    const { ref: dropRef } = (0, import_react70.useDroppable)(droppableConfig);
     const isAreaSelected = useAppStore(
       (s) => (s == null ? void 0 : s.selectedItem) && areaId === (s == null ? void 0 : s.selectedItem.props.id)
     );
@@ -10213,7 +10430,7 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
       userMinEmptyHeight,
       ref
     });
-    const setRefs = (0, import_react68.useCallback)(
+    const setRefs = (0, import_react69.useCallback)(
       (node) => {
         assignRefs([ref, dropRef, userRef], node);
       },
@@ -10225,10 +10442,10 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
     const El = as != null ? as : "div";
     const isRootAreaZone = (areaId != null ? areaId : rootAreaId) === rootAreaId && depth === 0;
     const shouldVirtualizeItems = _experimentalVirtualization && isRootAreaZone;
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       El,
       {
-        className: `${getClassName26({
+        className: `${getClassName27({
           isRootZone,
           hoveringOverArea,
           isEnabled,
@@ -10243,12 +10460,12 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
           "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
-        children: shouldVirtualizeItems ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        children: shouldVirtualizeItems ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           VirtualizedDropZone,
           {
             contentIds: contentIdsWithPreview,
             zoneCompound,
-            renderItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            renderItem: (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               DropZoneChildMemo,
               {
                 zoneCompound,
@@ -10262,7 +10479,7 @@ var DropZoneEdit = (0, import_react68.forwardRef)(
               props.componentId
             )
           }
-        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           DropZoneChildMemo,
           {
             zoneCompound,
@@ -10284,8 +10501,8 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component2 = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
-  const nextContextValue = (0, import_react68.useMemo)(
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const nextContextValue = (0, import_react69.useMemo)(
     () => ({
       areaId: props.id,
       depth: 1
@@ -10293,7 +10510,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component2.fields, props);
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     Component2.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       editor: __spreadProps(__spreadValues({}, props.editor), {
@@ -10303,15 +10520,15 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DropZoneRender, __spreadValues({}, props));
-var DropZoneRender = (0, import_react68.forwardRef)(
+var DropZoneRenderPure = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZoneRender, __spreadValues({}, props));
+var DropZoneRender = (0, import_react69.forwardRef)(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
-    const ctx = (0, import_react68.useContext)(dropZoneContext);
+    const ctx = (0, import_react69.useContext)(dropZoneContext);
     const { areaId = "root" } = ctx || {};
-    const { config, data, metadata } = (0, import_react68.useContext)(renderContext);
+    const { config, data, metadata } = (0, import_react69.useContext)(renderContext);
     let zoneCompound = `${areaId}:${zone}`;
     let content = (data == null ? void 0 : data.content) || [];
-    (0, import_react68.useEffect)(() => {
+    (0, import_react69.useEffect)(() => {
       if (!content) {
         if (ctx == null ? void 0 : ctx.registerZone) {
           ctx == null ? void 0 : ctx.registerZone(zoneCompound);
@@ -10325,10 +10542,10 @@ var DropZoneRender = (0, import_react68.forwardRef)(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(El, { className, style, ref, children: content.map((item) => {
       const Component2 = config.components[item.type];
       if (Component2) {
-        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           DropZoneRenderItem,
           {
             config,
@@ -10342,14 +10559,14 @@ var DropZoneRender = (0, import_react68.forwardRef)(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DropZone, __spreadValues({}, props));
-var DropZone = (0, import_react68.forwardRef)(
+var DropZonePure = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZone, __spreadValues({}, props));
+var DropZone = (0, import_react69.forwardRef)(
   function DropZone2(props, ref) {
-    const ctx = (0, import_react68.useContext)(dropZoneContext);
+    const ctx = (0, import_react69.useContext)(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -10736,14 +10953,14 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 var import_state = require("@dnd-kit/state");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var DEBUG3 = false;
-var dragListenerContext = (0, import_react71.createContext)({
+var dragListenerContext = (0, import_react72.createContext)({
   dragListeners: {}
 });
 function useDragListener(type, fn, deps = []) {
-  const { setDragListeners } = (0, import_react71.useContext)(dragListenerContext);
-  (0, import_react71.useEffect)(() => {
+  const { setDragListeners } = (0, import_react72.useContext)(dragListenerContext);
+  (0, import_react72.useEffect)(() => {
     if (setDragListeners) {
       setDragListeners((old) => __spreadProps(__spreadValues({}, old), {
         [type]: [...old[type] || [], fn]
@@ -10753,8 +10970,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = (0, import_react71.useRef)(null);
-  return (0, import_react71.useCallback)((manager) => {
+  const lastFallbackDisable = (0, import_react72.useRef)(null);
+  return (0, import_react72.useCallback)((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -10773,9 +10990,9 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = (0, import_react71.useRef)(null);
+  const debouncedParamsRef = (0, import_react72.useRef)(null);
   const tempDisableFallback = useTempDisableFallback(100);
-  const [zoneStore] = (0, import_react71.useState)(() => {
+  const [zoneStore] = (0, import_react72.useState)(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
     return (0, import_zustand6.createStore)(() => ({
       zoneDepthIndex: {},
@@ -10816,7 +11033,7 @@ var DragDropContextClient = ({
       }
     }));
   });
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     appStore.setState({
       scrollToComponent: (id) => zoneStore.getState().scrollToComponent(id)
     });
@@ -10825,7 +11042,7 @@ var DragDropContextClient = ({
       } });
     };
   }, [appStore, zoneStore]);
-  const getChanged2 = (0, import_react71.useCallback)(
+  const getChanged2 = (0, import_react72.useCallback)(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -10846,7 +11063,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = (0, import_react71.useCallback)(
+  const setDeepestAndCollide = (0, import_react72.useCallback)(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged2(params);
       if (!zoneChanged && !areaChanged) return;
@@ -10870,7 +11087,7 @@ var DragDropContextClient = ({
     setDeepestDb.cancel();
     debouncedParamsRef.current = null;
   };
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     if (DEBUG3) {
       zoneStore.subscribe(
         (s) => {
@@ -10884,7 +11101,7 @@ var DragDropContextClient = ({
       );
     }
   }, []);
-  const [plugins] = (0, import_react71.useState)(() => [
+  const [plugins] = (0, import_react72.useState)(() => [
     import_dom4.ScrollListener,
     import_dom4.Scroller,
     ...disableAutoScroll ? import_dom4.defaultPreset.plugins.filter((plugin) => plugin !== import_dom4.AutoScroller) : import_dom4.defaultPreset.plugins,
@@ -10934,10 +11151,10 @@ var DragDropContextClient = ({
     )
   ]);
   const sensors = useSensors();
-  const [dragListeners, setDragListeners] = (0, import_react71.useState)({});
-  const dragMode = (0, import_react71.useRef)(null);
-  const initialSelector = (0, import_react71.useRef)(void 0);
-  const nextContextValue = (0, import_react71.useMemo)(
+  const [dragListeners, setDragListeners] = (0, import_react72.useState)({});
+  const dragMode = (0, import_react72.useRef)(null);
+  const initialSelector = (0, import_react72.useRef)(void 0);
+  const nextContextValue = (0, import_react72.useMemo)(
     () => ({
       mode: "edit",
       areaId: "root",
@@ -10945,15 +11162,15 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-        import_react70.DragDropProvider,
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        import_react71.DragDropProvider,
         {
           plugins,
           sensors,
@@ -11168,7 +11385,7 @@ var DragDropContextClient = ({
             const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-editor-entry]");
             entryEl == null ? void 0 : entryEl.setAttribute("data-editor-dragging", "true");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -11182,14 +11399,14 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
-var import_react73 = require("@dnd-kit/react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var getClassName27 = get_class_name_factory_default("Drawer", styles_module_default17);
-var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default17);
+var import_react74 = require("@dnd-kit/react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var getClassName28 = get_class_name_factory_default("Drawer", styles_module_default18);
+var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default18);
 var DrawerItemInner = ({
   children,
   name,
@@ -11198,11 +11415,11 @@ var DrawerItemInner = ({
   dragRef,
   isDragDisabled
 }) => {
-  const CustomInner = (0, import_react72.useMemo)(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
+  const CustomInner = (0, import_react73.useMemo)(
+    () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -11210,9 +11427,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-editor-drawer-item": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassNameItem2("icon"), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name })
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameItem2("icon"), children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name })
       ] }) }) })
     }
   );
@@ -11225,15 +11442,15 @@ var DrawerItemDraggable = ({
   id,
   isDragDisabled
 }) => {
-  const { ref } = (0, import_react73.useDraggable)({
+  const { ref } = (0, import_react74.useDraggable)({
     id,
     data: { componentType: name },
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getClassName27("draggable"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassName27("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DrawerItemInner, { name, label, icon, children }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassName27("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassName28("draggable"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName28("draggableBg"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DrawerItemInner, { name, label, icon, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName28("draggableFg"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       DrawerItemInner,
       {
         name,
@@ -11256,7 +11473,7 @@ var DrawerItem = ({
   isDragDisabled
 }) => {
   const resolvedId = id || name;
-  const [dynamicId, setDynamicId] = (0, import_react72.useState)(generateId(resolvedId));
+  const [dynamicId, setDynamicId] = (0, import_react73.useState)(generateId(resolvedId));
   if (typeof index !== "undefined") {
     console.error(
       "Warning: The `index` prop on Drawer.Item is deprecated and no longer required."
@@ -11269,337 +11486,126 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     DrawerItemDraggable,
     {
       name,
       label,
       icon,
-      id: dynamicId,
-      isDragDisabled,
-      children
-    }
-  ) }, dynamicId);
-};
-var Drawer = ({
-  children,
-  droppableId,
-  direction,
-  variant = "list"
-}) => {
-  if (droppableId) {
-    console.error(
-      "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
-    );
-  }
-  if (direction) {
-    console.error(
-      "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
-    );
-  }
-  const id = useSafeId();
-  const { ref } = (0, import_react73.useDroppable)({
-    id,
-    type: "void",
-    collisionPriority: 0
-    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-    "div",
-    {
-      className: getClassName27({ [variant]: variant }),
-      ref,
-      "data-editor-dnd": id,
-      "data-editor-drawer": true,
-      "data-editor-dnd-void": true,
-      children
-    }
-  );
-};
-Drawer.Item = DrawerItem;
-
-// components/ComponentList/index.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default16);
-var ComponentListItem = ({
-  name,
-  label,
-  icon
-}) => {
-  var _a;
-  const overrides = useAppStore((s) => s.overrides);
-  const canInsert = useAppStore(
-    (s) => s.permissions.getPermissions({
-      type: name
-    }).insert
-  );
-  (0, import_react74.useEffect)(() => {
-    if (overrides.componentItem) {
-      console.warn(
-        "The `componentItem` override has been deprecated and renamed to `drawerItem`"
-      );
-    }
-  }, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Drawer.Item, { label, name, icon, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
-};
-var ComponentList = ({
-  children,
-  title,
-  id
-}) => {
-  const config = useAppStore((s) => s.config);
-  const setUi = useAppStore((s) => s.setUi);
-  const componentList = useAppStore((s) => s.state.ui.componentList);
-  const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
-      "button",
-      {
-        type: "button",
-        className: getClassName28("title"),
-        onClick: () => setUi({
-          componentList: __spreadProps(__spreadValues({}, componentList), {
-            [id]: __spreadProps(__spreadValues({}, componentList[id]), {
-              expanded: !expanded
-            })
-          })
-        }),
-        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName28("titleIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronRight, { size: 12 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { children: title })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: getClassName28("content"), children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Drawer, { variant: "tile", children: children || Object.keys(config.components).map((componentKey) => {
-      var _a;
-      const componentConf = config.components[componentKey] || {};
-      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
-        ComponentListItem,
-        {
-          label: (_a = componentConf["label"]) != null ? _a : componentKey,
-          icon: componentConf["icon"],
-          name: componentKey
-        },
-        componentKey
-      );
-    }) }) })
-  ] });
-};
-ComponentList.Item = ComponentListItem;
-
-// bundle/core.ts
-init_IconButton2();
-
-// components/Editor/index.tsx
-init_react_import();
-var import_react95 = require("react");
-init_store();
-
-// components/Editor/components/Fields/index.tsx
-init_react_import();
-init_Loader();
-init_root_droppable_id();
-init_store();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
-init_react_import();
-var styles_module_default21 = { "EditorFields": "_EditorFields_3dnua_1", "EditorFields--isLoading": "_EditorFields--isLoading_3dnua_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_3dnua_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_3dnua_25", "EditorFields-field": "_EditorFields-field_3dnua_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_3dnua_36", "EditorFields-syncButton": "_EditorFields-syncButton_3dnua_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_3dnua_78" };
-
-// components/Editor/components/Fields/index.tsx
-init_lib();
-var import_react75 = require("react");
-init_fields();
-var import_shallow7 = require("zustand/react/shallow");
-init_lucide_react();
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var getClassName29 = get_class_name_factory_default("EditorFields", styles_module_default21);
-var DefaultFields = ({
-  children
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children });
-};
-var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
-  const { dispatch, state, selectedItem, resolveComponentData: resolveComponentData2 } = appStore.getState();
-  const { data, ui } = state;
-  const { itemSelector } = ui;
-  const rootProps = data.root.props || data.root;
-  const currentProps = selectedItem ? selectedItem.props : rootProps;
-  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
-  if (selectedItem && itemSelector) {
-    const resolved = yield resolveComponentData2(
-      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
-      "replace"
-    );
-    const latestSelector = getSelectorForId(
-      appStore.getState().state,
-      selectedItem.props.id
-    );
-    if (!latestSelector) return;
-    dispatch({
-      type: "replace",
-      destinationIndex: latestSelector.index,
-      destinationZone: latestSelector.zone || rootDroppableId,
-      data: resolved.node,
-      ui: updatedUi
-    });
-    return;
-  }
-  if (data.root.props) {
-    dispatch({
-      type: "replaceRoot",
-      root: (yield resolveComponentData2(
-        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
-        "replace"
-      )).node,
-      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-      recordHistory: true
-    });
-    return;
-  }
-  dispatch({
-    type: "setData",
-    data: { root: newProps }
-  });
-});
-var FieldsChildInner = ({ fieldName }) => {
-  const field = useAppStore((s) => s.fields.fields[fieldName]);
-  const isReadOnly = useAppStore(
-    (s) => ((s.selectedItem ? s.selectedItem.readOnly : s.state.data.root.readOnly) || {})[fieldName]
-  );
-  const id = useAppStore((s) => {
-    if (!field) return null;
-    return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
-  });
-  const permissions = useAppStore(
-    (0, import_shallow7.useShallow)((s) => {
-      const { selectedItem, permissions: permissions2 } = s;
-      return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
-    })
-  );
-  const appStore = useAppStoreApi();
-  const onChange = (0, import_react75.useCallback)(createOnChange(fieldName, appStore), [
-    fieldName
-  ]);
-  const { visible = true } = field != null ? field : {};
-  const fieldStore = (0, import_react75.useContext)(fieldContextStore.ctx);
-  (0, import_react75.useEffect)(() => {
-    return appStore.subscribe(
-      (s) => {
-        var _a;
-        const data = s.getCurrentData();
-        return (_a = data.props) == null ? void 0 : _a[fieldName];
-      },
-      (value) => {
-        fieldStore.setState({ [fieldName]: value });
-      }
-    );
-  }, [appStore, fieldStore]);
-  if (!field || !id || !visible) return null;
-  if (field.type === "slot") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName29("field"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-    AutoFieldPrivate,
-    {
-      field,
-      name: fieldName,
-      id,
-      readOnly: !permissions.edit || isReadOnly,
-      onChange
-    }
-  ) }, id);
-};
-var FieldsChild = ({ fieldName }) => {
-  const appStore = useAppStoreApi();
-  const initialValue = (0, import_react75.useMemo)(() => {
-    var _a;
-    const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
-    return { [fieldName]: value };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(FieldsChildInner, { fieldName }) });
-};
-var FieldsChildMemo = (0, import_react75.memo)(FieldsChild);
-var GlobalSyncButton = () => {
-  const appStore = useAppStoreApi();
-  const selectedItem = useAppStore((s) => s.selectedItem);
-  const isGlobalType = useAppStore(
-    (s) => {
-      var _a;
-      return selectedItem ? ((_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.global) === true : false;
-    }
-  );
-  if (!selectedItem || !isGlobalType) return null;
-  const isUnlinked = selectedItem.synced === false;
-  const onClick = () => __async(null, null, function* () {
-    const { dispatch, state, resolveComponentData: resolveComponentData2 } = appStore.getState();
-    const latestSelector = getSelectorForId(state, selectedItem.props.id);
-    if (!latestSelector) return;
-    const resolved = yield resolveComponentData2(
-      __spreadProps(__spreadValues({}, selectedItem), { synced: isUnlinked ? true : false }),
-      "replace"
+      id: dynamicId,
+      isDragDisabled,
+      children
+    }
+  ) }, dynamicId);
+};
+var Drawer = ({
+  children,
+  droppableId,
+  direction,
+  variant = "list"
+}) => {
+  if (droppableId) {
+    console.error(
+      "Warning: The `droppableId` prop on Drawer is deprecated and no longer required."
     );
-    dispatch({
-      type: "replace",
-      destinationIndex: latestSelector.index,
-      destinationZone: latestSelector.zone || rootDroppableId,
-      data: resolved.node
-    });
+  }
+  if (direction) {
+    console.error(
+      "Warning: The `direction` prop on Drawer is deprecated and no longer required to achieve multi-directional dragging."
+    );
+  }
+  const id = useSafeId();
+  const { ref } = (0, import_react74.useDroppable)({
+    id,
+    type: "void",
+    collisionPriority: 0
+    // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  const syncButtonClass = [
-    getClassName29("syncButton"),
-    isUnlinked ? styles_module_default21["EditorFields-syncButton--unlinked"] : null
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("button", { type: "button", className: syncButtonClass, onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Link, { size: 14 }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    "div",
+    {
+      className: getClassName28({ [variant]: variant }),
+      ref,
+      "data-editor-dnd": id,
+      "data-editor-drawer": true,
+      "data-editor-dnd-void": true,
+      children
+    }
+  );
 };
-var FieldsInternal = ({ wrapFields = true }) => {
+Drawer.Item = DrawerItem;
+
+// components/ComponentList/index.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var getClassName29 = get_class_name_factory_default("ComponentList", styles_module_default17);
+var ComponentListItem = ({
+  name,
+  label,
+  icon
+}) => {
+  var _a;
   const overrides = useAppStore((s) => s.overrides);
-  const componentResolving = useAppStore((s) => {
-    var _a, _b;
-    const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
-    return (loadingCount != null ? loadingCount : 0) > 0;
-  });
-  const itemSelector = useAppStore((0, import_shallow7.useShallow)((s) => s.state.ui.itemSelector));
-  const id = useAppStore((s) => {
-    var _a;
-    return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
-  });
-  const appStore = useAppStoreApi();
-  useRegisterFieldsSlice(appStore, id);
-  const fieldsLoading = useAppStore((s) => s.fields.loading);
-  const fieldNames = useAppStore(
-    (0, import_shallow7.useShallow)((s) => {
-      if (s.fields.id === id) {
-        return Object.keys(s.fields.fields);
-      }
-      return [];
-    })
+  const canInsert = useAppStore(
+    (s) => s.permissions.getPermissions({
+      type: name
+    }).insert
   );
-  const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = (0, import_react75.useMemo)(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
-    "form",
-    {
-      className: getClassName29({ wrapFields }),
-      onSubmit: (e) => {
-        e.preventDefault();
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Wrapper, { isLoading, itemSelector, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(GlobalSyncButton, {}),
-          fieldNames.map((fieldName) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(FieldsChildMemo, { fieldName }, fieldName))
-        ] }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName29("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName29("loadingOverlayInner"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Loader, { size: 16 }) }) })
-      ]
+  (0, import_react75.useEffect)(() => {
+    if (overrides.componentItem) {
+      console.warn(
+        "The `componentItem` override has been deprecated and renamed to `drawerItem`"
+      );
     }
-  );
+  }, [overrides]);
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Drawer.Item, { label, name, icon, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+};
+var ComponentList = ({
+  children,
+  title,
+  id
+}) => {
+  const config = useAppStore((s) => s.config);
+  const setUi = useAppStore((s) => s.setUi);
+  const componentList = useAppStore((s) => s.state.ui.componentList);
+  const { expanded = true } = componentList[id] || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: getClassName29({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: getClassName29("title"),
+        onClick: () => setUi({
+          componentList: __spreadProps(__spreadValues({}, componentList), {
+            [id]: __spreadProps(__spreadValues({}, componentList[id]), {
+              expanded: !expanded
+            })
+          })
+        }),
+        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName29("titleIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronRight, { size: 12 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { children: title })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: getClassName29("content"), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Drawer, { variant: "tile", children: children || Object.keys(config.components).map((componentKey) => {
+      var _a;
+      const componentConf = config.components[componentKey] || {};
+      return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        ComponentListItem,
+        {
+          label: (_a = componentConf["label"]) != null ? _a : componentKey,
+          icon: componentConf["icon"],
+          name: componentKey
+        },
+        componentKey
+      );
+    }) }) })
+  ] });
 };
-var Fields = (0, import_react75.memo)(FieldsInternal);
+ComponentList.Item = ComponentListItem;
 
 // components/Editor/components/Components/index.tsx
-init_react_import();
-init_store();
 var import_react76 = require("react");
 init_lucide_react();
 
@@ -13297,7 +13303,7 @@ var DEVICE_VIEWPORTS = {
 var BrowserBar = ({
   onViewportChange
 }) => {
-  const { routes, currentPath, onRouteChange } = usePropsContext();
+  const { routes, currentRoute, onRouteChange } = usePropsContext();
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const dispatch = useAppStore((s) => s.dispatch);
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
@@ -13323,24 +13329,24 @@ var BrowserBar = ({
   const setDevice = (device) => {
     onViewportChange == null ? void 0 : onViewportChange(DEVICE_VIEWPORTS[device]);
   };
-  const showRoutePicker = !!routes && currentPath !== void 0 && !!onRouteChange;
-  const [inputValue, setInputValue] = (0, import_react87.useState)(currentPath != null ? currentPath : "");
-  const lastSyncedPath = (0, import_react87.useRef)(currentPath);
-  if (lastSyncedPath.current !== currentPath) {
-    lastSyncedPath.current = currentPath;
-    setInputValue(currentPath != null ? currentPath : "");
+  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
+  const [inputValue, setInputValue] = (0, import_react87.useState)(currentRoute != null ? currentRoute : "");
+  const lastSyncedPath = (0, import_react87.useRef)(currentRoute);
+  if (lastSyncedPath.current !== currentRoute) {
+    lastSyncedPath.current = currentRoute;
+    setInputValue(currentRoute != null ? currentRoute : "");
   }
   const submit = (raw) => {
     const next = normalizeRoute(raw);
-    if (!next || next === currentPath) return;
+    if (!next || next === currentRoute) return;
     void (onRouteChange == null ? void 0 : onRouteChange(next));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36(), children: [
     showRoutePicker ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
       Combobox,
       {
-        items: routes.map((r) => r.path),
-        value: currentPath,
+        items: routes,
+        value: currentRoute,
         onValueChange: (next) => {
           if (typeof next === "string") submit(next);
         },
@@ -13373,13 +13379,7 @@ var BrowserBar = ({
           ),
           /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ComboboxContent, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxEmpty, { children: "Press Enter to go to this path" }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxList, { children: (path) => {
-              const route = routes.find((r) => r.path === path);
-              return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ComboboxItem, { value: path, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("itemPath"), children: path }),
-                (route == null ? void 0 : route.title) ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("itemTitle"), children: route.title }) : null
-              ] }, path);
-            } })
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxList, { children: (path) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxItem, { value: path, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("itemPath"), children: path }) }, path) })
           ] })
         ]
       }
@@ -14116,25 +14116,6 @@ var blocksPlugin = () => ({
   icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Plus, {})
 });
 
-// plugins/outline/index.tsx
-init_react_import();
-init_lucide_react();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
-init_react_import();
-var styles_module_default35 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
-
-// plugins/outline/index.tsx
-init_lib();
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var getClassName42 = get_class_name_factory_default("OutlinePlugin", styles_module_default35);
-var outlinePlugin = () => ({
-  name: "outline",
-  label: "Outline",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName42(), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Outline, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Layers, {})
-});
-
 // plugins/fields/index.tsx
 init_react_import();
 init_lucide_react();
@@ -14142,12 +14123,12 @@ init_store();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default36 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+var styles_module_default35 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
 
 // plugins/fields/index.tsx
 init_lib();
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var getClassName43 = get_class_name_factory_default("FieldsPlugin", styles_module_default36);
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var getClassName42 = get_class_name_factory_default("FieldsPlugin", styles_module_default35);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     var _a, _b;
@@ -14159,22 +14140,22 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName43(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName43("header"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Fields, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getClassName42(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName42("header"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
 // components/Editor/components/Layout/index.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var getClassName44 = get_class_name_factory_default("Editor", styles_module_default25);
+var import_jsx_runtime92 = require("react/jsx-runtime");
+var getClassName43 = get_class_name_factory_default("Editor", styles_module_default25);
 var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default25);
 var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default25);
 var FieldSideBarToolbar = () => {
   const appStore = useAppStoreApi();
-  const { onPublish } = usePropsContext();
+  const { onPublish, currentRoute } = usePropsContext();
   const back = useAppStore((s) => s.history.back);
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
@@ -14182,35 +14163,35 @@ var FieldSideBarToolbar = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: getClassName44("fieldSideBarToolbar"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: getClassName44("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName43("fieldSideBarToolbar"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName43("fieldSideBarHistory"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
         IconButton,
         {
           type: "button",
           title: "undo",
           disabled: !hasPast,
           onClick: back,
-          children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Undo2, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Undo2, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
         IconButton,
         {
           type: "button",
           title: "redo",
           disabled: !hasFuture,
           onClick: forward,
-          children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Redo2, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Redo2, { size: 18 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getClassName44("fieldSideBarActions"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName43("fieldSideBarActions"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       Button,
       {
         onClick: () => {
           const data = appStore.getState().state.data;
-          onPublish && onPublish(data);
+          onPublish && onPublish(data, currentRoute);
         },
         children: "Publish"
       }
@@ -14224,9 +14205,9 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : ((_c = s.config.root) == null ? void 0 : _c.label) || "Page";
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Fields, {}) })
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldSideBarToolbar, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Fields, {}) })
   ] });
 };
 var PluginTab = ({
@@ -14234,7 +14215,7 @@ var PluginTab = ({
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -14257,6 +14238,7 @@ var Layout = ({ children }) => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
+  const navBarVisible = useAppStore((s) => s.state.ui.navBarVisible);
   const instanceId = useAppStore((s) => s.instanceId);
   const {
     width: leftWidth,
@@ -14401,7 +14383,7 @@ var Layout = ({ children }) => {
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Moon, { size: 18 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
   const hasLegacySideBarPlugin = (0, import_react94.useMemo)(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
@@ -14409,7 +14391,7 @@ var Layout = ({ children }) => {
   );
   const pluginItems = (0, import_react94.useMemo)(() => {
     const details = {};
-    const defaultPlugins = [blocksPlugin(), outlinePlugin()];
+    const defaultPlugins = [blocksPlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
     const combinedPlugins = [
       ...defaultPlugins,
@@ -14426,7 +14408,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -14465,17 +14447,17 @@ var Layout = ({ children }) => {
   if (mobilePanelHeight && leftSideBarVisible) {
     mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "div",
     {
-      className: `Editor ${getClassName44({
+      className: `Editor ${getClassName43({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CustomEditor, { children: children || /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomEditor, { children: children || /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "div",
           {
             className: getLayoutClassName({
@@ -14487,17 +14469,17 @@ var Layout = ({ children }) => {
               mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                  navBarVisible && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                     Nav,
                     {
                       items: pluginItems,
-                      footer: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                      footer: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                         IconButton,
                         {
                           type: "button",
@@ -14508,19 +14490,19 @@ var Layout = ({ children }) => {
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
                     "div",
                     {
                       ref: mobilePanelRef,
                       className: getLayoutClassName("mobilePanel"),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                           "div",
                           {
                             className: getLayoutClassName("mobileDragHandle"),
                             onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
                             onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                               "div",
                               {
                                 className: getLayoutClassName("mobileDragHandlePill")
@@ -14528,17 +14510,17 @@ var Layout = ({ children }) => {
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                           "div",
                           {
                             className: getLayoutClassName("mobilePanelContent"),
                             children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                                 PluginTab,
                                 {
                                   visible: currentPlugin === id,
                                   mobileOnly,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Render2, {})
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
                                 },
                                 id
                               )
@@ -14548,7 +14530,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                     Sidebar,
                     {
                       position: "left",
@@ -14557,20 +14539,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Render2, {})
+                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                     Sidebar,
                     {
                       position: "right",
@@ -14578,7 +14560,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldSideBar, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldSideBar, {})
                     }
                   )
                 ]
@@ -14586,17 +14568,17 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { id: "editor-portal-root", className: getClassName44("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "editor-portal-root", className: getClassName43("portal") })
       ]
     }
   );
 };
 
 // components/Editor/index.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var propsContext = (0, import_react95.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => (0, import_react95.useContext)(propsContext);
 function EditorProvider({ children }) {
@@ -14780,10 +14762,10 @@ function EditorProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor4(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Layout, { children: props.children }) })) }));
 }
 Editor4.Components = Components;
 Editor4.Fields = Fields;
@@ -14791,9 +14773,349 @@ Editor4.Layout = Layout;
 Editor4.Outline = Outline;
 Editor4.Preview = Preview2;
 
+// components/App/AppProvider.tsx
+init_react_import();
+var import_react98 = require("react");
+var import_react_router2 = require("react-router");
+
+// lib/use-stable-value.ts
+init_react_import();
+var import_react96 = require("react");
+var import_fast_equals5 = require("fast-equals");
+var useStableValue = (value) => {
+  const ref = (0, import_react96.useRef)(value);
+  if (!(0, import_fast_equals5.deepEqual)(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+};
+
+// components/App/context.ts
+init_react_import();
+var import_react97 = require("react");
+var import_react_router = require("react-router");
+var appConfigContext = (0, import_react97.createContext)(null);
+var useAppConfigContext = () => {
+  const ctx = (0, import_react97.useContext)(appConfigContext);
+  if (!ctx) {
+    throw new Error("useApp must be called inside an <AppProvider> or <App>");
+  }
+  return ctx;
+};
+var stripPrefix = (path, prefix2) => {
+  if (path === prefix2) return "/";
+  if (!path.startsWith(`${prefix2}/`)) return path;
+  const rest = path.slice(prefix2.length);
+  return rest.startsWith("/") ? rest : `/${rest}`;
+};
+var useApp = () => {
+  const cfg = useAppConfigContext();
+  const location = (0, import_react_router.useLocation)();
+  const rrNavigate = (0, import_react_router.useNavigate)();
+  const currentPath = location.pathname || "/";
+  const isEditing = cfg.editorPath !== null && (currentPath === cfg.editorPath || currentPath.startsWith(`${cfg.editorPath}/`));
+  const matchRoute = isEditing ? stripPrefix(currentPath, cfg.editorPath) : currentPath;
+  const matched = (0, import_react97.useMemo)(() => {
+    const routeKeys = Object.keys(cfg.pages);
+    if (routeKeys.length === 0) return null;
+    const matches = (0, import_react_router.matchRoutes)(
+      routeKeys.map((path) => ({ path })),
+      matchRoute
+    );
+    if (!matches || matches.length === 0) return null;
+    const last = matches[matches.length - 1];
+    const key = last.route.path;
+    return {
+      route: key,
+      params: last.params,
+      data: cfg.pages[key]
+    };
+  }, [cfg.pages, matchRoute]);
+  const routes = (0, import_react97.useMemo)(() => Object.keys(cfg.pages), [cfg.pages]);
+  const navigate = (route) => {
+    const target = isEditing && cfg.editorPath ? `${cfg.editorPath}${route === "/" ? "" : route}` || "/" : route;
+    rrNavigate(target || "/");
+  };
+  return __spreadProps(__spreadValues({}, cfg), {
+    routes,
+    currentPath,
+    isEditing,
+    matchRoute,
+    matched,
+    navigate
+  });
+};
+
+// components/App/AppProvider.tsx
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var EDITOR_PATH = "/editor";
+var isServer = typeof window === "undefined";
+function AppProvider({
+  config,
+  pages,
+  editorPath = EDITOR_PATH,
+  router = "browser",
+  currentPath,
+  children
+}) {
+  const stablePages = useStableValue(pages);
+  const resolvedEditorPath = editorPath === null ? null : editorPath || EDITOR_PATH;
+  const ctxValue = (0, import_react98.useMemo)(
+    () => ({
+      config,
+      pages: stablePages,
+      editorPath: resolvedEditorPath
+    }),
+    [config, stablePages, resolvedEditorPath]
+  );
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(appConfigContext.Provider, { value: ctxValue, children });
+  if (isServer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+  }
+  if (router === "hash") {
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.HashRouter, { children: inner });
+  }
+  if (router === "memory") {
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.BrowserRouter, { children: inner });
+}
+
+// components/App/App.tsx
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var joinEditorPath = (editorPath, route) => {
+  if (route === "/") return editorPath;
+  return `${editorPath}${route}`;
+};
+var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  "div",
+  {
+    style: {
+      display: "flex",
+      height: "100vh",
+      textAlign: "center",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("h1", { children: "404" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { children: "No page matches this route." })
+    ] })
+  }
+);
+function RenderForKey({
+  routeKey,
+  metadata
+}) {
+  const { config, pages } = useApp();
+  const data = pages[routeKey];
+  if (!data) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    Render,
+    {
+      config,
+      data,
+      metadata
+    },
+    routeKey
+  );
+}
+function EditorForKey({
+  routeKey,
+  editorProps,
+  children
+}) {
+  const { config, pages, routes, navigate } = useApp();
+  const data = pages[routeKey];
+  if (!data) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    Editor4,
+    {
+      config,
+      data,
+      ui: editorProps.ui,
+      plugins: editorProps.plugins,
+      overrides: editorProps.overrides,
+      fieldTransforms: editorProps.fieldTransforms,
+      metadata: editorProps.metadata,
+      iframe: editorProps.iframe,
+      viewports: editorProps.viewports,
+      permissions: editorProps.permissions,
+      onChange: editorProps.onChange,
+      onPublish: editorProps.onPublish,
+      onAction: editorProps.onAction,
+      renderHeader: editorProps.renderHeader,
+      renderHeaderActions: editorProps.renderHeaderActions,
+      title: editorProps.title,
+      dnd: editorProps.dnd,
+      initialHistory: editorProps.initialHistory,
+      height: editorProps.height,
+      fullScreenCanvas: editorProps.fullScreenCanvas,
+      disableZoomControls: editorProps.disableZoomControls,
+      _experimentalVirtualization: editorProps._experimentalVirtualization,
+      routes,
+      currentRoute: routeKey,
+      onRouteChange: (next) => navigate(next),
+      children
+    },
+    routeKey
+  );
+}
+function AppRender({ metadata, renderNotFound }) {
+  const { pages, isEditing } = useApp();
+  if (isEditing) return null;
+  const routeKeys = Object.keys(pages);
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      import_react_router3.Route,
+      {
+        path: routeKey,
+        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          RenderForKey,
+          {
+            routeKey,
+            metadata
+          }
+        )
+      },
+      `render:${routeKey}`
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      import_react_router3.Route,
+      {
+        path: "*",
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultNotFound, {})
+      }
+    )
+  ] });
+}
+function AppEditor(props) {
+  const _a = props, { children, renderNotFound } = _a, editorProps = __objRest(_a, ["children", "renderNotFound"]);
+  const { pages, isEditing, editorPath } = useApp();
+  if (!isEditing || editorPath === null) return null;
+  const routeKeys = Object.keys(pages);
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      import_react_router3.Route,
+      {
+        path: joinEditorPath(editorPath, routeKey),
+        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          EditorForKey,
+          {
+            routeKey,
+            editorProps,
+            children
+          }
+        )
+      },
+      `edit:${routeKey}`
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      import_react_router3.Route,
+      {
+        path: "*",
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultNotFound, {})
+      }
+    )
+  ] });
+}
+function DefaultAppLayout(props) {
+  const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      AppRender,
+      {
+        metadata: editorProps.metadata,
+        renderNotFound
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+  ] });
+}
+function App(props) {
+  const _a = props, {
+    config,
+    pages,
+    currentPath,
+    editorPath,
+    router,
+    children
+  } = _a, layoutProps = __objRest(_a, [
+    "config",
+    "pages",
+    "currentPath",
+    "editorPath",
+    "router",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    AppProvider,
+    {
+      config,
+      pages,
+      currentPath,
+      editorPath,
+      router,
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
+    }
+  );
+}
+App.Render = AppRender;
+App.Editor = AppEditor;
+
+// components/App/use-route-params.ts
+init_react_import();
+var import_react_router4 = require("react-router");
+var useRouteParams = import_react_router4.useParams;
+
 // bundle/core.ts
+init_IconButton2();
 init_inner();
 
+// lib/get-route-props.ts
+init_react_import();
+var import_react_router5 = require("react-router");
+var DEFAULT_EDITOR_PATH = "/editor";
+var stripEditorPrefix = (currentRoute, editorPath) => {
+  if (!editorPath) return currentRoute;
+  if (currentRoute === editorPath) return "/";
+  if (!currentRoute.startsWith(`${editorPath}/`)) return currentRoute;
+  const rest = currentRoute.slice(editorPath.length);
+  return rest.startsWith("/") ? rest : `/${rest}`;
+};
+var findMatch = (pages, pathname) => {
+  const keys = Object.keys(pages);
+  if (keys.length === 0) return null;
+  const matches = (0, import_react_router5.matchRoutes)(
+    keys.map((path) => ({ path })),
+    pathname
+  );
+  if (!matches || matches.length === 0) return null;
+  const last = matches[matches.length - 1];
+  const key = last.route.path;
+  return { route: key, params: last.params, data: pages[key] };
+};
+var getRouteProps = (pages, currentRoute, options = {}) => {
+  var _a, _b;
+  const editorPath = options.editorPath === void 0 ? DEFAULT_EDITOR_PATH : options.editorPath;
+  const matchRoute = stripEditorPrefix(currentRoute || "/", editorPath);
+  const match = findMatch(pages, matchRoute);
+  if (!match) return null;
+  const props = (_b = (_a = match.data) == null ? void 0 : _a.root) == null ? void 0 : _b.props;
+  return props != null ? props : null;
+};
+var resolveRouteFromString = (pages, currentRoute, options = {}) => {
+  const editorPath = options.editorPath === void 0 ? DEFAULT_EDITOR_PATH : options.editorPath;
+  const matchRoute = stripEditorPrefix(currentRoute || "/", editorPath);
+  const match = findMatch(pages, matchRoute);
+  if (!match) return null;
+  return {
+    route: match.route,
+    data: match.data,
+    params: match.params
+  };
+};
+
 // lib/migrate.ts
 init_react_import();
 init_default_app_state();
@@ -15067,20 +15389,41 @@ function resolveAllData(_0, _1) {
 // bundle/core.ts
 init_walk_tree();
 
+// plugins/outline/index.tsx
+init_react_import();
+init_lucide_react();
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
+init_react_import();
+var styles_module_default36 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+
+// plugins/outline/index.tsx
+init_lib();
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var getClassName44 = get_class_name_factory_default("OutlinePlugin", styles_module_default36);
+var outlinePlugin = () => ({
+  name: "outline",
+  label: "Outline",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: getClassName44(), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Layers, {})
+});
+
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Outline, {}) })
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Components, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Outline, {}) })
   ] })
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Action,
   ActionBar,
+  App,
+  AppProvider,
   AutoField,
   Button,
   ComponentList,
@@ -15093,9 +15436,11 @@ var legacySideBarPlugin = () => ({
   Render,
   RichTextMenu,
   Separator,
+  appConfigContext,
   blocksPlugin,
   createUseEditor,
   fieldsPlugin,
+  getRouteProps,
   legacySideBarPlugin,
   migrate,
   outlinePlugin,
@@ -15104,11 +15449,15 @@ var legacySideBarPlugin = () => ({
   registerOverlayPortal,
   renderContext,
   resolveAllData,
+  resolveRouteFromString,
   setDeep,
   transformProps,
+  useApp,
   useEditor,
   useGetEditor,
   usePropsContext,
+  useRouteParams,
+  useStableValue,
   walkTree
 });
 /*! Bundled license information: