@reacteditor/core 0.0.14 → 0.0.16

package/dist/{chunk-IFFNAAXW.mjs → chunk-3NSI5XES.mjs}

@@ -6751,7 +6751,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_default20 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var styles_module_default20 = { "EditorPreview": "_EditorPreview_1ybfe_1", "EditorPreview-frame": "_EditorPreview-frame_1ybfe_6" };
 
 // components/Editor/components/Preview/index.tsx
 import { Fragment as Fragment10, jsx as jsx42 } from "react/jsx-runtime";
@@ -7403,7 +7403,7 @@ import {
 
 // 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_default22 = { "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_default22 = { "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();
@@ -7619,7 +7619,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_default25 = { "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_default25 = { "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
 import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -7633,33 +7633,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 = useMemo20(() => {
-    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] = useState20(currentRoute != null ? currentRoute : "");
   const lastSyncedPath = useRef13(currentRoute);
@@ -7672,11 +7648,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__ */ jsxs20("div", { className: getClassName29(), children: [
-    chrome.showUrlBar && (showRoutePicker ? /* @__PURE__ */ jsxs20(
+  if (!chrome.showUrlBar) return null;
+  if (showRoutePicker) {
+    return /* @__PURE__ */ jsxs20(
       Combobox,
       {
         items: routes,
@@ -7717,36 +7691,60 @@ var BrowserBar = ({
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsxs20("div", { className: getClassName29("urlTrigger"), children: [
-      /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
-      /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
-    ] })),
-    (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ jsxs20("div", { className: getClassName29("actions"), children: [
-      chrome.showDeviceToggle && /* @__PURE__ */ jsx48(
-        IconButton,
-        {
-          type: "button",
-          title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
-          onClick: () => setDevice(activeDevice === "desktop" ? "mobile" : "desktop"),
-          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 16 }) : /* @__PURE__ */ jsx48(Smartphone, { size: 16 }) })
-        }
-      ),
-      chrome.showFullScreenToggle && /* @__PURE__ */ jsx48(
-        IconButton,
-        {
-          type: "button",
-          title: isFullScreen ? "Exit full screen" : "Enter full screen",
-          onClick: toggleFullScreen,
-          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 16 }) : /* @__PURE__ */ jsx48(Maximize, { size: 16 }) })
-        }
-      )
-    ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs20("div", { className: getClassName29("urlTrigger"), children: [
+    /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+    /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
   ] });
 };
+var DeviceToggle = ({
+  onViewportChange
+}) => {
+  const chrome = useChromeConfig();
+  const viewports = useAppStore((s) => s.state.ui.viewports);
+  const activeDevice = useMemo20(() => {
+    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__ */ jsx48(
+    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__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 14 }) : /* @__PURE__ */ jsx48(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__ */ jsx48(
+    IconButton,
+    {
+      type: "button",
+      title: isFullScreen ? "Exit full screen" : "Enter full screen",
+      onClick: () => dispatch({ type: "setUi", ui: { canvasFullScreen: !isFullScreen } }),
+      children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 14 }) : /* @__PURE__ */ jsx48(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_default26 = { "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_default26 = { "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
 import { useShallow as useShallow9 } from "zustand/react/shallow";
@@ -7788,9 +7786,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,
@@ -7973,12 +7976,7 @@ var Canvas = () => {
         }
       },
       children: /* @__PURE__ */ jsxs21("div", { className: getClassName30("inner"), ref: frameRef, children: [
-        !disableZoomControls && /* @__PURE__ */ jsxs21("div", { className: getClassName30("zoomControls"), children: [
-          /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx50(Minus, { size: 14 }) }),
-          /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ jsx50(RotateCcw, { size: 14 }) }),
-          /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx50(Plus, { size: 14 }) })
-        ] }),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx50(
           "div",
           {
             className: getClassName30("rootColumn"),
@@ -7988,40 +7986,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__ */ jsx50("div", { className: getClassName30("browserBar"), children: /* @__PURE__ */ jsx50(
-                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__ */ jsx50(
-                "div",
-                {
-                  className: getClassName30("root"),
-                  suppressHydrationWarning: true,
-                  id: "editor-canvas-root",
-                  onTransitionEnd: () => {
-                    setShowTransition(false);
-                    isResizingRef.current = false;
-                  },
-                  children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx50(
+              "div",
+              {
+                className: getClassName30("root"),
+                suppressHydrationWarning: true,
+                id: "editor-canvas-root",
+                onTransitionEnd: () => {
+                  setShowTransition(false);
+                  isResizingRef.current = false;
+                },
+                children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
+              }
+            )
           }
         ),
+        /* @__PURE__ */ jsx50("div", { className: getClassName30("bottomBar"), children: /* @__PURE__ */ jsxs21("div", { className: getClassName30("bottomBarPill"), children: [
+          chrome.showThemeToggle && onToggleTheme && /* @__PURE__ */ jsx50(
+            IconButton,
+            {
+              type: "button",
+              title: themeLabel != null ? themeLabel : "Toggle theme",
+              onClick: onToggleTheme,
+              children: themeIcon
+            }
+          ),
+          /* @__PURE__ */ jsx50(
+            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__ */ jsx50(FullScreenToggle, {}),
+          !disableZoomControls && /* @__PURE__ */ jsxs21(Fragment13, { children: [
+            /* @__PURE__ */ jsx50("span", { className: getClassName30("bottomBarDivider") }),
+            /* @__PURE__ */ jsx50(
+              IconButton,
+              {
+                type: "button",
+                title: "Zoom out",
+                onClick: zoomOut,
+                children: /* @__PURE__ */ jsx50(Minus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxs21("span", { className: getClassName30("zoomLevel"), children: [
+              Math.round(canvasZoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx50(Plus, { size: 14 }) }),
+            /* @__PURE__ */ jsx50(
+              IconButton,
+              {
+                type: "button",
+                title: "Reset zoom",
+                onClick: resetZoom,
+                children: /* @__PURE__ */ jsx50(RotateCcw, { size: 14 })
+              }
+            )
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
       ] })
     }
@@ -8381,56 +8415,15 @@ 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_default29 = { "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
-import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
-var getClassName33 = get_class_name_factory_default("Nav", styles_module_default29);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default29);
-var MenuItem = ({
-  label,
-  icon,
-  onClick,
-  isActive,
-  mobileOnly,
-  desktopOnly
-}) => {
-  return /* @__PURE__ */ jsx53(
-    "li",
-    {
-      className: getClassNameItem3({
-        active: isActive,
-        mobileOnly,
-        desktopOnly
-      }),
-      children: onClick && /* @__PURE__ */ jsxs23("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
-    }
-  );
-};
-var Nav = ({
-  items,
-  footer
-}) => {
-  return /* @__PURE__ */ jsxs23("nav", { className: getClassName33(), children: [
-    /* @__PURE__ */ jsx53("ul", { className: getClassName33("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx53(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ jsx53("div", { className: getClassName33("footer"), children: footer })
-  ] });
-};
-
 // components/Editor/components/Layout/index.tsx
-import { Fragment as Fragment15, jsx as jsx54, jsxs as jsxs24 } from "react/jsx-runtime";
-var getClassName34 = get_class_name_factory_default("Editor", styles_module_default22);
+import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
+var getClassName33 = get_class_name_factory_default("Editor", styles_module_default22);
 var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default22);
 var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default22);
-var FieldSideBarToolbar = () => {
+var getHeaderClassName = get_class_name_factory_default("EditorHeader", styles_module_default22);
+var TopHeader = ({
+  pluginItems
+}) => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
   const chrome = useChromeConfig();
@@ -8441,39 +8434,62 @@ var FieldSideBarToolbar = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
-  return /* @__PURE__ */ jsxs24("div", { className: getClassName34("fieldSideBarToolbar"), children: [
-    chrome.showHistoryControls ? /* @__PURE__ */ jsxs24("div", { className: getClassName34("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ jsx54(
-        IconButton,
-        {
-          type: "button",
-          title: "undo",
-          disabled: !hasPast,
-          onClick: back,
-          children: /* @__PURE__ */ jsx54(Undo2, { size: 18 })
-        }
-      ),
-      /* @__PURE__ */ jsx54(
-        IconButton,
+  return /* @__PURE__ */ jsxs23("header", { className: getHeaderClassName(), children: [
+    /* @__PURE__ */ jsx53("div", { className: getHeaderClassName("plugins"), children: Object.entries(pluginItems).map(([key, item]) => /* @__PURE__ */ jsx53(
+      "span",
+      {
+        className: getHeaderClassName("pluginItem", {
+          mobileOnly: item.mobileOnly,
+          desktopOnly: item.desktopOnly
+        }),
+        children: /* @__PURE__ */ jsx53(
+          IconButton,
+          {
+            type: "button",
+            title: item.label,
+            onClick: item.onClick,
+            active: item.isActive,
+            children: item.icon
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsx53("div", { className: getHeaderClassName("urlBarSlot"), children: /* @__PURE__ */ jsx53(UrlBar, {}) }),
+    /* @__PURE__ */ jsxs23("div", { className: getHeaderClassName("actions"), children: [
+      chrome.showHistoryControls && /* @__PURE__ */ jsxs23("div", { className: getHeaderClassName("history"), children: [
+        /* @__PURE__ */ jsx53(
+          IconButton,
+          {
+            type: "button",
+            title: "undo",
+            disabled: !hasPast,
+            onClick: back,
+            children: /* @__PURE__ */ jsx53(Undo2, { size: 18 })
+          }
+        ),
+        /* @__PURE__ */ jsx53(
+          IconButton,
+          {
+            type: "button",
+            title: "redo",
+            disabled: !hasFuture,
+            onClick: forward,
+            children: /* @__PURE__ */ jsx53(Redo2, { size: 18 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx53(CustomHeaderActions, { children: /* @__PURE__ */ jsx53(
+        Button,
         {
-          type: "button",
-          title: "redo",
-          disabled: !hasFuture,
-          onClick: forward,
-          children: /* @__PURE__ */ jsx54(Redo2, { size: 18 })
+          onClick: () => {
+            const data = appStore.getState().state.data;
+            onPublish && onPublish(data, currentRoute);
+          },
+          children: "Publish"
         }
-      )
-    ] }) : /* @__PURE__ */ jsx54("div", {}),
-    /* @__PURE__ */ jsx54("div", { className: getClassName34("fieldSideBarActions"), children: /* @__PURE__ */ jsx54(CustomHeaderActions, { children: /* @__PURE__ */ jsx54(
-      Button,
-      {
-        onClick: () => {
-          const data = appStore.getState().state.data;
-          onPublish && onPublish(data, currentRoute);
-        },
-        children: "Publish"
-      }
-    ) }) })
+      ) })
+    ] })
   ] });
 };
 var FieldSideBar = () => {
@@ -8483,17 +8499,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__ */ jsxs24(Fragment15, { children: [
-    /* @__PURE__ */ jsx54(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ jsx54(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx54(Fields, {}) })
-  ] });
+  return /* @__PURE__ */ jsx53(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx53(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx53("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx53("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -8662,7 +8675,7 @@ var Layout = ({ children }) => {
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx54(Sun, { size: 18 }) : /* @__PURE__ */ jsx54(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx53(Sun, { size: 14 }) : /* @__PURE__ */ jsx53(Moon, { size: 14 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
   const hasLegacySideBarPlugin = useMemo23(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
@@ -8687,7 +8700,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx54(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx53(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -8726,17 +8739,17 @@ var Layout = ({ children }) => {
   if (mobilePanelHeight && leftSideBarVisible) {
     mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
   }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: `Editor ${getClassName34({
+      className: `Editor ${getClassName33({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx54(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx54(CustomEditor, { children: children || /* @__PURE__ */ jsx54(FrameProvider, { children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx53(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx53(CustomEditor, { children: children || /* @__PURE__ */ jsx53(FrameProvider, { children: /* @__PURE__ */ jsx53(
           "div",
           {
             className: getLayoutClassName({
@@ -8749,40 +8762,26 @@ var Layout = ({ children }) => {
               mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs24(
+            children: /* @__PURE__ */ jsxs23(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
                 children: [
-                  navBarVisible && /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx54(
-                    Nav,
-                    {
-                      items: pluginItems,
-                      footer: chrome.showThemeToggle ? /* @__PURE__ */ jsx54(
-                        IconButton,
-                        {
-                          type: "button",
-                          title: themeLabel,
-                          onClick: toggleTheme,
-                          children: themeIcon
-                        }
-                      ) : void 0
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs24(
+                  navBarVisible && /* @__PURE__ */ jsx53("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx53(TopHeader, { pluginItems }) }),
+                  /* @__PURE__ */ jsxs23(
                     "div",
                     {
                       ref: mobilePanelRef,
                       className: getLayoutClassName("mobilePanel"),
                       children: [
-                        /* @__PURE__ */ jsx54(
+                        /* @__PURE__ */ jsx53(
                           "div",
                           {
                             className: getLayoutClassName("mobileDragHandle"),
                             onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
                             onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ jsx54(
+                            children: /* @__PURE__ */ jsx53(
                               "div",
                               {
                                 className: getLayoutClassName("mobileDragHandlePill")
@@ -8790,17 +8789,17 @@ var Layout = ({ children }) => {
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx54(
+                        /* @__PURE__ */ jsx53(
                           "div",
                           {
                             className: getLayoutClassName("mobilePanelContent"),
                             children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx54(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx53(
                                 PluginTab,
                                 {
                                   visible: currentPlugin === id,
                                   mobileOnly,
-                                  children: /* @__PURE__ */ jsx54(Render2, {})
+                                  children: /* @__PURE__ */ jsx53(Render2, {})
                                 },
                                 id
                               )
@@ -8810,7 +8809,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx53(
                     Sidebar,
                     {
                       position: "left",
@@ -8819,20 +8818,28 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx54(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx53(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ jsx54(Render2, {})
+                            children: /* @__PURE__ */ jsx53(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx54(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx53(
+                    Canvas,
+                    {
+                      theme,
+                      themeIcon,
+                      themeLabel,
+                      onToggleTheme: toggleTheme
+                    }
+                  ),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx53(
                     Sidebar,
                     {
                       position: "right",
@@ -8840,7 +8847,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx53(FieldSideBar, {})
                     }
                   )
                 ]
@@ -8848,14 +8855,14 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx54("div", { id: "editor-portal-root", className: getClassName34("portal") })
+        /* @__PURE__ */ jsx53("div", { id: "editor-portal-root", className: getClassName33("portal") })
       ]
     }
   );
 };
 
 // components/Editor/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var CHROME_KEYS = [
   "showNavBar",
   "showThemeToggle",
@@ -8887,7 +8894,7 @@ var splitUiConfig = (ui) => {
 };
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx55(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx54(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext15(propsContext);
 var useChromeConfig = () => {
@@ -9077,10 +9084,10 @@ function EditorProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx55(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx55(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ jsx54(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx54(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor3(props) {
-  return /* @__PURE__ */ jsx55(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx54(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx54(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx54(Layout, { children: props.children }) })) }));
 }
 Editor3.Components = Components;
 Editor3.Fields = Fields;
@@ -9165,7 +9172,7 @@ import {
   MemoryRouter,
   StaticRouter
 } from "react-router";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -9186,28 +9193,28 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ jsx56(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ jsx55(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ jsx56(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    return /* @__PURE__ */ jsx55(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
   }
   if (router === "hash") {
-    return /* @__PURE__ */ jsx56(HashRouter, { children: inner });
+    return /* @__PURE__ */ jsx55(HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ jsx56(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ jsx55(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ jsx56(BrowserRouter, { children: inner });
+  return /* @__PURE__ */ jsx55(BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
 init_react_import();
 import { Route, Routes } from "react-router";
-import { Fragment as Fragment16, jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ jsx57(
+var DefaultNotFound = () => /* @__PURE__ */ jsx56(
   "div",
   {
     style: {
@@ -9217,9 +9224,9 @@ var DefaultNotFound = () => /* @__PURE__ */ jsx57(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ jsxs25("div", { children: [
-      /* @__PURE__ */ jsx57("h1", { children: "404" }),
-      /* @__PURE__ */ jsx57("p", { children: "No page matches this route." })
+    children: /* @__PURE__ */ jsxs24("div", { children: [
+      /* @__PURE__ */ jsx56("h1", { children: "404" }),
+      /* @__PURE__ */ jsx56("p", { children: "No page matches this route." })
     ] })
   }
 );
@@ -9230,7 +9237,7 @@ function RenderForKey({
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx56(
     Render,
     {
       config,
@@ -9248,7 +9255,7 @@ function EditorForKey({
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx56(
     Editor3,
     {
       config,
@@ -9285,12 +9292,12 @@ function AppRender({ metadata, renderNotFound }) {
   const { pages, isEditing } = useApp();
   if (isEditing) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ jsxs25(Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs24(Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx56(
       Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ jsx57(
+        element: /* @__PURE__ */ jsx56(
           RenderForKey,
           {
             routeKey,
@@ -9300,11 +9307,11 @@ function AppRender({ metadata, renderNotFound }) {
       },
       `render:${routeKey}`
     )),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx56(
       Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ jsx57(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx57(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ jsx56(Fragment15, { children: renderNotFound() }) : /* @__PURE__ */ jsx56(DefaultNotFound, {})
       }
     )
   ] });
@@ -9314,12 +9321,12 @@ function AppEditor(props) {
   const { pages, isEditing, editorPath } = useApp();
   if (!isEditing || editorPath === null) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ jsxs25(Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs24(Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx56(
       Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ jsx57(
+        element: /* @__PURE__ */ jsx56(
           EditorForKey,
           {
             routeKey,
@@ -9330,26 +9337,26 @@ function AppEditor(props) {
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx56(
       Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ jsx57(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx57(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ jsx56(Fragment15, { children: renderNotFound() }) : /* @__PURE__ */ jsx56(DefaultNotFound, {})
       }
     )
   ] });
 }
 function DefaultAppLayout(props) {
   const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
-  return /* @__PURE__ */ jsxs25(Fragment16, { children: [
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs24(Fragment15, { children: [
+    /* @__PURE__ */ jsx56(
       AppRender,
       {
         metadata: editorProps.metadata,
         renderNotFound
       }
     ),
-    /* @__PURE__ */ jsx57(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+    /* @__PURE__ */ jsx56(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
   ] });
 }
 function App(props) {
@@ -9368,7 +9375,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx56(
     AppProvider,
     {
       config,
@@ -9376,7 +9383,7 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ jsx57(DefaultAppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ jsx56(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
@@ -9419,26 +9426,26 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
 init_react_import();
-var styles_module_default30 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+var styles_module_default29 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
-var getClassName35 = get_class_name_factory_default("OutlinePlugin", styles_module_default30);
+import { jsx as jsx57 } from "react/jsx-runtime";
+var getClassName34 = get_class_name_factory_default("OutlinePlugin", styles_module_default29);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ jsx58("div", { className: getClassName35(), children: /* @__PURE__ */ jsx58(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx58(Layers, {})
+  render: () => /* @__PURE__ */ jsx57("div", { className: getClassName34(), children: /* @__PURE__ */ jsx57(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx57(Layers, {})
 });
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs26("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ jsx59(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx59(Components, {}) }),
-    /* @__PURE__ */ jsx59(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx59(Outline, {}) })
+  render: () => /* @__PURE__ */ jsxs25("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx58(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx58(Components, {}) }),
+    /* @__PURE__ */ jsx58(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx58(Outline, {}) })
   ] })
 });