@reacteditor/core 0.0.10 → 0.0.12

package/dist/{chunk-3IP22OOD.mjs → chunk-OKTANBAI.mjs}

@@ -1,13 +1,13 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-BZ4BQZJR.mjs";
+} from "./chunk-YBG2RYVF.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-BUR5T7IX.mjs";
+} from "./chunk-TGVAC3JP.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -16,7 +16,7 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-PUDWMFBH.mjs";
+} from "./chunk-II42EKFK.mjs";
 import {
   Check,
   ChevronDown,
@@ -60,7 +60,7 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-LRFRIIKG.mjs";
+} from "./chunk-56I7ST5F.mjs";
 import {
   getItem,
   insert,
@@ -71,7 +71,7 @@ import {
 import {
   defaultAppState,
   defaultViewports
-} from "./chunk-IIRJMJFU.mjs";
+} from "./chunk-ERNSJXVF.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -2146,7 +2146,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment3, jsx as jsx20 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-3COFH5WN.mjs").then((m) => ({
+  () => import("./Editor-GK6JTUPD.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -3219,7 +3219,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default12 = { "Drawer": "_Drawer_146py_1", "Drawer--tile": "_Drawer--tile_146py_8", "Drawer-draggable": "_Drawer-draggable_146py_19", "Drawer-draggableBg": "_Drawer-draggableBg_146py_23", "DrawerItem-draggable": "_DrawerItem-draggable_146py_33", "DrawerItem-icon": "_DrawerItem-icon_146py_50", "DrawerItem--disabled": "_DrawerItem--disabled_146py_56", "DrawerItem": "_DrawerItem_146py_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_146py_66", "DrawerItem-name": "_DrawerItem-name_146py_91" };
+var styles_module_default12 = { "Drawer": "_Drawer_1h4db_1", "Drawer--tile": "_Drawer--tile_1h4db_8", "Drawer-draggable": "_Drawer-draggable_1h4db_19", "Drawer-draggableBg": "_Drawer-draggableBg_1h4db_23", "DrawerItem-draggable": "_DrawerItem-draggable_1h4db_33", "DrawerItem-icon": "_DrawerItem-icon_1h4db_50", "DrawerItem--disabled": "_DrawerItem--disabled_1h4db_56", "DrawerItem": "_DrawerItem_1h4db_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_1h4db_66", "DrawerItem-name": "_DrawerItem-name_1h4db_91" };
 
 // components/Drawer/index.tsx
 import { useMemo as useMemo9, useState as useState11 } from "react";
@@ -4698,7 +4698,7 @@ import {
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-3COFH5WN.mjs").then((m) => ({
+  () => import("./Editor-GK6JTUPD.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -5305,15 +5305,6 @@ var DropZoneEdit = forwardRef(
         }
       }
     }, [zoneType, appStoreApi]);
-    useEffect16(() => {
-      if (zoneType === "dropzone") {
-        if (zoneCompound !== rootDroppableId) {
-          console.warn(
-            "DropZones have been deprecated in favor of slot fields and will be removed in a future version of Editor. Please see the migration guide: https://www.frontend.co/docs/guides/migrations/dropzones-to-slots"
-          );
-        }
-      }
-    }, [zoneType]);
     const contentIds = useMemo12(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
@@ -6137,848 +6128,387 @@ var blocksPlugin = () => ({
   icon: /* @__PURE__ */ jsx37(Plus, {})
 });
 
-// plugins/outline/index.tsx
+// plugins/fields/index.tsx
 init_react_import();
 
-// components/Editor/components/Outline/index.tsx
+// components/Breadcrumbs/index.tsx
 init_react_import();
 
-// components/LayerTree/index.tsx
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
 init_react_import();
+var styles_module_default17 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
 
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/LayerTree/styles.module.css#css-module
+// lib/use-breadcrumbs.ts
 init_react_import();
-var styles_module_default17 = { "LayerTree": "_LayerTree_3eixb_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_3eixb_11", "LayerTree-helper": "_LayerTree-helper_3eixb_17", "Layer": "_Layer_3eixb_1", "Layer-inner": "_Layer-inner_3eixb_34", "Layer--containsZone": "_Layer--containsZone_3eixb_42", "Layer-clickable": "_Layer-clickable_3eixb_46", "Layer--isSelected": "_Layer--isSelected_3eixb_68", "Layer-icon": "_Layer-icon_3eixb_80", "Layer-zoneIcon": "_Layer-zoneIcon_3eixb_81", "Layer-chevron": "_Layer-chevron_3eixb_85", "Layer--childIsSelected": "_Layer--childIsSelected_3eixb_97", "Layer-zones": "_Layer-zones_3eixb_101", "Layer-title": "_Layer-title_3eixb_117", "Layer-name": "_Layer-name_3eixb_130", "Layer--isGlobal": "_Layer--isGlobal_3eixb_150", "Layer--isUnlinked": "_Layer--isUnlinked_3eixb_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_3eixb_175" };
+import { useMemo as useMemo15 } from "react";
+var useBreadcrumbs = (renderCount) => {
+  const selectedId = useAppStore((s) => {
+    var _a;
+    return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
+  });
+  const config = useAppStore((s) => s.config);
+  const path = useAppStore((s) => {
+    var _a;
+    return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
+  });
+  const appStore = useAppStoreApi();
+  return useMemo15(() => {
+    const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
+      var _a, _b, _c, _d;
+      const [componentId] = zoneCompound.split(":");
+      if (componentId === "root") {
+        return {
+          label: ((_a = config == null ? void 0 : config.root) == null ? void 0 : _a.label) || "Page",
+          selector: null
+        };
+      }
+      const node = appStore.getState().state.indexes.nodes[componentId];
+      const parentId = node.path[node.path.length - 1];
+      const contentIds = ((_b = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _b.contentIds) || [];
+      const index = contentIds.indexOf(componentId);
+      const label = node ? (_d = (_c = config.components[node.data.type]) == null ? void 0 : _c.label) != null ? _d : node.data.type : "Component";
+      return {
+        label,
+        selector: node ? {
+          index,
+          zone: node.path[node.path.length - 1]
+        } : null
+      };
+    })) || [];
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [path, renderCount]);
+};
 
-// components/LayerTree/index.tsx
+// components/Breadcrumbs/index.tsx
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("Breadcrumbs", styles_module_default17);
+var Breadcrumbs = ({
+  children,
+  numParents = 1
+}) => {
+  const setUi = useAppStore((s) => s.setUi);
+  const breadcrumbs = useBreadcrumbs(numParents);
+  return /* @__PURE__ */ jsxs14("div", { className: getClassName22(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs14("div", { className: getClassName22("breadcrumb"), children: [
+      /* @__PURE__ */ jsx38(
+        "button",
+        {
+          type: "button",
+          className: getClassName22("breadcrumbLabel"),
+          onClick: () => setUi({ itemSelector: breadcrumb.selector }),
+          children: breadcrumb.label
+        }
+      ),
+      /* @__PURE__ */ jsx38(ChevronRight, { size: 14 })
+    ] }, i)),
+    children
+  ] });
+};
+
+// components/Editor/components/Fields/index.tsx
+init_react_import();
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
+init_react_import();
+var styles_module_default18 = { "EditorFields": "_EditorFields_3dnua_1", "EditorFields--isLoading": "_EditorFields--isLoading_3dnua_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_3dnua_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_3dnua_25", "EditorFields-field": "_EditorFields-field_3dnua_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_3dnua_36", "EditorFields-syncButton": "_EditorFields-syncButton_3dnua_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_3dnua_78" };
+
+// components/Editor/components/Fields/index.tsx
 import {
-  forwardRef as forwardRef2,
+  memo as memo8,
   useCallback as useCallback15,
   useContext as useContext11,
-  useRef as useRef11
+  useEffect as useEffect19,
+  useMemo as useMemo16
 } from "react";
-import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("LayerTree", styles_module_default17);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default17);
-var DEFAULT_LAYER_ROW_HEIGHT = 32;
-var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
-var MIN_VIRTUALIZED_LAYER_COUNT = 25;
-var measuredRowHeights = /* @__PURE__ */ new Map();
-var getZonesByParent = (zones) => {
-  return Object.keys(zones).reduce((acc, zone) => {
-    const [parentId] = zone.split(":");
-    acc[parentId] = [...acc[parentId] || [], zone];
-    return acc;
-  }, {});
-};
-var getZoneLabel = (zoneCompound, nodes, config, label) => {
-  var _a, _b, _c, _d;
-  if (label !== void 0) {
-    return label;
-  }
-  const [componentId, slotId] = zoneCompound.split(":");
-  if (!slotId) {
-    return;
-  }
-  const componentType = (_a = nodes[componentId]) == null ? void 0 : _a.data.type;
-  const configForComponent = componentType && componentType !== rootAreaId ? config.components[componentType] : config.root;
-  return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
-};
-var buildLayerNode = ({
-  config,
-  itemId,
-  index,
-  nodes,
-  zoneCompound,
-  zones,
-  zonesByParent
-}) => {
-  var _a, _b, _c;
-  const nodeData = nodes[itemId];
-  const componentType = ((_a = nodeData == null ? void 0 : nodeData.data.type) == null ? void 0 : _a.toString()) || "Component";
-  const label = (_c = (_b = config.components[componentType]) == null ? void 0 : _b.label) != null ? _c : componentType;
-  const childZoneCompounds = zonesByParent[itemId] || [];
-  return {
-    childZones: childZoneCompounds.map(
-      (childZoneCompound) => buildLayerTree({
-        config,
-        nodes,
-        zoneCompound: childZoneCompound,
-        zones,
-        zonesByParent
-      })
-    ),
-    componentType,
-    index,
-    itemId,
-    label,
-    zoneCompound
-  };
-};
-var buildLayerTree = ({
-  config,
-  label,
-  nodes,
-  zoneCompound,
-  zones,
-  zonesByParent = getZonesByParent(zones)
+import { useShallow as useShallow7 } from "zustand/react/shallow";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("EditorFields", styles_module_default18);
+var DefaultFields = ({
+  children
 }) => {
-  var _a, _b;
-  const contentIds = (_b = (_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [];
-  return {
-    items: contentIds.map(
-      (itemId, index) => buildLayerNode({
-        config,
-        itemId,
-        index,
-        nodes,
-        zoneCompound,
-        zones,
-        zonesByParent
-      })
-    ),
-    label: getZoneLabel(zoneCompound, nodes, config, label),
-    zoneCompound
-  };
-};
-var getEstimatedRowHeight = (itemId) => {
-  var _a;
-  return (_a = measuredRowHeights.get(itemId)) != null ? _a : DEFAULT_LAYER_ROW_HEIGHT;
+  return /* @__PURE__ */ jsx39(Fragment8, { children });
 };
-var cacheMeasuredRowHeight = (itemId, height) => {
-  if (height <= 0) {
+var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
+  const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
+  const { data, ui } = state;
+  const { itemSelector } = ui;
+  const rootProps = data.root.props || data.root;
+  const currentProps = selectedItem ? selectedItem.props : rootProps;
+  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
+  if (selectedItem && itemSelector) {
+    const resolved = yield resolveComponentData(
+      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      "replace"
+    );
+    const latestSelector = getSelectorForId(
+      appStore.getState().state,
+      selectedItem.props.id
+    );
+    if (!latestSelector) return;
+    dispatch({
+      type: "replace",
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node,
+      ui: updatedUi
+    });
     return;
   }
-  measuredRowHeights.set(itemId, height);
-};
-var getScrollParent = (el) => {
-  var _a;
-  let current = (_a = el == null ? void 0 : el.parentElement) != null ? _a : null;
-  while (current) {
-    const { overflow, overflowY } = getComputedStyle(current);
-    if ([overflow, overflowY].some((value) => /auto|scroll/.test(value))) {
-      return current;
-    }
-    current = current.parentElement;
+  if (data.root.props) {
+    dispatch({
+      type: "replaceRoot",
+      root: (yield resolveComponentData(
+        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
+        "replace"
+      )).node,
+      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
+      recordHistory: true
+    });
+    return;
   }
-  return null;
-};
-var Layer = forwardRef2(function Layer2({
-  childIsSelected,
-  dataIndex,
-  depth,
-  isSelected,
-  node,
-  selectedId,
-  selectedPathIds
-}, ref) {
-  const dispatch = useAppStore((s) => s.dispatch);
-  const zoneStore = useContext11(ZoneStoreContext);
-  const isHovering = useContextStore(
-    ZoneStoreContext,
-    (s) => s.hoveringComponent === node.itemId
+  dispatch({
+    type: "setData",
+    data: { root: newProps }
+  });
+});
+var FieldsChildInner = ({ fieldName }) => {
+  const field = useAppStore((s) => s.fields.fields[fieldName]);
+  const isReadOnly = useAppStore(
+    (s) => ((s.selectedItem ? s.selectedItem.readOnly : s.state.data.root.readOnly) || {})[fieldName]
   );
-  const isGlobal = useAppStore(
-    (s) => {
-      var _a;
-      return ((_a = s.config.components[node.componentType]) == null ? void 0 : _a.global) === true;
-    }
+  const id = useAppStore((s) => {
+    if (!field) return null;
+    return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
+  });
+  const permissions = useAppStore(
+    useShallow7((s) => {
+      const { selectedItem, permissions: permissions2 } = s;
+      return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
+    })
   );
-  const isUnlinked = useAppStore(
+  const appStore = useAppStoreApi();
+  const onChange = useCallback15(createOnChange(fieldName, appStore), [
+    fieldName
+  ]);
+  const { visible = true } = field != null ? field : {};
+  const fieldStore = useContext11(fieldContextStore.ctx);
+  useEffect19(() => {
+    return appStore.subscribe(
+      (s) => {
+        var _a;
+        const data = s.getCurrentData();
+        return (_a = data.props) == null ? void 0 : _a[fieldName];
+      },
+      (value) => {
+        fieldStore.setState({ [fieldName]: value });
+      }
+    );
+  }, [appStore, fieldStore]);
+  if (!field || !id || !visible) return null;
+  if (field.type === "slot") return null;
+  return /* @__PURE__ */ jsx39("div", { className: getClassName23("field"), children: /* @__PURE__ */ jsx39(
+    AutoFieldPrivate,
+    {
+      field,
+      name: fieldName,
+      id,
+      readOnly: !permissions.edit || isReadOnly,
+      onChange
+    }
+  ) }, id);
+};
+var FieldsChild = ({ fieldName }) => {
+  const appStore = useAppStoreApi();
+  const initialValue = useMemo16(() => {
+    var _a;
+    const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
+    return { [fieldName]: value };
+  }, []);
+  return /* @__PURE__ */ jsx39(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx39(FieldsChildInner, { fieldName }) });
+};
+var FieldsChildMemo = memo8(FieldsChild);
+var GlobalSyncButton = () => {
+  const appStore = useAppStoreApi();
+  const selectedItem = useAppStore((s) => s.selectedItem);
+  const isGlobalType = useAppStore(
     (s) => {
-      var _a, _b;
-      return ((_b = (_a = s.state.indexes.nodes[node.itemId]) == null ? void 0 : _a.data) == null ? void 0 : _b.synced) === false;
+      var _a;
+      return selectedItem ? ((_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.global) === true : false;
     }
   );
-  const containsZone = node.childZones.length > 0;
-  const setItemSelector = useCallback15(
-    (itemSelector) => {
-      dispatch({ type: "setUi", ui: { itemSelector } });
-    },
-    [dispatch]
+  if (!selectedItem || !isGlobalType) return null;
+  const isUnlinked = selectedItem.synced === false;
+  const onClick = () => __async(null, null, function* () {
+    const { dispatch, state, resolveComponentData } = appStore.getState();
+    const latestSelector = getSelectorForId(state, selectedItem.props.id);
+    if (!latestSelector) return;
+    const resolved = yield resolveComponentData(
+      __spreadProps(__spreadValues({}, selectedItem), { synced: isUnlinked ? true : false }),
+      "replace"
+    );
+    dispatch({
+      type: "replace",
+      destinationIndex: latestSelector.index,
+      destinationZone: latestSelector.zone || rootDroppableId,
+      data: resolved.node
+    });
+  });
+  const syncButtonClass = [
+    getClassName23("syncButton"),
+    isUnlinked ? styles_module_default18["EditorFields-syncButton--unlinked"] : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs15("button", { type: "button", className: syncButtonClass, onClick, children: [
+    /* @__PURE__ */ jsx39(Link, { size: 14 }),
+    /* @__PURE__ */ jsx39("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
+  ] });
+};
+var FieldsInternal = ({ wrapFields = true }) => {
+  const overrides = useAppStore((s) => s.overrides);
+  const componentResolving = useAppStore((s) => {
+    var _a, _b;
+    const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
+    return (loadingCount != null ? loadingCount : 0) > 0;
+  });
+  const itemSelector = useAppStore(useShallow7((s) => s.state.ui.itemSelector));
+  const id = useAppStore((s) => {
+    var _a;
+    return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
+  });
+  const appStore = useAppStoreApi();
+  useRegisterFieldsSlice(appStore, id);
+  const fieldsLoading = useAppStore((s) => s.fields.loading);
+  const fieldNames = useAppStore(
+    useShallow7((s) => {
+      if (s.fields.id === id) {
+        return Object.keys(s.fields.fields);
+      }
+      return [];
+    })
   );
-  const shouldRenderChildren = isSelected || childIsSelected;
-  return /* @__PURE__ */ jsxs14(
-    "li",
+  const isLoading = fieldsLoading || componentResolving;
+  const Wrapper = useMemo16(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ jsxs15(
+    "form",
     {
-      ref,
-      className: getClassNameLayer({
-        childIsSelected,
-        containsZone,
-        isHovering,
-        isSelected,
-        isGlobal: isGlobal && !isUnlinked,
-        isUnlinked: isGlobal && isUnlinked
-      }),
-      "data-index": dataIndex,
-      "data-editor-layer-tree-id": node.itemId,
+      className: getClassName23({ wrapFields }),
+      onSubmit: (e) => {
+        e.preventDefault();
+      },
       children: [
-        /* @__PURE__ */ jsx38("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs14(
-          "button",
-          {
-            type: "button",
-            className: getClassNameLayer("clickable"),
-            onClick: () => {
-              if (isSelected) {
-                setItemSelector(null);
-                return;
-              }
-              setItemSelector({
-                index: node.index,
-                zone: node.zoneCompound
-              });
-              zoneStore.getState().scrollToComponent(node.itemId);
-            },
-            onMouseEnter: (e) => {
-              e.stopPropagation();
-              zoneStore.setState({ hoveringComponent: node.itemId });
-            },
-            onMouseLeave: (e) => {
-              e.stopPropagation();
-              zoneStore.setState({ hoveringComponent: null });
-            },
-            children: [
-              /* @__PURE__ */ jsx38(
-                "div",
-                {
-                  className: getClassNameLayer("chevron"),
-                  title: containsZone ? isSelected ? "Collapse" : "Expand" : void 0,
-                  children: containsZone && /* @__PURE__ */ jsx38(ChevronRight, { size: "12" })
-                }
-              ),
-              /* @__PURE__ */ jsxs14("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx38("div", { className: getClassNameLayer("icon"), children: /* @__PURE__ */ jsx38(Component, { size: "16" }) }),
-                /* @__PURE__ */ jsx38("div", { className: getClassNameLayer("name"), children: node.label }),
-                isGlobal && isUnlinked && /* @__PURE__ */ jsx38(
-                  "div",
-                  {
-                    className: getClassNameLayer("unlinkedGlyph"),
-                    title: "Unlinked from shared",
-                    children: /* @__PURE__ */ jsx38(Unlink2, { size: "12" })
-                  }
-                )
-              ] })
-            ]
-          }
-        ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx38(
-          "div",
-          {
-            className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ jsx38(
-              LayerTreeZone,
-              {
-                depth: depth + 1,
-                selectedId,
-                selectedPathIds,
-                tree: childZone
-              }
-            )
-          },
-          childZone.zoneCompound
-        ))
+        /* @__PURE__ */ jsxs15(Wrapper, { isLoading, itemSelector, children: [
+          /* @__PURE__ */ jsx39(GlobalSyncButton, {}),
+          fieldNames.map((fieldName) => /* @__PURE__ */ jsx39(FieldsChildMemo, { fieldName }, fieldName))
+        ] }),
+        isLoading && /* @__PURE__ */ jsx39("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ jsx39("div", { className: getClassName23("loadingOverlayInner"), children: /* @__PURE__ */ jsx39(Loader, { size: 16 }) }) })
       ]
     }
   );
+};
+var Fields = memo8(FieldsInternal);
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
+init_react_import();
+var styles_module_default19 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+
+// plugins/fields/index.tsx
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("FieldsPlugin", styles_module_default19);
+var CurrentTitle = () => {
+  const label = useAppStore((s) => {
+    var _a, _b;
+    const selectedItem = s.selectedItem;
+    return selectedItem ? (_b = (_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.label) != null ? _b : selectedItem.type : "Page";
+  });
+  return label;
+};
+var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
+  name: "fields",
+  label: "Fields",
+  render: () => /* @__PURE__ */ jsxs16("div", { className: getClassName24(), children: [
+    /* @__PURE__ */ jsx40("div", { className: getClassName24("header"), children: /* @__PURE__ */ jsx40(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx40(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx40(Fields, {})
+  ] }),
+  icon: /* @__PURE__ */ jsx40(RectangleEllipsis, {}),
+  mobileOnly: desktopSideBar === "right"
 });
-var LayerTreeZone = ({
-  depth,
-  selectedId,
-  selectedPathIds,
-  tree
-}) => {
-  const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
-  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
-    tree.label && /* @__PURE__ */ jsx38("div", { className: getClassName22("zoneTitle"), children: tree.label }),
-    shouldVirtualize ? /* @__PURE__ */ jsx38(
-      VirtualizedLayerTreeItems,
-      {
-        depth,
-        selectedId,
-        selectedPathIds,
-        tree
-      }
-    ) : /* @__PURE__ */ jsx38(
-      StaticLayerTreeItems,
-      {
-        depth,
-        selectedId,
-        selectedPathIds,
-        tree
+
+// components/Editor/index.tsx
+init_react_import();
+import {
+  createContext as createContext8,
+  useCallback as useCallback25,
+  useContext as useContext15,
+  useEffect as useEffect26,
+  useMemo as useMemo24,
+  useRef as useRef19,
+  useState as useState24
+} from "react";
+
+// components/Editor/components/Preview/index.tsx
+init_react_import();
+import { useCallback as useCallback16, useEffect as useEffect21, useRef as useRef11, useMemo as useMemo17 } from "react";
+
+// components/AutoFrame/index.tsx
+init_react_import();
+import {
+  createContext as createContext6,
+  useContext as useContext12,
+  useEffect as useEffect20,
+  useState as useState18
+} from "react";
+import hash from "object-hash";
+import { createPortal as createPortal3 } from "react-dom";
+import { Fragment as Fragment9, jsx as jsx41 } from "react/jsx-runtime";
+var styleSelector = 'style, link[rel="stylesheet"]';
+var collectStyles = (doc) => {
+  const collected = [];
+  doc.querySelectorAll(styleSelector).forEach((style) => {
+    if (style.tagName === "STYLE") {
+      const hasContent = !!style.innerHTML.trim();
+      if (hasContent) {
+        collected.push(style);
       }
-    )
-  ] });
+    } else {
+      collected.push(style);
+    }
+  });
+  return collected;
 };
-var StaticLayerTreeItems = ({
-  depth,
-  selectedId,
-  selectedPathIds,
-  tree
-}) => {
-  return /* @__PURE__ */ jsxs14("ul", { className: getClassName22(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx38("div", { className: getClassName22("helper"), children: "empty" }),
-    tree.items.map((node) => /* @__PURE__ */ jsx38(
-      Layer,
-      {
-        childIsSelected: selectedPathIds.has(node.itemId),
-        depth,
-        isSelected: selectedId === node.itemId,
-        node,
-        selectedId,
-        selectedPathIds
-      },
-      node.itemId
-    ))
-  ] });
-};
-var VirtualizedLayerTreeItems = ({
-  depth,
-  selectedId,
-  selectedPathIds,
-  tree
-}) => {
-  const listRef = useRef11(null);
-  const virtualizer = useVirtualizer2({
-    count: tree.items.length,
-    estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
-    getItemKey: (index) => tree.items[index].itemId,
-    getScrollElement: () => getScrollParent(listRef.current),
-    overscan: LAYER_TREE_VIRTUALIZATION_OVERSCAN,
-    measureElement: (element) => {
-      const height = Math.ceil(element.getBoundingClientRect().height);
-      const itemId = element.dataset.editorLayerTreeId;
-      if (itemId) {
-        cacheMeasuredRowHeight(itemId, height);
-      }
-      return height || DEFAULT_LAYER_ROW_HEIGHT;
-    }
+var getStyleSheet = (el) => {
+  return Array.from(document.styleSheets).find((ss) => {
+    const ownerNode = ss.ownerNode;
+    return ownerNode.href === el.href;
   });
-  const virtualItems = virtualizer.getVirtualItems();
-  const totalSize = virtualizer.getTotalSize();
-  const renderedItems = [];
-  let previousEnd = 0;
-  let previousIndex = -1;
-  virtualItems.forEach((virtualItem) => {
-    const node = tree.items[virtualItem.index];
-    const gapSize = Math.max(virtualItem.start - previousEnd, 0);
-    if (gapSize > 0) {
-      renderedItems.push(
-        /* @__PURE__ */ jsx38(
-          "li",
-          {
-            "aria-hidden": "true",
-            style: { height: `${gapSize}px` }
-          },
-          `gap:${tree.zoneCompound}:${previousIndex}:${virtualItem.index}`
-        )
+};
+var getStyles = (styleSheet) => {
+  if (styleSheet) {
+    try {
+      return Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
+    } catch (e) {
+      console.warn(
+        "Access to stylesheet %s is denied. Ignoring\u2026",
+        styleSheet.href
       );
     }
-    renderedItems.push(
-      /* @__PURE__ */ jsx38(
-        Layer,
-        {
-          childIsSelected: selectedPathIds.has(node.itemId),
-          dataIndex: virtualItem.index,
-          depth,
-          isSelected: selectedId === node.itemId,
-          node,
-          ref: virtualizer.measureElement,
-          selectedId,
-          selectedPathIds
-        },
-        node.itemId
-      )
-    );
-    previousEnd = virtualItem.end;
-    previousIndex = virtualItem.index;
-  });
-  const trailingGap = Math.max(totalSize - previousEnd, 0);
-  if (trailingGap > 0) {
-    renderedItems.push(
-      /* @__PURE__ */ jsx38(
-        "li",
-        {
-          "aria-hidden": "true",
-          style: { height: `${trailingGap}px` }
-        },
-        `gap:${tree.zoneCompound}:${previousIndex}:end`
-      )
-    );
   }
-  return /* @__PURE__ */ jsxs14("ul", { className: getClassName22(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx38("div", { className: getClassName22("helper"), children: "empty" }),
-    renderedItems
-  ] });
-};
-var LayerTree = ({
-  selectedId,
-  selectedPathIds,
-  trees
-}) => {
-  return /* @__PURE__ */ jsx38(Fragment8, { children: trees.map((tree) => /* @__PURE__ */ jsx38(
-    LayerTreeZone,
-    {
-      depth: 0,
-      selectedId,
-      selectedPathIds,
-      tree
-    },
-    tree.zoneCompound
-  )) });
-};
-
-// components/Editor/components/Outline/index.tsx
-import { useMemo as useMemo15 } from "react";
-
-// lib/data/find-zones-for-area.ts
-init_react_import();
-var findZonesForArea = (state, area) => {
-  return Object.keys(state.indexes.zones).filter(
-    (zone) => zone.split(":")[0] === area
-  );
-};
-
-// components/Editor/components/Outline/index.tsx
-import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var Outline = () => {
-  const outlineOverride = useAppStore((s) => s.overrides.outline);
-  const config = useAppStore((s) => s.config);
-  const nodes = useAppStore((s) => s.state.indexes.nodes);
-  const zones = useAppStore((s) => s.state.indexes.zones);
-  const selectedId = useAppStore((s) => {
-    var _a;
-    return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) || null;
-  });
-  const rootZones = useAppStore(
-    useShallow7((s) => findZonesForArea(s.state, "root"))
-  );
-  const selectedPathIds = useMemo15(() => {
-    var _a;
-    const selectedPath = selectedId ? (_a = nodes[selectedId]) == null ? void 0 : _a.path : null;
-    return new Set(
-      (selectedPath == null ? void 0 : selectedPath.map((candidate) => candidate.split(":")[0]).filter(Boolean)) || []
-    );
-  }, [nodes, selectedId]);
-  const trees = useMemo15(
-    () => rootZones.map(
-      (zoneCompound) => buildLayerTree({
-        config,
-        label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
-        nodes,
-        zoneCompound,
-        zones
-      })
-    ),
-    [config, nodes, rootZones, zones]
-  );
-  const Wrapper = useMemo15(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx39(Wrapper, { children: /* @__PURE__ */ jsx39(
-    LayerTree,
-    {
-      selectedId,
-      selectedPathIds,
-      trees
-    }
-  ) });
+  return "";
 };
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
-init_react_import();
-var styles_module_default18 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
-
-// plugins/outline/index.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("OutlinePlugin", styles_module_default18);
-var outlinePlugin = () => ({
-  name: "outline",
-  label: "Outline",
-  render: () => /* @__PURE__ */ jsx40("div", { className: getClassName23(), children: /* @__PURE__ */ jsx40(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx40(Layers, {})
-});
-
-// plugins/fields/index.tsx
-init_react_import();
-
-// components/Breadcrumbs/index.tsx
-init_react_import();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
-init_react_import();
-var styles_module_default19 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
-
-// lib/use-breadcrumbs.ts
-init_react_import();
-import { useMemo as useMemo16 } from "react";
-var useBreadcrumbs = (renderCount) => {
-  const selectedId = useAppStore((s) => {
-    var _a;
-    return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
-  });
-  const config = useAppStore((s) => s.config);
-  const path = useAppStore((s) => {
-    var _a;
-    return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
-  });
-  const appStore = useAppStoreApi();
-  return useMemo16(() => {
-    const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
-      var _a, _b, _c, _d;
-      const [componentId] = zoneCompound.split(":");
-      if (componentId === "root") {
-        return {
-          label: ((_a = config == null ? void 0 : config.root) == null ? void 0 : _a.label) || "Page",
-          selector: null
-        };
-      }
-      const node = appStore.getState().state.indexes.nodes[componentId];
-      const parentId = node.path[node.path.length - 1];
-      const contentIds = ((_b = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _b.contentIds) || [];
-      const index = contentIds.indexOf(componentId);
-      const label = node ? (_d = (_c = config.components[node.data.type]) == null ? void 0 : _c.label) != null ? _d : node.data.type : "Component";
-      return {
-        label,
-        selector: node ? {
-          index,
-          zone: node.path[node.path.length - 1]
-        } : null
-      };
-    })) || [];
-    if (renderCount) {
-      return breadcrumbs.slice(breadcrumbs.length - renderCount);
-    }
-    return breadcrumbs;
-  }, [path, renderCount]);
+var syncAttributes = (sourceElement, targetElement) => {
+  const attributes = sourceElement.attributes;
+  if ((attributes == null ? void 0 : attributes.length) > 0) {
+    Array.from(attributes).forEach((attribute) => {
+      targetElement.setAttribute(attribute.name, attribute.value);
+    });
+  }
 };
-
-// components/Breadcrumbs/index.tsx
-import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName24 = get_class_name_factory_default("Breadcrumbs", styles_module_default19);
-var Breadcrumbs = ({
+var defer = (fn) => setTimeout(fn, 0);
+var CopyHostStyles = ({
   children,
-  numParents = 1
-}) => {
-  const setUi = useAppStore((s) => s.setUi);
-  const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs15("div", { className: getClassName24(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs15("div", { className: getClassName24("breadcrumb"), children: [
-      /* @__PURE__ */ jsx41(
-        "button",
-        {
-          type: "button",
-          className: getClassName24("breadcrumbLabel"),
-          onClick: () => setUi({ itemSelector: breadcrumb.selector }),
-          children: breadcrumb.label
-        }
-      ),
-      /* @__PURE__ */ jsx41(ChevronRight, { size: 14 })
-    ] }, i)),
-    children
-  ] });
-};
-
-// components/Editor/components/Fields/index.tsx
-init_react_import();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
-init_react_import();
-var styles_module_default20 = { "EditorFields": "_EditorFields_3dnua_1", "EditorFields--isLoading": "_EditorFields--isLoading_3dnua_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_3dnua_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_3dnua_25", "EditorFields-field": "_EditorFields-field_3dnua_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_3dnua_36", "EditorFields-syncButton": "_EditorFields-syncButton_3dnua_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_3dnua_78" };
-
-// components/Editor/components/Fields/index.tsx
-import {
-  memo as memo8,
-  useCallback as useCallback16,
-  useContext as useContext12,
-  useEffect as useEffect19,
-  useMemo as useMemo17
-} from "react";
-import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("EditorFields", styles_module_default20);
-var DefaultFields = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx42(Fragment9, { children });
-};
-var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
-  const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
-  const { data, ui } = state;
-  const { itemSelector } = ui;
-  const rootProps = data.root.props || data.root;
-  const currentProps = selectedItem ? selectedItem.props : rootProps;
-  const newProps = __spreadProps(__spreadValues({}, currentProps), { [fieldName]: value });
-  if (selectedItem && itemSelector) {
-    const resolved = yield resolveComponentData(
-      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
-      "replace"
-    );
-    const latestSelector = getSelectorForId(
-      appStore.getState().state,
-      selectedItem.props.id
-    );
-    if (!latestSelector) return;
-    dispatch({
-      type: "replace",
-      destinationIndex: latestSelector.index,
-      destinationZone: latestSelector.zone || rootDroppableId,
-      data: resolved.node,
-      ui: updatedUi
-    });
-    return;
-  }
-  if (data.root.props) {
-    dispatch({
-      type: "replaceRoot",
-      root: (yield resolveComponentData(
-        __spreadProps(__spreadValues({}, data.root), { props: newProps }),
-        "replace"
-      )).node,
-      ui: __spreadValues(__spreadValues({}, ui), updatedUi),
-      recordHistory: true
-    });
-    return;
-  }
-  dispatch({
-    type: "setData",
-    data: { root: newProps }
-  });
-});
-var FieldsChildInner = ({ fieldName }) => {
-  const field = useAppStore((s) => s.fields.fields[fieldName]);
-  const isReadOnly = useAppStore(
-    (s) => ((s.selectedItem ? s.selectedItem.readOnly : s.state.data.root.readOnly) || {})[fieldName]
-  );
-  const id = useAppStore((s) => {
-    if (!field) return null;
-    return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
-  });
-  const permissions = useAppStore(
-    useShallow8((s) => {
-      const { selectedItem, permissions: permissions2 } = s;
-      return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
-    })
-  );
-  const appStore = useAppStoreApi();
-  const onChange = useCallback16(createOnChange(fieldName, appStore), [
-    fieldName
-  ]);
-  const { visible = true } = field != null ? field : {};
-  const fieldStore = useContext12(fieldContextStore.ctx);
-  useEffect19(() => {
-    return appStore.subscribe(
-      (s) => {
-        var _a;
-        const data = s.getCurrentData();
-        return (_a = data.props) == null ? void 0 : _a[fieldName];
-      },
-      (value) => {
-        fieldStore.setState({ [fieldName]: value });
-      }
-    );
-  }, [appStore, fieldStore]);
-  if (!field || !id || !visible) return null;
-  if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx42("div", { className: getClassName25("field"), children: /* @__PURE__ */ jsx42(
-    AutoFieldPrivate,
-    {
-      field,
-      name: fieldName,
-      id,
-      readOnly: !permissions.edit || isReadOnly,
-      onChange
-    }
-  ) }, id);
-};
-var FieldsChild = ({ fieldName }) => {
-  const appStore = useAppStoreApi();
-  const initialValue = useMemo17(() => {
-    var _a;
-    const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
-    return { [fieldName]: value };
-  }, []);
-  return /* @__PURE__ */ jsx42(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx42(FieldsChildInner, { fieldName }) });
-};
-var FieldsChildMemo = memo8(FieldsChild);
-var GlobalSyncButton = () => {
-  const appStore = useAppStoreApi();
-  const selectedItem = useAppStore((s) => s.selectedItem);
-  const isGlobalType = useAppStore(
-    (s) => {
-      var _a;
-      return selectedItem ? ((_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.global) === true : false;
-    }
-  );
-  if (!selectedItem || !isGlobalType) return null;
-  const isUnlinked = selectedItem.synced === false;
-  const onClick = () => __async(null, null, function* () {
-    const { dispatch, state, resolveComponentData } = appStore.getState();
-    const latestSelector = getSelectorForId(state, selectedItem.props.id);
-    if (!latestSelector) return;
-    const resolved = yield resolveComponentData(
-      __spreadProps(__spreadValues({}, selectedItem), { synced: isUnlinked ? true : false }),
-      "replace"
-    );
-    dispatch({
-      type: "replace",
-      destinationIndex: latestSelector.index,
-      destinationZone: latestSelector.zone || rootDroppableId,
-      data: resolved.node
-    });
-  });
-  const syncButtonClass = [
-    getClassName25("syncButton"),
-    isUnlinked ? styles_module_default20["EditorFields-syncButton--unlinked"] : null
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs16("button", { type: "button", className: syncButtonClass, onClick, children: [
-    /* @__PURE__ */ jsx42(Link, { size: 14 }),
-    /* @__PURE__ */ jsx42("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
-  ] });
-};
-var FieldsInternal = ({ wrapFields = true }) => {
-  const overrides = useAppStore((s) => s.overrides);
-  const componentResolving = useAppStore((s) => {
-    var _a, _b;
-    const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
-    return (loadingCount != null ? loadingCount : 0) > 0;
-  });
-  const itemSelector = useAppStore(useShallow8((s) => s.state.ui.itemSelector));
-  const id = useAppStore((s) => {
-    var _a;
-    return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
-  });
-  const appStore = useAppStoreApi();
-  useRegisterFieldsSlice(appStore, id);
-  const fieldsLoading = useAppStore((s) => s.fields.loading);
-  const fieldNames = useAppStore(
-    useShallow8((s) => {
-      if (s.fields.id === id) {
-        return Object.keys(s.fields.fields);
-      }
-      return [];
-    })
-  );
-  const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo17(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs16(
-    "form",
-    {
-      className: getClassName25({ wrapFields }),
-      onSubmit: (e) => {
-        e.preventDefault();
-      },
-      children: [
-        /* @__PURE__ */ jsxs16(Wrapper, { isLoading, itemSelector, children: [
-          /* @__PURE__ */ jsx42(GlobalSyncButton, {}),
-          fieldNames.map((fieldName) => /* @__PURE__ */ jsx42(FieldsChildMemo, { fieldName }, fieldName))
-        ] }),
-        isLoading && /* @__PURE__ */ jsx42("div", { className: getClassName25("loadingOverlay"), children: /* @__PURE__ */ jsx42("div", { className: getClassName25("loadingOverlayInner"), children: /* @__PURE__ */ jsx42(Loader, { size: 16 }) }) })
-      ]
-    }
-  );
-};
-var Fields = memo8(FieldsInternal);
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
-init_react_import();
-var styles_module_default21 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
-
-// plugins/fields/index.tsx
-import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName26 = get_class_name_factory_default("FieldsPlugin", styles_module_default21);
-var CurrentTitle = () => {
-  const label = useAppStore((s) => {
-    var _a, _b;
-    const selectedItem = s.selectedItem;
-    return selectedItem ? (_b = (_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.label) != null ? _b : selectedItem.type : "Page";
-  });
-  return label;
-};
-var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
-  name: "fields",
-  label: "Fields",
-  render: () => /* @__PURE__ */ jsxs17("div", { className: getClassName26(), children: [
-    /* @__PURE__ */ jsx43("div", { className: getClassName26("header"), children: /* @__PURE__ */ jsx43(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx43(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx43(Fields, {})
-  ] }),
-  icon: /* @__PURE__ */ jsx43(RectangleEllipsis, {}),
-  mobileOnly: desktopSideBar === "right"
-});
-
-// components/Editor/index.tsx
-init_react_import();
-import {
-  createContext as createContext8,
-  useCallback as useCallback25,
-  useContext as useContext15,
-  useEffect as useEffect26,
-  useMemo as useMemo24,
-  useRef as useRef19,
-  useState as useState24
-} from "react";
-
-// components/Editor/components/Preview/index.tsx
-init_react_import();
-import { useCallback as useCallback17, useEffect as useEffect21, useRef as useRef12, useMemo as useMemo18 } from "react";
-
-// components/AutoFrame/index.tsx
-init_react_import();
-import {
-  createContext as createContext6,
-  useContext as useContext13,
-  useEffect as useEffect20,
-  useState as useState18
-} from "react";
-import hash from "object-hash";
-import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx44 } from "react/jsx-runtime";
-var styleSelector = 'style, link[rel="stylesheet"]';
-var collectStyles = (doc) => {
-  const collected = [];
-  doc.querySelectorAll(styleSelector).forEach((style) => {
-    if (style.tagName === "STYLE") {
-      const hasContent = !!style.innerHTML.trim();
-      if (hasContent) {
-        collected.push(style);
-      }
-    } else {
-      collected.push(style);
-    }
-  });
-  return collected;
-};
-var getStyleSheet = (el) => {
-  return Array.from(document.styleSheets).find((ss) => {
-    const ownerNode = ss.ownerNode;
-    return ownerNode.href === el.href;
-  });
-};
-var getStyles = (styleSheet) => {
-  if (styleSheet) {
-    try {
-      return Array.from(styleSheet.cssRules).map((rule) => rule.cssText).join("");
-    } catch (e) {
-      console.warn(
-        "Access to stylesheet %s is denied. Ignoring\u2026",
-        styleSheet.href
-      );
-    }
-  }
-  return "";
-};
-var syncAttributes = (sourceElement, targetElement) => {
-  const attributes = sourceElement.attributes;
-  if ((attributes == null ? void 0 : attributes.length) > 0) {
-    Array.from(attributes).forEach((attribute) => {
-      targetElement.setAttribute(attribute.name, attribute.value);
-    });
-  }
-};
-var defer = (fn) => setTimeout(fn, 0);
-var CopyHostStyles = ({
-  children,
-  debug = false,
-  onStylesLoaded = () => null
+  debug = false,
+  onStylesLoaded = () => null
 }) => {
   const { document: doc, window: win } = useFrame();
   useEffect20(() => {
@@ -7148,10 +6678,10 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx44(Fragment10, { children });
+  return /* @__PURE__ */ jsx41(Fragment9, { children });
 };
 var autoFrameContext = createContext6({});
-var useFrame = () => useContext13(autoFrameContext);
+var useFrame = () => useContext12(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -7194,132 +6724,576 @@ function AutoFrame(_a) {
         onNotReady();
       }
     }
-  }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx44(
-    "iframe",
-    __spreadProps(__spreadValues({}, props), {
-      className,
-      id,
-      srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root" data-editor-entry></div></body></html>',
-      ref: frameRef,
-      onLoad: () => {
-        setLoaded(true);
-      },
-      children: /* @__PURE__ */ jsx44(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx44(
-        CopyHostStyles,
+  }, [frameRef, loaded, stylesLoaded]);
+  return /* @__PURE__ */ jsx41(
+    "iframe",
+    __spreadProps(__spreadValues({}, props), {
+      className,
+      id,
+      srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root" data-editor-entry></div></body></html>',
+      ref: frameRef,
+      onLoad: () => {
+        setLoaded(true);
+      },
+      children: /* @__PURE__ */ jsx41(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx41(
+        CopyHostStyles,
+        {
+          debug,
+          onStylesLoaded: () => setStylesLoaded(true),
+          children: createPortal3(children, mountTarget)
+        }
+      ) })
+    })
+  );
+}
+AutoFrame.displayName = "AutoFrame";
+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" };
+
+// components/Editor/components/Preview/index.tsx
+import { Fragment as Fragment10, jsx as jsx42 } from "react/jsx-runtime";
+var getClassName25 = get_class_name_factory_default("EditorPreview", styles_module_default20);
+var Preview2 = ({ id = "editor-preview" }) => {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const root = useAppStore((s) => s.state.data.root);
+  const config = useAppStore((s) => s.config);
+  const setStatus = useAppStore((s) => s.setStatus);
+  const iframe = useAppStore((s) => s.iframe);
+  const overrides = useAppStore((s) => s.overrides);
+  const metadata = useAppStore((s) => s.metadata);
+  const renderData = useAppStore(
+    (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
+  );
+  const Page = useCallback16(
+    (pageProps) => {
+      var _a, _b, _c, _d;
+      const propsWithSlots = useSlots(
+        config,
+        { type: "root", props: pageProps },
+        DropZoneEditPure
+      );
+      const richtextProps = useRichtextProps(
+        (_b = (_a = config.root) == null ? void 0 : _a.fields) != null ? _b : {},
+        pageProps
+      );
+      return ((_c = config.root) == null ? void 0 : _c.render) ? (_d = config.root) == null ? void 0 : _d.render(__spreadValues(__spreadValues({
+        id: "editor-root"
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx42(Fragment10, { children: propsWithSlots.children });
+    },
+    [config]
+  );
+  const Frame = useMemo17(() => overrides.iframe, [overrides]);
+  const rootProps = root.props || root;
+  const ref = useRef11(null);
+  const inner = !renderData ? /* @__PURE__ */ jsx42(
+    Page,
+    __spreadProps(__spreadValues({}, rootProps), {
+      editor: {
+        renderDropZone: DropZonePure,
+        isEditing: true,
+        dragRef: null,
+        metadata
+      },
+      editMode: true,
+      children: /* @__PURE__ */ jsx42(DropZonePure, { zone: rootDroppableId })
+    })
+  ) : /* @__PURE__ */ jsx42(Render, { data: renderData, config, metadata });
+  useEffect21(() => {
+    if (!iframe.enabled) {
+      setStatus("READY");
+    }
+  }, [iframe.enabled]);
+  return /* @__PURE__ */ jsx42(
+    "div",
+    {
+      className: getClassName25(),
+      id,
+      "data-editor-preview": true,
+      onClick: (e) => {
+        const el = e.target;
+        if (!el.hasAttribute("data-editor-component") && !el.hasAttribute("data-editor-dropzone")) {
+          dispatch({ type: "setUi", ui: { itemSelector: null } });
+        }
+      },
+      children: iframe.enabled ? /* @__PURE__ */ jsx42(
+        AutoFrame_default,
+        {
+          id: "preview-frame",
+          className: getClassName25("frame"),
+          "data-rfd-iframe": true,
+          onReady: () => {
+            setStatus("READY");
+          },
+          onNotReady: () => {
+            setStatus("MOUNTED");
+          },
+          frameRef: ref,
+          children: /* @__PURE__ */ jsx42(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+            if (Frame) {
+              return /* @__PURE__ */ jsx42(Frame, { document: document2, children: inner });
+            }
+            return inner;
+          } })
+        }
+      ) : /* @__PURE__ */ jsx42(
+        "div",
+        {
+          id: "preview-frame",
+          className: getClassName25("frame"),
+          ref,
+          "data-editor-entry": true,
+          children: inner
+        }
+      )
+    }
+  );
+};
+
+// components/Editor/components/Outline/index.tsx
+init_react_import();
+
+// components/LayerTree/index.tsx
+init_react_import();
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/LayerTree/styles.module.css#css-module
+init_react_import();
+var styles_module_default21 = { "LayerTree": "_LayerTree_3eixb_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_3eixb_11", "LayerTree-helper": "_LayerTree-helper_3eixb_17", "Layer": "_Layer_3eixb_1", "Layer-inner": "_Layer-inner_3eixb_34", "Layer--containsZone": "_Layer--containsZone_3eixb_42", "Layer-clickable": "_Layer-clickable_3eixb_46", "Layer--isSelected": "_Layer--isSelected_3eixb_68", "Layer-icon": "_Layer-icon_3eixb_80", "Layer-zoneIcon": "_Layer-zoneIcon_3eixb_81", "Layer-chevron": "_Layer-chevron_3eixb_85", "Layer--childIsSelected": "_Layer--childIsSelected_3eixb_97", "Layer-zones": "_Layer-zones_3eixb_101", "Layer-title": "_Layer-title_3eixb_117", "Layer-name": "_Layer-name_3eixb_130", "Layer--isGlobal": "_Layer--isGlobal_3eixb_150", "Layer--isUnlinked": "_Layer--isUnlinked_3eixb_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_3eixb_175" };
+
+// components/LayerTree/index.tsx
+import {
+  forwardRef as forwardRef2,
+  useCallback as useCallback17,
+  useContext as useContext13,
+  useRef as useRef12
+} from "react";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("LayerTree", styles_module_default21);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default21);
+var DEFAULT_LAYER_ROW_HEIGHT = 32;
+var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
+var MIN_VIRTUALIZED_LAYER_COUNT = 25;
+var measuredRowHeights = /* @__PURE__ */ new Map();
+var getZonesByParent = (zones) => {
+  return Object.keys(zones).reduce((acc, zone) => {
+    const [parentId] = zone.split(":");
+    acc[parentId] = [...acc[parentId] || [], zone];
+    return acc;
+  }, {});
+};
+var getZoneLabel = (zoneCompound, nodes, config, label) => {
+  var _a, _b, _c, _d;
+  if (label !== void 0) {
+    return label;
+  }
+  const [componentId, slotId] = zoneCompound.split(":");
+  if (!slotId) {
+    return;
+  }
+  const componentType = (_a = nodes[componentId]) == null ? void 0 : _a.data.type;
+  const configForComponent = componentType && componentType !== rootAreaId ? config.components[componentType] : config.root;
+  return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
+};
+var buildLayerNode = ({
+  config,
+  itemId,
+  index,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent
+}) => {
+  var _a, _b, _c;
+  const nodeData = nodes[itemId];
+  const componentType = ((_a = nodeData == null ? void 0 : nodeData.data.type) == null ? void 0 : _a.toString()) || "Component";
+  const label = (_c = (_b = config.components[componentType]) == null ? void 0 : _b.label) != null ? _c : componentType;
+  const childZoneCompounds = zonesByParent[itemId] || [];
+  return {
+    childZones: childZoneCompounds.map(
+      (childZoneCompound) => buildLayerTree({
+        config,
+        nodes,
+        zoneCompound: childZoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    componentType,
+    index,
+    itemId,
+    label,
+    zoneCompound
+  };
+};
+var buildLayerTree = ({
+  config,
+  label,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent = getZonesByParent(zones)
+}) => {
+  var _a, _b;
+  const contentIds = (_b = (_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [];
+  return {
+    items: contentIds.map(
+      (itemId, index) => buildLayerNode({
+        config,
+        itemId,
+        index,
+        nodes,
+        zoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    label: getZoneLabel(zoneCompound, nodes, config, label),
+    zoneCompound
+  };
+};
+var getEstimatedRowHeight = (itemId) => {
+  var _a;
+  return (_a = measuredRowHeights.get(itemId)) != null ? _a : DEFAULT_LAYER_ROW_HEIGHT;
+};
+var cacheMeasuredRowHeight = (itemId, height) => {
+  if (height <= 0) {
+    return;
+  }
+  measuredRowHeights.set(itemId, height);
+};
+var getScrollParent = (el) => {
+  var _a;
+  let current = (_a = el == null ? void 0 : el.parentElement) != null ? _a : null;
+  while (current) {
+    const { overflow, overflowY } = getComputedStyle(current);
+    if ([overflow, overflowY].some((value) => /auto|scroll/.test(value))) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+var Layer = forwardRef2(function Layer2({
+  childIsSelected,
+  dataIndex,
+  depth,
+  isSelected,
+  node,
+  selectedId,
+  selectedPathIds
+}, ref) {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const zoneStore = useContext13(ZoneStoreContext);
+  const isHovering = useContextStore(
+    ZoneStoreContext,
+    (s) => s.hoveringComponent === node.itemId
+  );
+  const isGlobal = useAppStore(
+    (s) => {
+      var _a;
+      return ((_a = s.config.components[node.componentType]) == null ? void 0 : _a.global) === true;
+    }
+  );
+  const isUnlinked = useAppStore(
+    (s) => {
+      var _a, _b;
+      return ((_b = (_a = s.state.indexes.nodes[node.itemId]) == null ? void 0 : _a.data) == null ? void 0 : _b.synced) === false;
+    }
+  );
+  const containsZone = node.childZones.length > 0;
+  const setItemSelector = useCallback17(
+    (itemSelector) => {
+      dispatch({ type: "setUi", ui: { itemSelector } });
+    },
+    [dispatch]
+  );
+  const shouldRenderChildren = isSelected || childIsSelected;
+  return /* @__PURE__ */ jsxs17(
+    "li",
+    {
+      ref,
+      className: getClassNameLayer({
+        childIsSelected,
+        containsZone,
+        isHovering,
+        isSelected,
+        isGlobal: isGlobal && !isUnlinked,
+        isUnlinked: isGlobal && isUnlinked
+      }),
+      "data-index": dataIndex,
+      "data-editor-layer-tree-id": node.itemId,
+      children: [
+        /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+          "button",
+          {
+            type: "button",
+            className: getClassNameLayer("clickable"),
+            onClick: () => {
+              if (isSelected) {
+                setItemSelector(null);
+                return;
+              }
+              setItemSelector({
+                index: node.index,
+                zone: node.zoneCompound
+              });
+              zoneStore.getState().scrollToComponent(node.itemId);
+            },
+            onMouseEnter: (e) => {
+              e.stopPropagation();
+              zoneStore.setState({ hoveringComponent: node.itemId });
+            },
+            onMouseLeave: (e) => {
+              e.stopPropagation();
+              zoneStore.setState({ hoveringComponent: null });
+            },
+            children: [
+              /* @__PURE__ */ jsx43(
+                "div",
+                {
+                  className: getClassNameLayer("chevron"),
+                  title: containsZone ? isSelected ? "Collapse" : "Expand" : void 0,
+                  children: containsZone && /* @__PURE__ */ jsx43(ChevronRight, { size: "12" })
+                }
+              ),
+              /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("icon"), children: /* @__PURE__ */ jsx43(Component, { size: "16" }) }),
+                /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("name"), children: node.label }),
+                isGlobal && isUnlinked && /* @__PURE__ */ jsx43(
+                  "div",
+                  {
+                    className: getClassNameLayer("unlinkedGlyph"),
+                    title: "Unlinked from shared",
+                    children: /* @__PURE__ */ jsx43(Unlink2, { size: "12" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx43(
+          "div",
+          {
+            className: getClassNameLayer("zones"),
+            children: /* @__PURE__ */ jsx43(
+              LayerTreeZone,
+              {
+                depth: depth + 1,
+                selectedId,
+                selectedPathIds,
+                tree: childZone
+              }
+            )
+          },
+          childZone.zoneCompound
+        ))
+      ]
+    }
+  );
+});
+var LayerTreeZone = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
+  return /* @__PURE__ */ jsxs17(Fragment11, { children: [
+    tree.label && /* @__PURE__ */ jsx43("div", { className: getClassName26("zoneTitle"), children: tree.label }),
+    shouldVirtualize ? /* @__PURE__ */ jsx43(
+      VirtualizedLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
+      }
+    ) : /* @__PURE__ */ jsx43(
+      StaticLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        selectedPathIds,
+        tree
+      }
+    )
+  ] });
+};
+var StaticLayerTreeItems = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  return /* @__PURE__ */ jsxs17("ul", { className: getClassName26(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx43("div", { className: getClassName26("helper"), children: "empty" }),
+    tree.items.map((node) => /* @__PURE__ */ jsx43(
+      Layer,
+      {
+        childIsSelected: selectedPathIds.has(node.itemId),
+        depth,
+        isSelected: selectedId === node.itemId,
+        node,
+        selectedId,
+        selectedPathIds
+      },
+      node.itemId
+    ))
+  ] });
+};
+var VirtualizedLayerTreeItems = ({
+  depth,
+  selectedId,
+  selectedPathIds,
+  tree
+}) => {
+  const listRef = useRef12(null);
+  const virtualizer = useVirtualizer2({
+    count: tree.items.length,
+    estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
+    getItemKey: (index) => tree.items[index].itemId,
+    getScrollElement: () => getScrollParent(listRef.current),
+    overscan: LAYER_TREE_VIRTUALIZATION_OVERSCAN,
+    measureElement: (element) => {
+      const height = Math.ceil(element.getBoundingClientRect().height);
+      const itemId = element.dataset.editorLayerTreeId;
+      if (itemId) {
+        cacheMeasuredRowHeight(itemId, height);
+      }
+      return height || DEFAULT_LAYER_ROW_HEIGHT;
+    }
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const renderedItems = [];
+  let previousEnd = 0;
+  let previousIndex = -1;
+  virtualItems.forEach((virtualItem) => {
+    const node = tree.items[virtualItem.index];
+    const gapSize = Math.max(virtualItem.start - previousEnd, 0);
+    if (gapSize > 0) {
+      renderedItems.push(
+        /* @__PURE__ */ jsx43(
+          "li",
+          {
+            "aria-hidden": "true",
+            style: { height: `${gapSize}px` }
+          },
+          `gap:${tree.zoneCompound}:${previousIndex}:${virtualItem.index}`
+        )
+      );
+    }
+    renderedItems.push(
+      /* @__PURE__ */ jsx43(
+        Layer,
         {
-          debug,
-          onStylesLoaded: () => setStylesLoaded(true),
-          children: createPortal3(children, mountTarget)
-        }
-      ) })
-    })
-  );
-}
-AutoFrame.displayName = "AutoFrame";
-var AutoFrame_default = AutoFrame;
+          childIsSelected: selectedPathIds.has(node.itemId),
+          dataIndex: virtualItem.index,
+          depth,
+          isSelected: selectedId === node.itemId,
+          node,
+          ref: virtualizer.measureElement,
+          selectedId,
+          selectedPathIds
+        },
+        node.itemId
+      )
+    );
+    previousEnd = virtualItem.end;
+    previousIndex = virtualItem.index;
+  });
+  const trailingGap = Math.max(totalSize - previousEnd, 0);
+  if (trailingGap > 0) {
+    renderedItems.push(
+      /* @__PURE__ */ jsx43(
+        "li",
+        {
+          "aria-hidden": "true",
+          style: { height: `${trailingGap}px` }
+        },
+        `gap:${tree.zoneCompound}:${previousIndex}:end`
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs17("ul", { className: getClassName26(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx43("div", { className: getClassName26("helper"), children: "empty" }),
+    renderedItems
+  ] });
+};
+var LayerTree = ({
+  selectedId,
+  selectedPathIds,
+  trees
+}) => {
+  return /* @__PURE__ */ jsx43(Fragment11, { children: trees.map((tree) => /* @__PURE__ */ jsx43(
+    LayerTreeZone,
+    {
+      depth: 0,
+      selectedId,
+      selectedPathIds,
+      tree
+    },
+    tree.zoneCompound
+  )) });
+};
 
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Preview/styles.module.css#css-module
+// components/Editor/components/Outline/index.tsx
+import { useMemo as useMemo18 } from "react";
+
+// lib/data/find-zones-for-area.ts
 init_react_import();
-var styles_module_default22 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var findZonesForArea = (state, area) => {
+  return Object.keys(state.indexes.zones).filter(
+    (zone) => zone.split(":")[0] === area
+  );
+};
 
-// components/Editor/components/Preview/index.tsx
-import { Fragment as Fragment11, jsx as jsx45 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("EditorPreview", styles_module_default22);
-var Preview2 = ({ id = "editor-preview" }) => {
-  const dispatch = useAppStore((s) => s.dispatch);
-  const root = useAppStore((s) => s.state.data.root);
+// components/Editor/components/Outline/index.tsx
+import { useShallow as useShallow8 } from "zustand/react/shallow";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var Outline = () => {
+  const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
-  const setStatus = useAppStore((s) => s.setStatus);
-  const iframe = useAppStore((s) => s.iframe);
-  const overrides = useAppStore((s) => s.overrides);
-  const metadata = useAppStore((s) => s.metadata);
-  const renderData = useAppStore(
-    (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
+  const nodes = useAppStore((s) => s.state.indexes.nodes);
+  const zones = useAppStore((s) => s.state.indexes.zones);
+  const selectedId = useAppStore((s) => {
+    var _a;
+    return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) || null;
+  });
+  const rootZones = useAppStore(
+    useShallow8((s) => findZonesForArea(s.state, "root"))
   );
-  const Page = useCallback17(
-    (pageProps) => {
-      var _a, _b, _c, _d;
-      const propsWithSlots = useSlots(
+  const selectedPathIds = useMemo18(() => {
+    var _a;
+    const selectedPath = selectedId ? (_a = nodes[selectedId]) == null ? void 0 : _a.path : null;
+    return new Set(
+      (selectedPath == null ? void 0 : selectedPath.map((candidate) => candidate.split(":")[0]).filter(Boolean)) || []
+    );
+  }, [nodes, selectedId]);
+  const trees = useMemo18(
+    () => rootZones.map(
+      (zoneCompound) => buildLayerTree({
         config,
-        { type: "root", props: pageProps },
-        DropZoneEditPure
-      );
-      const richtextProps = useRichtextProps(
-        (_b = (_a = config.root) == null ? void 0 : _a.fields) != null ? _b : {},
-        pageProps
-      );
-      return ((_c = config.root) == null ? void 0 : _c.render) ? (_d = config.root) == null ? void 0 : _d.render(__spreadValues(__spreadValues({
-        id: "editor-root"
-      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx45(Fragment11, { children: propsWithSlots.children });
-    },
-    [config]
+        label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
+        nodes,
+        zoneCompound,
+        zones
+      })
+    ),
+    [config, nodes, rootZones, zones]
   );
-  const Frame = useMemo18(() => overrides.iframe, [overrides]);
-  const rootProps = root.props || root;
-  const ref = useRef12(null);
-  const inner = !renderData ? /* @__PURE__ */ jsx45(
-    Page,
-    __spreadProps(__spreadValues({}, rootProps), {
-      editor: {
-        renderDropZone: DropZonePure,
-        isEditing: true,
-        dragRef: null,
-        metadata
-      },
-      editMode: true,
-      children: /* @__PURE__ */ jsx45(DropZonePure, { zone: rootDroppableId })
-    })
-  ) : /* @__PURE__ */ jsx45(Render, { data: renderData, config, metadata });
-  useEffect21(() => {
-    if (!iframe.enabled) {
-      setStatus("READY");
-    }
-  }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx45(
-    "div",
+  const Wrapper = useMemo18(() => outlineOverride || "div", [outlineOverride]);
+  return /* @__PURE__ */ jsx44(Wrapper, { children: /* @__PURE__ */ jsx44(
+    LayerTree,
     {
-      className: getClassName27(),
-      id,
-      "data-editor-preview": true,
-      onClick: (e) => {
-        const el = e.target;
-        if (!el.hasAttribute("data-editor-component") && !el.hasAttribute("data-editor-dropzone")) {
-          dispatch({ type: "setUi", ui: { itemSelector: null } });
-        }
-      },
-      children: iframe.enabled ? /* @__PURE__ */ jsx45(
-        AutoFrame_default,
-        {
-          id: "preview-frame",
-          className: getClassName27("frame"),
-          "data-rfd-iframe": true,
-          onReady: () => {
-            setStatus("READY");
-          },
-          onNotReady: () => {
-            setStatus("MOUNTED");
-          },
-          frameRef: ref,
-          children: /* @__PURE__ */ jsx45(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
-            if (Frame) {
-              return /* @__PURE__ */ jsx45(Frame, { document: document2, children: inner });
-            }
-            return inner;
-          } })
-        }
-      ) : /* @__PURE__ */ jsx45(
-        "div",
-        {
-          id: "preview-frame",
-          className: getClassName27("frame"),
-          ref,
-          "data-editor-entry": true,
-          children: inner
-        }
-      )
+      selectedId,
+      selectedPathIds,
+      trees
     }
-  );
+  ) });
 };
 
 // lib/use-loaded-overrides.ts
@@ -7429,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_default23 = { "Editor": "_Editor_1ty8s_19", "Editor-portal": "_Editor-portal_1ty8s_32", "EditorLayout": "_EditorLayout_1ty8s_37", "EditorLayout-inner": "_EditorLayout-inner_1ty8s_41", "Editor--hidePlugins": "_Editor--hidePlugins_1ty8s_73", "EditorLayout--mounted": "_EditorLayout--mounted_1ty8s_78", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_1ty8s_82", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_1ty8s_82", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_1ty8s_87", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_1ty8s_105", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_1ty8s_127", "EditorLayout-mounted": "_EditorLayout-mounted_1ty8s_146", "EditorLayout-nav": "_EditorLayout-nav_1ty8s_187", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_1ty8s_203", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_1ty8s_213", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_1ty8s_219", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_1ty8s_225", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_1ty8s_245", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_1ty8s_252", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_1ty8s_266", "EditorPluginTab": "_EditorPluginTab_1ty8s_273", "EditorPluginTab--visible": "_EditorPluginTab--visible_1ty8s_279", "EditorPluginTab-body": "_EditorPluginTab-body_1ty8s_284" };
+var styles_module_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" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -7460,8 +7434,8 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx46 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx46(Fragment12, { children });
+import { Fragment as Fragment12, jsx as jsx45 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx45(Fragment12, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
@@ -7486,11 +7460,11 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default24 = { "SidebarSection": "_SidebarSection_tt2oy_1", "SidebarSection-title": "_SidebarSection-title_tt2oy_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_tt2oy_20", "SidebarSection-content": "_SidebarSection-content_tt2oy_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_tt2oy_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_tt2oy_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_tt2oy_33", "SidebarSection-heading": "_SidebarSection-heading_tt2oy_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_tt2oy_88" };
+var styles_module_default23 = { "SidebarSection": "_SidebarSection_tt2oy_1", "SidebarSection-title": "_SidebarSection-title_tt2oy_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_tt2oy_20", "SidebarSection-content": "_SidebarSection-content_tt2oy_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_tt2oy_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_tt2oy_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_tt2oy_33", "SidebarSection-heading": "_SidebarSection-heading_tt2oy_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_tt2oy_88" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default24);
+import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("SidebarSection", styles_module_default23);
 var SidebarSection = ({
   children,
   title,
@@ -7499,13 +7473,13 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ jsxs18("div", { className: getClassName28({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx47("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName28("breadcrumbs"), children: [
-      showBreadcrumbs && /* @__PURE__ */ jsx47(Breadcrumbs, {}),
-      /* @__PURE__ */ jsx47("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx47(Heading, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ jsxs18("div", { className: getClassName27({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx46("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName27("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx46(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx46("div", { className: getClassName27("heading"), children: /* @__PURE__ */ jsx46(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx47("div", { className: getClassName28("content"), children }),
-    isLoading && /* @__PURE__ */ jsx47("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ jsx47(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx46("div", { className: getClassName27("content"), children }),
+    isLoading && /* @__PURE__ */ jsx46("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ jsx46(Loader, { size: 32 }) })
   ] });
 };
 
@@ -7529,11 +7503,11 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "EditorCombobox-input": "_EditorCombobox-input_12a2a_4", "EditorCombobox-trigger": "_EditorCombobox-trigger_12a2a_21", "EditorCombobox-triggerIcon": "_EditorCombobox-triggerIcon_12a2a_42", "EditorCombobox-positioner": "_EditorCombobox-positioner_12a2a_46", "EditorCombobox-content": "_EditorCombobox-content_12a2a_50", "EditorCombobox-list": "_EditorCombobox-list_12a2a_65", "EditorCombobox-item": "_EditorCombobox-item_12a2a_71", "EditorCombobox-itemIndicator": "_EditorCombobox-itemIndicator_12a2a_97", "EditorCombobox-empty": "_EditorCombobox-empty_12a2a_110" };
+var styles_module_default24 = { "EditorCombobox-input": "_EditorCombobox-input_12a2a_4", "EditorCombobox-trigger": "_EditorCombobox-trigger_12a2a_21", "EditorCombobox-triggerIcon": "_EditorCombobox-triggerIcon_12a2a_42", "EditorCombobox-positioner": "_EditorCombobox-positioner_12a2a_46", "EditorCombobox-content": "_EditorCombobox-content_12a2a_50", "EditorCombobox-list": "_EditorCombobox-list_12a2a_65", "EditorCombobox-item": "_EditorCombobox-item_12a2a_71", "EditorCombobox-itemIndicator": "_EditorCombobox-itemIndicator_12a2a_97", "EditorCombobox-empty": "_EditorCombobox-empty_12a2a_110" };
 
 // components/ui/Combobox/index.tsx
-import { jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName29 = get_class_name_factory_default("EditorCombobox", styles_module_default25);
+import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("EditorCombobox", styles_module_default24);
 var join = (...values) => values.filter(Boolean).join(" ");
 var mergeClassName = (base, override) => {
   if (!override) return base;
@@ -7549,11 +7523,11 @@ function ComboboxInput(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     ComboboxPrimitive.Input,
     __spreadValues({
       "data-slot": "combobox-input",
-      className: mergeClassName(getClassName29("input"), className)
+      className: mergeClassName(getClassName28("input"), className)
     }, props)
   );
 }
@@ -7573,19 +7547,19 @@ function ComboboxContent(_a) {
     "alignOffset",
     "children"
   ]);
-  return /* @__PURE__ */ jsx48(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
     ComboboxPrimitive.Positioner,
     {
       side,
       sideOffset,
       align,
       alignOffset,
-      className: getClassName29("positioner"),
-      children: /* @__PURE__ */ jsx48(
+      className: getClassName28("positioner"),
+      children: /* @__PURE__ */ jsx47(
         ComboboxPrimitive.Popup,
         __spreadProps(__spreadValues({
           "data-slot": "combobox-content",
-          className: mergeClassName(getClassName29("content"), className)
+          className: mergeClassName(getClassName28("content"), className)
         }, props), {
           children
         })
@@ -7599,11 +7573,11 @@ function ComboboxList(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     ComboboxPrimitive.List,
     __spreadValues({
       "data-slot": "combobox-list",
-      className: mergeClassName(getClassName29("list"), className)
+      className: mergeClassName(getClassName28("list"), className)
     }, props)
   );
 }
@@ -7619,10 +7593,10 @@ function ComboboxItem(_a) {
     ComboboxPrimitive.Item,
     __spreadProps(__spreadValues({
       "data-slot": "combobox-item",
-      className: mergeClassName(getClassName29("item"), className)
+      className: mergeClassName(getClassName28("item"), className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx48("span", { className: getClassName29("itemIndicator"), children: /* @__PURE__ */ jsx48(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx48(Check, { size: 14 }) }) }),
+        /* @__PURE__ */ jsx47("span", { className: getClassName28("itemIndicator"), children: /* @__PURE__ */ jsx47(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(Check, { size: 14 }) }) }),
         children
       ]
     })
@@ -7634,27 +7608,27 @@ function ComboboxEmpty(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     ComboboxPrimitive.Empty,
     __spreadValues({
       "data-slot": "combobox-empty",
-      className: mergeClassName(getClassName29("empty"), className)
+      className: mergeClassName(getClassName28("empty"), className)
     }, props)
   );
 }
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default26 = { "BrowserBar": "_BrowserBar_x10eb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_x10eb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_x10eb_46", "BrowserBar-urlText": "_BrowserBar-urlText_x10eb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_x10eb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_x10eb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_x10eb_74", "BrowserBar-actions": "_BrowserBar-actions_x10eb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_x10eb_89" };
+var styles_module_default25 = { "BrowserBar": "_BrowserBar_x10eb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_x10eb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_x10eb_46", "BrowserBar-urlText": "_BrowserBar-urlText_x10eb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_x10eb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_x10eb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_x10eb_74", "BrowserBar-actions": "_BrowserBar-actions_x10eb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_x10eb_89" };
 
 // components/BrowserBar/index.tsx
-import { jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
 var normalizeRoute = (raw) => {
   const trimmed = raw.trim();
   if (!trimmed) return trimmed;
   return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
 };
-var getClassName30 = get_class_name_factory_default("BrowserBar", styles_module_default26);
+var getClassName29 = get_class_name_factory_default("BrowserBar", styles_module_default25);
 var DEVICE_VIEWPORTS = {
   desktop: { width: "100%", height: "auto", icon: "Monitor", label: "Desktop" },
   mobile: { width: 360, height: "auto", icon: "Smartphone", label: "Mobile" }
@@ -7700,7 +7674,7 @@ var BrowserBar = ({
     if (!next || next === currentRoute) return;
     void (onRouteChange == null ? void 0 : onRouteChange(next));
   };
-  return /* @__PURE__ */ jsxs20("div", { className: getClassName30(), children: [
+  return /* @__PURE__ */ jsxs20("div", { className: getClassName29(), children: [
     showRoutePicker ? /* @__PURE__ */ jsxs20(
       Combobox,
       {
@@ -7716,17 +7690,17 @@ var BrowserBar = ({
           /* @__PURE__ */ jsxs20(
             "form",
             {
-              className: getClassName30("urlTrigger"),
+              className: getClassName29("urlTrigger"),
               onSubmit: (event) => {
                 event.preventDefault();
                 submit(inputValue);
               },
               children: [
-                /* @__PURE__ */ jsx49(Globe, { className: getClassName30("urlIcon"), size: 14 }),
-                /* @__PURE__ */ jsx49(
+                /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+                /* @__PURE__ */ jsx48(
                   ComboboxInput,
                   {
-                    className: getClassName30("urlInput"),
+                    className: getClassName29("urlInput"),
                     placeholder: "/",
                     spellCheck: false,
                     autoCorrect: "off",
@@ -7737,32 +7711,32 @@ var BrowserBar = ({
             }
           ),
           /* @__PURE__ */ jsxs20(ComboboxContent, { children: [
-            /* @__PURE__ */ jsx49(ComboboxEmpty, { children: "Press Enter to go to this path" }),
-            /* @__PURE__ */ jsx49(ComboboxList, { children: (path) => /* @__PURE__ */ jsx49(ComboboxItem, { value: path, children: /* @__PURE__ */ jsx49("span", { className: getClassName30("itemPath"), children: path }) }, path) })
+            /* @__PURE__ */ jsx48(ComboboxEmpty, { children: "Press Enter to go to this path" }),
+            /* @__PURE__ */ jsx48(ComboboxList, { children: (path) => /* @__PURE__ */ jsx48(ComboboxItem, { value: path, children: /* @__PURE__ */ jsx48("span", { className: getClassName29("itemPath"), children: path }) }, path) })
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsxs20("div", { className: getClassName30("urlTrigger"), children: [
-      /* @__PURE__ */ jsx49(Globe, { className: getClassName30("urlIcon"), size: 14 }),
-      /* @__PURE__ */ jsx49("span", { className: getClassName30("urlText"), children: "/" })
+    ) : /* @__PURE__ */ jsxs20("div", { className: getClassName29("urlTrigger"), children: [
+      /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+      /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
     ] }),
-    /* @__PURE__ */ jsxs20("div", { className: getClassName30("actions"), children: [
-      /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsxs20("div", { className: getClassName29("actions"), children: [
+      /* @__PURE__ */ jsx48(
         IconButton,
         {
           type: "button",
           title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
           onClick: () => setDevice(activeDevice === "desktop" ? "mobile" : "desktop"),
-          children: /* @__PURE__ */ jsx49("span", { className: getClassName30("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx49(Monitor, { size: 16 }) : /* @__PURE__ */ jsx49(Smartphone, { size: 16 }) })
+          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 16 }) : /* @__PURE__ */ jsx48(Smartphone, { size: 16 }) })
         }
       ),
-      /* @__PURE__ */ jsx49(
+      /* @__PURE__ */ jsx48(
         IconButton,
         {
           type: "button",
           title: isFullScreen ? "Exit full screen" : "Enter full screen",
           onClick: toggleFullScreen,
-          children: /* @__PURE__ */ jsx49("span", { className: getClassName30("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx49(Minimize, { size: 16 }) : /* @__PURE__ */ jsx49(Maximize, { size: 16 }) })
+          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 16 }) : /* @__PURE__ */ jsx48(Maximize, { size: 16 }) })
         }
       )
     ] })
@@ -7771,7 +7745,7 @@ var BrowserBar = ({
 
 // 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_default27 = { "EditorCanvas": "_EditorCanvas_es8bv_1", "EditorCanvas-controls": "_EditorCanvas-controls_es8bv_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_es8bv_22", "EditorCanvas-inner": "_EditorCanvas-inner_es8bv_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_es8bv_46", "EditorCanvas-root": "_EditorCanvas-root_es8bv_46", "EditorCanvas--ready": "_EditorCanvas--ready_es8bv_83", "EditorCanvas-loader": "_EditorCanvas-loader_es8bv_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_es8bv_100", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_es8bv_109", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_es8bv_114" };
+var styles_module_default26 = { "EditorCanvas": "_EditorCanvas_es8bv_1", "EditorCanvas-controls": "_EditorCanvas-controls_es8bv_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_es8bv_22", "EditorCanvas-inner": "_EditorCanvas-inner_es8bv_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_es8bv_46", "EditorCanvas-root": "_EditorCanvas-root_es8bv_46", "EditorCanvas--ready": "_EditorCanvas--ready_es8bv_83", "EditorCanvas-loader": "_EditorCanvas-loader_es8bv_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_es8bv_100", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_es8bv_109", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_es8bv_114" };
 
 // components/Editor/components/Canvas/index.tsx
 import { useShallow as useShallow9 } from "zustand/react/shallow";
@@ -7784,7 +7758,7 @@ import {
   useRef as useRef14,
   useMemo as useMemo21
 } from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
@@ -7796,7 +7770,7 @@ var FrameProvider = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx50(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx49(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext14(FrameContext);
@@ -7807,8 +7781,8 @@ var useCanvasFrame = () => {
 };
 
 // components/Editor/components/Canvas/index.tsx
-import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs21 } from "react/jsx-runtime";
-var getClassName31 = get_class_name_factory_default("EditorCanvas", styles_module_default27);
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName30 = get_class_name_factory_default("EditorCanvas", styles_module_default26);
 var ZOOM_STEP = 0.15;
 var MIN_ZOOM = 0.25;
 var MAX_ZOOM = 3;
@@ -7850,7 +7824,7 @@ var Canvas = () => {
   const [showTransition, setShowTransition] = useState21(false);
   const isResizingRef = useRef15(false);
   const defaultRender = useMemo22(() => {
-    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx51(Fragment13, { children });
+    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx50(Fragment13, { children });
     return EditorDefault;
   }, []);
   const CustomPreview = useMemo22(
@@ -7972,10 +7946,10 @@ var Canvas = () => {
     appStoreApi,
     setUi
   ]);
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
-      className: getClassName31({
+      className: getClassName30({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas
@@ -7990,16 +7964,16 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: getClassName31("inner"), ref: frameRef, children: [
-        !disableZoomControls && /* @__PURE__ */ jsxs21("div", { className: getClassName31("zoomControls"), children: [
-          /* @__PURE__ */ jsx51(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx51(Minus, { size: 14 }) }),
-          /* @__PURE__ */ jsx51(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ jsx51(RotateCcw, { size: 14 }) }),
-          /* @__PURE__ */ jsx51(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx51(Plus, { size: 14 }) })
+      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(
           "div",
           {
-            className: getClassName31("rootColumn"),
+            className: getClassName30("rootColumn"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
               transform: disableZoomControls ? void 0 : `scale(${canvasZoom})`,
@@ -8007,7 +7981,7 @@ var Canvas = () => {
               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__ */ jsx51("div", { className: getClassName31("browserBar"), children: /* @__PURE__ */ jsx51(
+              iframe.enabled && /* @__PURE__ */ jsx50("div", { className: getClassName30("browserBar"), children: /* @__PURE__ */ jsx50(
                 BrowserBar,
                 {
                   onViewportChange: (viewport) => {
@@ -8024,23 +7998,23 @@ var Canvas = () => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx50(
                 "div",
                 {
-                  className: getClassName31("root"),
+                  className: getClassName30("root"),
                   suppressHydrationWarning: true,
                   id: "editor-canvas-root",
                   onTransitionEnd: () => {
                     setShowTransition(false);
                     isResizingRef.current = false;
                   },
-                  children: /* @__PURE__ */ jsx51(CustomPreview, { children: /* @__PURE__ */ jsx51(Preview2, {}) })
+                  children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx51("div", { className: getClassName31("loader"), children: /* @__PURE__ */ jsx51(Loader, { size: 24 }) })
+        /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
       ] })
     }
   );
@@ -8136,11 +8110,11 @@ import { useCallback as useCallback21, useRef as useRef17 } from "react";
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default28 = { "ResizeHandle": "_ResizeHandle_1u3rv_2", "ResizeHandle--left": "_ResizeHandle--left_1u3rv_16", "ResizeHandle--right": "_ResizeHandle--right_1u3rv_20" };
+var styles_module_default27 = { "ResizeHandle": "_ResizeHandle_1u3rv_2", "ResizeHandle--left": "_ResizeHandle--left_1u3rv_16", "ResizeHandle--right": "_ResizeHandle--right_1u3rv_20" };
 
 // components/Editor/components/ResizeHandle/index.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
-var getClassName32 = get_class_name_factory_default("ResizeHandle", styles_module_default28);
+import { jsx as jsx51 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default27);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -8195,11 +8169,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref: handleRef,
-      className: getClassName32({ [position]: true }),
+      className: getClassName31({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -8207,11 +8181,11 @@ var ResizeHandle = ({
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css#css-module
 init_react_import();
-var styles_module_default29 = { "Sidebar": "_Sidebar_14k7q_1", "Sidebar--isVisible": "_Sidebar--isVisible_14k7q_9", "Sidebar--left": "_Sidebar--left_14k7q_13", "Sidebar--right": "_Sidebar--right_14k7q_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_14k7q_37" };
+var styles_module_default28 = { "Sidebar": "_Sidebar_14k7q_1", "Sidebar--isVisible": "_Sidebar--isVisible_14k7q_9", "Sidebar--left": "_Sidebar--left_14k7q_13", "Sidebar--right": "_Sidebar--right_14k7q_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_14k7q_37" };
 
 // components/Editor/components/Sidebar/index.tsx
-import { Fragment as Fragment14, jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
-var getClassName33 = get_class_name_factory_default("Sidebar", styles_module_default29);
+import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
+var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default28);
 var Sidebar = ({
   position,
   sidebarRef,
@@ -8221,15 +8195,15 @@ var Sidebar = ({
   children
 }) => {
   return /* @__PURE__ */ jsxs22(Fragment14, { children: [
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx52(
       "div",
       {
         ref: sidebarRef,
-        className: getClassName33({ [position]: true, isVisible }),
+        className: getClassName32({ [position]: true, isVisible }),
         children
       }
     ),
-    /* @__PURE__ */ jsx53("div", { className: `${getClassName33("resizeHandle")}`, children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx52("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx52(
       ResizeHandle,
       {
         position,
@@ -8404,12 +8378,12 @@ 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_default30 = { "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" };
+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 jsx54, jsxs as jsxs23 } from "react/jsx-runtime";
-var getClassName34 = get_class_name_factory_default("Nav", styles_module_default30);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default30);
+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,
@@ -8418,7 +8392,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx53(
     "li",
     {
       className: getClassNameItem3({
@@ -8427,8 +8401,8 @@ var MenuItem = ({
         desktopOnly
       }),
       children: onClick && /* @__PURE__ */ jsxs23("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkLabel"), children: label })
+        icon && /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+        /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
     }
   );
@@ -8437,17 +8411,17 @@ var Nav = ({
   items,
   footer
 }) => {
-  return /* @__PURE__ */ jsxs23("nav", { className: getClassName34(), children: [
-    /* @__PURE__ */ jsx54("ul", { className: getClassName34("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx54(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ jsx54("div", { className: getClassName34("footer"), children: 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 jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
-var getClassName35 = get_class_name_factory_default("Editor", styles_module_default23);
-var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default23);
-var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default23);
+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);
+var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default22);
+var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default22);
 var FieldSideBarToolbar = () => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
@@ -8458,30 +8432,30 @@ var FieldSideBarToolbar = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
-  return /* @__PURE__ */ jsxs24("div", { className: getClassName35("fieldSideBarToolbar"), children: [
-    /* @__PURE__ */ jsxs24("div", { className: getClassName35("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs24("div", { className: getClassName34("fieldSideBarToolbar"), children: [
+    /* @__PURE__ */ jsxs24("div", { className: getClassName34("fieldSideBarHistory"), children: [
+      /* @__PURE__ */ jsx54(
         IconButton,
         {
           type: "button",
           title: "undo",
           disabled: !hasPast,
           onClick: back,
-          children: /* @__PURE__ */ jsx55(Undo2, { size: 18 })
+          children: /* @__PURE__ */ jsx54(Undo2, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx54(
         IconButton,
         {
           type: "button",
           title: "redo",
           disabled: !hasFuture,
           onClick: forward,
-          children: /* @__PURE__ */ jsx55(Redo2, { size: 18 })
+          children: /* @__PURE__ */ jsx54(Redo2, { size: 18 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx55("div", { className: getClassName35("fieldSideBarActions"), children: /* @__PURE__ */ jsx55(CustomHeaderActions, { children: /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx54("div", { className: getClassName34("fieldSideBarActions"), children: /* @__PURE__ */ jsx54(CustomHeaderActions, { children: /* @__PURE__ */ jsx54(
       Button,
       {
         onClick: () => {
@@ -8501,8 +8475,8 @@ var FieldSideBar = () => {
     }
   );
   return /* @__PURE__ */ jsxs24(Fragment15, { children: [
-    /* @__PURE__ */ jsx55(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ jsx55(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx55(Fields, {}) })
+    /* @__PURE__ */ jsx54(FieldSideBarToolbar, {}),
+    /* @__PURE__ */ jsx54(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx54(Fields, {}) })
   ] });
 };
 var PluginTab = ({
@@ -8510,7 +8484,7 @@ var PluginTab = ({
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -8533,6 +8507,7 @@ var Layout = ({ children }) => {
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
+  const navBarVisible = useAppStore((s) => s.state.ui.navBarVisible);
   const instanceId = useAppStore((s) => s.instanceId);
   const {
     width: leftWidth,
@@ -8677,7 +8652,7 @@ var Layout = ({ children }) => {
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx55(Sun, { size: 18 }) : /* @__PURE__ */ jsx55(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx54(Sun, { size: 18 }) : /* @__PURE__ */ jsx54(Moon, { size: 18 });
   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")),
@@ -8685,7 +8660,7 @@ var Layout = ({ children }) => {
   );
   const pluginItems = useMemo23(() => {
     const details = {};
-    const defaultPlugins = [blocksPlugin(), outlinePlugin()];
+    const defaultPlugins = [blocksPlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
     const combinedPlugins = [
       ...defaultPlugins,
@@ -8702,7 +8677,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx55(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx54(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -8744,20 +8719,21 @@ var Layout = ({ children }) => {
   return /* @__PURE__ */ jsxs24(
     "div",
     {
-      className: `Editor ${getClassName35({
+      className: `Editor ${getClassName34({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx55(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx55(CustomEditor, { children: children || /* @__PURE__ */ jsx55(FrameProvider, { children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx54(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx54(CustomEditor, { children: children || /* @__PURE__ */ jsx54(FrameProvider, { children: /* @__PURE__ */ jsx54(
           "div",
           {
             className: getLayoutClassName({
               leftSideBarVisible,
               mounted,
               rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
+              navBarVisible,
               mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content",
               mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
@@ -8769,11 +8745,11 @@ var Layout = ({ children }) => {
                 className: getLayoutClassName("inner"),
                 style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
                 children: [
-                  /* @__PURE__ */ jsx55("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx55(
+                  navBarVisible && /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx54(
                     Nav,
                     {
                       items: pluginItems,
-                      footer: /* @__PURE__ */ jsx55(
+                      footer: /* @__PURE__ */ jsx54(
                         IconButton,
                         {
                           type: "button",
@@ -8790,13 +8766,13 @@ var Layout = ({ children }) => {
                       ref: mobilePanelRef,
                       className: getLayoutClassName("mobilePanel"),
                       children: [
-                        /* @__PURE__ */ jsx55(
+                        /* @__PURE__ */ jsx54(
                           "div",
                           {
                             className: getLayoutClassName("mobileDragHandle"),
                             onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
                             onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ jsx55(
+                            children: /* @__PURE__ */ jsx54(
                               "div",
                               {
                                 className: getLayoutClassName("mobileDragHandlePill")
@@ -8804,17 +8780,17 @@ var Layout = ({ children }) => {
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx55(
+                        /* @__PURE__ */ jsx54(
                           "div",
                           {
                             className: getLayoutClassName("mobilePanelContent"),
                             children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx55(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx54(
                                 PluginTab,
                                 {
                                   visible: currentPlugin === id,
                                   mobileOnly,
-                                  children: /* @__PURE__ */ jsx55(Render2, {})
+                                  children: /* @__PURE__ */ jsx54(Render2, {})
                                 },
                                 id
                               )
@@ -8824,7 +8800,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx55(
+                  /* @__PURE__ */ jsx54(
                     Sidebar,
                     {
                       position: "left",
@@ -8833,20 +8809,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx55(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx54(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ jsx55(Render2, {})
+                            children: /* @__PURE__ */ jsx54(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx55(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx55(
+                  /* @__PURE__ */ jsx54(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx54(
                     Sidebar,
                     {
                       position: "right",
@@ -8854,7 +8830,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx55(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
                     }
                   )
                 ]
@@ -8862,17 +8838,17 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx55("div", { id: "editor-portal-root", className: getClassName35("portal") })
+        /* @__PURE__ */ jsx54("div", { id: "editor-portal-root", className: getClassName34("portal") })
       ]
     }
   );
 };
 
 // components/Editor/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx56(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx55(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext15(propsContext);
 function EditorProvider({ children }) {
@@ -9056,10 +9032,10 @@ function EditorProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx56(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx56(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ jsx55(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx55(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor3(props) {
-  return /* @__PURE__ */ jsx56(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx55(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(Layout, { children: props.children }) })) }));
 }
 Editor3.Components = Components;
 Editor3.Fields = Fields;
@@ -9144,7 +9120,7 @@ import {
   MemoryRouter,
   StaticRouter
 } from "react-router";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -9165,28 +9141,28 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ jsx57(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ jsx56(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ jsx57(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    return /* @__PURE__ */ jsx56(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
   }
   if (router === "hash") {
-    return /* @__PURE__ */ jsx57(HashRouter, { children: inner });
+    return /* @__PURE__ */ jsx56(HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ jsx57(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ jsx56(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ jsx57(BrowserRouter, { children: inner });
+  return /* @__PURE__ */ jsx56(BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
 init_react_import();
 import { Route, Routes } from "react-router";
-import { Fragment as Fragment16, jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ jsx58(
+var DefaultNotFound = () => /* @__PURE__ */ jsx57(
   "div",
   {
     style: {
@@ -9197,19 +9173,19 @@ var DefaultNotFound = () => /* @__PURE__ */ jsx58(
       alignItems: "center"
     },
     children: /* @__PURE__ */ jsxs25("div", { children: [
-      /* @__PURE__ */ jsx58("h1", { children: "404" }),
-      /* @__PURE__ */ jsx58("p", { children: "No page matches this route." })
+      /* @__PURE__ */ jsx57("h1", { children: "404" }),
+      /* @__PURE__ */ jsx57("p", { children: "No page matches this route." })
     ] })
   }
 );
-function RenderRoute({
+function RenderForKey({
   routeKey,
   metadata
 }) {
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57(
     Render,
     {
       config,
@@ -9219,91 +9195,118 @@ function RenderRoute({
     routeKey
   );
 }
-function EditorRouteRender({
+function EditorForKey({
   routeKey,
-  layoutProps
+  editorProps,
+  children
 }) {
-  const {
-    onPublish,
-    onChange,
-    plugins,
-    overrides,
-    fieldTransforms,
-    metadata,
-    iframe,
-    viewports,
-    permissions
-  } = layoutProps;
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57(
     Editor3,
     {
       config,
       data,
-      plugins,
-      overrides,
-      fieldTransforms,
-      metadata,
-      iframe,
-      viewports,
-      permissions,
-      onChange,
-      onPublish,
+      ui: editorProps.ui,
+      plugins: editorProps.plugins,
+      overrides: editorProps.overrides,
+      fieldTransforms: editorProps.fieldTransforms,
+      metadata: editorProps.metadata,
+      iframe: editorProps.iframe,
+      viewports: editorProps.viewports,
+      permissions: editorProps.permissions,
+      onChange: editorProps.onChange,
+      onPublish: editorProps.onPublish,
+      onAction: editorProps.onAction,
+      renderHeader: editorProps.renderHeader,
+      renderHeaderActions: editorProps.renderHeaderActions,
+      title: editorProps.title,
+      dnd: editorProps.dnd,
+      initialHistory: editorProps.initialHistory,
+      height: editorProps.height,
+      fullScreenCanvas: editorProps.fullScreenCanvas,
+      disableZoomControls: editorProps.disableZoomControls,
+      _experimentalVirtualization: editorProps._experimentalVirtualization,
       routes,
       currentRoute: routeKey,
-      onRouteChange: (next) => navigate(next)
+      onRouteChange: (next) => navigate(next),
+      children
     },
     routeKey
   );
 }
-function NotFoundRoute({
-  renderNotFound
-}) {
-  return renderNotFound ? /* @__PURE__ */ jsx58(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx58(DefaultNotFound, {});
-}
-function AppLayout(layoutProps) {
-  const { pages, editorPath } = useApp();
-  const renderRoutes = Object.keys(pages);
+function AppRender({ metadata, renderNotFound }) {
+  const { pages, isEditing } = useApp();
+  if (isEditing) return null;
+  const routeKeys = Object.keys(pages);
   return /* @__PURE__ */ jsxs25(Routes, { children: [
-    renderRoutes.map((routeKey) => /* @__PURE__ */ jsx58(
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx57(
       Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ jsx58(
-          RenderRoute,
+        element: /* @__PURE__ */ jsx57(
+          RenderForKey,
           {
             routeKey,
-            metadata: layoutProps.metadata
+            metadata
           }
         )
       },
       `render:${routeKey}`
     )),
-    editorPath !== null && renderRoutes.map((routeKey) => /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx57(
+      Route,
+      {
+        path: "*",
+        element: renderNotFound ? /* @__PURE__ */ jsx57(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx57(DefaultNotFound, {})
+      }
+    )
+  ] });
+}
+function AppEditor(props) {
+  const _a = props, { children, renderNotFound } = _a, editorProps = __objRest(_a, ["children", "renderNotFound"]);
+  const { pages, isEditing, editorPath } = useApp();
+  if (!isEditing || editorPath === null) return null;
+  const routeKeys = Object.keys(pages);
+  return /* @__PURE__ */ jsxs25(Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx57(
       Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ jsx58(
-          EditorRouteRender,
+        element: /* @__PURE__ */ jsx57(
+          EditorForKey,
           {
             routeKey,
-            layoutProps
+            editorProps,
+            children
           }
         )
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx57(
       Route,
       {
         path: "*",
-        element: /* @__PURE__ */ jsx58(NotFoundRoute, { renderNotFound: layoutProps.renderNotFound })
+        element: renderNotFound ? /* @__PURE__ */ jsx57(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx57(DefaultNotFound, {})
       }
     )
   ] });
 }
+function DefaultAppLayout(props) {
+  const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
+  return /* @__PURE__ */ jsxs25(Fragment16, { children: [
+    /* @__PURE__ */ jsx57(
+      AppRender,
+      {
+        metadata: editorProps.metadata,
+        renderNotFound
+      }
+    ),
+    /* @__PURE__ */ jsx57(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+  ] });
+}
 function App(props) {
   const _a = props, {
     config,
@@ -9320,7 +9323,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57(
     AppProvider,
     {
       config,
@@ -9328,10 +9331,12 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ jsx58(AppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ jsx57(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
+App.Render = AppRender;
+App.Editor = AppEditor;
 
 // components/App/use-route-params.ts
 init_react_import();
@@ -9364,6 +9369,23 @@ function pageMetadata(data) {
   return out;
 }
 
+// plugins/outline/index.tsx
+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" };
+
+// plugins/outline/index.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+var getClassName35 = get_class_name_factory_default("OutlinePlugin", styles_module_default30);
+var outlinePlugin = () => ({
+  name: "outline",
+  label: "Outline",
+  render: () => /* @__PURE__ */ jsx58("div", { className: getClassName35(), children: /* @__PURE__ */ jsx58(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx58(Layers, {})
+});
+
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
 import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -9432,7 +9454,6 @@ export {
   useEditor,
   useGetEditor,
   blocksPlugin,
-  outlinePlugin,
   fieldsPlugin,
   usePropsContext,
   Editor3 as Editor,
@@ -9443,5 +9464,6 @@ export {
   App,
   useRouteParams,
   pageMetadata,
+  outlinePlugin,
   legacySideBarPlugin
 };