@reacteditor/core 0.0.3 → 0.0.5

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

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-TCVU3WEN.mjs";
+} from "./chunk-X7IRHSQN.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -10,13 +10,13 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-VD3EVRUF.mjs";
+} from "./chunk-YFRH22NT.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-6Q6A3BQH.mjs";
+} from "./chunk-43G2QHSV.mjs";
 import {
   Check,
   ChevronDown,
@@ -60,14 +60,14 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-2LVYDXZS.mjs";
+} from "./chunk-IUOWXGYR.mjs";
 import {
   getItem,
   insert,
   insertAction,
   makeStatePublic,
   populateIds
-} from "./chunk-VUEM62JF.mjs";
+} from "./chunk-UB2DES2O.mjs";
 import {
   defaultAppState,
   defaultViewports
@@ -149,7 +149,7 @@ function setDeep(node, path, newVal) {
 init_react_import();
 import { useEffect, useState } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Button/Button.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Button/Button.module.css#css-module
 init_react_import();
 var Button_module_default = { "Button": "_Button_1g3xu_1", "Button--medium": "_Button--medium_1g3xu_31", "Button--large": "_Button--large_1g3xu_39", "Button-icon": "_Button-icon_1g3xu_46", "Button--primary": "_Button--primary_1g3xu_50", "Button--secondary": "_Button--secondary_1g3xu_71", "Button--flush": "_Button--flush_1g3xu_88", "Button--disabled": "_Button--disabled_1g3xu_92", "Button--fullWidth": "_Button--fullWidth_1g3xu_100", "Button-spinner": "_Button-spinner_1g3xu_105" };
 
@@ -238,7 +238,7 @@ var Button = (_a) => {
 // components/AutoField/FieldLabel.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/AutoField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/styles.module.css#css-module
 init_react_import();
 var styles_module_default = { "InputWrapper": "_InputWrapper_yqqgz_1", "Input-label": "_Input-label_yqqgz_5", "Input-labelIcon": "_Input-labelIcon_yqqgz_15", "Input-disabledIcon": "_Input-disabledIcon_yqqgz_22", "Input-input": "_Input-input_yqqgz_27", "Input": "_Input_yqqgz_1", "Input--readOnly": "_Input--readOnly_yqqgz_87", "Input-radioGroupItems": "_Input-radioGroupItems_yqqgz_98", "Input-radio": "_Input-radio_yqqgz_98", "Input-radioInner": "_Input-radioInner_yqqgz_115", "Input-radioInput": "_Input-radioInput_yqqgz_147" };
 
@@ -306,7 +306,7 @@ init_react_import();
 // components/AutoField/fields/ArrayField/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/AutoField/fields/ArrayField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/fields/ArrayField/styles.module.css#css-module
 init_react_import();
 var styles_module_default2 = { "ArrayField": "_ArrayField_13xcf_5", "ArrayField--isDraggingFrom": "_ArrayField--isDraggingFrom_13xcf_14", "ArrayField-addButton": "_ArrayField-addButton_13xcf_19", "ArrayField--hasItems": "_ArrayField--hasItems_13xcf_35", "ArrayField-inner": "_ArrayField-inner_13xcf_61", "ArrayFieldItem": "_ArrayFieldItem_13xcf_69", "ArrayFieldItem--isDragging": "_ArrayFieldItem--isDragging_13xcf_78", "ArrayFieldItem--isExpanded": "_ArrayFieldItem--isExpanded_13xcf_82", "ArrayFieldItem-summary": "_ArrayFieldItem-summary_13xcf_97", "ArrayFieldItem--noFields": "_ArrayFieldItem--noFields_13xcf_118", "ArrayFieldItem-body": "_ArrayFieldItem-body_13xcf_147", "ArrayFieldItem-fieldset": "_ArrayFieldItem-fieldset_13xcf_156", "ArrayFieldItem-rhs": "_ArrayFieldItem-rhs_13xcf_164", "ArrayFieldItem-actions": "_ArrayFieldItem-actions_13xcf_170" };
 
@@ -374,7 +374,7 @@ import {
 // components/DragIcon/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/DragIcon/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DragIcon/styles.module.css#css-module
 init_react_import();
 var styles_module_default3 = { "DragIcon": "_DragIcon_53afe_1", "DragIcon--disabled": "_DragIcon--disabled_53afe_8" };
 
@@ -392,11 +392,14 @@ init_react_import();
 import { useState as useState3 } from "react";
 import { PointerSensor } from "@dnd-kit/react";
 import { isElement } from "@dnd-kit/dom/utilities";
-var touchDefault = { delay: { value: 200, tolerance: 10 } };
-var otherDefault = {
-  delay: { value: 200, tolerance: 10 },
-  distance: { value: 5 }
-};
+import { PointerActivationConstraints } from "@dnd-kit/dom";
+var touchDefault = [
+  new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 })
+];
+var otherDefault = [
+  new PointerActivationConstraints.Delay({ value: 200, tolerance: 10 }),
+  new PointerActivationConstraints.Distance({ value: 5 })
+];
 var useSensors = ({
   other = otherDefault,
   mouse,
@@ -426,8 +429,8 @@ var useSensors = ({
 // lib/dnd/collision/dynamic/index.ts
 init_react_import();
 import {
-  CollisionPriority as CollisionPriority7,
-  CollisionType as CollisionType7
+  CollisionPriority,
+  CollisionType as CollisionType2
 } from "@dnd-kit/abstract";
 
 // lib/dnd/collision/directional/index.ts
@@ -573,70 +576,8 @@ var trackMovementInterval = (point, dragAxis = "dynamic") => {
   return intervalCache;
 };
 
-// ../../node_modules/@dnd-kit/collision/dist/index.js
-init_react_import();
-import { CollisionPriority, CollisionType as CollisionType2 } from "@dnd-kit/abstract";
-import { Point as Point2 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority2, CollisionType as CollisionType22 } from "@dnd-kit/abstract";
-import { Point as Point22 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority3, CollisionType as CollisionType3 } from "@dnd-kit/abstract";
-import { Point as Point3, Rectangle } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority4, CollisionType as CollisionType4 } from "@dnd-kit/abstract";
-import { Point as Point4 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority5, CollisionType as CollisionType5 } from "@dnd-kit/abstract";
-import { Point as Point5 } from "@dnd-kit/geometry";
-import { CollisionPriority as CollisionPriority6, CollisionType as CollisionType6 } from "@dnd-kit/abstract";
-import { Point as Point6 } from "@dnd-kit/geometry";
-var pointerIntersection = ({
-  dragOperation,
-  droppable
-}) => {
-  const pointerCoordinates = dragOperation.position.current;
-  if (!pointerCoordinates) {
-    return null;
-  }
-  const { id } = droppable;
-  if (!droppable.shape) {
-    return null;
-  }
-  if (droppable.shape.containsPoint(pointerCoordinates)) {
-    const distance = Point2.distance(droppable.shape.center, pointerCoordinates);
-    return {
-      id,
-      value: 1 / distance,
-      type: CollisionType2.PointerIntersection,
-      priority: CollisionPriority.High
-    };
-  }
-  return null;
-};
-var closestCorners = (input) => {
-  const { dragOperation, droppable } = input;
-  const { shape, position } = dragOperation;
-  if (!droppable.shape) {
-    return null;
-  }
-  const shapeCorners = shape ? Rectangle.from(shape.current.boundingRectangle).corners : void 0;
-  const distance = Rectangle.from(
-    droppable.shape.boundingRectangle
-  ).corners.reduce(
-    (acc, corner, index) => {
-      var _a;
-      return acc + Point3.distance(
-        Point3.from(corner),
-        (_a = shapeCorners == null ? void 0 : shapeCorners[index]) != null ? _a : position.current
-      );
-    },
-    0
-  );
-  const value = distance / 4;
-  return {
-    id: droppable.id,
-    value: 1 / value,
-    type: CollisionType3.Collision,
-    priority: CollisionPriority3.Normal
-  };
-};
+// lib/dnd/collision/dynamic/index.ts
+import { closestCorners } from "@dnd-kit/collision";
 
 // lib/dnd/collision/dynamic/store.ts
 init_react_import();
@@ -674,7 +615,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     collisionDebug(dragCenter, dropCenter, droppable.id.toString(), "yellow");
     if (collision) {
       return __spreadProps(__spreadValues({}, collision), {
-        priority: CollisionPriority7.Highest,
+        priority: CollisionPriority.Highest,
         data
       });
     }
@@ -692,8 +633,8 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
     const collision = {
       id: droppable.id,
       value: intersectionRatio,
-      priority: CollisionPriority7.High,
-      type: CollisionType7.Collision
+      priority: CollisionPriority.High,
+      type: CollisionType2.Collision
     };
     const shouldFlushId = flushNext === droppable.id;
     flushNext = "";
@@ -720,7 +661,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           );
           flushNext = droppable.id;
           return __spreadProps(__spreadValues({}, fallbackCollision), {
-            priority: CollisionPriority7.Low,
+            priority: CollisionPriority.Low,
             data
           });
         }
@@ -732,7 +673,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
           direction || ""
         );
         return __spreadProps(__spreadValues({}, fallbackCollision), {
-          priority: CollisionPriority7.Lowest,
+          priority: CollisionPriority.Lowest,
           data
         });
       }
@@ -744,6 +685,7 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
 
 // components/Sortable/index.tsx
 import { useSortable } from "@dnd-kit/react/sortable";
+import { PointerActivationConstraints as PointerActivationConstraints2 } from "@dnd-kit/dom";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SortableProvider = ({
   children,
@@ -752,7 +694,7 @@ var SortableProvider = ({
   onMove
 }) => {
   const sensors = useSensors({
-    mouse: { distance: { value: 5 } }
+    mouse: [new PointerActivationConstraints2.Distance({ value: 5 })]
   });
   return /* @__PURE__ */ jsx5(
     DragDropProvider,
@@ -1444,7 +1386,7 @@ import {
   isValidElement
 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/ExternalInput/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ExternalInput/styles.module.css#css-module
 init_react_import();
 var styles_module_default4 = { "ExternalInput-actions": "_ExternalInput-actions_3fhqq_1", "ExternalInput-button": "_ExternalInput-button_3fhqq_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_3fhqq_25", "ExternalInput--readOnly": "_ExternalInput--readOnly_3fhqq_32", "ExternalInput-detachButton": "_ExternalInput-detachButton_3fhqq_36", "ExternalInput": "_ExternalInput_3fhqq_1", "ExternalInputModal": "_ExternalInputModal_3fhqq_82", "ExternalInputModal-grid": "_ExternalInputModal-grid_3fhqq_92", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_3fhqq_103", "ExternalInputModal-filters": "_ExternalInputModal-filters_3fhqq_108", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_3fhqq_127", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_3fhqq_136", "ExternalInputModal-table": "_ExternalInputModal-table_3fhqq_136", "ExternalInputModal-thead": "_ExternalInputModal-thead_3fhqq_152", "ExternalInputModal-th": "_ExternalInputModal-th_3fhqq_152", "ExternalInputModal-td": "_ExternalInputModal-td_3fhqq_167", "ExternalInputModal-tr": "_ExternalInputModal-tr_3fhqq_172", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_3fhqq_179", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_3fhqq_205", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_3fhqq_209", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_3fhqq_226", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_3fhqq_230", "ExternalInputModal-search": "_ExternalInputModal-search_3fhqq_230", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_3fhqq_267", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_3fhqq_292", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_3fhqq_302", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_3fhqq_316", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_3fhqq_329", "ExternalInputModal-footerContainer": "_ExternalInputModal-footerContainer_3fhqq_333", "ExternalInputModal-footer": "_ExternalInputModal-footer_3fhqq_333", "ExternalInputModal-field": "_ExternalInputModal-field_3fhqq_346" };
 
@@ -1452,7 +1394,7 @@ var styles_module_default4 = { "ExternalInput-actions": "_ExternalInput-actions_
 init_react_import();
 import { useEffect as useEffect4, useState as useState6 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Modal/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Modal/styles.module.css#css-module
 init_react_import();
 var styles_module_default5 = { "Modal": "_Modal_1qmqa_1", "Modal--isOpen": "_Modal--isOpen_1qmqa_15", "Modal-inner": "_Modal-inner_1qmqa_19" };
 
@@ -1488,7 +1430,7 @@ var Modal = ({
 // components/Heading/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Heading/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Heading/styles.module.css#css-module
 init_react_import();
 var styles_module_default6 = { "Heading": "_Heading_crcfw_1", "Heading--xxxxl": "_Heading--xxxxl_crcfw_13", "Heading--xxxl": "_Heading--xxxl_crcfw_19", "Heading--xxl": "_Heading--xxl_crcfw_23", "Heading--xl": "_Heading--xl_crcfw_27", "Heading--l": "_Heading--l_crcfw_31", "Heading--m": "_Heading--m_crcfw_35", "Heading--s": "_Heading--s_crcfw_39", "Heading--xs": "_Heading--xs_crcfw_43" };
 
@@ -1855,7 +1797,7 @@ init_react_import();
 init_react_import();
 import * as SelectPrimitive from "@radix-ui/react-select";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/ui/Select/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Select/styles.module.css#css-module
 init_react_import();
 var styles_module_default7 = { "FeSelect-trigger": "_FeSelect-trigger_13era_3", "FeSelect-triggerIcon": "_FeSelect-triggerIcon_13era_54", "FeSelect-content": "_FeSelect-content_13era_61", "FeSelect-viewport": "_FeSelect-viewport_13era_84", "FeSelect-item": "_FeSelect-item_13era_93", "FeSelect-itemIndicator": "_FeSelect-itemIndicator_13era_119", "FeSelect-group": "_FeSelect-group_13era_131", "FeSelect-label": "_FeSelect-label_13era_135", "FeSelect-separator": "_FeSelect-separator_13era_144", "FeSelect-scrollButton": "_FeSelect-scrollButton_13era_152" };
 
@@ -2105,7 +2047,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-2TYODRQT.mjs").then((m) => ({
+  () => import("./Editor-POJT3RA2.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2143,7 +2085,7 @@ var RichtextField = ({
 // components/AutoField/fields/ObjectField/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/AutoField/fields/ObjectField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/fields/ObjectField/styles.module.css#css-module
 init_react_import();
 var styles_module_default8 = { "ObjectField": "_ObjectField_1o8gv_5", "ObjectField-fieldset": "_ObjectField-fieldset_1o8gv_13" };
 
@@ -2427,7 +2369,7 @@ import {
   useTransition
 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/DraggableComponent/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DraggableComponent/styles.module.css#css-module
 init_react_import();
 var styles_module_default9 = { "DraggableComponent": "_DraggableComponent_d90mv_1", "DraggableComponent-overlayWrapper": "_DraggableComponent-overlayWrapper_d90mv_12", "DraggableComponent-overlay": "_DraggableComponent-overlay_d90mv_12", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_d90mv_36", "DraggableComponent--hover": "_DraggableComponent--hover_d90mv_53", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_d90mv_60", "DraggableComponent--isGlobal": "_DraggableComponent--isGlobal_d90mv_69", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_d90mv_105", "DraggableComponent-actions": "_DraggableComponent-actions_d90mv_105" };
 
@@ -2512,6 +2454,7 @@ var DropZoneProvider = ({
 // components/DraggableComponent/index.tsx
 import { useShallow as useShallow4 } from "zustand/react/shallow";
 import { useSortable as useSortable2 } from "@dnd-kit/react/sortable";
+import { Feedback } from "@dnd-kit/dom";
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
@@ -2657,6 +2600,13 @@ var DraggableComponent = ({
     () => createDynamicCollisionDetector(dragAxis),
     [dragAxis]
   );
+  const sortablePlugins = useMemo7(
+    () => (defaults) => [
+      ...defaults,
+      Feedback.configure({ feedback: "clone" })
+    ],
+    []
+  );
   const {
     ref: sortableRef,
     isDragging: thisIsDragging,
@@ -2682,8 +2632,7 @@ var DraggableComponent = ({
     transition: {
       duration: 200,
       easing: "cubic-bezier(0.2, 0, 0, 1)"
-    },
-    feedback: "clone"
+    }
   });
   useEffect8(() => {
     const isEnabled = zoneStore.getState().enabledIndex[zoneCompound];
@@ -3157,7 +3106,7 @@ var DraggableComponent = ({
   ] });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/DropZone/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/DropZone/styles.module.css#css-module
 init_react_import();
 var styles_module_default10 = { "DropZone": "_DropZone_q9qsx_1", "DropZone--hasChildren": "_DropZone--hasChildren_q9qsx_11", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_q9qsx_24", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_q9qsx_25", "DropZone--isRootZone": "_DropZone--isRootZone_q9qsx_25", "DropZone--isDestination": "_DropZone--isDestination_q9qsx_39", "DropZone-item": "_DropZone-item_q9qsx_48", "DropZone-hitbox": "_DropZone-hitbox_q9qsx_52", "DropZone--isEnabled": "_DropZone--isEnabled_q9qsx_60", "DropZone--isAnimating": "_DropZone--isAnimating_q9qsx_70" };
 
@@ -3167,7 +3116,7 @@ import { useDroppable as useDroppable2 } from "@dnd-kit/react";
 // components/Drawer/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Drawer/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
 var styles_module_default11 = { "Drawer": "_Drawer_rcm43_1", "Drawer--tile": "_Drawer--tile_rcm43_8", "Drawer-draggable": "_Drawer-draggable_rcm43_19", "Drawer-draggableBg": "_Drawer-draggableBg_rcm43_23", "DrawerItem-draggable": "_DrawerItem-draggable_rcm43_33", "DrawerItem-icon": "_DrawerItem-icon_rcm43_50", "DrawerItem--disabled": "_DrawerItem--disabled_rcm43_56", "DrawerItem": "_DrawerItem_rcm43_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_rcm43_66", "DrawerItem-name": "_DrawerItem-name_rcm43_91" };
 
@@ -3186,11 +3135,17 @@ import {
   useRef as useRef3,
   useState as useState10
 } from "react";
-import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
+import {
+  AutoScroller,
+  defaultPreset,
+  ScrollListener,
+  Scroller
+} from "@dnd-kit/dom";
 
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
 import { Plugin } from "@dnd-kit/abstract";
+import { getDocuments } from "@dnd-kit/dom/utilities";
 
 // lib/throttle.ts
 init_react_import();
@@ -3271,25 +3226,6 @@ var GlobalPosition = class {
   }
 };
 
-// lib/bubble-pointer-event.ts
-init_react_import();
-var BaseEvent = typeof PointerEvent !== "undefined" ? PointerEvent : Event;
-var BubbledPointerEvent = class extends BaseEvent {
-  constructor(type, data) {
-    super(type, data);
-    this._originalTarget = null;
-    this.originalTarget = data.originalTarget;
-  }
-  // Necessary for Firefox
-  set originalTarget(target) {
-    this._originalTarget = target;
-  }
-  // Necessary for Firefox
-  get originalTarget() {
-    return this._originalTarget;
-  }
-};
-
 // lib/dnd/NestedDroppablePlugin.ts
 var depthSort = (candidates) => {
   return candidates.sort((a, b) => {
@@ -3432,7 +3368,7 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
     }
     this.registerEffect(() => {
       const handleMove = (event) => {
-        const target = event instanceof BubbledPointerEvent ? event.originalTarget || event.target : event.target;
+        const target = event.target;
         const position = new GlobalPosition(target, {
           x: event.clientX,
           y: event.clientY
@@ -3450,15 +3386,55 @@ var createNestedDroppablePlugin = ({ onChange }, id) => class NestedDroppablePlu
       const handlePointerMove = (event) => {
         handleMoveThrottled(event);
       };
-      document.body.addEventListener("pointermove", handlePointerMove, {
-        capture: true
-        // dndkit's PointerSensor prevents propagation during drag
-      });
-      const cleanup = () => {
-        document.body.removeEventListener("pointermove", handlePointerMove, {
+      const bound = /* @__PURE__ */ new Set();
+      const bind = (doc) => {
+        if (bound.has(doc)) return;
+        bound.add(doc);
+        doc.addEventListener("pointermove", handlePointerMove, {
           capture: true
+          // dndkit's PointerSensor prevents propagation during drag
         });
       };
+      const bindAll = () => {
+        for (const doc of getDocuments()) bind(doc);
+      };
+      bindAll();
+      const onIframeLoad = () => bindAll();
+      const observed = /* @__PURE__ */ new Set();
+      const observeFrame = (el) => {
+        if (observed.has(el)) return;
+        observed.add(el);
+        el.addEventListener("load", onIframeLoad);
+      };
+      for (const el of Array.from(
+        document.querySelectorAll(
+          "iframe, frame"
+        )
+      )) {
+        observeFrame(el);
+      }
+      const observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.addedNodes)) {
+            if (node instanceof HTMLIFrameElement || typeof HTMLFrameElement !== "undefined" && node instanceof HTMLFrameElement) {
+              observeFrame(node);
+            }
+          }
+        }
+        bindAll();
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      const cleanup = () => {
+        observer.disconnect();
+        for (const el of observed) {
+          el.removeEventListener("load", onIframeLoad);
+        }
+        for (const doc of bound) {
+          doc.removeEventListener("pointermove", handlePointerMove, {
+            capture: true
+          });
+        }
+      };
       return cleanup;
     });
   }
@@ -3701,6 +3677,8 @@ var DragDropContextClient = ({
     }
   }, []);
   const [plugins] = useState10(() => [
+    ScrollListener,
+    Scroller,
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -4132,6 +4110,9 @@ var Drawer = ({
 };
 Drawer.Item = DrawerItem;
 
+// components/DropZone/index.tsx
+import { pointerIntersection } from "@dnd-kit/collision";
+
 // components/DropZone/lib/use-min-empty-height.ts
 init_react_import();
 import { useEffect as useEffect10, useRef as useRef4, useState as useState12 } from "react";
@@ -4441,7 +4422,7 @@ var registerOverlayPortal = (el, opts = {}) => {
   };
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/InlineTextField/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/InlineTextField/styles.module.css#css-module
 init_react_import();
 var styles_module_default12 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
@@ -4605,12 +4586,12 @@ import {
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-2TYODRQT.mjs").then((m) => ({
+  () => import("./Editor-POJT3RA2.mjs").then((m) => ({
     default: m.Editor
   }))
 );
 var RichTextRender = lazy2(
-  () => import("./Render-VDC7AEQK.mjs").then((m) => ({
+  () => import("./Render-JNABKPAF.mjs").then((m) => ({
     default: m.RichTextRender
   }))
 );
@@ -5453,49 +5434,49 @@ import React3, { useMemo as useMemo13 } from "react";
 
 // lib/resolve-globals.ts
 init_react_import();
-function resolveItem(item, globalData, config, visitedTypes) {
-  var _a, _b, _c, _d, _e;
+function resolveItem(item, globals, config, visitedTypes) {
+  var _a, _b, _c, _d;
   const type = item.type;
   const componentConfig = config.components[type];
-  const globalEntry = globalData[type];
-  const isUnlinked = ((_a = item.props) == null ? void 0 : _a.__synced) === false;
+  const globalEntry = globals[type];
   const shouldApplyGlobal = Boolean(
-    (componentConfig == null ? void 0 : componentConfig.global) && globalEntry && !visitedTypes.has(type) && !isUnlinked
+    (componentConfig == null ? void 0 : componentConfig.global) && item.synced && globalEntry && !visitedTypes.has(type)
   );
   let mergedProps;
   if (shouldApplyGlobal) {
     mergedProps = __spreadProps(__spreadValues({}, globalEntry.props), {
-      children: (_b = item.props) == null ? void 0 : _b.children,
-      id: (_c = item.props) == null ? void 0 : _c.id
+      children: (_a = item.props) == null ? void 0 : _a.children,
+      id: (_b = item.props) == null ? void 0 : _b.id
     });
   } else {
-    if ((componentConfig == null ? void 0 : componentConfig.global) && globalEntry && visitedTypes.has(type) && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+    if ((componentConfig == null ? void 0 : componentConfig.global) && item.synced && globalEntry && visitedTypes.has(type) && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
       console.warn(
         `[resolveGlobals] cycle detected while resolving global "${type}" \u2014 leaving reference unresolved`
       );
     }
-    mergedProps = __spreadValues({}, (_d = item.props) != null ? _d : {});
+    mergedProps = __spreadValues({}, (_c = item.props) != null ? _c : {});
   }
-  const fields = (_e = componentConfig == null ? void 0 : componentConfig.fields) != null ? _e : {};
+  const fields = (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {};
   const nextVisited = shouldApplyGlobal ? /* @__PURE__ */ new Set([...visitedTypes, type]) : visitedTypes;
   for (const [fieldName, fieldDef] of Object.entries(fields)) {
     if ((fieldDef == null ? void 0 : fieldDef.type) === "slot") {
       const slotValue = mergedProps[fieldName];
       if (Array.isArray(slotValue)) {
         mergedProps[fieldName] = slotValue.map(
-          (child) => child && typeof child === "object" && "type" in child && "props" in child ? resolveItem(child, globalData, config, nextVisited) : child
+          (child) => child && typeof child === "object" && "type" in child && "props" in child ? resolveItem(child, globals, config, nextVisited) : child
         );
       }
     }
   }
   return __spreadProps(__spreadValues({}, item), { props: mergedProps });
 }
-function resolveGlobals(data, globalData, config) {
+function resolveGlobals(data, config) {
   var _a;
-  if (!globalData || Object.keys(globalData).length === 0) return data;
+  const globals = data.globals;
+  if (!globals || Object.keys(globals).length === 0) return data;
   const visited = /* @__PURE__ */ new Set();
   const content = ((_a = data.content) != null ? _a : []).map(
-    (item) => resolveItem(item, globalData, config, visited)
+    (item) => resolveItem(item, globals, config, visited)
   );
   return __spreadProps(__spreadValues({}, data), { content });
 }
@@ -5510,7 +5491,6 @@ var renderContext = React3.createContext({
 function Render({
   config,
   data,
-  globalData,
   metadata = {}
 }) {
   var _a, _b;
@@ -5519,8 +5499,8 @@ function Render({
       root: data.root || {},
       content: data.content || []
     });
-    return resolveGlobals(base, globalData, config);
-  }, [data, globalData, config]);
+    return resolveGlobals(base, config);
+  }, [data, config]);
   const rootProps = "props" in defaultedData.root ? defaultedData.root.props : defaultedData.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
   const pageProps = __spreadProps(__spreadValues({}, rootProps), {
@@ -5556,7 +5536,7 @@ function Render({
 // components/ComponentList/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/ComponentList/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
 var styles_module_default13 = { "ComponentList": "_ComponentList_apsvr_1", "ComponentList--isExpanded": "_ComponentList--isExpanded_apsvr_5", "ComponentList-content": "_ComponentList-content_apsvr_9", "ComponentList-title": "_ComponentList-title_apsvr_17", "ComponentList-titleIcon": "_ComponentList-titleIcon_apsvr_54" };
 
@@ -5806,7 +5786,7 @@ init_react_import();
 init_react_import();
 import { useMemo as useMemo14, useState as useState17 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Components/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Components/styles.module.css#css-module
 init_react_import();
 var styles_module_default14 = { "Components-search": "_Components-search_4hb2y_1", "Components-searchIcon": "_Components-searchIcon_4hb2y_8", "Components-searchInput": "_Components-searchInput_4hb2y_16", "Components-empty": "_Components-empty_4hb2y_39" };
 
@@ -5900,7 +5880,7 @@ var Components = () => {
   ] });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/plugins/blocks/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
 init_react_import();
 var styles_module_default15 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
 
@@ -5923,9 +5903,9 @@ init_react_import();
 // components/LayerTree/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/LayerTree/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "LayerTree": "_LayerTree_vc8bi_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_vc8bi_11", "LayerTree-helper": "_LayerTree-helper_vc8bi_17", "Layer": "_Layer_vc8bi_1", "Layer-inner": "_Layer-inner_vc8bi_34", "Layer--containsZone": "_Layer--containsZone_vc8bi_42", "Layer-clickable": "_Layer-clickable_vc8bi_46", "Layer--isSelected": "_Layer--isSelected_vc8bi_68", "Layer-icon": "_Layer-icon_vc8bi_80", "Layer-zoneIcon": "_Layer-zoneIcon_vc8bi_81", "Layer-chevron": "_Layer-chevron_vc8bi_85", "Layer--childIsSelected": "_Layer--childIsSelected_vc8bi_97", "Layer-zones": "_Layer-zones_vc8bi_101", "Layer-title": "_Layer-title_vc8bi_117", "Layer-name": "_Layer-name_vc8bi_130", "Layer--isGlobal": "_Layer--isGlobal_vc8bi_150", "Layer--isUnlinked": "_Layer--isUnlinked_vc8bi_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_vc8bi_175" };
+var styles_module_default16 = { "LayerTree": "_LayerTree_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" };
 
 // components/LayerTree/index.tsx
 import {
@@ -6064,8 +6044,8 @@ var Layer = forwardRef2(function Layer2({
   );
   const isUnlinked = useAppStore(
     (s) => {
-      var _a, _b, _c;
-      return ((_c = (_b = (_a = s.state.indexes.nodes[node.itemId]) == null ? void 0 : _a.data) == null ? void 0 : _b.props) == null ? void 0 : _c.__synced) === false;
+      var _a, _b;
+      return ((_b = (_a = s.state.indexes.nodes[node.itemId]) == null ? void 0 : _a.data) == null ? void 0 : _b.synced) === false;
     }
   );
   const containsZone = node.childZones.length > 0;
@@ -6361,7 +6341,7 @@ var Outline = () => {
   ) });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/plugins/outline/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
 init_react_import();
 var styles_module_default17 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
@@ -6381,7 +6361,7 @@ init_react_import();
 // components/Breadcrumbs/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Breadcrumbs/styles.module.css#css-module
 init_react_import();
 var styles_module_default18 = { "Breadcrumbs": "_Breadcrumbs_cvmoz_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_cvmoz_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_cvmoz_17" };
 
@@ -6458,7 +6438,7 @@ var Breadcrumbs = ({
 // components/Editor/components/Fields/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
 init_react_import();
 var styles_module_default19 = { "EditorFields": "_EditorFields_1di93_1", "EditorFields--isLoading": "_EditorFields--isLoading_1di93_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_1di93_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_1di93_25", "EditorFields-field": "_EditorFields-field_1di93_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_1di93_36", "EditorFields-syncButton": "_EditorFields-syncButton_1di93_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_1di93_78" };
 
@@ -6578,29 +6558,22 @@ var FieldsChild = ({ fieldName }) => {
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var GlobalSyncButton = () => {
-  var _a;
   const appStore = useAppStoreApi();
   const selectedItem = useAppStore((s) => s.selectedItem);
   const isGlobalType = useAppStore(
     (s) => {
-      var _a2;
-      return selectedItem ? ((_a2 = s.config.components[selectedItem.type]) == null ? void 0 : _a2.global) === true : false;
+      var _a;
+      return selectedItem ? ((_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.global) === true : false;
     }
   );
   if (!selectedItem || !isGlobalType) return null;
-  const isUnlinked = ((_a = selectedItem.props) == null ? void 0 : _a.__synced) === false;
+  const isUnlinked = selectedItem.synced === false;
   const onClick = () => __async(null, null, function* () {
     const { dispatch, state, resolveComponentData } = appStore.getState();
-    const newProps = __spreadValues({}, selectedItem.props);
-    if (isUnlinked) {
-      delete newProps.__synced;
-    } else {
-      newProps.__synced = false;
-    }
     const latestSelector = getSelectorForId(state, selectedItem.props.id);
     if (!latestSelector) return;
     const resolved = yield resolveComponentData(
-      __spreadProps(__spreadValues({}, selectedItem), { props: newProps }),
+      __spreadProps(__spreadValues({}, selectedItem), { synced: isUnlinked ? true : false }),
       "replace"
     );
     dispatch({
@@ -6663,7 +6636,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
 };
 var Fields = memo8(FieldsInternal);
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/plugins/fields/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
 var styles_module_default20 = { "FieldsPlugin": "_FieldsPlugin_l8h4q_1", "FieldsPlugin-header": "_FieldsPlugin-header_l8h4q_7" };
 
@@ -7003,51 +6976,13 @@ function AutoFrame(_a) {
 AutoFrame.displayName = "AutoFrame";
 var AutoFrame_default = AutoFrame;
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Preview/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Preview/styles.module.css#css-module
 init_react_import();
 var styles_module_default21 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
 
 // components/Editor/components/Preview/index.tsx
 import { Fragment as Fragment11, jsx as jsx44 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("EditorPreview", styles_module_default21);
-var useBubbleIframeEvents = (ref) => {
-  const status = useAppStore((s) => s.status);
-  useEffect21(() => {
-    if (ref.current && status === "READY") {
-      const iframe = ref.current;
-      const handlePointerMove = (event) => {
-        const evt = new BubbledPointerEvent("pointermove", __spreadProps(__spreadValues({}, event), {
-          bubbles: true,
-          cancelable: false,
-          clientX: event.clientX,
-          clientY: event.clientY,
-          originalTarget: event.target
-        }));
-        iframe.dispatchEvent(evt);
-      };
-      const register = () => {
-        var _a;
-        unregister();
-        (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
-          "pointermove",
-          handlePointerMove,
-          { capture: true }
-        );
-      };
-      const unregister = () => {
-        var _a;
-        (_a = iframe.contentDocument) == null ? void 0 : _a.removeEventListener(
-          "pointermove",
-          handlePointerMove
-        );
-      };
-      register();
-      return () => {
-        unregister();
-      };
-    }
-  }, [status]);
-};
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -7080,7 +7015,6 @@ var Preview2 = ({ id = "editor-preview" }) => {
   const Frame = useMemo18(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = useRef11(null);
-  useBubbleIframeEvents(ref);
   const inner = !renderData ? /* @__PURE__ */ jsx44(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
@@ -7199,16 +7133,16 @@ import { deepEqual as deepEqual2 } from "fast-equals";
 
 // lib/split-global-data.ts
 init_react_import();
-function splitGlobalData(data, config) {
-  var _a;
-  const extracted = {};
+function splitGlobals(data, config) {
+  var _a, _b;
+  const extracted = __spreadValues({}, (_a = data.globals) != null ? _a : {});
   function visit(node) {
-    var _a2, _b;
+    var _a2, _b2;
     const type = node.type;
     const componentConfig = config.components[type];
     const fields = (_a2 = componentConfig == null ? void 0 : componentConfig.fields) != null ? _a2 : {};
-    const isGlobal = (componentConfig == null ? void 0 : componentConfig.global) === true;
-    const processedProps = __spreadValues({}, (_b = node.props) != null ? _b : {});
+    const isGlobalType = (componentConfig == null ? void 0 : componentConfig.global) === true;
+    const processedProps = __spreadValues({}, (_b2 = node.props) != null ? _b2 : {});
     for (const [fieldName, fieldDef] of Object.entries(fields)) {
       if ((fieldDef == null ? void 0 : fieldDef.type) === "slot") {
         const slotValue = processedProps[fieldName];
@@ -7219,27 +7153,25 @@ function splitGlobalData(data, config) {
         }
       }
     }
-    if (!isGlobal) {
-      return __spreadProps(__spreadValues({}, node), { props: processedProps });
-    }
-    if (processedProps.__synced === false) {
+    if (!isGlobalType || !node.synced) {
       return __spreadProps(__spreadValues({}, node), { props: processedProps });
     }
     const _c = processedProps, { children, id } = _c, sharedProps = __objRest(_c, ["children", "id"]);
-    if (!extracted[type]) {
-      extracted[type] = { props: sharedProps };
-    }
+    extracted[type] = { props: sharedProps };
     const instanceProps = { id };
     if (children !== void 0) instanceProps.children = children;
-    return __spreadProps(__spreadValues({}, node), { props: instanceProps });
+    return __spreadProps(__spreadValues({}, node), {
+      props: instanceProps,
+      synced: true
+    });
   }
-  const strippedContent = ((_a = data.content) != null ? _a : []).map(
+  const strippedContent = ((_b = data.content) != null ? _b : []).map(
     (item) => visit(item)
   );
-  return {
-    data: __spreadProps(__spreadValues({}, data), { content: strippedContent }),
-    globalData: extracted
-  };
+  return __spreadProps(__spreadValues({}, data), {
+    content: strippedContent,
+    globals: extracted
+  });
 }
 
 // components/Editor/components/Layout/index.tsx
@@ -7252,7 +7184,7 @@ import {
   useState as useState22
 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
 init_react_import();
 var styles_module_default22 = { "Editor": "_Editor_17yd6_19", "Editor-portal": "_Editor-portal_17yd6_32", "EditorLayout": "_EditorLayout_17yd6_37", "EditorLayout-inner": "_EditorLayout-inner_17yd6_41", "Editor--hidePlugins": "_Editor--hidePlugins_17yd6_73", "EditorLayout--mounted": "_EditorLayout--mounted_17yd6_78", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_17yd6_82", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_17yd6_82", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_17yd6_87", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_17yd6_105", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_17yd6_127", "EditorLayout-mounted": "_EditorLayout-mounted_17yd6_146", "EditorLayout-nav": "_EditorLayout-nav_17yd6_187", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_17yd6_203", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_17yd6_213", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_17yd6_219", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_17yd6_225", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_17yd6_245", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_17yd6_252", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_17yd6_266", "EditorPluginTab": "_EditorPluginTab_17yd6_273", "EditorPluginTab--visible": "_EditorPluginTab--visible_17yd6_279", "EditorPluginTab-body": "_EditorPluginTab-body_17yd6_284" };
 
@@ -7309,7 +7241,7 @@ var usePreviewModeHotkeys = () => {
 // components/SidebarSection/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
 var styles_module_default23 = { "SidebarSection": "_SidebarSection_1jefg_1", "SidebarSection-title": "_SidebarSection-title_1jefg_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_1jefg_20", "SidebarSection-content": "_SidebarSection-content_1jefg_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1jefg_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1jefg_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1jefg_33", "SidebarSection-heading": "_SidebarSection-heading_1jefg_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1jefg_88" };
 
@@ -7348,7 +7280,7 @@ import {
 init_react_import();
 import { useMemo as useMemo20 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
+// 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" };
 
@@ -7440,9 +7372,9 @@ var BrowserBar = ({
   ] });
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "EditorCanvas": "_EditorCanvas_19sb3_1", "EditorCanvas-controls": "_EditorCanvas-controls_19sb3_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_19sb3_22", "EditorCanvas-inner": "_EditorCanvas-inner_19sb3_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_19sb3_46", "EditorCanvas-root": "_EditorCanvas-root_19sb3_46", "EditorCanvas--ready": "_EditorCanvas--ready_19sb3_83", "EditorCanvas-loader": "_EditorCanvas-loader_19sb3_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_19sb3_98", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_19sb3_108", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_19sb3_113" };
+var styles_module_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" };
 
 // components/Editor/components/Canvas/index.tsx
 import { useShallow as useShallow9 } from "zustand/react/shallow";
@@ -7485,7 +7417,7 @@ var MIN_ZOOM = 0.25;
 var MAX_ZOOM = 3;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
-  var _a;
+  var _a, _b;
   const { frameRef } = useCanvasFrame();
   const {
     viewports: viewportOptions = defaultViewports,
@@ -7549,19 +7481,18 @@ var Canvas = () => {
     }, 500);
   }, []);
   const appStoreApi = useAppStoreApi();
-  useEffect23(() => {
-    var _a2, _b;
-    if (typeof window === "undefined") return;
-    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+  const autoSelectingRef = useRef13(true);
+  const pickClosestViewport = useCallback18(() => {
+    var _a2, _b2;
+    if (typeof window === "undefined") return null;
     const viewportWidth = window.innerWidth;
-    const frameWidth = (_b = frameRef.current) == null ? void 0 : _b.getBoundingClientRect().width;
-    if (!viewportWidth) return;
-    if (!frameWidth) return;
-    if (viewportOptions.length === 0) return;
+    const frameWidth = (_a2 = frameRef.current) == null ? void 0 : _a2.getBoundingClientRect().width;
+    if (!viewportWidth) return null;
+    if (!frameWidth) return null;
+    if (viewportOptions.length === 0) return null;
     const fullWidthViewport = Object.values(viewportOptions).find(
       (v) => v.width === "100%"
     );
-    const containsFullWidthViewport = !!fullWidthViewport;
     const viewportDifferences = Object.entries(viewportOptions).filter(([_, value]) => value.width !== "100%").map(([key, value]) => ({
       key,
       diff: Math.abs(
@@ -7569,10 +7500,19 @@ var Canvas = () => {
       ),
       value
     })).sort((a, b) => a.diff > b.diff ? 1 : -1);
-    let closestViewport = viewportDifferences[0].value;
-    if (closestViewport.width < frameWidth && containsFullWidthViewport) {
+    let closestViewport = (_b2 = viewportDifferences[0]) == null ? void 0 : _b2.value;
+    if (!closestViewport) return null;
+    if (closestViewport.width < frameWidth && fullWidthViewport) {
       closestViewport = fullWidthViewport;
     }
+    return closestViewport;
+  }, [viewportOptions, frameRef]);
+  useEffect23(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const closestViewport = pickClosestViewport();
+    if (!closestViewport) return;
     if (iframe.enabled) {
       const s = appStoreApi.getState();
       const appState = {
@@ -7594,12 +7534,47 @@ var Canvas = () => {
       appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
   }, [
-    viewportOptions,
+    pickClosestViewport,
     frameRef.current,
     iframe,
     appStoreApi,
     (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
   ]);
+  useEffect23(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if (!iframe.enabled) return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const target = frameRef.current;
+    if (!target) return;
+    const observer = new ResizeObserver(() => {
+      if (!autoSelectingRef.current) return;
+      const closestViewport = pickClosestViewport();
+      if (!closestViewport) return;
+      const s = appStoreApi.getState();
+      const current = s.state.ui.viewports.current;
+      if (current.width === closestViewport.width && current.height === (closestViewport.height || "auto")) {
+        return;
+      }
+      setUi({
+        viewports: __spreadProps(__spreadValues({}, s.state.ui.viewports), {
+          current: __spreadProps(__spreadValues({}, current), {
+            width: closestViewport.width,
+            height: closestViewport.height || "auto"
+          })
+        })
+      });
+    });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [
+    pickClosestViewport,
+    frameRef,
+    iframe.enabled,
+    (_b = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _b.current,
+    appStoreApi,
+    setUi
+  ]);
   return /* @__PURE__ */ jsx49(
     "div",
     {
@@ -7639,6 +7614,7 @@ var Canvas = () => {
                 BrowserBar,
                 {
                   onViewportChange: (viewport) => {
+                    autoSelectingRef.current = false;
                     setShowTransition(true);
                     isResizingRef.current = true;
                     const uiViewport = __spreadProps(__spreadValues({}, viewport), {
@@ -7761,7 +7737,7 @@ init_react_import();
 init_react_import();
 import { useCallback as useCallback20, useRef as useRef15 } from "react";
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
 var styles_module_default26 = { "ResizeHandle": "_ResizeHandle_s0ymy_2", "ResizeHandle--left": "_ResizeHandle--left_s0ymy_16", "ResizeHandle--right": "_ResizeHandle--right_s0ymy_20" };
 
@@ -7832,7 +7808,7 @@ var ResizeHandle = ({
   );
 };
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Sidebar/styles.module.css#css-module
 init_react_import();
 var styles_module_default27 = { "Sidebar": "_Sidebar_6tp4l_1", "Sidebar--isVisible": "_Sidebar--isVisible_6tp4l_9", "Sidebar--left": "_Sidebar--left_6tp4l_13", "Sidebar--right": "_Sidebar--right_6tp4l_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_6tp4l_37" };
 
@@ -7932,7 +7908,7 @@ var useDeleteHotkeys = () => {
 // components/Editor/components/Nav/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
 init_react_import();
 var styles_module_default28 = { "Nav": "_Nav_kjoi9_1", "Nav-list": "_Nav-list_kjoi9_18", "Nav-footer": "_Nav-footer_kjoi9_42", "NavItem-link": "_NavItem-link_kjoi9_55", "NavItem-linkLabel": "_NavItem-linkLabel_kjoi9_83", "NavItem": "_NavItem_kjoi9_55", "NavItem-linkIcon": "_NavItem-linkIcon_kjoi9_108", "NavItem--active": "_NavItem--active_kjoi9_121", "NavItem--mobileOnly": "_NavItem--mobileOnly_kjoi9_132", "NavItem--desktopOnly": "_NavItem--desktopOnly_kjoi9_137" };
 
@@ -8408,10 +8384,8 @@ function EditorProvider({ children }) {
   const {
     config,
     data: initialData,
-    globalData: initialGlobalData,
     ui: initialUi,
     onChange,
-    onGlobalsChange,
     permissions = {},
     plugins,
     overrides,
@@ -8432,7 +8406,7 @@ function EditorProvider({ children }) {
     [_iframe]
   );
   const [generatedAppState] = useState23(() => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
     if (Object.keys((initialData == null ? void 0 : initialData.root) || {}).length > 0 && !((_a = initialData == null ? void 0 : initialData.root) == null ? void 0 : _a.props)) {
@@ -8446,20 +8420,20 @@ function EditorProvider({ children }) {
       toComponent(__spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: defaultedRootProps })),
       config
     );
-    const seededGlobalData = __spreadValues({}, initialGlobalData != null ? initialGlobalData : {});
-    for (const [type, comp] of Object.entries((_d = config.components) != null ? _d : {})) {
-      if ((comp == null ? void 0 : comp.global) && !seededGlobalData[type]) {
-        seededGlobalData[type] = {
-          props: __spreadValues({}, (_e = comp == null ? void 0 : comp.defaultProps) != null ? _e : {})
+    const seededGlobals = __spreadValues({}, (_d = initialData == null ? void 0 : initialData.globals) != null ? _d : {});
+    for (const [type, comp] of Object.entries((_e = config.components) != null ? _e : {})) {
+      if ((comp == null ? void 0 : comp.global) && !seededGlobals[type]) {
+        seededGlobals[type] = {
+          props: __spreadValues({}, (_f = comp == null ? void 0 : comp.defaultProps) != null ? _f : {})
         };
       }
     }
     const composedData = resolveGlobals(
       __spreadProps(__spreadValues({}, initialData), {
         root: __spreadProps(__spreadValues({}, initialData == null ? void 0 : initialData.root), { props: root.props }),
-        content: initialData.content || []
+        content: initialData.content || [],
+        globals: seededGlobals
       }),
-      seededGlobalData,
       config
     );
     const newAppState = __spreadProps(__spreadValues({}, defaultAppState), {
@@ -8567,23 +8541,18 @@ function EditorProvider({ children }) {
     initialAppState
   });
   const previousData = useRef17(null);
-  const previousGlobalData = useRef17(null);
   useEffect26(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
-        const split = splitGlobalData(data, config);
-        if (onChange && !deepEqual2(split.data, previousData.current)) {
-          onChange(split.data);
-          previousData.current = split.data;
-        }
-        if (onGlobalsChange && !deepEqual2(split.globalData, previousGlobalData.current)) {
-          onGlobalsChange(split.globalData);
-          previousGlobalData.current = split.globalData;
+        const split = splitGlobals(data, config);
+        if (onChange && !deepEqual2(split, previousData.current)) {
+          onChange(split);
+          previousData.current = split;
         }
       }
     );
-  }, [onChange, onGlobalsChange, config]);
+  }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
   useEffect26(() => {