@reacteditor/core 0.0.14 → 0.0.16

package/dist/no-external.js

@@ -12005,7 +12005,7 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var styles_module_default23 = { "EditorPreview": "_EditorPreview_1ybfe_1", "EditorPreview-frame": "_EditorPreview-frame_1ybfe_6" };
 
 // components/Editor/components/Preview/index.tsx
 init_lib();
@@ -12972,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_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" };
+var styles_module_default25 = { "Editor": "_Editor_l0swf_19", "Editor-portal": "_Editor-portal_l0swf_32", "EditorLayout": "_EditorLayout_l0swf_37", "EditorLayout-inner": "_EditorLayout-inner_l0swf_41", "Editor--hidePlugins": "_Editor--hidePlugins_l0swf_72", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_l0swf_73", "EditorLayout--mounted": "_EditorLayout--mounted_l0swf_82", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_l0swf_86", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_l0swf_86", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_l0swf_91", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_l0swf_109", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_l0swf_129", "EditorLayout-mounted": "_EditorLayout-mounted_l0swf_146", "EditorLayout-header": "_EditorLayout-header_l0swf_187", "EditorHeader": "_EditorHeader_l0swf_194", "EditorHeader-plugins": "_EditorHeader-plugins_l0swf_221", "EditorHeader-pluginItem": "_EditorHeader-pluginItem_l0swf_235", "EditorHeader-pluginItem--mobileOnly": "_EditorHeader-pluginItem--mobileOnly_l0swf_241", "EditorHeader-pluginItem--desktopOnly": "_EditorHeader-pluginItem--desktopOnly_l0swf_246", "EditorHeader-urlBarSlot": "_EditorHeader-urlBarSlot_l0swf_256", "EditorHeader-actions": "_EditorHeader-actions_l0swf_274", "EditorHeader-history": "_EditorHeader-history_l0swf_282", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_l0swf_288", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_l0swf_308", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_l0swf_315", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_l0swf_329", "EditorPluginTab": "_EditorPluginTab_l0swf_336", "EditorPluginTab--visible": "_EditorPluginTab--visible_l0swf_342", "EditorPluginTab-body": "_EditorPluginTab-body_l0swf_347" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -13286,7 +13286,7 @@ function ComboboxEmpty(_a) {
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default29 = { "BrowserBar": "_BrowserBar_coofe_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_coofe_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_coofe_46", "BrowserBar-urlText": "_BrowserBar-urlText_coofe_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_coofe_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_coofe_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_coofe_74", "BrowserBar-actions": "_BrowserBar-actions_coofe_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_coofe_92" };
+var styles_module_default29 = { "BrowserBar": "_BrowserBar_glswb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_glswb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_glswb_46", "BrowserBar-urlText": "_BrowserBar-urlText_glswb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_glswb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_glswb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_glswb_74", "BrowserBar-actions": "_BrowserBar-actions_glswb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_glswb_92" };
 
 // components/BrowserBar/index.tsx
 var import_jsx_runtime84 = require("react/jsx-runtime");
@@ -13300,33 +13300,9 @@ var DEVICE_VIEWPORTS = {
   desktop: { width: "100%", height: "auto", icon: "Monitor", label: "Desktop" },
   mobile: { width: 360, height: "auto", icon: "Smartphone", label: "Mobile" }
 };
-var BrowserBar = ({
-  onViewportChange
-}) => {
+var UrlBar = () => {
   const { routes, currentRoute, onRouteChange } = usePropsContext();
   const chrome = useChromeConfig();
-  const viewports = useAppStore((s) => s.state.ui.viewports);
-  const dispatch = useAppStore((s) => s.dispatch);
-  const isFullScreen = useAppStore(
-    (s) => {
-      var _a;
-      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
-    }
-  );
-  const toggleFullScreen = () => {
-    dispatch({
-      type: "setUi",
-      ui: { canvasFullScreen: !isFullScreen }
-    });
-  };
-  const activeDevice = (0, import_react87.useMemo)(() => {
-    const w = viewports.current.width;
-    if (typeof w === "number" && w <= 640) return "mobile";
-    return "desktop";
-  }, [viewports.current.width]);
-  const setDevice = (device) => {
-    onViewportChange == null ? void 0 : onViewportChange(DEVICE_VIEWPORTS[device]);
-  };
   const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
   const [inputValue, setInputValue] = (0, import_react87.useState)(currentRoute != null ? currentRoute : "");
   const lastSyncedPath = (0, import_react87.useRef)(currentRoute);
@@ -13339,11 +13315,9 @@ var BrowserBar = ({
     if (!next || next === currentRoute) return;
     void (onRouteChange == null ? void 0 : onRouteChange(next));
   };
-  if (!chrome.showUrlBar && !chrome.showDeviceToggle && !chrome.showFullScreenToggle) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36(), children: [
-    chrome.showUrlBar && (showRoutePicker ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  if (!chrome.showUrlBar) return null;
+  if (showRoutePicker) {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
       Combobox,
       {
         items: routes,
@@ -13384,36 +13358,60 @@ var BrowserBar = ({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36("urlTrigger"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Globe, { className: getClassName36("urlIcon"), size: 14 }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("urlText"), children: "/" })
-    ] })),
-    (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36("actions"), children: [
-      chrome.showDeviceToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        IconButton,
-        {
-          type: "button",
-          title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
-          onClick: () => setDevice(activeDevice === "desktop" ? "mobile" : "desktop"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Smartphone, { size: 16 }) })
-        }
-      ),
-      chrome.showFullScreenToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        IconButton,
-        {
-          type: "button",
-          title: isFullScreen ? "Exit full screen" : "Enter full screen",
-          onClick: toggleFullScreen,
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minimize, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Maximize, { size: 16 }) })
-        }
-      )
-    ] })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36("urlTrigger"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Globe, { className: getClassName36("urlIcon"), size: 14 }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("urlText"), children: "/" })
   ] });
 };
+var DeviceToggle = ({
+  onViewportChange
+}) => {
+  const chrome = useChromeConfig();
+  const viewports = useAppStore((s) => s.state.ui.viewports);
+  const activeDevice = (0, import_react87.useMemo)(() => {
+    const w = viewports.current.width;
+    if (typeof w === "number" && w <= 640) return "mobile";
+    return "desktop";
+  }, [viewports.current.width]);
+  if (!chrome.showDeviceToggle) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    IconButton,
+    {
+      type: "button",
+      title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
+      onClick: () => onViewportChange == null ? void 0 : onViewportChange(
+        DEVICE_VIEWPORTS[activeDevice === "desktop" ? "mobile" : "desktop"]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Smartphone, { size: 14 }) })
+    }
+  );
+};
+var FullScreenToggle = () => {
+  const chrome = useChromeConfig();
+  const dispatch = useAppStore((s) => s.dispatch);
+  const isFullScreen = useAppStore(
+    (s) => {
+      var _a;
+      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
+    }
+  );
+  if (!chrome.showFullScreenToggle) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    IconButton,
+    {
+      type: "button",
+      title: isFullScreen ? "Exit full screen" : "Enter full screen",
+      onClick: () => dispatch({ type: "setUi", ui: { canvasFullScreen: !isFullScreen } }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minimize, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Maximize, { size: 14 }) })
+    }
+  );
+};
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default30 = { "EditorCanvas": "_EditorCanvas_1aq14_1", "EditorCanvas-controls": "_EditorCanvas-controls_1aq14_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_1aq14_22", "EditorCanvas--canvasFullScreen": "_EditorCanvas--canvasFullScreen_1aq14_42", "EditorCanvas-inner": "_EditorCanvas-inner_1aq14_49", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_1aq14_62", "EditorCanvas-root": "_EditorCanvas-root_1aq14_62", "EditorCanvas--ready": "_EditorCanvas--ready_1aq14_99", "EditorCanvas-loader": "_EditorCanvas-loader_1aq14_104", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_1aq14_116", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_1aq14_125", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_1aq14_130" };
+var styles_module_default30 = { "EditorCanvas": "_EditorCanvas_10xv6_1", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_10xv6_24", "EditorCanvas--canvasFullScreen": "_EditorCanvas--canvasFullScreen_10xv6_40", "EditorCanvas-inner": "_EditorCanvas-inner_10xv6_47", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_10xv6_56", "EditorCanvas-root": "_EditorCanvas-root_10xv6_56", "EditorCanvas--ready": "_EditorCanvas--ready_10xv6_93", "EditorCanvas-loader": "_EditorCanvas-loader_10xv6_98", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_10xv6_110", "EditorCanvas-bottomBar": "_EditorCanvas-bottomBar_10xv6_119", "EditorCanvas-bottomBarPill": "_EditorCanvas-bottomBarPill_10xv6_131", "EditorCanvas-bottomBarDivider": "_EditorCanvas-bottomBarDivider_10xv6_144", "EditorCanvas-zoomLevel": "_EditorCanvas-zoomLevel_10xv6_151" };
 
 // components/Editor/components/Canvas/index.tsx
 init_lib();
@@ -13454,9 +13452,14 @@ var ZOOM_STEP = 0.15;
 var MIN_ZOOM = 0.25;
 var MAX_ZOOM = 3;
 var TRANSITION_DURATION = 150;
-var Canvas = () => {
+var Canvas = ({
+  themeIcon,
+  themeLabel,
+  onToggleTheme
+} = {}) => {
   var _a, _b;
   const { frameRef } = useCanvasFrame();
+  const chrome = useChromeConfig();
   const {
     viewports: viewportOptions = defaultViewports,
     ui: uiProp,
@@ -13639,12 +13642,7 @@ var Canvas = () => {
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("inner"), ref: frameRef, children: [
-        !disableZoomControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("zoomControls"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Minus, { size: 14 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(RotateCcw, { size: 14 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Plus, { size: 14 }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "div",
           {
             className: getClassName37("rootColumn"),
@@ -13654,40 +13652,76 @@ var Canvas = () => {
               transformOrigin: disableZoomControls ? void 0 : "center center",
               transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : disableZoomControls ? void 0 : "transform 150ms ease-out"
             },
-            children: [
-              iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("browserBar"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                BrowserBar,
-                {
-                  onViewportChange: (viewport) => {
-                    autoSelectingRef.current = false;
-                    setShowTransition(true);
-                    isResizingRef.current = true;
-                    const uiViewport = __spreadProps(__spreadValues({}, viewport), {
-                      height: viewport.height || "auto",
-                      zoom: 1
-                    });
-                    setUi({
-                      viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
-                    });
-                  }
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                "div",
-                {
-                  className: getClassName37("root"),
-                  suppressHydrationWarning: true,
-                  id: "editor-canvas-root",
-                  onTransitionEnd: () => {
-                    setShowTransition(false);
-                    isResizingRef.current = false;
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Preview2, {}) })
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              "div",
+              {
+                className: getClassName37("root"),
+                suppressHydrationWarning: true,
+                id: "editor-canvas-root",
+                onTransitionEnd: () => {
+                  setShowTransition(false);
+                  isResizingRef.current = false;
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Preview2, {}) })
+              }
+            )
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("bottomBar"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("bottomBarPill"), children: [
+          chrome.showThemeToggle && onToggleTheme && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            IconButton,
+            {
+              type: "button",
+              title: themeLabel != null ? themeLabel : "Toggle theme",
+              onClick: onToggleTheme,
+              children: themeIcon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            DeviceToggle,
+            {
+              onViewportChange: (viewport) => {
+                autoSelectingRef.current = false;
+                setShowTransition(true);
+                isResizingRef.current = true;
+                const uiViewport = __spreadProps(__spreadValues({}, viewport), {
+                  height: viewport.height || "auto",
+                  zoom: 1
+                });
+                setUi({
+                  viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FullScreenToggle, {}),
+          !disableZoomControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: getClassName37("bottomBarDivider") }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              IconButton,
+              {
+                type: "button",
+                title: "Zoom out",
+                onClick: zoomOut,
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Minus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: getClassName37("zoomLevel"), children: [
+              Math.round(canvasZoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Plus, { size: 14 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              IconButton,
+              {
+                type: "button",
+                title: "Reset zoom",
+                onClick: resetZoom,
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(RotateCcw, { size: 14 })
+              }
+            )
+          ] })
+        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Loader, { size: 24 }) })
       ] })
     }
@@ -14056,51 +14090,6 @@ var useClipboardHotkeys = () => {
   useHotkey({ ctrl: true, x: true }, cutSelectedComponent);
 };
 
-// components/Editor/components/Nav/index.tsx
-init_react_import();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
-init_react_import();
-var styles_module_default33 = { "Nav": "_Nav_1g4tk_1", "Nav-list": "_Nav-list_1g4tk_18", "Nav-footer": "_Nav-footer_1g4tk_42", "NavItem-link": "_NavItem-link_1g4tk_55", "NavItem-linkLabel": "_NavItem-linkLabel_1g4tk_83", "NavItem": "_NavItem_1g4tk_55", "NavItem-linkIcon": "_NavItem-linkIcon_1g4tk_108", "NavItem--active": "_NavItem--active_1g4tk_121", "NavItem--mobileOnly": "_NavItem--mobileOnly_1g4tk_132", "NavItem--desktopOnly": "_NavItem--desktopOnly_1g4tk_137" };
-
-// components/Editor/components/Nav/index.tsx
-init_lib();
-var import_jsx_runtime89 = require("react/jsx-runtime");
-var getClassName40 = get_class_name_factory_default("Nav", styles_module_default33);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default33);
-var MenuItem = ({
-  label,
-  icon,
-  onClick,
-  isActive,
-  mobileOnly,
-  desktopOnly
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-    "li",
-    {
-      className: getClassNameItem3({
-        active: isActive,
-        mobileOnly,
-        desktopOnly
-      }),
-      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
-    }
-  );
-};
-var Nav = ({
-  items,
-  footer
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("nav", { className: getClassName40(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("ul", { className: getClassName40("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName40("footer"), children: footer })
-  ] });
-};
-
 // components/Editor/components/Layout/index.tsx
 init_IconButton2();
 init_lucide_react();
@@ -14111,17 +14100,17 @@ init_lucide_react();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
 init_react_import();
-var styles_module_default34 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
+var styles_module_default33 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
 
 // plugins/blocks/index.tsx
 init_lib();
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var getClassName41 = get_class_name_factory_default("BlocksPlugin", styles_module_default34);
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var getClassName40 = get_class_name_factory_default("BlocksPlugin", styles_module_default33);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Components, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Plus, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Components, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Plus, {})
 });
 
 // plugins/fields/index.tsx
@@ -14131,12 +14120,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_default35 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+var styles_module_default34 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
 
 // plugins/fields/index.tsx
 init_lib();
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var getClassName42 = get_class_name_factory_default("FieldsPlugin", styles_module_default35);
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var getClassName41 = get_class_name_factory_default("FieldsPlugin", styles_module_default34);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     var _a, _b;
@@ -14148,20 +14137,23 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "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, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName41(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName41("header"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
 // components/Editor/components/Layout/index.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var getClassName43 = get_class_name_factory_default("Editor", styles_module_default25);
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var getClassName42 = 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 = () => {
+var getHeaderClassName = get_class_name_factory_default("EditorHeader", styles_module_default25);
+var TopHeader = ({
+  pluginItems
+}) => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
   const chrome = useChromeConfig();
@@ -14172,39 +14164,62 @@ var FieldSideBarToolbar = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName43("fieldSideBarToolbar"), children: [
-    chrome.showHistoryControls ? /* @__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_runtime92.jsx)(Undo2, { size: 18 })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-        IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("header", { className: getHeaderClassName(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getHeaderClassName("plugins"), children: Object.entries(pluginItems).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "span",
+      {
+        className: getHeaderClassName("pluginItem", {
+          mobileOnly: item.mobileOnly,
+          desktopOnly: item.desktopOnly
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          IconButton,
+          {
+            type: "button",
+            title: item.label,
+            onClick: item.onClick,
+            active: item.isActive,
+            children: item.icon
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getHeaderClassName("urlBarSlot"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(UrlBar, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getHeaderClassName("actions"), children: [
+      chrome.showHistoryControls && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getHeaderClassName("history"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          IconButton,
+          {
+            type: "button",
+            title: "undo",
+            disabled: !hasPast,
+            onClick: back,
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Undo2, { size: 18 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          IconButton,
+          {
+            type: "button",
+            title: "redo",
+            disabled: !hasFuture,
+            onClick: forward,
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Redo2, { size: 18 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        Button,
         {
-          type: "button",
-          title: "redo",
-          disabled: !hasFuture,
-          onClick: forward,
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Redo2, { size: 18 })
+          onClick: () => {
+            const data = appStore.getState().state.data;
+            onPublish && onPublish(data, currentRoute);
+          },
+          children: "Publish"
         }
-      )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", {}),
-    /* @__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, currentRoute);
-        },
-        children: "Publish"
-      }
-    ) }) })
+      ) })
+    ] })
   ] });
 };
 var FieldSideBar = () => {
@@ -14214,17 +14229,14 @@ 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_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, {}) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -14393,7 +14405,7 @@ var Layout = ({ children }) => {
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Sun, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Moon, { size: 14 });
   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")),
@@ -14418,7 +14430,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_runtime92.jsx)(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -14457,17 +14469,17 @@ var Layout = ({ children }) => {
   if (mobilePanelHeight && leftSideBarVisible) {
     mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "div",
     {
-      className: `Editor ${getClassName43({
+      className: `Editor ${getClassName42({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomEditor, { children: children || /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "div",
           {
             className: getLayoutClassName({
@@ -14480,40 +14492,26 @@ var Layout = ({ children }) => {
               mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
                 children: [
-                  navBarVisible && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                    Nav,
-                    {
-                      items: pluginItems,
-                      footer: chrome.showThemeToggle ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                        IconButton,
-                        {
-                          type: "button",
-                          title: themeLabel,
-                          onClick: toggleTheme,
-                          children: themeIcon
-                        }
-                      ) : void 0
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+                  navBarVisible && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TopHeader, { pluginItems }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
                     "div",
                     {
                       ref: mobilePanelRef,
                       className: getLayoutClassName("mobilePanel"),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                           "div",
                           {
                             className: getLayoutClassName("mobileDragHandle"),
                             onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
                             onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                               "div",
                               {
                                 className: getLayoutClassName("mobileDragHandlePill")
@@ -14521,17 +14519,17 @@ var Layout = ({ children }) => {
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                           "div",
                           {
                             className: getLayoutClassName("mobilePanelContent"),
                             children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                                 PluginTab,
                                 {
                                   visible: currentPlugin === id,
                                   mobileOnly,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Render2, {})
                                 },
                                 id
                               )
@@ -14541,7 +14539,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                     Sidebar,
                     {
                       position: "left",
@@ -14550,20 +14548,28 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
+                            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                    Canvas,
+                    {
+                      theme,
+                      themeIcon,
+                      themeLabel,
+                      onToggleTheme: toggleTheme
+                    }
+                  ),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                     Sidebar,
                     {
                       position: "right",
@@ -14571,7 +14577,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldSideBar, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FieldSideBar, {})
                     }
                   )
                 ]
@@ -14579,14 +14585,14 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "editor-portal-root", className: getClassName43("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { id: "editor-portal-root", className: getClassName42("portal") })
       ]
     }
   );
 };
 
 // components/Editor/index.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var CHROME_KEYS = [
   "showNavBar",
   "showThemeToggle",
@@ -14618,7 +14624,7 @@ var splitUiConfig = (ui) => {
 };
 var propsContext = (0, import_react95.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => (0, import_react95.useContext)(propsContext);
 var useChromeConfig = () => {
@@ -14808,10 +14814,10 @@ function EditorProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor4(props) {
-  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 }) })) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Layout, { children: props.children }) })) }));
 }
 Editor4.Components = Components;
 Editor4.Fields = Fields;
@@ -14893,7 +14899,7 @@ var useApp = () => {
 };
 
 // components/App/AppProvider.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -14914,26 +14920,26 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime93.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.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_runtime93.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.BrowserRouter, { children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router2.BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
   "div",
   {
     style: {
@@ -14943,9 +14949,9 @@ var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       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." })
+    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("h1", { children: "404" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { children: "No page matches this route." })
     ] })
   }
 );
@@ -14956,7 +14962,7 @@ function RenderForKey({
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     Render,
     {
       config,
@@ -14974,7 +14980,7 @@ function EditorForKey({
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     Editor4,
     {
       config,
@@ -15011,12 +15017,12 @@ 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react_router3.Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           RenderForKey,
           {
             routeKey,
@@ -15026,11 +15032,11 @@ function AppRender({ metadata, renderNotFound }) {
       },
       `render:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime94.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, {})
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DefaultNotFound, {})
       }
     )
   ] });
@@ -15040,12 +15046,12 @@ function AppEditor(props) {
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react_router3.Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           EditorForKey,
           {
             routeKey,
@@ -15056,26 +15062,26 @@ function AppEditor(props) {
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime94.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, {})
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime94.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       AppRender,
       {
         metadata: editorProps.metadata,
         renderNotFound
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
   ] });
 }
 function App(props) {
@@ -15094,7 +15100,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     AppProvider,
     {
       config,
@@ -15102,7 +15108,7 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
@@ -15441,27 +15447,27 @@ 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" };
+var styles_module_default35 = { "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 import_jsx_runtime95 = require("react/jsx-runtime");
+var getClassName43 = get_class_name_factory_default("OutlinePlugin", styles_module_default35);
 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, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassName43(), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Outline, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Layers, {})
 });
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  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, {}) })
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Components, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) })
   ] })
 });
 // Annotate the CommonJS export names for ESM import in node: