@reacteditor/core 0.0.4 → 0.0.6

package/dist/{chunk-D2RG73WI.mjs → chunk-HCFEY5Y7.mjs}

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-TCVU3WEN.mjs";
+} from "./chunk-DB4R5IWG.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -10,13 +10,13 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-VD3EVRUF.mjs";
+} from "./chunk-275EJPEB.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-6Q6A3BQH.mjs";
+} from "./chunk-BRDUM7MJ.mjs";
 import {
   Check,
   ChevronDown,
@@ -60,14 +60,14 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-2LVYDXZS.mjs";
+} from "./chunk-CRF2GWQA.mjs";
 import {
   getItem,
   insert,
   insertAction,
   makeStatePublic,
   populateIds
-} from "./chunk-VUEM62JF.mjs";
+} from "./chunk-UB2DES2O.mjs";
 import {
   defaultAppState,
   defaultViewports
@@ -149,9 +149,9 @@ function setDeep(node, path, newVal) {
 init_react_import();
 import { useEffect, useState } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Button/Button.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
-var Button_module_default = { "Button": "_Button_1g3xu_1", "Button--medium": "_Button--medium_1g3xu_31", "Button--large": "_Button--large_1g3xu_39", "Button-icon": "_Button-icon_1g3xu_46", "Button--primary": "_Button--primary_1g3xu_50", "Button--secondary": "_Button--secondary_1g3xu_71", "Button--flush": "_Button--flush_1g3xu_88", "Button--disabled": "_Button--disabled_1g3xu_92", "Button--fullWidth": "_Button--fullWidth_1g3xu_100", "Button-spinner": "_Button-spinner_1g3xu_105" };
+var Button_module_default = { "Button": "_Button_rj9nn_1", "Button--medium": "_Button--medium_rj9nn_31", "Button--large": "_Button--large_rj9nn_39", "Button-icon": "_Button-icon_rj9nn_46", "Button--primary": "_Button--primary_rj9nn_50", "Button--secondary": "_Button--secondary_rj9nn_71", "Button--flush": "_Button--flush_rj9nn_88", "Button--disabled": "_Button--disabled_rj9nn_92", "Button--fullWidth": "_Button--fullWidth_rj9nn_100", "Button-spinner": "_Button-spinner_rj9nn_105" };
 
 // lib/filter-data-attrs.ts
 init_react_import();
@@ -238,9 +238,9 @@ var Button = (_a) => {
 // components/AutoField/FieldLabel.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/AutoField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
-var styles_module_default = { "InputWrapper": "_InputWrapper_yqqgz_1", "Input-label": "_Input-label_yqqgz_5", "Input-labelIcon": "_Input-labelIcon_yqqgz_15", "Input-disabledIcon": "_Input-disabledIcon_yqqgz_22", "Input-input": "_Input-input_yqqgz_27", "Input": "_Input_yqqgz_1", "Input--readOnly": "_Input--readOnly_yqqgz_87", "Input-radioGroupItems": "_Input-radioGroupItems_yqqgz_98", "Input-radio": "_Input-radio_yqqgz_98", "Input-radioInner": "_Input-radioInner_yqqgz_115", "Input-radioInput": "_Input-radioInput_yqqgz_147" };
+var styles_module_default = { "InputWrapper": "_InputWrapper_1hd99_1", "Input-label": "_Input-label_1hd99_5", "Input-labelIcon": "_Input-labelIcon_1hd99_15", "Input-disabledIcon": "_Input-disabledIcon_1hd99_22", "Input-input": "_Input-input_1hd99_27", "Input": "_Input_1hd99_1", "Input--readOnly": "_Input--readOnly_1hd99_87", "Input-radioGroupItems": "_Input-radioGroupItems_1hd99_98", "Input-radio": "_Input-radio_1hd99_98", "Input-radioInner": "_Input-radioInner_1hd99_115", "Input-radioInput": "_Input-radioInput_1hd99_147" };
 
 // components/AutoField/FieldLabel.tsx
 import { useMemo } from "react";
@@ -306,9 +306,9 @@ init_react_import();
 // components/AutoField/fields/ArrayField/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/AutoField/fields/ArrayField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/fields/ArrayField/styles.module.css#css-module
 init_react_import();
-var styles_module_default2 = { "ArrayField": "_ArrayField_13xcf_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_13xcf_14", "ArrayField-addButton": "_ArrayField-addButton_13xcf_19", "ArrayField--hasItems": "_ArrayField--hasItems_13xcf_35", "ArrayField-inner": "_ArrayField-inner_13xcf_61", "ArrayFieldItem": "_ArrayFieldItem_13xcf_69", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_13xcf_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_13xcf_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_13xcf_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_13xcf_118", "ArrayFieldItem-body": "_ArrayFieldItem-body_13xcf_147", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_13xcf_156", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_13xcf_164", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_13xcf_170" };
+var styles_module_default2 = { "ArrayField": "_ArrayField_1tth0_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_1tth0_14", "ArrayField-addButton": "_ArrayField-addButton_1tth0_19", "ArrayField--hasItems": "_ArrayField--hasItems_1tth0_35", "ArrayField-inner": "_ArrayField-inner_1tth0_61", "ArrayFieldItem": "_ArrayFieldItem_1tth0_69", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_1tth0_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_1tth0_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_1tth0_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_1tth0_118", "ArrayFieldItem-body": "_ArrayFieldItem-body_1tth0_147", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_1tth0_156", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_1tth0_164", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_1tth0_170" };
 
 // components/AutoField/store.ts
 init_react_import();
@@ -374,9 +374,9 @@ import {
 // components/DragIcon/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/DragIcon/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DragIcon/styles.module.css#css-module
 init_react_import();
-var styles_module_default3 = { "DragIcon": "_DragIcon_53afe_1", "DragIcon--disabled": "_DragIcon--disabled_53afe_8" };
+var styles_module_default3 = { "DragIcon": "_DragIcon_eapcz_1", "DragIcon--disabled": "_DragIcon--disabled_eapcz_8" };
 
 // components/DragIcon/index.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1386,17 +1386,17 @@ import {
   isValidElement
 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/ExternalInput/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
-var styles_module_default4 = { "ExternalInput-actions": "_ExternalInput-actions_3fhqq_1", "ExternalInput-button": "_ExternalInput-button_3fhqq_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_3fhqq_25", "ExternalInput--readOnly": "_ExternalInput--readOnly_3fhqq_32", "ExternalInput-detachButton": "_ExternalInput-detachButton_3fhqq_36", "ExternalInput": "_ExternalInput_3fhqq_1", "ExternalInputModal": "_ExternalInputModal_3fhqq_82", "ExternalInputModal-grid": "_ExternalInputModal-grid_3fhqq_92", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_3fhqq_103", "ExternalInputModal-filters": "_ExternalInputModal-filters_3fhqq_108", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_3fhqq_127", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_3fhqq_136", "ExternalInputModal-table": "_ExternalInputModal-table_3fhqq_136", "ExternalInputModal-thead": "_ExternalInputModal-thead_3fhqq_152", "ExternalInputModal-th": "_ExternalInputModal-th_3fhqq_152", "ExternalInputModal-td": "_ExternalInputModal-td_3fhqq_167", "ExternalInputModal-tr": "_ExternalInputModal-tr_3fhqq_172", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_3fhqq_179", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_3fhqq_205", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_3fhqq_209", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_3fhqq_226", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_3fhqq_230", "ExternalInputModal-search": "_ExternalInputModal-search_3fhqq_230", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_3fhqq_267", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_3fhqq_292", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_3fhqq_302", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_3fhqq_316", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_3fhqq_329", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_3fhqq_333", "ExternalInputModal-footer": "_ExternalInputModal-footer_3fhqq_333", "ExternalInputModal-field": "_ExternalInputModal-field_3fhqq_346" };
+var styles_module_default4 = { "ExternalInput-actions": "_ExternalInput-actions_142hz_1", "ExternalInput-button": "_ExternalInput-button_142hz_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_142hz_25", "ExternalInput--readOnly": "_ExternalInput--readOnly_142hz_32", "ExternalInput-detachButton": "_ExternalInput-detachButton_142hz_36", "ExternalInput": "_ExternalInput_142hz_1", "ExternalInputModal": "_ExternalInputModal_142hz_82", "ExternalInputModal-grid": "_ExternalInputModal-grid_142hz_92", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_142hz_103", "ExternalInputModal-filters": "_ExternalInputModal-filters_142hz_108", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_142hz_127", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_142hz_136", "ExternalInputModal-table": "_ExternalInputModal-table_142hz_136", "ExternalInputModal-thead": "_ExternalInputModal-thead_142hz_152", "ExternalInputModal-th": "_ExternalInputModal-th_142hz_152", "ExternalInputModal-td": "_ExternalInputModal-td_142hz_167", "ExternalInputModal-tr": "_ExternalInputModal-tr_142hz_172", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_142hz_179", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_142hz_205", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_142hz_209", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_142hz_226", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_142hz_230", "ExternalInputModal-search": "_ExternalInputModal-search_142hz_230", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_142hz_267", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_142hz_292", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_142hz_302", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_142hz_316", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_142hz_329", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_142hz_333", "ExternalInputModal-footer": "_ExternalInputModal-footer_142hz_333", "ExternalInputModal-field": "_ExternalInputModal-field_142hz_346" };
 
 // components/Modal/index.tsx
 init_react_import();
 import { useEffect as useEffect4, useState as useState6 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Modal/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
-var styles_module_default5 = { "Modal": "_Modal_1qmqa_1", "Modal--isOpen": "_Modal--isOpen_1qmqa_15", "Modal-inner": "_Modal-inner_1qmqa_19" };
+var styles_module_default5 = { "Modal": "_Modal_vim19_1", "Modal--isOpen": "_Modal--isOpen_vim19_15", "Modal-inner": "_Modal-inner_vim19_19" };
 
 // components/Modal/index.tsx
 import { createPortal } from "react-dom";
@@ -1430,9 +1430,9 @@ var Modal = ({
 // components/Heading/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Heading/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
-var styles_module_default6 = { "Heading": "_Heading_crcfw_1", "Heading--xxxxl": "_Heading--xxxxl_crcfw_13", "Heading--xxxl": "_Heading--xxxl_crcfw_19", "Heading--xxl": "_Heading--xxl_crcfw_23", "Heading--xl": "_Heading--xl_crcfw_27", "Heading--l": "_Heading--l_crcfw_31", "Heading--m": "_Heading--m_crcfw_35", "Heading--s": "_Heading--s_crcfw_39", "Heading--xs": "_Heading--xs_crcfw_43" };
+var styles_module_default6 = { "Heading": "_Heading_1537i_1", "Heading--xxxxl": "_Heading--xxxxl_1537i_13", "Heading--xxxl": "_Heading--xxxl_1537i_19", "Heading--xxl": "_Heading--xxl_1537i_23", "Heading--xl": "_Heading--xl_1537i_27", "Heading--l": "_Heading--l_1537i_31", "Heading--m": "_Heading--m_1537i_35", "Heading--s": "_Heading--s_1537i_39", "Heading--xs": "_Heading--xs_1537i_43" };
 
 // components/Heading/index.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -1797,13 +1797,13 @@ init_react_import();
 init_react_import();
 import * as SelectPrimitive from "@radix-ui/react-select";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/ui/Select/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Select/styles.module.css#css-module
 init_react_import();
-var styles_module_default7 = { "FeSelect-trigger": "_FeSelect-trigger_13era_3", "FeSelect-triggerIcon": "_FeSelect-triggerIcon_13era_54", "FeSelect-content": "_FeSelect-content_13era_61", "FeSelect-viewport": "_FeSelect-viewport_13era_84", "FeSelect-item": "_FeSelect-item_13era_93", "FeSelect-itemIndicator": "_FeSelect-itemIndicator_13era_119", "FeSelect-group": "_FeSelect-group_13era_131", "FeSelect-label": "_FeSelect-label_13era_135", "FeSelect-separator": "_FeSelect-separator_13era_144", "FeSelect-scrollButton": "_FeSelect-scrollButton_13era_152" };
+var styles_module_default7 = { "EditorSelect-trigger": "_EditorSelect-trigger_13s1k_3", "EditorSelect-triggerIcon": "_EditorSelect-triggerIcon_13s1k_54", "EditorSelect-content": "_EditorSelect-content_13s1k_61", "EditorSelect-viewport": "_EditorSelect-viewport_13s1k_84", "EditorSelect-item": "_EditorSelect-item_13s1k_93", "EditorSelect-itemIndicator": "_EditorSelect-itemIndicator_13s1k_119", "EditorSelect-group": "_EditorSelect-group_13s1k_131", "EditorSelect-label": "_EditorSelect-label_13s1k_135", "EditorSelect-separator": "_EditorSelect-separator_13s1k_144", "EditorSelect-scrollButton": "_EditorSelect-scrollButton_13s1k_152" };
 
 // components/ui/Select/index.tsx
 import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var getClassName10 = get_class_name_factory_default("FeSelect", styles_module_default7);
+var getClassName10 = get_class_name_factory_default("EditorSelect", styles_module_default7);
 var joinClassNames = (...values) => values.filter(Boolean).join(" ");
 function Select(_a) {
   var props = __objRest(_a, []);
@@ -2047,7 +2047,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-2TYODRQT.mjs").then((m) => ({
+  () => import("./Editor-YNFB7B6Z.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2085,9 +2085,9 @@ var RichtextField = ({
 // components/AutoField/fields/ObjectField/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/AutoField/fields/ObjectField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/fields/ObjectField/styles.module.css#css-module
 init_react_import();
-var styles_module_default8 = { "ObjectField": "_ObjectField_1o8gv_5", "ObjectField-fieldset": "_ObjectField-fieldset_1o8gv_13" };
+var styles_module_default8 = { "ObjectField": "_ObjectField_1byjv_5", "ObjectField-fieldset": "_ObjectField-fieldset_1byjv_13" };
 
 // components/AutoField/fields/ObjectField/index.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -2369,9 +2369,9 @@ import {
   useTransition
 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/DraggableComponent/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
-var styles_module_default9 = { "DraggableComponent": "_DraggableComponent_d90mv_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_d90mv_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_d90mv_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_d90mv_36", "DraggableComponent--hover": "_DraggableComponent--hover_d90mv_53", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_d90mv_60", "DraggableComponent--isGlobal": "_DraggableComponent--isGlobal_d90mv_69", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_d90mv_105", "DraggableComponent-actions": "_DraggableComponent-actions_d90mv_105" };
+var styles_module_default9 = { "DraggableComponent": "_DraggableComponent_ie0on_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_ie0on_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_ie0on_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_ie0on_36", "DraggableComponent--hover": "_DraggableComponent--hover_ie0on_53", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_ie0on_60", "DraggableComponent--isGlobal": "_DraggableComponent--isGlobal_ie0on_69", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_ie0on_105", "DraggableComponent-actions": "_DraggableComponent-actions_ie0on_105" };
 
 // components/DraggableComponent/index.tsx
 import { createPortal as createPortal2 } from "react-dom";
@@ -3106,9 +3106,9 @@ var DraggableComponent = ({
   ] });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/DropZone/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
-var styles_module_default10 = { "DropZone": "_DropZone_q9qsx_1", "DropZone--hasChildren": "_DropZone--hasChildren_q9qsx_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_q9qsx_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_q9qsx_25", "DropZone--isRootZone": "_DropZone--isRootZone_q9qsx_25", "DropZone--isDestination": "_DropZone--isDestination_q9qsx_39", "DropZone-item": "_DropZone-item_q9qsx_48", "DropZone-hitbox": "_DropZone-hitbox_q9qsx_52", "DropZone--isEnabled": "_DropZone--isEnabled_q9qsx_60", "DropZone--isAnimating": "_DropZone--isAnimating_q9qsx_70" };
+var styles_module_default10 = { "DropZone": "_DropZone_1h108_1", "DropZone--hasChildren": "_DropZone--hasChildren_1h108_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_1h108_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_1h108_25", "DropZone--isRootZone": "_DropZone--isRootZone_1h108_25", "DropZone--isDestination": "_DropZone--isDestination_1h108_39", "DropZone-item": "_DropZone-item_1h108_48", "DropZone-hitbox": "_DropZone-hitbox_1h108_52", "DropZone--isEnabled": "_DropZone--isEnabled_1h108_60", "DropZone--isAnimating": "_DropZone--isAnimating_1h108_70" };
 
 // components/DropZone/index.tsx
 import { useDroppable as useDroppable2 } from "@dnd-kit/react";
@@ -3116,9 +3116,9 @@ import { useDroppable as useDroppable2 } from "@dnd-kit/react";
 // components/Drawer/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Drawer/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_default11 = { "Drawer": "_Drawer_rcm43_1", "Drawer--tile": "_Drawer--tile_rcm43_8", "Drawer-draggable": "_Drawer-draggable_rcm43_19", "Drawer-draggableBg": "_Drawer-draggableBg_rcm43_23", "DrawerItem-draggable": "_DrawerItem-draggable_rcm43_33", "DrawerItem-icon": "_DrawerItem-icon_rcm43_50", "DrawerItem--disabled": "_DrawerItem--disabled_rcm43_56", "DrawerItem": "_DrawerItem_rcm43_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_rcm43_66", "DrawerItem-name": "_DrawerItem-name_rcm43_91" };
+var styles_module_default11 = { "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" };
 
 // components/Drawer/index.tsx
 import { useMemo as useMemo9, useState as useState11 } from "react";
@@ -4422,7 +4422,7 @@ var registerOverlayPortal = (el, opts = {}) => {
   };
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/InlineTextField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
 var styles_module_default12 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
@@ -4586,12 +4586,12 @@ import {
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-2TYODRQT.mjs").then((m) => ({
+  () => import("./Editor-YNFB7B6Z.mjs").then((m) => ({
     default: m.Editor
   }))
 );
 var RichTextRender = lazy2(
-  () => import("./Render-VDC7AEQK.mjs").then((m) => ({
+  () => import("./Render-STFB5CNO.mjs").then((m) => ({
     default: m.RichTextRender
   }))
 );
@@ -5434,49 +5434,49 @@ import React3, { useMemo as useMemo13 } from "react";
 
 // lib/resolve-globals.ts
 init_react_import();
-function resolveItem(item, globalData, config, visitedTypes) {
-  var _a, _b, _c, _d, _e;
+function resolveItem(item, globals, config, visitedTypes) {
+  var _a, _b, _c, _d;
   const type = item.type;
   const componentConfig = config.components[type];
-  const globalEntry = globalData[type];
-  const isUnlinked = ((_a = item.props) == null ? void 0 : _a.__synced) === false;
+  const globalEntry = globals[type];
   const shouldApplyGlobal = Boolean(
-    (componentConfig == null ? void 0 : componentConfig.global) && globalEntry && !visitedTypes.has(type) && !isUnlinked
+    (componentConfig == null ? void 0 : componentConfig.global) && item.synced && globalEntry && !visitedTypes.has(type)
   );
   let mergedProps;
   if (shouldApplyGlobal) {
     mergedProps = __spreadProps(__spreadValues({}, globalEntry.props), {
-      children: (_b = item.props) == null ? void 0 : _b.children,
-      id: (_c = item.props) == null ? void 0 : _c.id
+      children: (_a = item.props) == null ? void 0 : _a.children,
+      id: (_b = item.props) == null ? void 0 : _b.id
     });
   } else {
-    if ((componentConfig == null ? void 0 : componentConfig.global) && globalEntry && visitedTypes.has(type) && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    if ((componentConfig == null ? void 0 : componentConfig.global) && item.synced && globalEntry && visitedTypes.has(type) && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
       console.warn(
         `[resolveGlobals] cycle detected while resolving global "${type}" \u2014 leaving reference unresolved`
       );
     }
-    mergedProps = __spreadValues({}, (_d = item.props) != null ? _d : {});
+    mergedProps = __spreadValues({}, (_c = item.props) != null ? _c : {});
   }
-  const fields = (_e = componentConfig == null ? void 0 : componentConfig.fields) != null ? _e : {};
+  const fields = (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {};
   const nextVisited = shouldApplyGlobal ? /* @__PURE__ */ new Set([...visitedTypes, type]) : visitedTypes;
   for (const [fieldName, fieldDef] of Object.entries(fields)) {
     if ((fieldDef == null ? void 0 : fieldDef.type) === "slot") {
       const slotValue = mergedProps[fieldName];
       if (Array.isArray(slotValue)) {
         mergedProps[fieldName] = slotValue.map(
-          (child) => child && typeof child === "object" && "type" in child && "props" in child ? resolveItem(child, globalData, config, nextVisited) : child
+          (child) => child && typeof child === "object" && "type" in child && "props" in child ? resolveItem(child, globals, config, nextVisited) : child
         );
       }
     }
   }
   return __spreadProps(__spreadValues({}, item), { props: mergedProps });
 }
-function resolveGlobals(data, globalData, config) {
+function resolveGlobals(data, config) {
   var _a;
-  if (!globalData || Object.keys(globalData).length === 0) return data;
+  const globals = data.globals;
+  if (!globals || Object.keys(globals).length === 0) return data;
   const visited = /* @__PURE__ */ new Set();
   const content = ((_a = data.content) != null ? _a : []).map(
-    (item) => resolveItem(item, globalData, config, visited)
+    (item) => resolveItem(item, globals, config, visited)
   );
   return __spreadProps(__spreadValues({}, data), { content });
 }
@@ -5491,7 +5491,6 @@ var renderContext = React3.createContext({
 function Render({
   config,
   data,
-  globalData,
   metadata = {}
 }) {
   var _a, _b;
@@ -5500,8 +5499,8 @@ function Render({
       root: data.root || {},
       content: data.content || []
     });
-    return resolveGlobals(base, globalData, config);
-  }, [data, globalData, config]);
+    return resolveGlobals(base, config);
+  }, [data, config]);
   const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   const pageProps = __spreadProps(__spreadValues({}, rootProps), {
@@ -5537,9 +5536,9 @@ function Render({
 // components/ComponentList/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/ComponentList/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default13 = { "ComponentList": "_ComponentList_apsvr_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_apsvr_5", "ComponentList-content": "_ComponentList-content_apsvr_9", "ComponentList-title": "_ComponentList-title_apsvr_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_apsvr_54" };
+var styles_module_default13 = { "ComponentList": "_ComponentList_1mlcu_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_1mlcu_5", "ComponentList-content": "_ComponentList-content_1mlcu_9", "ComponentList-title": "_ComponentList-title_1mlcu_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_1mlcu_54" };
 
 // components/ComponentList/index.tsx
 import { useEffect as useEffect17 } from "react";
@@ -5787,9 +5786,9 @@ init_react_import();
 init_react_import();
 import { useMemo as useMemo14, useState as useState17 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Components/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Components/styles.module.css#css-module
 init_react_import();
-var styles_module_default14 = { "Components-search": "_Components-search_4hb2y_1", "Components-searchIcon": "_Components-searchIcon_4hb2y_8", "Components-searchInput": "_Components-searchInput_4hb2y_16", "Components-empty": "_Components-empty_4hb2y_39" };
+var styles_module_default14 = { "Components-search": "_Components-search_recer_1", "Components-searchIcon": "_Components-searchIcon_recer_8", "Components-searchInput": "_Components-searchInput_recer_16", "Components-empty": "_Components-empty_recer_39" };
 
 // components/Editor/components/Components/index.tsx
 import { jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -5881,7 +5880,7 @@ var Components = () => {
   ] });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/plugins/blocks/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
 init_react_import();
 var styles_module_default15 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
 
@@ -5904,9 +5903,9 @@ init_react_import();
 // components/LayerTree/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/LayerTree/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "LayerTree": "_LayerTree_vc8bi_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_vc8bi_11", "LayerTree-helper": "_LayerTree-helper_vc8bi_17", "Layer": "_Layer_vc8bi_1", "Layer-inner": "_Layer-inner_vc8bi_34", "Layer--containsZone": "_Layer--containsZone_vc8bi_42", "Layer-clickable": "_Layer-clickable_vc8bi_46", "Layer--isSelected": "_Layer--isSelected_vc8bi_68", "Layer-icon": "_Layer-icon_vc8bi_80", "Layer-zoneIcon": "_Layer-zoneIcon_vc8bi_81", "Layer-chevron": "_Layer-chevron_vc8bi_85", "Layer--childIsSelected": "_Layer--childIsSelected_vc8bi_97", "Layer-zones": "_Layer-zones_vc8bi_101", "Layer-title": "_Layer-title_vc8bi_117", "Layer-name": "_Layer-name_vc8bi_130", "Layer--isGlobal": "_Layer--isGlobal_vc8bi_150", "Layer--isUnlinked": "_Layer--isUnlinked_vc8bi_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_vc8bi_175" };
+var styles_module_default16 = { "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 {
@@ -6045,8 +6044,8 @@ var Layer = forwardRef2(function Layer2({
   );
   const isUnlinked = useAppStore(
     (s) => {
-      var _a, _b, _c;
-      return ((_c = (_b = (_a = s.state.indexes.nodes[node.itemId]) == null ? void 0 : _a.data) == null ? void 0 : _b.props) == null ? void 0 : _c.__synced) === false;
+      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;
@@ -6342,7 +6341,7 @@ var Outline = () => {
   ) });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/plugins/outline/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
 init_react_import();
 var styles_module_default17 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
@@ -6362,9 +6361,9 @@ init_react_import();
 // components/Breadcrumbs/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "Breadcrumbs": "_Breadcrumbs_cvmoz_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_cvmoz_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_cvmoz_17" };
+var styles_module_default18 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
@@ -6439,9 +6438,9 @@ var Breadcrumbs = ({
 // components/Editor/components/Fields/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
+// 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_default19 = { "EditorFields": "_EditorFields_1di93_1", "EditorFields--isLoading": "_EditorFields--isLoading_1di93_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_1di93_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_1di93_25", "EditorFields-field": "_EditorFields-field_1di93_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_1di93_36", "EditorFields-syncButton": "_EditorFields-syncButton_1di93_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_1di93_78" };
+var styles_module_default19 = { "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 {
@@ -6559,29 +6558,22 @@ var FieldsChild = ({ fieldName }) => {
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var GlobalSyncButton = () => {
-  var _a;
   const appStore = useAppStoreApi();
   const selectedItem = useAppStore((s) => s.selectedItem);
   const isGlobalType = useAppStore(
     (s) => {
-      var _a2;
-      return selectedItem ? ((_a2 = s.config.components[selectedItem.type]) == null ? void 0 : _a2.global) === true : false;
+      var _a;
+      return selectedItem ? ((_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.global) === true : false;
     }
   );
   if (!selectedItem || !isGlobalType) return null;
-  const isUnlinked = ((_a = selectedItem.props) == null ? void 0 : _a.__synced) === false;
+  const isUnlinked = selectedItem.synced === false;
   const onClick = () => __async(null, null, function* () {
     const { dispatch, state, resolveComponentData } = appStore.getState();
-    const newProps = __spreadValues({}, selectedItem.props);
-    if (isUnlinked) {
-      delete newProps.__synced;
-    } else {
-      newProps.__synced = false;
-    }
     const latestSelector = getSelectorForId(state, selectedItem.props.id);
     if (!latestSelector) return;
     const resolved = yield resolveComponentData(
-      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      __spreadProps(__spreadValues({}, selectedItem), { synced: isUnlinked ? true : false }),
       "replace"
     );
     dispatch({
@@ -6644,9 +6636,9 @@ var FieldsInternal = ({ wrapFields = true }) => {
 };
 var Fields = memo8(FieldsInternal);
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/plugins/fields/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "FieldsPlugin": "_FieldsPlugin_l8h4q_1", "FieldsPlugin-header": "_FieldsPlugin-header_l8h4q_7" };
+var styles_module_default20 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
 
 // plugins/fields/index.tsx
 import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -6678,8 +6670,8 @@ import {
   useContext as useContext15,
   useEffect as useEffect26,
   useMemo as useMemo24,
-  useRef as useRef17,
-  useState as useState23
+  useRef as useRef18,
+  useState as useState24
 } from "react";
 
 // components/Editor/components/Preview/index.tsx
@@ -6984,7 +6976,7 @@ function AutoFrame(_a) {
 AutoFrame.displayName = "AutoFrame";
 var AutoFrame_default = AutoFrame;
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Preview/styles.module.css#css-module
+// 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_default21 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
 
@@ -7141,16 +7133,16 @@ import { deepEqual as deepEqual2 } from "fast-equals";
 
 // lib/split-global-data.ts
 init_react_import();
-function splitGlobalData(data, config) {
-  var _a;
-  const extracted = {};
+function splitGlobals(data, config) {
+  var _a, _b;
+  const extracted = __spreadValues({}, (_a = data.globals) != null ? _a : {});
   function visit(node) {
-    var _a2, _b;
+    var _a2, _b2;
     const type = node.type;
     const componentConfig = config.components[type];
     const fields = (_a2 = componentConfig == null ? void 0 : componentConfig.fields) != null ? _a2 : {};
-    const isGlobal = (componentConfig == null ? void 0 : componentConfig.global) === true;
-    const processedProps = __spreadValues({}, (_b = node.props) != null ? _b : {});
+    const isGlobalType = (componentConfig == null ? void 0 : componentConfig.global) === true;
+    const processedProps = __spreadValues({}, (_b2 = node.props) != null ? _b2 : {});
     for (const [fieldName, fieldDef] of Object.entries(fields)) {
       if ((fieldDef == null ? void 0 : fieldDef.type) === "slot") {
         const slotValue = processedProps[fieldName];
@@ -7161,27 +7153,25 @@ function splitGlobalData(data, config) {
         }
       }
     }
-    if (!isGlobal) {
-      return __spreadProps(__spreadValues({}, node), { props: processedProps });
-    }
-    if (processedProps.__synced === false) {
+    if (!isGlobalType || !node.synced) {
       return __spreadProps(__spreadValues({}, node), { props: processedProps });
     }
     const _c = processedProps, { children, id } = _c, sharedProps = __objRest(_c, ["children", "id"]);
-    if (!extracted[type]) {
-      extracted[type] = { props: sharedProps };
-    }
+    extracted[type] = { props: sharedProps };
     const instanceProps = { id };
     if (children !== void 0) instanceProps.children = children;
-    return __spreadProps(__spreadValues({}, node), { props: instanceProps });
+    return __spreadProps(__spreadValues({}, node), {
+      props: instanceProps,
+      synced: true
+    });
   }
-  const strippedContent = ((_a = data.content) != null ? _a : []).map(
+  const strippedContent = ((_b = data.content) != null ? _b : []).map(
     (item) => visit(item)
   );
-  return {
-    data: __spreadProps(__spreadValues({}, data), { content: strippedContent }),
-    globalData: extracted
-  };
+  return __spreadProps(__spreadValues({}, data), {
+    content: strippedContent,
+    globals: extracted
+  });
 }
 
 // components/Editor/components/Layout/index.tsx
@@ -7190,13 +7180,13 @@ import {
   useCallback as useCallback22,
   useEffect as useEffect25,
   useMemo as useMemo23,
-  useRef as useRef16,
-  useState as useState22
+  useRef as useRef17,
+  useState as useState23
 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "Editor": "_Editor_17yd6_19", "Editor-portal": "_Editor-portal_17yd6_32", "EditorLayout": "_EditorLayout_17yd6_37", "EditorLayout-inner": "_EditorLayout-inner_17yd6_41", "Editor--hidePlugins": "_Editor--hidePlugins_17yd6_73", "EditorLayout--mounted": "_EditorLayout--mounted_17yd6_78", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_17yd6_82", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_17yd6_82", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_17yd6_87", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_17yd6_105", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_17yd6_127", "EditorLayout-mounted": "_EditorLayout-mounted_17yd6_146", "EditorLayout-nav": "_EditorLayout-nav_17yd6_187", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_17yd6_203", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_17yd6_213", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_17yd6_219", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_17yd6_225", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_17yd6_245", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_17yd6_252", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_17yd6_266", "EditorPluginTab": "_EditorPluginTab_17yd6_273", "EditorPluginTab--visible": "_EditorPluginTab--visible_17yd6_279", "EditorPluginTab-body": "_EditorPluginTab-body_17yd6_284" };
+var styles_module_default22 = { "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" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -7251,9 +7241,9 @@ var usePreviewModeHotkeys = () => {
 // components/SidebarSection/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "SidebarSection": "_SidebarSection_1jefg_1", "SidebarSection-title": "_SidebarSection-title_1jefg_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_1jefg_20", "SidebarSection-content": "_SidebarSection-content_1jefg_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1jefg_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1jefg_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1jefg_33", "SidebarSection-heading": "_SidebarSection-heading_1jefg_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1jefg_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 jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -7282,21 +7272,146 @@ import {
   useCallback as useCallback18,
   useEffect as useEffect23,
   useMemo as useMemo22,
-  useRef as useRef13,
-  useState as useState20
+  useRef as useRef14,
+  useState as useState21
 } from "react";
 
 // components/BrowserBar/index.tsx
 init_react_import();
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo20, useRef as useRef12, useState as useState20 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
+// components/ui/Combobox/index.tsx
 init_react_import();
-var styles_module_default24 = { "BrowserBar": "_BrowserBar_oz0sq_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_oz0sq_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_oz0sq_47", "BrowserBar-urlText": "_BrowserBar-urlText_oz0sq_52", "BrowserBar-urlPath": "_BrowserBar-urlPath_oz0sq_64", "BrowserBar-urlTitle": "_BrowserBar-urlTitle_oz0sq_69", "BrowserBar-actions": "_BrowserBar-actions_oz0sq_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_oz0sq_89" };
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 
-// components/BrowserBar/index.tsx
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
+init_react_import();
+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 jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("BrowserBar", styles_module_default24);
+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;
+  if (typeof override === "function") {
+    return (state) => join(base, override(state));
+  }
+  return join(base, override);
+};
+var Combobox = ComboboxPrimitive.Root;
+function ComboboxInput(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.Input,
+    __spreadValues({
+      "data-slot": "combobox-input",
+      className: mergeClassName(getClassName28("input"), className)
+    }, props)
+  );
+}
+function ComboboxContent(_a) {
+  var _b = _a, {
+    className,
+    side = "bottom",
+    sideOffset = 4,
+    align = "start",
+    alignOffset = 0,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "side",
+    "sideOffset",
+    "align",
+    "alignOffset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx47(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      className: getClassName28("positioner"),
+      children: /* @__PURE__ */ jsx47(
+        ComboboxPrimitive.Popup,
+        __spreadProps(__spreadValues({
+          "data-slot": "combobox-content",
+          className: mergeClassName(getClassName28("content"), className)
+        }, props), {
+          children
+        })
+      )
+    }
+  ) });
+}
+function ComboboxList(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.List,
+    __spreadValues({
+      "data-slot": "combobox-list",
+      className: mergeClassName(getClassName28("list"), className)
+    }, props)
+  );
+}
+function ComboboxItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs18(
+    ComboboxPrimitive.Item,
+    __spreadProps(__spreadValues({
+      "data-slot": "combobox-item",
+      className: mergeClassName(getClassName28("item"), className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx47("span", { className: getClassName28("itemIndicator"), children: /* @__PURE__ */ jsx47(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(Check, { size: 14 }) }) }),
+        children
+      ]
+    })
+  );
+}
+function ComboboxEmpty(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.Empty,
+    __spreadValues({
+      "data-slot": "combobox-empty",
+      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_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 jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+var normalizeRoute = (raw) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return trimmed;
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+};
+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" }
@@ -7304,7 +7419,6 @@ var DEVICE_VIEWPORTS = {
 var BrowserBar = ({
   onViewportChange
 }) => {
-  var _a;
   const { routes, currentPath, onRouteChange } = usePropsContext();
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const dispatch = useAppStore((s) => s.dispatch);
@@ -7332,59 +7446,95 @@ var BrowserBar = ({
     onViewportChange == null ? void 0 : onViewportChange(DEVICE_VIEWPORTS[device]);
   };
   const showRoutePicker = !!routes && currentPath !== void 0 && !!onRouteChange;
-  const selectedTitle = (_a = routes == null ? void 0 : routes.find((r) => r.path === currentPath)) == null ? void 0 : _a.title;
-  return /* @__PURE__ */ jsxs18("div", { className: getClassName28(), children: [
-    showRoutePicker ? /* @__PURE__ */ jsxs18(
-      Select,
+  const [inputValue, setInputValue] = useState20(currentPath != null ? currentPath : "");
+  const lastSyncedPath = useRef12(currentPath);
+  if (lastSyncedPath.current !== currentPath) {
+    lastSyncedPath.current = currentPath;
+    setInputValue(currentPath != null ? currentPath : "");
+  }
+  const submit = (raw) => {
+    const next = normalizeRoute(raw);
+    if (!next || next === currentPath) return;
+    void (onRouteChange == null ? void 0 : onRouteChange(next));
+  };
+  return /* @__PURE__ */ jsxs19("div", { className: getClassName29(), children: [
+    showRoutePicker ? /* @__PURE__ */ jsxs19(
+      Combobox,
       {
+        items: routes.map((r) => r.path),
         value: currentPath,
         onValueChange: (next) => {
-          void (onRouteChange == null ? void 0 : onRouteChange(next));
+          if (typeof next === "string") submit(next);
         },
+        inputValue,
+        onInputValueChange: (next) => setInputValue(next),
+        autoHighlight: false,
         children: [
-          /* @__PURE__ */ jsxs18(SelectTrigger, { className: getClassName28("urlTrigger"), children: [
-            /* @__PURE__ */ jsx47(Globe, { className: getClassName28("urlIcon"), size: 14 }),
-            /* @__PURE__ */ jsxs18("span", { className: getClassName28("urlText"), children: [
-              /* @__PURE__ */ jsx47("span", { className: getClassName28("urlPath"), children: currentPath }),
-              selectedTitle ? /* @__PURE__ */ jsx47("span", { className: getClassName28("urlTitle"), children: selectedTitle }) : null
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs18(SelectContent, { children: [
-            routes.some((r) => r.path === currentPath) ? null : /* @__PURE__ */ jsx47(SelectItem, { value: currentPath, children: currentPath }),
-            routes.map((route) => /* @__PURE__ */ jsx47(SelectItem, { value: route.path, children: route.title }, route.path))
+          /* @__PURE__ */ jsxs19(
+            "form",
+            {
+              className: getClassName29("urlTrigger"),
+              onSubmit: (event) => {
+                event.preventDefault();
+                submit(inputValue);
+              },
+              children: [
+                /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+                /* @__PURE__ */ jsx48(
+                  ComboboxInput,
+                  {
+                    className: getClassName29("urlInput"),
+                    placeholder: "/",
+                    spellCheck: false,
+                    autoCorrect: "off",
+                    autoCapitalize: "off"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs19(ComboboxContent, { children: [
+            /* @__PURE__ */ jsx48(ComboboxEmpty, { children: "Press Enter to go to this path" }),
+            /* @__PURE__ */ jsx48(ComboboxList, { children: (path) => {
+              const route = routes.find((r) => r.path === path);
+              return /* @__PURE__ */ jsxs19(ComboboxItem, { value: path, children: [
+                /* @__PURE__ */ jsx48("span", { className: getClassName29("itemPath"), children: path }),
+                (route == null ? void 0 : route.title) ? /* @__PURE__ */ jsx48("span", { className: getClassName29("itemTitle"), children: route.title }) : null
+              ] }, path);
+            } })
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsxs18("div", { className: getClassName28("urlTrigger"), children: [
-      /* @__PURE__ */ jsx47(Globe, { className: getClassName28("urlIcon"), size: 14 }),
-      /* @__PURE__ */ jsx47("span", { className: getClassName28("urlText"), children: "/" })
+    ) : /* @__PURE__ */ jsxs19("div", { className: getClassName29("urlTrigger"), children: [
+      /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+      /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
     ] }),
-    /* @__PURE__ */ jsxs18("div", { className: getClassName28("actions"), children: [
-      /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsxs19("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__ */ jsx47("span", { className: getClassName28("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx47(Monitor, { size: 16 }) : /* @__PURE__ */ jsx47(Smartphone, { size: 16 }) })
+          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 16 }) : /* @__PURE__ */ jsx48(Smartphone, { size: 16 }) })
         }
       ),
-      /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx48(
         IconButton,
         {
           type: "button",
           title: isFullScreen ? "Exit full screen" : "Enter full screen",
           onClick: toggleFullScreen,
-          children: /* @__PURE__ */ jsx47("span", { className: getClassName28("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx47(Minimize, { size: 16 }) : /* @__PURE__ */ jsx47(Maximize, { size: 16 }) })
+          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 16 }) : /* @__PURE__ */ jsx48(Maximize, { size: 16 }) })
         }
       )
     ] })
   ] });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
+// 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_default25 = { "EditorCanvas": "_EditorCanvas_19sb3_1", "EditorCanvas-controls": "_EditorCanvas-controls_19sb3_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_19sb3_22", "EditorCanvas-inner": "_EditorCanvas-inner_19sb3_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_19sb3_46", "EditorCanvas-root": "_EditorCanvas-root_19sb3_46", "EditorCanvas--ready": "_EditorCanvas--ready_19sb3_83", "EditorCanvas-loader": "_EditorCanvas-loader_19sb3_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_19sb3_98", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_19sb3_108", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_19sb3_113" };
+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";
@@ -7394,22 +7544,22 @@ init_react_import();
 import {
   createContext as createContext7,
   useContext as useContext14,
-  useRef as useRef12,
+  useRef as useRef13,
   useMemo as useMemo21
 } from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef12(null);
+  const frameRef = useRef13(null);
   const value = useMemo21(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx48(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx49(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext14(FrameContext);
@@ -7420,14 +7570,14 @@ var useCanvasFrame = () => {
 };
 
 // components/Editor/components/Canvas/index.tsx
-import { Fragment as Fragment13, jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName29 = get_class_name_factory_default("EditorCanvas", styles_module_default25);
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs20 } 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;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
-  var _a;
+  var _a, _b;
   const { frameRef } = useCanvasFrame();
   const {
     viewports: viewportOptions = defaultViewports,
@@ -7456,14 +7606,14 @@ var Canvas = () => {
     }))
   );
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  const [canvasZoom, setCanvasZoom] = useState20(1);
+  const [canvasZoom, setCanvasZoom] = useState21(1);
   const zoomIn = () => setCanvasZoom((z) => Math.min(z + ZOOM_STEP, MAX_ZOOM));
   const zoomOut = () => setCanvasZoom((z) => Math.max(z - ZOOM_STEP, MIN_ZOOM));
   const resetZoom = () => setCanvasZoom(1);
-  const [showTransition, setShowTransition] = useState20(false);
-  const isResizingRef = useRef13(false);
+  const [showTransition, setShowTransition] = useState21(false);
+  const isResizingRef = useRef14(false);
   const defaultRender = useMemo22(() => {
-    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx49(Fragment13, { children });
+    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx50(Fragment13, { children });
     return EditorDefault;
   }, []);
   const CustomPreview = useMemo22(
@@ -7484,26 +7634,25 @@ var Canvas = () => {
       setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), { zoom: 1, rootHeight: frameHeight }));
     }
   }, [getFrameDimensions, setZoomConfig, viewports.current.height]);
-  const [showLoader, setShowLoader] = useState20(false);
+  const [showLoader, setShowLoader] = useState21(false);
   useEffect23(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
   const appStoreApi = useAppStoreApi();
-  useEffect23(() => {
-    var _a2, _b;
-    if (typeof window === "undefined") return;
-    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+  const autoSelectingRef = useRef14(true);
+  const pickClosestViewport = useCallback18(() => {
+    var _a2, _b2;
+    if (typeof window === "undefined") return null;
     const viewportWidth = window.innerWidth;
-    const frameWidth = (_b = frameRef.current) == null ? void 0 : _b.getBoundingClientRect().width;
-    if (!viewportWidth) return;
-    if (!frameWidth) return;
-    if (viewportOptions.length === 0) return;
+    const frameWidth = (_a2 = frameRef.current) == null ? void 0 : _a2.getBoundingClientRect().width;
+    if (!viewportWidth) return null;
+    if (!frameWidth) return null;
+    if (viewportOptions.length === 0) return null;
     const fullWidthViewport = Object.values(viewportOptions).find(
       (v) => v.width === "100%"
     );
-    const containsFullWidthViewport = !!fullWidthViewport;
     const viewportDifferences = Object.entries(viewportOptions).filter(([_, value]) => value.width !== "100%").map(([key, value]) => ({
       key,
       diff: Math.abs(
@@ -7511,10 +7660,19 @@ var Canvas = () => {
       ),
       value
     })).sort((a, b) => a.diff > b.diff ? 1 : -1);
-    let closestViewport = viewportDifferences[0].value;
-    if (closestViewport.width < frameWidth && containsFullWidthViewport) {
+    let closestViewport = (_b2 = viewportDifferences[0]) == null ? void 0 : _b2.value;
+    if (!closestViewport) return null;
+    if (closestViewport.width < frameWidth && fullWidthViewport) {
       closestViewport = fullWidthViewport;
     }
+    return closestViewport;
+  }, [viewportOptions, frameRef]);
+  useEffect23(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const closestViewport = pickClosestViewport();
+    if (!closestViewport) return;
     if (iframe.enabled) {
       const s = appStoreApi.getState();
       const appState = {
@@ -7536,16 +7694,51 @@ var Canvas = () => {
       appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
   }, [
-    viewportOptions,
+    pickClosestViewport,
     frameRef.current,
     iframe,
     appStoreApi,
     (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
   ]);
-  return /* @__PURE__ */ jsx49(
+  useEffect23(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if (!iframe.enabled) return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const target = frameRef.current;
+    if (!target) return;
+    const observer = new ResizeObserver(() => {
+      if (!autoSelectingRef.current) return;
+      const closestViewport = pickClosestViewport();
+      if (!closestViewport) return;
+      const s = appStoreApi.getState();
+      const current = s.state.ui.viewports.current;
+      if (current.width === closestViewport.width && current.height === (closestViewport.height || "auto")) {
+        return;
+      }
+      setUi({
+        viewports: __spreadProps(__spreadValues({}, s.state.ui.viewports), {
+          current: __spreadProps(__spreadValues({}, current), {
+            width: closestViewport.width,
+            height: closestViewport.height || "auto"
+          })
+        })
+      });
+    });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [
+    pickClosestViewport,
+    frameRef,
+    iframe.enabled,
+    (_b = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _b.current,
+    appStoreApi,
+    setUi
+  ]);
+  return /* @__PURE__ */ jsx50(
     "div",
     {
-      className: getClassName29({
+      className: getClassName30({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas
@@ -7560,16 +7753,16 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs19("div", { className: getClassName29("inner"), ref: frameRef, children: [
-        !disableZoomControls && /* @__PURE__ */ jsxs19("div", { className: getClassName29("zoomControls"), children: [
-          /* @__PURE__ */ jsx49(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx49(Minus, { size: 14 }) }),
-          /* @__PURE__ */ jsx49(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ jsx49(RotateCcw, { size: 14 }) }),
-          /* @__PURE__ */ jsx49(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx49(Plus, { size: 14 }) })
+      children: /* @__PURE__ */ jsxs20("div", { className: getClassName30("inner"), ref: frameRef, children: [
+        !disableZoomControls && /* @__PURE__ */ jsxs20("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__ */ jsxs19(
+        /* @__PURE__ */ jsxs20(
           "div",
           {
-            className: getClassName29("rootColumn"),
+            className: getClassName30("rootColumn"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
               transform: disableZoomControls ? void 0 : `scale(${canvasZoom})`,
@@ -7577,10 +7770,11 @@ 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__ */ jsx49("div", { className: getClassName29("browserBar"), children: /* @__PURE__ */ jsx49(
+              iframe.enabled && /* @__PURE__ */ jsx50("div", { className: getClassName30("browserBar"), children: /* @__PURE__ */ jsx50(
                 BrowserBar,
                 {
                   onViewportChange: (viewport) => {
+                    autoSelectingRef.current = false;
                     setShowTransition(true);
                     isResizingRef.current = true;
                     const uiViewport = __spreadProps(__spreadValues({}, viewport), {
@@ -7593,23 +7787,23 @@ var Canvas = () => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(
                 "div",
                 {
-                  className: getClassName29("root"),
+                  className: getClassName30("root"),
                   suppressHydrationWarning: true,
                   id: "editor-canvas-root",
                   onTransitionEnd: () => {
                     setShowTransition(false);
                     isResizingRef.current = false;
                   },
-                  children: /* @__PURE__ */ jsx49(CustomPreview, { children: /* @__PURE__ */ jsx49(Preview2, {}) })
+                  children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx49("div", { className: getClassName29("loader"), children: /* @__PURE__ */ jsx49(Loader, { size: 24 }) })
+        /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
       ] })
     }
   );
@@ -7617,10 +7811,10 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback19, useEffect as useEffect24, useRef as useRef14, useState as useState21 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect24, useRef as useRef15, useState as useState22 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState21(null);
-  const sidebarRef = useRef14(null);
+  const [width, setWidth] = useState22(null);
+  const sidebarRef = useRef15(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
@@ -7701,25 +7895,25 @@ init_react_import();
 
 // components/Editor/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback20, useRef as useRef15 } from "react";
+import { useCallback as useCallback20, useRef as useRef16 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css#css-module
+// 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_default26 = { "ResizeHandle": "_ResizeHandle_s0ymy_2", "ResizeHandle--left": "_ResizeHandle--left_s0ymy_16", "ResizeHandle--right": "_ResizeHandle--right_s0ymy_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 jsx50 } from "react/jsx-runtime";
-var getClassName30 = get_class_name_factory_default("ResizeHandle", styles_module_default26);
+import { jsx as jsx51 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default27);
 var ResizeHandle = ({
   position,
   sidebarRef,
   onResize,
   onResizeEnd
 }) => {
-  const handleRef = useRef15(null);
-  const isDragging = useRef15(false);
-  const startX = useRef15(0);
-  const startWidth = useRef15(0);
+  const handleRef = useRef16(null);
+  const isDragging = useRef16(false);
+  const startX = useRef16(0);
+  const startWidth = useRef16(0);
   const handleMouseMove = useCallback20(
     (e) => {
       if (!isDragging.current) return;
@@ -7764,23 +7958,23 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref: handleRef,
-      className: getClassName30({ [position]: true }),
+      className: getClassName31({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css#css-module
+// 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_default27 = { "Sidebar": "_Sidebar_6tp4l_1", "Sidebar--isVisible": "_Sidebar--isVisible_6tp4l_9", "Sidebar--left": "_Sidebar--left_6tp4l_13", "Sidebar--right": "_Sidebar--right_6tp4l_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_6tp4l_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 jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
-var getClassName31 = get_class_name_factory_default("Sidebar", styles_module_default27);
+import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default28);
 var Sidebar = ({
   position,
   sidebarRef,
@@ -7789,16 +7983,16 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs20(Fragment14, { children: [
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs21(Fragment14, { children: [
+    /* @__PURE__ */ jsx52(
       "div",
       {
         ref: sidebarRef,
-        className: getClassName31({ [position]: true, isVisible }),
+        className: getClassName32({ [position]: true, isVisible }),
         children
       }
     ),
-    /* @__PURE__ */ jsx51("div", { className: `${getClassName31("resizeHandle")}`, children: /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx52(
       ResizeHandle,
       {
         position,
@@ -7874,14 +8068,14 @@ var useDeleteHotkeys = () => {
 // components/Editor/components/Nav/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
+// 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_default28 = { "Nav": "_Nav_kjoi9_1", "Nav-list": "_Nav-list_kjoi9_18", "Nav-footer": "_Nav-footer_kjoi9_42", "NavItem-link": "_NavItem-link_kjoi9_55", "NavItem-linkLabel": "_NavItem-linkLabel_kjoi9_83", "NavItem": "_NavItem_kjoi9_55", "NavItem-linkIcon": "_NavItem-linkIcon_kjoi9_108", "NavItem--active": "_NavItem--active_kjoi9_121", "NavItem--mobileOnly": "_NavItem--mobileOnly_kjoi9_132", "NavItem--desktopOnly": "_NavItem--desktopOnly_kjoi9_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 jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
-var getClassName32 = get_class_name_factory_default("Nav", styles_module_default28);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default28);
+import { jsx as jsx53, jsxs as jsxs22 } 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,
@@ -7890,7 +8084,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "li",
     {
       className: getClassNameItem3({
@@ -7898,9 +8092,9 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ jsxs21("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx52("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx52("span", { className: getClassNameItem3("linkLabel"), children: label })
+      children: onClick && /* @__PURE__ */ jsxs22("div", { className: getClassNameItem3("link"), onClick, children: [
+        icon && /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+        /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
     }
   );
@@ -7909,15 +8103,15 @@ var Nav = ({
   items,
   footer
 }) => {
-  return /* @__PURE__ */ jsxs21("nav", { className: getClassName32(), children: [
-    /* @__PURE__ */ jsx52("ul", { className: getClassName32("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx52(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ jsx52("div", { className: getClassName32("footer"), children: footer })
+  return /* @__PURE__ */ jsxs22("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 jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
-var getClassName33 = get_class_name_factory_default("Editor", styles_module_default22);
+import { Fragment as Fragment15, jsx as jsx54, jsxs as jsxs23 } 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 = () => {
@@ -7930,30 +8124,30 @@ var FieldSideBarToolbar = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
-  return /* @__PURE__ */ jsxs22("div", { className: getClassName33("fieldSideBarToolbar"), children: [
-    /* @__PURE__ */ jsxs22("div", { className: getClassName33("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs23("div", { className: getClassName34("fieldSideBarToolbar"), children: [
+    /* @__PURE__ */ jsxs23("div", { className: getClassName34("fieldSideBarHistory"), children: [
+      /* @__PURE__ */ jsx54(
         IconButton,
         {
           type: "button",
           title: "undo",
           disabled: !hasPast,
           onClick: back,
-          children: /* @__PURE__ */ jsx53(Undo2, { size: 18 })
+          children: /* @__PURE__ */ jsx54(Undo2, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx53(
+      /* @__PURE__ */ jsx54(
         IconButton,
         {
           type: "button",
           title: "redo",
           disabled: !hasFuture,
           onClick: forward,
-          children: /* @__PURE__ */ jsx53(Redo2, { size: 18 })
+          children: /* @__PURE__ */ jsx54(Redo2, { size: 18 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx53("div", { className: getClassName33("fieldSideBarActions"), children: /* @__PURE__ */ jsx53(CustomHeaderActions, { children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54("div", { className: getClassName34("fieldSideBarActions"), children: /* @__PURE__ */ jsx54(CustomHeaderActions, { children: /* @__PURE__ */ jsx54(
       Button,
       {
         onClick: () => {
@@ -7972,9 +8166,9 @@ var FieldSideBar = () => {
       return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : ((_c = s.config.root) == null ? void 0 : _c.label) || "Page";
     }
   );
-  return /* @__PURE__ */ jsxs22(Fragment15, { children: [
-    /* @__PURE__ */ jsx53(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ jsx53(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx53(Fields, {}) })
+  return /* @__PURE__ */ jsxs23(Fragment15, { children: [
+    /* @__PURE__ */ jsx54(FieldSideBarToolbar, {}),
+    /* @__PURE__ */ jsx54(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx54(Fields, {}) })
   ] });
 };
 var PluginTab = ({
@@ -7982,7 +8176,7 @@ var PluginTab = ({
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx53("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx53("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 {
@@ -8046,7 +8240,7 @@ var Layout = ({ children }) => {
     () => overrides.editor || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState22(false);
+  const [mounted, setMounted] = useState23(false);
   useEffect25(() => {
     setMounted(true);
   }, []);
@@ -8064,10 +8258,10 @@ var Layout = ({ children }) => {
   useDeleteHotkeys();
   const layoutOptions = {};
   if (leftWidth) {
-    layoutOptions["--re-user-left-side-bar-width"] = `${leftWidth}px`;
+    layoutOptions["--editor-user-left-side-bar-width"] = `${leftWidth}px`;
   }
   if (rightWidth) {
-    layoutOptions["--re-user-right-side-bar-width"] = `${rightWidth}px`;
+    layoutOptions["--editor-user-right-side-bar-width"] = `${rightWidth}px`;
   }
   const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => {
@@ -8075,14 +8269,14 @@ var Layout = ({ children }) => {
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState22("toggle");
-  const [mobilePanelHeight, setMobilePanelHeight] = useState22(
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState23("toggle");
+  const [mobilePanelHeight, setMobilePanelHeight] = useState23(
     null
   );
-  const mobilePanelRef = useRef16(null);
-  const isDraggingMobile = useRef16(false);
-  const dragStartY = useRef16(0);
-  const dragStartHeight = useRef16(0);
+  const mobilePanelRef = useRef17(null);
+  const isDraggingMobile = useRef17(false);
+  const dragStartY = useRef17(0);
+  const dragStartHeight = useRef17(0);
   const handleMobileDragStart = useCallback22(
     (clientY) => {
       isDraggingMobile.current = true;
@@ -8135,7 +8329,7 @@ var Layout = ({ children }) => {
       document.removeEventListener("mouseup", onMouseUp);
     };
   }, [handleMobileDragMove, handleMobileDragEnd]);
-  const [theme, setTheme] = useState22(() => {
+  const [theme, setTheme] = useState23(() => {
     if (typeof window === "undefined") return "light";
     const stored = window.localStorage.getItem("editor-theme");
     if (stored === "light" || stored === "dark") return stored;
@@ -8148,7 +8342,7 @@ var Layout = ({ children }) => {
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx53(Sun, { size: 18 }) : /* @__PURE__ */ jsx53(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")),
@@ -8173,7 +8367,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx53(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx54(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -8210,19 +8404,19 @@ var Layout = ({ children }) => {
   const hasDesktopFieldsPlugin = pluginItems["fields"] && pluginItems["fields"].mobileOnly === false;
   const mobilePanelStyle = {};
   if (mobilePanelHeight && leftSideBarVisible) {
-    mobilePanelStyle["--re-mobile-panel-height"] = `${mobilePanelHeight}px`;
+    mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: `Editor ${getClassName33({
+      className: `Editor ${getClassName34({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx53(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx53(CustomEditor, { children: children || /* @__PURE__ */ jsx53(FrameProvider, { children: /* @__PURE__ */ jsx53(
+        /* @__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({
@@ -8234,17 +8428,17 @@ var Layout = ({ children }) => {
               mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs22(
+            children: /* @__PURE__ */ jsxs23(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
                 children: [
-                  /* @__PURE__ */ jsx53("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx54(
                     Nav,
                     {
                       items: pluginItems,
-                      footer: /* @__PURE__ */ jsx53(
+                      footer: /* @__PURE__ */ jsx54(
                         IconButton,
                         {
                           type: "button",
@@ -8255,19 +8449,19 @@ var Layout = ({ children }) => {
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs22(
+                  /* @__PURE__ */ jsxs23(
                     "div",
                     {
                       ref: mobilePanelRef,
                       className: getLayoutClassName("mobilePanel"),
                       children: [
-                        /* @__PURE__ */ jsx53(
+                        /* @__PURE__ */ jsx54(
                           "div",
                           {
                             className: getLayoutClassName("mobileDragHandle"),
                             onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
                             onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ jsx53(
+                            children: /* @__PURE__ */ jsx54(
                               "div",
                               {
                                 className: getLayoutClassName("mobileDragHandlePill")
@@ -8275,17 +8469,17 @@ var Layout = ({ children }) => {
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx53(
+                        /* @__PURE__ */ jsx54(
                           "div",
                           {
                             className: getLayoutClassName("mobilePanelContent"),
                             children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx53(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx54(
                                 PluginTab,
                                 {
                                   visible: currentPlugin === id,
                                   mobileOnly,
-                                  children: /* @__PURE__ */ jsx53(Render2, {})
+                                  children: /* @__PURE__ */ jsx54(Render2, {})
                                 },
                                 id
                               )
@@ -8295,7 +8489,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx54(
                     Sidebar,
                     {
                       position: "left",
@@ -8304,20 +8498,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx53(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx54(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ jsx53(Render2, {})
+                            children: /* @__PURE__ */ jsx54(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx53(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx54(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx54(
                     Sidebar,
                     {
                       position: "right",
@@ -8325,7 +8519,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx53(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
                     }
                   )
                 ]
@@ -8333,27 +8527,25 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx53("div", { id: "editor-portal-root", className: getClassName33("portal") })
+        /* @__PURE__ */ jsx54("div", { id: "editor-portal-root", className: getClassName34("portal") })
       ]
     }
   );
 };
 
 // components/Editor/index.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx54(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx55(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext15(propsContext);
 function EditorProvider({ children }) {
   const {
     config,
     data: initialData,
-    globalData: initialGlobalData,
     ui: initialUi,
     onChange,
-    onGlobalsChange,
     permissions = {},
     plugins,
     overrides,
@@ -8373,8 +8565,8 @@ function EditorProvider({ children }) {
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState23(() => {
-    var _a, _b, _c, _d, _e;
+  const [generatedAppState] = useState24(() => {
+    var _a, _b, _c, _d, _e, _f;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_a = initialData == null ? void 0 : initialData.root) == null ? void 0 : _a.props)) {
@@ -8388,20 +8580,20 @@ function EditorProvider({ children }) {
       toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
       config
     );
-    const seededGlobalData = __spreadValues({}, initialGlobalData != null ? initialGlobalData : {});
-    for (const [type, comp] of Object.entries((_d = config.components) != null ? _d : {})) {
-      if ((comp == null ? void 0 : comp.global) && !seededGlobalData[type]) {
-        seededGlobalData[type] = {
-          props: __spreadValues({}, (_e = comp == null ? void 0 : comp.defaultProps) != null ? _e : {})
+    const seededGlobals = __spreadValues({}, (_d = initialData == null ? void 0 : initialData.globals) != null ? _d : {});
+    for (const [type, comp] of Object.entries((_e = config.components) != null ? _e : {})) {
+      if ((comp == null ? void 0 : comp.global) && !seededGlobals[type]) {
+        seededGlobals[type] = {
+          props: __spreadValues({}, (_f = comp == null ? void 0 : comp.defaultProps) != null ? _f : {})
         };
       }
     }
     const composedData = resolveGlobals(
       __spreadProps(__spreadValues({}, initialData), {
         root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
-        content: initialData.content || []
+        content: initialData.content || [],
+        globals: seededGlobals
       }),
-      seededGlobalData,
       config
     );
     const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
@@ -8425,7 +8617,7 @@ function EditorProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState23(
+  const [blendedHistories] = useState24(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -8491,7 +8683,7 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState23(
+  const [appStore] = useState24(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect26(() => {
@@ -8508,24 +8700,19 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef17(null);
-  const previousGlobalData = useRef17(null);
+  const previousData = useRef18(null);
   useEffect26(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
-        const split = splitGlobalData(data, config);
-        if (onChange && !deepEqual2(split.data, previousData.current)) {
-          onChange(split.data);
-          previousData.current = split.data;
-        }
-        if (onGlobalsChange && !deepEqual2(split.globalData, previousGlobalData.current)) {
-          onGlobalsChange(split.globalData);
-          previousGlobalData.current = split.globalData;
+        const split = splitGlobals(data, config);
+        if (onChange && !deepEqual2(split, previousData.current)) {
+          onChange(split);
+          previousData.current = split;
         }
       }
     );
-  }, [onChange, onGlobalsChange, config]);
+  }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
   useEffect26(() => {
@@ -8534,10 +8721,10 @@ function EditorProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx54(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx54(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__ */ jsx54(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx54(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx54(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;
@@ -8570,12 +8757,12 @@ function pageMetadata(data) {
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-import { jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs23("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ jsx55(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx55(Components, {}) }),
-    /* @__PURE__ */ jsx55(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx55(Outline, {}) })
+  render: () => /* @__PURE__ */ jsxs24("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx56(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx56(Components, {}) }),
+    /* @__PURE__ */ jsx56(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx56(Outline, {}) })
   ] })
 });