@reacteditor/core 0.0.10 → 0.0.12

package/dist/index.js

@@ -3165,6 +3165,7 @@ var init_default_app_state = __esm({
       ui: {
         leftSideBarVisible: true,
         rightSideBarVisible: true,
+        navBarVisible: true,
         arrayState: {},
         itemSelector: null,
         componentList: {},
@@ -8159,7 +8160,7 @@ 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_default18 = { "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();
@@ -10342,15 +10343,6 @@ var DropZoneEdit = (0, import_react69.forwardRef)(
         }
       }
     }, [zoneType, appStoreApi]);
-    (0, import_react69.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_react69.useMemo)(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
@@ -12980,7 +12972,7 @@ init_lib();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "Editor": "_Editor_1ty8s_19", "Editor-portal": "_Editor-portal_1ty8s_32", "EditorLayout": "_EditorLayout_1ty8s_37", "EditorLayout-inner": "_EditorLayout-inner_1ty8s_41", "Editor--hidePlugins": "_Editor--hidePlugins_1ty8s_73", "EditorLayout--mounted": "_EditorLayout--mounted_1ty8s_78", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_1ty8s_82", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_1ty8s_82", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_1ty8s_87", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_1ty8s_105", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_1ty8s_127", "EditorLayout-mounted": "_EditorLayout-mounted_1ty8s_146", "EditorLayout-nav": "_EditorLayout-nav_1ty8s_187", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_1ty8s_203", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_1ty8s_213", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_1ty8s_219", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_1ty8s_225", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_1ty8s_245", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_1ty8s_252", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_1ty8s_266", "EditorPluginTab": "_EditorPluginTab_1ty8s_273", "EditorPluginTab--visible": "_EditorPluginTab--visible_1ty8s_279", "EditorPluginTab-body": "_EditorPluginTab-body_1ty8s_284" };
+var styles_module_default25 = { "Editor": "_Editor_frglt_19", "Editor-portal": "_Editor-portal_frglt_32", "EditorLayout": "_EditorLayout_frglt_37", "EditorLayout-inner": "_EditorLayout-inner_frglt_41", "Editor--hidePlugins": "_Editor--hidePlugins_frglt_73", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_frglt_74", "EditorLayout--mounted": "_EditorLayout--mounted_frglt_83", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_frglt_87", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_frglt_87", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_frglt_92", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_frglt_110", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_frglt_132", "EditorLayout-mounted": "_EditorLayout-mounted_frglt_151", "EditorLayout-nav": "_EditorLayout-nav_frglt_192", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_frglt_208", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_frglt_218", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_frglt_224", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_frglt_230", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_frglt_250", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_frglt_257", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_frglt_271", "EditorPluginTab": "_EditorPluginTab_frglt_278", "EditorPluginTab--visible": "_EditorPluginTab--visible_frglt_284", "EditorPluginTab-body": "_EditorPluginTab-body_frglt_289" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -14124,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();
@@ -14150,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;
@@ -14167,17 +14140,17 @@ 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 = () => {
@@ -14190,30 +14163,30 @@ 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: () => {
@@ -14232,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 = ({
@@ -14242,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 {
@@ -14265,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,
@@ -14409,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")),
@@ -14417,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,
@@ -14434,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");
@@ -14473,39 +14447,40 @@ 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({
               leftSideBarVisible,
               mounted,
               rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
+              navBarVisible,
               mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content",
               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",
@@ -14516,19 +14491,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")
@@ -14536,17 +14511,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
                               )
@@ -14556,7 +14531,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                     Sidebar,
                     {
                       position: "left",
@@ -14565,20 +14540,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",
@@ -14586,7 +14561,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, {})
                     }
                   )
                 ]
@@ -14594,17 +14569,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 }) {
@@ -14788,10 +14763,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;
@@ -14873,7 +14848,7 @@ var useApp = () => {
 };
 
 // components/App/AppProvider.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -14894,26 +14869,26 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_router2.StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    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_runtime95.jsx)(import_react_router2.HashRouter, { children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_router2.BrowserRouter, { children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
+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_runtime96.jsx)(
+var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
   "div",
   {
     style: {
@@ -14923,20 +14898,20 @@ var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("h1", { children: "404" }),
-      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { children: "No page matches this route." })
+    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 RenderRoute({
+function RenderForKey({
   routeKey,
   metadata
 }) {
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     Render,
     {
       config,
@@ -14946,91 +14921,118 @@ function RenderRoute({
     routeKey
   );
 }
-function EditorRouteRender({
+function EditorForKey({
   routeKey,
-  layoutProps
+  editorProps,
+  children
 }) {
-  const {
-    onPublish,
-    onChange,
-    plugins,
-    overrides,
-    fieldTransforms,
-    metadata,
-    iframe,
-    viewports,
-    permissions
-  } = layoutProps;
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     Editor4,
     {
       config,
       data,
-      plugins,
-      overrides,
-      fieldTransforms,
-      metadata,
-      iframe,
-      viewports,
-      permissions,
-      onChange,
-      onPublish,
+      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)
+      onRouteChange: (next) => navigate(next),
+      children
     },
     routeKey
   );
 }
-function NotFoundRoute({
-  renderNotFound
-}) {
-  return renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(DefaultNotFound, {});
-}
-function AppLayout(layoutProps) {
-  const { pages, editorPath } = useApp();
-  const renderRoutes = Object.keys(pages);
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_react_router3.Routes, { children: [
-    renderRoutes.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+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_runtime96.jsx)(
-          RenderRoute,
+        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          RenderForKey,
           {
             routeKey,
-            metadata: layoutProps.metadata
+            metadata
           }
         )
       },
       `render:${routeKey}`
     )),
-    editorPath !== null && renderRoutes.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    /* @__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_runtime96.jsx)(
-          EditorRouteRender,
+        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          EditorForKey,
           {
             routeKey,
-            layoutProps
+            editorProps,
+            children
           }
         )
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       import_react_router3.Route,
       {
         path: "*",
-        element: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(NotFoundRoute, { renderNotFound: layoutProps.renderNotFound })
+        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,
@@ -15047,7 +15049,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     AppProvider,
     {
       config,
@@ -15055,10 +15057,12 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(AppLayout, __spreadValues({}, layoutProps))
+      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();
@@ -15386,6 +15390,25 @@ 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_runtime97 = require("react/jsx-runtime");