@reacteditor/core 0.0.5 → 0.0.7

package/dist/{chunk-QB3US7UE.mjs → chunk-W5I2Z7QS.mjs}

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-X7IRHSQN.mjs";
+} from "./chunk-RNRHREWH.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -10,13 +10,13 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-YFRH22NT.mjs";
+} from "./chunk-TI3KC54Y.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-43G2QHSV.mjs";
+} from "./chunk-JUC25FB7.mjs";
 import {
   Check,
   ChevronDown,
@@ -60,18 +60,18 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-IUOWXGYR.mjs";
+} from "./chunk-AAK2555H.mjs";
 import {
   getItem,
   insert,
   insertAction,
   makeStatePublic,
   populateIds
-} from "./chunk-UB2DES2O.mjs";
+} from "./chunk-M4JDRFYB.mjs";
 import {
   defaultAppState,
   defaultViewports
-} from "./chunk-VOLQMQPK.mjs";
+} from "./chunk-IIRJMJFU.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -87,7 +87,7 @@ import {
   toComponent,
   walkAppState,
   walkField
-} from "./chunk-GAUBBDIR.mjs";
+} from "./chunk-JIXMPJZA.mjs";
 import {
   __async,
   __objRest,
@@ -151,7 +151,7 @@ import { useEffect, useState } from "react";
 
 // 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();
@@ -240,7 +240,7 @@ init_react_import();
 
 // 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";
@@ -308,7 +308,7 @@ init_react_import();
 
 // 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();
@@ -376,7 +376,7 @@ init_react_import();
 
 // 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";
@@ -1388,7 +1388,7 @@ import {
 
 // 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();
@@ -1396,7 +1396,7 @@ import { useEffect as useEffect4, useState as useState6 } from "react";
 
 // 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";
@@ -1432,7 +1432,7 @@ init_react_import();
 
 // 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";
@@ -1799,11 +1799,11 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 
 // 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-POJT3RA2.mjs").then((m) => ({
+  () => import("./Editor-OSAG52QF.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2087,7 +2087,7 @@ init_react_import();
 
 // 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";
@@ -2371,7 +2371,7 @@ import {
 
 // 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";
@@ -3108,7 +3108,7 @@ var DraggableComponent = ({
 
 // 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";
@@ -3118,7 +3118,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_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";
@@ -4586,12 +4586,12 @@ import {
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-POJT3RA2.mjs").then((m) => ({
+  () => import("./Editor-OSAG52QF.mjs").then((m) => ({
     default: m.Editor
   }))
 );
 var RichTextRender = lazy2(
-  () => import("./Render-JNABKPAF.mjs").then((m) => ({
+  () => import("./Render-STFB5CNO.mjs").then((m) => ({
     default: m.RichTextRender
   }))
 );
@@ -5538,7 +5538,7 @@ init_react_import();
 
 // 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";
@@ -5679,8 +5679,131 @@ function resolveDataBySelector(selector, getState, trigger) {
   });
 }
 
+// lib/editor-commands.ts
+init_react_import();
+var parentToZone = (parent) => parent ? `${parent.id}:${parent.slot}` : rootDroppableId;
+var createEditorCommands = (appStore) => {
+  const { getState } = appStore;
+  const getZoneLength = (zone) => {
+    var _a, _b;
+    return (_b = (_a = getState().state.indexes.zones[zone]) == null ? void 0 : _a.contentIds.length) != null ? _b : 0;
+  };
+  const insertComponent2 = ({
+    type,
+    parent,
+    index,
+    data,
+    select = true
+  }) => {
+    var _a;
+    const id = (_a = data == null ? void 0 : data.props.id) != null ? _a : generateId(type);
+    const zone = parentToZone(parent);
+    const destIndex = index != null ? index : getZoneLength(zone);
+    const dispatch = getState().dispatch;
+    dispatch(__spreadValues({
+      type: "insert",
+      componentType: type,
+      destinationIndex: destIndex,
+      destinationZone: zone,
+      id
+    }, data ? { data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { id }) }) } : {}));
+    if (select) {
+      dispatch({
+        type: "setUi",
+        ui: { itemSelector: { index: destIndex, zone } }
+      });
+    }
+    return { id };
+  };
+  const removeComponent = (id) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    getState().dispatch({ type: "remove", index: sel.index, zone: sel.zone });
+  };
+  const duplicateComponent = (id) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    getState().dispatch({
+      type: "duplicate",
+      sourceIndex: sel.index,
+      sourceZone: sel.zone
+    });
+  };
+  const moveComponent2 = (id, to) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    getState().dispatch({
+      type: "move",
+      sourceIndex: sel.index,
+      sourceZone: sel.zone,
+      destinationIndex: to.index,
+      destinationZone: parentToZone(to.parent)
+    });
+  };
+  const replaceComponent = (id, data) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    const existing = getItem(sel, getState().state);
+    if (!existing) return;
+    getState().dispatch({
+      type: "replace",
+      destinationIndex: sel.index,
+      destinationZone: sel.zone,
+      data: __spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { id: existing.props.id }) })
+    });
+  };
+  const updateProps = (id, updater) => {
+    const sel = getSelectorForId(getState().state, id);
+    if (!sel) return;
+    const existing = getItem(sel, getState().state);
+    if (!existing) return;
+    const patch = typeof updater === "function" ? updater(existing.props) : updater;
+    getState().dispatch({
+      type: "replace",
+      destinationIndex: sel.index,
+      destinationZone: sel.zone,
+      data: __spreadProps(__spreadValues({}, existing), {
+        props: __spreadProps(__spreadValues(__spreadValues({}, existing.props), patch), { id: existing.props.id })
+      })
+    });
+  };
+  const updateRoot = (updater) => {
+    var _a, _b;
+    const root = (_a = getState().state.data.root) != null ? _a : { props: {} };
+    const prevProps = (_b = root.props) != null ? _b : {};
+    const patch = typeof updater === "function" ? updater(prevProps) : updater;
+    getState().dispatch({
+      type: "replaceRoot",
+      root: __spreadProps(__spreadValues({}, root), { props: __spreadValues(__spreadValues({}, prevProps), patch) })
+    });
+  };
+  const selectComponent = (id) => {
+    const dispatch = getState().dispatch;
+    if (id === null) {
+      dispatch({ type: "setUi", ui: { itemSelector: null } });
+      return;
+    }
+    const sel = getSelectorForId(getState().state, id);
+    if (!(sel == null ? void 0 : sel.zone)) return;
+    dispatch({
+      type: "setUi",
+      ui: { itemSelector: { index: sel.index, zone: sel.zone } }
+    });
+  };
+  return {
+    insertComponent: insertComponent2,
+    removeComponent,
+    duplicateComponent,
+    moveComponent: moveComponent2,
+    replaceComponent,
+    updateProps,
+    updateRoot,
+    selectComponent
+  };
+};
+
 // lib/use-editor.ts
-var generateUseEditor = (store, getState) => {
+var generateUseEditor = (store, getState, commands) => {
   const history = {
     back: store.history.back,
     forward: store.history.forward,
@@ -5691,7 +5814,7 @@ var generateUseEditor = (store, getState) => {
     histories: store.history.histories,
     index: store.history.index
   };
-  const storeData = {
+  const storeData = __spreadProps(__spreadValues({}, commands), {
     appState: makeStatePublic(store.state),
     config: store.config,
     dispatch: store.dispatch,
@@ -5712,7 +5835,7 @@ var generateUseEditor = (store, getState) => {
       if (!parentNode) return;
       return parentNode.data;
     }
-  };
+  });
   storeData.__private = {
     appState: store.state
   };
@@ -5732,11 +5855,13 @@ var convertToPickedStore = (store) => {
   };
 };
 var useRegisterUseEditorStore = (appStore) => {
+  const [commands] = useState16(() => createEditorCommands(appStore));
   const [useEditorStore] = useState16(
     () => createStore5(
       () => generateUseEditor(
         convertToPickedStore(appStore.getState()),
-        appStore.getState
+        appStore.getState,
+        commands
       )
     )
   );
@@ -5744,10 +5869,12 @@ var useRegisterUseEditorStore = (appStore) => {
     return appStore.subscribe(
       (store) => convertToPickedStore(store),
       (pickedStore) => {
-        useEditorStore.setState(generateUseEditor(pickedStore, appStore.getState));
+        useEditorStore.setState(
+          generateUseEditor(pickedStore, appStore.getState, commands)
+        );
       }
     );
-  }, []);
+  }, [commands]);
   return useEditorStore;
 };
 function createUseEditor() {
@@ -5788,7 +5915,7 @@ import { useMemo as useMemo14, useState as useState17 } from "react";
 
 // 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";
@@ -5905,7 +6032,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "LayerTree": "_LayerTree_1wyf0_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1wyf0_11", "LayerTree-helper": "_LayerTree-helper_1wyf0_17", "Layer": "_Layer_1wyf0_1", "Layer-inner": "_Layer-inner_1wyf0_34", "Layer--containsZone": "_Layer--containsZone_1wyf0_42", "Layer-clickable": "_Layer-clickable_1wyf0_46", "Layer--isSelected": "_Layer--isSelected_1wyf0_68", "Layer-icon": "_Layer-icon_1wyf0_80", "Layer-zoneIcon": "_Layer-zoneIcon_1wyf0_81", "Layer-chevron": "_Layer-chevron_1wyf0_85", "Layer--childIsSelected": "_Layer--childIsSelected_1wyf0_97", "Layer-zones": "_Layer-zones_1wyf0_101", "Layer-title": "_Layer-title_1wyf0_117", "Layer-name": "_Layer-name_1wyf0_130", "Layer--isGlobal": "_Layer--isGlobal_1wyf0_150", "Layer--isUnlinked": "_Layer--isUnlinked_1wyf0_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_1wyf0_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 {
@@ -6363,7 +6490,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
 init_react_import();
-var styles_module_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();
@@ -6440,7 +6567,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_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 {
@@ -6638,7 +6765,7 @@ var Fields = memo8(FieldsInternal);
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
-var styles_module_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";
@@ -6666,12 +6793,12 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
 init_react_import();
 import {
   createContext as createContext8,
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   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
@@ -7177,16 +7304,16 @@ function splitGlobals(data, config) {
 // components/Editor/components/Layout/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback22,
+  useCallback as useCallback23,
   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/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();
@@ -7243,7 +7370,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_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";
@@ -7272,21 +7399,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";
+
+// components/ui/Combobox/index.tsx
+init_react_import();
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
+init_react_import();
+var styles_module_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("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_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" };
+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 jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("BrowserBar", styles_module_default24);
+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" }
@@ -7294,7 +7546,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);
@@ -7322,50 +7573,86 @@ 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 }) })
         }
       )
     ] })
@@ -7374,7 +7661,7 @@ var BrowserBar = ({
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "EditorCanvas": "_EditorCanvas_k9klu_1", "EditorCanvas-controls": "_EditorCanvas-controls_k9klu_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_k9klu_22", "EditorCanvas-inner": "_EditorCanvas-inner_k9klu_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_k9klu_46", "EditorCanvas-root": "_EditorCanvas-root_k9klu_46", "EditorCanvas--ready": "_EditorCanvas--ready_k9klu_83", "EditorCanvas-loader": "_EditorCanvas-loader_k9klu_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_k9klu_100", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_k9klu_109", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_k9klu_114" };
+var styles_module_default26 = { "EditorCanvas": "_EditorCanvas_es8bv_1", "EditorCanvas-controls": "_EditorCanvas-controls_es8bv_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_es8bv_22", "EditorCanvas-inner": "_EditorCanvas-inner_es8bv_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_es8bv_46", "EditorCanvas-root": "_EditorCanvas-root_es8bv_46", "EditorCanvas--ready": "_EditorCanvas--ready_es8bv_83", "EditorCanvas-loader": "_EditorCanvas-loader_es8bv_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_es8bv_100", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_es8bv_109", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_es8bv_114" };
 
 // components/Editor/components/Canvas/index.tsx
 import { useShallow as useShallow9 } from "zustand/react/shallow";
@@ -7384,22 +7671,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);
@@ -7410,8 +7697,8 @@ 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;
@@ -7446,14 +7733,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(
@@ -7474,14 +7761,14 @@ 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();
-  const autoSelectingRef = useRef13(true);
+  const autoSelectingRef = useRef14(true);
   const pickClosestViewport = useCallback18(() => {
     var _a2, _b2;
     if (typeof window === "undefined") return null;
@@ -7575,10 +7862,10 @@ var Canvas = () => {
     appStoreApi,
     setUi
   ]);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
-      className: getClassName29({
+      className: getClassName30({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas
@@ -7593,16 +7880,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})`,
@@ -7610,7 +7897,7 @@ var Canvas = () => {
               transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : disableZoomControls ? void 0 : "transform 150ms ease-out"
             },
             children: [
-              iframe.enabled && /* @__PURE__ */ jsx49("div", { className: getClassName29("browserBar"), children: /* @__PURE__ */ jsx49(
+              iframe.enabled && /* @__PURE__ */ jsx50("div", { className: getClassName30("browserBar"), children: /* @__PURE__ */ jsx50(
                 BrowserBar,
                 {
                   onViewportChange: (viewport) => {
@@ -7627,23 +7914,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 }) })
       ] })
     }
   );
@@ -7651,10 +7938,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
   );
@@ -7735,25 +8022,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/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;
@@ -7798,11 +8085,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
       ref: handleRef,
-      className: getClassName30({ [position]: true }),
+      className: getClassName31({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -7810,11 +8097,11 @@ var ResizeHandle = ({
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css#css-module
 init_react_import();
-var styles_module_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,
@@ -7823,16 +8110,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,
@@ -7847,6 +8134,9 @@ var Sidebar = ({
 // lib/use-delete-hotkeys.ts
 init_react_import();
 import { useCallback as useCallback21 } from "react";
+
+// lib/should-block-editing-hotkey.ts
+init_react_import();
 var isElementVisible = (element) => {
   let current = element;
   while (current && current !== document.body) {
@@ -7858,7 +8148,7 @@ var isElementVisible = (element) => {
   }
   return true;
 };
-var shouldBlockDeleteHotkey = (e) => {
+var shouldBlockEditingHotkey = (e) => {
   var _a;
   if (e == null ? void 0 : e.defaultPrevented) return true;
   const origin = ((_a = e == null ? void 0 : e.composedPath) == null ? void 0 : _a.call(e)[0]) || (e == null ? void 0 : e.target) || document.activeElement;
@@ -7879,12 +8169,14 @@ var shouldBlockDeleteHotkey = (e) => {
   }
   return false;
 };
+
+// lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
   const deleteSelectedComponent = useCallback21(
     (e) => {
       var _a;
-      if (shouldBlockDeleteHotkey(e)) {
+      if (shouldBlockEditingHotkey(e)) {
         return false;
       }
       const { state, dispatch, permissions, selectedItem } = appStore.getState();
@@ -7905,17 +8197,109 @@ var useDeleteHotkeys = () => {
   useHotkey({ backspace: true }, deleteSelectedComponent);
 };
 
+// lib/use-clipboard-hotkeys.ts
+init_react_import();
+import { useCallback as useCallback22 } from "react";
+var CLIPBOARD_MARKER = "reacteditor/component";
+var isComponentData = (value) => {
+  var _a;
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.type === "string" && typeof ((_a = v.props) == null ? void 0 : _a.id) === "string";
+};
+var parsePayload = (text) => {
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed === "object" && parsed.__reactEditor === CLIPBOARD_MARKER && isComponentData(parsed.data)) {
+      return parsed.data;
+    }
+  } catch (e) {
+  }
+  return null;
+};
+var useClipboardHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const writeSelectionToClipboard = useCallback22(() => {
+    var _a;
+    const { selectedItem } = appStore.getState();
+    if (!selectedItem) return false;
+    const payload = {
+      __reactEditor: CLIPBOARD_MARKER,
+      data: selectedItem
+    };
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(JSON.stringify(payload)).catch(() => {
+    });
+    return true;
+  }, [appStore]);
+  const copySelectedComponent = useCallback22(
+    (e) => {
+      if (shouldBlockEditingHotkey(e)) return false;
+      return writeSelectionToClipboard();
+    },
+    [writeSelectionToClipboard]
+  );
+  const cutSelectedComponent = useCallback22(
+    (e) => {
+      var _a;
+      if (shouldBlockEditingHotkey(e)) return false;
+      const { state, dispatch, permissions, selectedItem } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return false;
+      if (!permissions.getPermissions({ item: selectedItem }).delete)
+        return true;
+      if (!writeSelectionToClipboard()) return false;
+      dispatch({
+        type: "remove",
+        index: sel.index,
+        zone: sel.zone
+      });
+      return true;
+    },
+    [appStore, writeSelectionToClipboard]
+  );
+  const pasteComponent = useCallback22(
+    (e) => {
+      var _a, _b;
+      if (shouldBlockEditingHotkey(e)) return false;
+      const { state, dispatch, config } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone)) return false;
+      (_b = navigator.clipboard) == null ? void 0 : _b.readText().then((text) => {
+        const data = parsePayload(text);
+        if (!data) return;
+        if (!config.components[data.type]) return;
+        dispatch({
+          type: "insert",
+          componentType: data.type,
+          destinationIndex: sel.index + 1,
+          destinationZone: sel.zone,
+          data
+        });
+      }).catch(() => {
+      });
+      return true;
+    },
+    [appStore]
+  );
+  useHotkey({ meta: true, c: true }, copySelectedComponent);
+  useHotkey({ ctrl: true, c: true }, copySelectedComponent);
+  useHotkey({ meta: true, v: true }, pasteComponent);
+  useHotkey({ ctrl: true, v: true }, pasteComponent);
+  useHotkey({ meta: true, x: true }, cutSelectedComponent);
+  useHotkey({ ctrl: true, x: true }, cutSelectedComponent);
+};
+
 // components/Editor/components/Nav/index.tsx
 init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
 init_react_import();
-var styles_module_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,
@@ -7924,7 +8308,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "li",
     {
       className: getClassNameItem3({
@@ -7932,9 +8316,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 })
       ] })
     }
   );
@@ -7943,15 +8327,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 = () => {
@@ -7964,30 +8348,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: () => {
@@ -8006,9 +8390,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 = ({
@@ -8016,7 +8400,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 {
@@ -8080,7 +8464,7 @@ var Layout = ({ children }) => {
     () => overrides.editor || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState22(false);
+  const [mounted, setMounted] = useState23(false);
   useEffect25(() => {
     setMounted(true);
   }, []);
@@ -8096,12 +8480,13 @@ var Layout = ({ children }) => {
   }, [ready, iframe.enabled]);
   usePreviewModeHotkeys();
   useDeleteHotkeys();
+  useClipboardHotkeys();
   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) => {
@@ -8109,15 +8494,15 @@ 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 handleMobileDragStart = useCallback22(
+  const mobilePanelRef = useRef17(null);
+  const isDraggingMobile = useRef17(false);
+  const dragStartY = useRef17(0);
+  const dragStartHeight = useRef17(0);
+  const handleMobileDragStart = useCallback23(
     (clientY) => {
       isDraggingMobile.current = true;
       dragStartY.current = clientY;
@@ -8128,7 +8513,7 @@ var Layout = ({ children }) => {
     },
     []
   );
-  const handleMobileDragMove = useCallback22((clientY) => {
+  const handleMobileDragMove = useCallback23((clientY) => {
     if (!isDraggingMobile.current) return;
     const delta = dragStartY.current - clientY;
     const viewportHeight = window.innerHeight;
@@ -8137,7 +8522,7 @@ var Layout = ({ children }) => {
     const newH = Math.min(maxH, Math.max(minH, dragStartHeight.current + delta));
     setMobilePanelHeight(newH);
   }, []);
-  const handleMobileDragEnd = useCallback22(() => {
+  const handleMobileDragEnd = useCallback23(() => {
     if (!isDraggingMobile.current) return;
     isDraggingMobile.current = false;
     document.body.style.userSelect = "";
@@ -8169,7 +8554,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;
@@ -8182,7 +8567,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")),
@@ -8207,7 +8592,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");
@@ -8244,19 +8629,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({
@@ -8268,17 +8653,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",
@@ -8289,19 +8674,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")
@@ -8309,17 +8694,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
                               )
@@ -8329,7 +8714,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx54(
                     Sidebar,
                     {
                       position: "left",
@@ -8338,20 +8723,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",
@@ -8359,7 +8744,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx53(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
                     }
                   )
                 ]
@@ -8367,17 +8752,17 @@ 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 }) {
@@ -8405,7 +8790,7 @@ function EditorProvider({ children }) {
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState23(() => {
+  const [generatedAppState] = useState24(() => {
     var _a, _b, _c, _d, _e, _f;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -8457,7 +8842,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 +8876,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback23(
+  const generateAppStore = useCallback24(
     (state) => {
       return {
         instanceId,
@@ -8523,7 +8908,7 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState23(
+  const [appStore] = useState24(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect26(() => {
@@ -8540,7 +8925,7 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef17(null);
+  const previousData = useRef18(null);
   useEffect26(() => {
     return appStore.subscribe(
       (s) => s.state.data,
@@ -8561,10 +8946,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;
@@ -8597,12 +8982,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, {}) })
   ] })
 });
 
@@ -8657,7 +9042,6 @@ export {
   renderContext,
   Render,
   registerOverlayPortal,
-  DropZone,
   Drawer,
   ComponentList,
   createUseEditor,
@@ -8666,6 +9050,7 @@ export {
   blocksPlugin,
   outlinePlugin,
   fieldsPlugin,
+  usePropsContext,
   Editor3 as Editor,
   pageMetadata,
   legacySideBarPlugin