@reacteditor/core 0.0.7 → 0.0.9

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

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-RNRHREWH.mjs";
+} from "./chunk-AJWRDM22.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -16,7 +16,7 @@ import {
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-JUC25FB7.mjs";
+} from "./chunk-U7VW3V3W.mjs";
 import {
   Check,
   ChevronDown,
@@ -60,7 +60,7 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-AAK2555H.mjs";
+} from "./chunk-LRFRIIKG.mjs";
 import {
   getItem,
   insert,
@@ -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_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" };
+var styles_module_default = { "InputWrapper": "_InputWrapper_zwh6e_1", "Input-label": "_Input-label_zwh6e_5", "Input-labelIcon": "_Input-labelIcon_zwh6e_15", "Input-disabledIcon": "_Input-disabledIcon_zwh6e_22", "Input-input": "_Input-input_zwh6e_27", "Input": "_Input_zwh6e_1", "Input--readOnly": "_Input--readOnly_zwh6e_87", "Input-radioGroupItems": "_Input-radioGroupItems_zwh6e_98", "Input-radio": "_Input-radio_zwh6e_98", "Input-radioInner": "_Input-radioInner_zwh6e_115", "Input-radioInput": "_Input-radioInput_zwh6e_147" };
 
 // components/AutoField/FieldLabel.tsx
 import { useMemo } from "react";
@@ -294,7 +294,7 @@ var FieldLabelInternal = ({
 // components/AutoField/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext4,
   useEffect as useEffect7,
   useMemo as useMemo5
@@ -1277,8 +1277,9 @@ var ArrayField = ({
   );
 };
 
-// components/AutoField/fields/DefaultField/index.tsx
+// components/AutoField/fields/ColorField/index.tsx
 init_react_import();
+import { useCallback as useCallback3, useRef as useRef2 } from "react";
 
 // components/AutoField/lib/use-local-value.ts
 init_react_import();
@@ -1316,9 +1317,107 @@ var useLocalValue = (path, onChange) => {
   return [localValue != null ? localValue : "", onChangeLocal];
 };
 
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/AutoField/fields/ColorField/styles.module.css#css-module
+init_react_import();
+var styles_module_default4 = { "ColorField": "_ColorField_1nsbe_1", "ColorField--readOnly": "_ColorField--readOnly_1nsbe_24", "ColorField-swatch": "_ColorField-swatch_1nsbe_34", "ColorField-picker": "_ColorField-picker_1nsbe_57", "ColorField-text": "_ColorField-text_1nsbe_64" };
+
+// components/AutoField/fields/ColorField/index.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var getClassName5 = get_class_name_factory_default("ColorField", styles_module_default4);
+var toHexInput = (val) => {
+  if (typeof val !== "string") return "#000000";
+  const trimmed = val.trim();
+  const m = trimmed.match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
+  if (!m) return "#000000";
+  const hex = m[1];
+  if (hex.length === 3) {
+    return `#${hex.split("").map((c) => c + c).join("")}`;
+  }
+  return `#${hex}`.toLowerCase();
+};
+var canonicalize = (val) => {
+  const trimmed = val.trim();
+  const m = trimmed.match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
+  if (!m) return null;
+  const hex = m[1];
+  if (hex.length === 3) {
+    return `#${hex.split("").map((c) => c + c).join("")}`.toLowerCase();
+  }
+  return `#${hex}`.toLowerCase();
+};
+var ColorField = ({
+  field,
+  onChange,
+  readOnly,
+  id,
+  name = id,
+  label,
+  labelIcon,
+  Label: Label2
+}) => {
+  var _a;
+  const [localValue, onChangeLocal] = useLocalValue(name, onChange);
+  const pickerRef = useRef2(null);
+  if (field.type !== "color") return null;
+  const swatchHex = toHexInput(localValue);
+  const openPicker = useCallback3(() => {
+    var _a2;
+    if (readOnly) return;
+    (_a2 = pickerRef.current) == null ? void 0 : _a2.click();
+  }, [readOnly]);
+  return /* @__PURE__ */ jsx9(Label2, { label: label || name, icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxs4("div", { className: getClassName5({ readOnly }), children: [
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Open color picker",
+        className: getClassName5("swatch"),
+        disabled: readOnly,
+        onClick: openPicker,
+        style: { color: swatchHex },
+        children: /* @__PURE__ */ jsx9(
+          "input",
+          {
+            ref: pickerRef,
+            className: getClassName5("picker"),
+            type: "color",
+            tabIndex: -1,
+            "aria-hidden": true,
+            value: swatchHex,
+            disabled: readOnly,
+            onChange: (e) => onChangeLocal(e.currentTarget.value)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "input",
+      {
+        className: getClassName5("text"),
+        autoComplete: "off",
+        type: "text",
+        name,
+        id,
+        value: localValue != null ? localValue : "",
+        placeholder: (_a = field.placeholder) != null ? _a : "#000000",
+        readOnly,
+        tabIndex: readOnly ? -1 : void 0,
+        onChange: (e) => onChangeLocal(e.currentTarget.value),
+        onBlur: (e) => {
+          const canonical = canonicalize(e.currentTarget.value);
+          if (canonical && canonical !== e.currentTarget.value) {
+            onChangeLocal(canonical);
+          }
+        }
+      }
+    )
+  ] }) });
+};
+
 // components/AutoField/fields/DefaultField/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var getClassName5 = get_class_name_factory_default("Input", styles_module_default);
+init_react_import();
+import { jsx as jsx10 } from "react/jsx-runtime";
+var getClassName6 = get_class_name_factory_default("Input", styles_module_default);
 var DefaultField = ({
   field,
   onChange,
@@ -1330,16 +1429,16 @@ var DefaultField = ({
   Label: Label2
 }) => {
   const [localValue, onChangeLocal] = useLocalValue(name, onChange);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     Label2,
     {
       label: label || name,
       icon: labelIcon,
       readOnly,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         "input",
         {
-          className: getClassName5("input"),
+          className: getClassName6("input"),
           autoComplete: "off",
           type: field.type,
           title: label || name,
@@ -1382,13 +1481,13 @@ import {
   useMemo as useMemo4,
   useEffect as useEffect5,
   useState as useState7,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   isValidElement
 } from "react";
 
 // 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_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" };
+var styles_module_default5 = { "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,12 +1495,12 @@ 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_vim19_1", "Modal--isOpen": "_Modal--isOpen_vim19_15", "Modal-inner": "_Modal-inner_vim19_19" };
+var styles_module_default6 = { "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";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var getClassName6 = get_class_name_factory_default("Modal", styles_module_default5);
+import { jsx as jsx11 } from "react/jsx-runtime";
+var getClassName7 = get_class_name_factory_default("Modal", styles_module_default6);
 var Modal = ({
   children,
   onClose,
@@ -1412,13 +1511,13 @@ var Modal = ({
     setRootEl(document.getElementById("editor-portal-root"));
   }, []);
   if (!rootEl) {
-    return /* @__PURE__ */ jsx10("div", {});
+    return /* @__PURE__ */ jsx11("div", {});
   }
   return createPortal(
-    /* @__PURE__ */ jsx10("div", { className: getClassName6({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11("div", { className: getClassName7({ isOpen }), onClick: onClose, children: /* @__PURE__ */ jsx11(
       "div",
       {
-        className: getClassName6("inner"),
+        className: getClassName7("inner"),
         onClick: (e) => e.stopPropagation(),
         children
       }
@@ -1432,17 +1531,17 @@ 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_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" };
+var styles_module_default7 = { "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";
-var getClassName7 = get_class_name_factory_default("Heading", styles_module_default6);
+import { jsx as jsx12 } from "react/jsx-runtime";
+var getClassName8 = get_class_name_factory_default("Heading", styles_module_default7);
 var Heading = ({ children, rank, size = "m" }) => {
   const Tag = rank ? `h${rank}` : "span";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Tag,
     {
-      className: getClassName7({
+      className: getClassName8({
         [size]: true
       }),
       children
@@ -1454,9 +1553,9 @@ var Heading = ({ children, rank, size = "m" }) => {
 init_react_import();
 
 // components/ExternalInput/index.tsx
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var getClassName8 = get_class_name_factory_default("ExternalInput", styles_module_default4);
-var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default4);
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var getClassName9 = get_class_name_factory_default("ExternalInput", styles_module_default5);
+var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default5);
 var dataCache = {};
 var ExternalInput = ({
   field,
@@ -1494,7 +1593,7 @@ var ExternalInput = ({
     return Array.from(validKeys);
   }, [mappedData]);
   const [searchQuery, setSearchQuery] = useState7(field.initialQuery || "");
-  const search = useCallback3(
+  const search = useCallback4(
     (query, filters2) => __async(null, null, function* () {
       setIsLoading(true);
       const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
@@ -1514,8 +1613,8 @@ var ExternalInput = ({
     }),
     [id, field]
   );
-  const Footer = useCallback3(
-    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs4("span", { className: getClassNameModal("footer"), children: [
+  const Footer = useCallback4(
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs5("span", { className: getClassNameModal("footer"), children: [
       props.items.length,
       " result",
       props.items.length === 1 ? "" : "s"
@@ -1525,41 +1624,41 @@ var ExternalInput = ({
   useEffect5(() => {
     search(searchQuery, filters);
   }, []);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: getClassName8({
+      className: getClassName9({
         dataSelected: !!value,
         modalVisible: isOpen,
         readOnly
       }),
       id,
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: getClassName8("actions"), children: [
-          /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs5("div", { className: getClassName9("actions"), children: [
+          /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
               onClick: () => setOpen(true),
-              className: getClassName8("button"),
+              className: getClassName9("button"),
               disabled: readOnly,
-              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsx12("span", { children: field.placeholder })
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsx13("span", { children: field.placeholder })
             }
           ),
-          value && /* @__PURE__ */ jsx12(
+          value && /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
-              className: getClassName8("detachButton"),
+              className: getClassName9("detachButton"),
               onClick: () => {
                 onChange(null);
               },
               disabled: readOnly,
-              children: /* @__PURE__ */ jsx12(X, { size: 16 })
+              children: /* @__PURE__ */ jsx13(X, { size: 16 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx12(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsx13(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ jsxs5(
           "form",
           {
             className: getClassNameModal({
@@ -1574,11 +1673,11 @@ var ExternalInput = ({
               search(searchQuery, filters);
             },
             children: [
-              /* @__PURE__ */ jsx12("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchForm"), children: [
-                /* @__PURE__ */ jsxs4("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ jsx12("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                  /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx12(Search, { size: "18" }) }),
-                  /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("searchForm"), children: [
+                /* @__PURE__ */ jsxs5("label", { className: getClassNameModal("search"), children: [
+                  /* @__PURE__ */ jsx13("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx13("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx13(Search, { size: "18" }) }),
+                  /* @__PURE__ */ jsx13(
                     "input",
                     {
                       className: getClassNameModal("searchInput"),
@@ -1593,9 +1692,9 @@ var ExternalInput = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ jsx12(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
-                  hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("searchActions"), children: [
+                  /* @__PURE__ */ jsx13(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  hasFilterFields && /* @__PURE__ */ jsx13("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx13(
                     IconButton,
                     {
                       type: "button",
@@ -1605,19 +1704,19 @@ var ExternalInput = ({
                         e.stopPropagation();
                         setFiltersToggled(!filtersToggled);
                       },
-                      children: /* @__PURE__ */ jsx12(SlidersHorizontal, { size: 20 })
+                      children: /* @__PURE__ */ jsx13(SlidersHorizontal, { size: 20 })
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx12(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
-              /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("grid"), children: [
-                hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+              ] }) : /* @__PURE__ */ jsx13(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("grid"), children: [
+                hasFilterFields && /* @__PURE__ */ jsx13("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
-                  return /* @__PURE__ */ jsx12(
+                  return /* @__PURE__ */ jsx13(
                     "div",
                     {
                       className: getClassNameModal("field"),
-                      children: /* @__PURE__ */ jsx12(FieldLabel, { label: filterField.label || fieldName, children: /* @__PURE__ */ jsx12(
+                      children: /* @__PURE__ */ jsx13(FieldLabel, { label: filterField.label || fieldName, children: /* @__PURE__ */ jsx13(
                         AutoField,
                         {
                           field: filterField,
@@ -1638,9 +1737,9 @@ var ExternalInput = ({
                     fieldName
                   );
                 }) }),
-                /* @__PURE__ */ jsxs4("div", { className: getClassNameModal("tableWrapper"), children: [
-                  /* @__PURE__ */ jsxs4("table", { className: getClassNameModal("table"), children: [
-                    /* @__PURE__ */ jsx12("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx12("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("tableWrapper"), children: [
+                  /* @__PURE__ */ jsxs5("table", { className: getClassNameModal("table"), children: [
+                    /* @__PURE__ */ jsx13("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ jsx13("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ jsx13(
                       "th",
                       {
                         className: getClassNameModal("th"),
@@ -1649,8 +1748,8 @@ var ExternalInput = ({
                       },
                       key
                     )) }) }),
-                    /* @__PURE__ */ jsx12("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
-                      return /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i) => {
+                      return /* @__PURE__ */ jsx13(
                         "tr",
                         {
                           style: { whiteSpace: "nowrap" },
@@ -1659,16 +1758,16 @@ var ExternalInput = ({
                             onChange(mapProp(data[i]));
                             setOpen(false);
                           },
-                          children: keys.map((key) => /* @__PURE__ */ jsx12("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                          children: keys.map((key) => /* @__PURE__ */ jsx13("td", { className: getClassNameModal("td"), children: item[key] }, key))
                         },
                         i
                       );
                     }) })
                   ] }),
-                  /* @__PURE__ */ jsx12("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx12(Loader, { size: 24 }) })
+                  /* @__PURE__ */ jsx13("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ jsx13(Loader, { size: 24 }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx12("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx12(Footer, { items: mappedData }) })
+              /* @__PURE__ */ jsx13("div", { className: getClassNameModal("footerContainer"), children: /* @__PURE__ */ jsx13(Footer, { items: mappedData }) })
             ]
           }
         ) })
@@ -1678,7 +1777,7 @@ var ExternalInput = ({
 };
 
 // components/AutoField/fields/ExternalField/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var ExternalField = ({
   field,
   onChange,
@@ -1703,13 +1802,13 @@ var ExternalField = ({
   if (field.type !== "external") {
     return null;
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Label2,
     {
       label: label || name,
       icon: labelIcon,
       el: "div",
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         ExternalInput,
         {
           name,
@@ -1736,8 +1835,8 @@ var ExternalField = ({
 
 // components/AutoField/fields/RadioField/index.tsx
 init_react_import();
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
-var getClassName9 = get_class_name_factory_default("Input", styles_module_default);
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var getClassName10 = get_class_name_factory_default("Input", styles_module_default);
 var RadioField = ({
   field,
   onChange,
@@ -1752,25 +1851,25 @@ var RadioField = ({
   if (field.type !== "radio" || !field.options) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     Label2,
     {
       icon: labelIcon,
       label: label || name,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ jsx14("div", { className: getClassName9("radioGroupItems"), id, children: field.options.map((option) => {
+      children: /* @__PURE__ */ jsx15("div", { className: getClassName10("radioGroupItems"), id, children: field.options.map((option) => {
         var _a;
-        return /* @__PURE__ */ jsxs5(
+        return /* @__PURE__ */ jsxs6(
           "label",
           {
-            className: getClassName9("radio"),
+            className: getClassName10("radio"),
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "radio",
-                  className: getClassName9("radioInput"),
+                  className: getClassName10("radioInput"),
                   value: JSON.stringify({ value: option.value }),
                   name,
                   onChange: (e) => {
@@ -1780,7 +1879,7 @@ var RadioField = ({
                   checked: value === option.value
                 }
               ),
-              /* @__PURE__ */ jsx14("div", { className: getClassName9("radioInner"), children: option.label || ((_a = option.value) == null ? void 0 : _a.toString()) })
+              /* @__PURE__ */ jsx15("div", { className: getClassName10("radioInner"), children: option.label || ((_a = option.value) == null ? void 0 : _a.toString()) })
             ]
           },
           option.label + option.value
@@ -1799,19 +1898,19 @@ 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 = { "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" };
+var styles_module_default8 = { "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("EditorSelect", styles_module_default7);
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var getClassName11 = get_class_name_factory_default("EditorSelect", styles_module_default8);
 var joinClassNames = (...values) => values.filter(Boolean).join(" ");
 function Select(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx15(SelectPrimitive.Root, __spreadValues({ "data-slot": "select" }, props));
+  return /* @__PURE__ */ jsx16(SelectPrimitive.Root, __spreadValues({ "data-slot": "select" }, props));
 }
 function SelectValue(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx15(SelectPrimitive.Value, __spreadValues({ "data-slot": "select-value" }, props));
+  return /* @__PURE__ */ jsx16(SelectPrimitive.Value, __spreadValues({ "data-slot": "select-value" }, props));
 }
 function SelectTrigger(_a) {
   var _b = _a, {
@@ -1823,16 +1922,16 @@ function SelectTrigger(_a) {
     "size",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     SelectPrimitive.Trigger,
     __spreadProps(__spreadValues({
       "data-slot": "select-trigger",
       "data-size": size,
-      className: joinClassNames(getClassName10("trigger"), className)
+      className: joinClassNames(getClassName11("trigger"), className)
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx15(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx15(ChevronDown, { size: 16, className: getClassName10("triggerIcon") }) })
+        /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(ChevronDown, { size: 16, className: getClassName11("triggerIcon") }) })
       ]
     })
   );
@@ -1849,27 +1948,27 @@ function SelectContent(_a) {
     "position",
     "align"
   ]);
-  return /* @__PURE__ */ jsx15(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
     SelectPrimitive.Content,
     __spreadProps(__spreadValues({
       "data-slot": "select-content",
       "data-align-trigger": position === "item-aligned",
       "data-position": position,
-      className: joinClassNames(getClassName10("content"), className),
+      className: joinClassNames(getClassName11("content"), className),
       position,
       align
     }, props), {
       children: [
-        /* @__PURE__ */ jsx15(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx16(
           SelectPrimitive.Viewport,
           {
             "data-position": position,
-            className: getClassName10("viewport"),
+            className: getClassName11("viewport"),
             children
           }
         ),
-        /* @__PURE__ */ jsx15(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx16(SelectScrollDownButton, {})
       ]
     })
   ) });
@@ -1882,15 +1981,15 @@ function SelectItem(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     SelectPrimitive.Item,
     __spreadProps(__spreadValues({
       "data-slot": "select-item",
-      className: joinClassNames(getClassName10("item"), className)
+      className: joinClassNames(getClassName11("item"), className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx15("span", { className: getClassName10("itemIndicator"), children: /* @__PURE__ */ jsx15(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(Check, { size: 14 }) }) }),
-        /* @__PURE__ */ jsx15(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx16("span", { className: getClassName11("itemIndicator"), children: /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Check, { size: 14 }) }) }),
+        /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { children })
       ]
     })
   );
@@ -1901,13 +2000,13 @@ function SelectScrollUpButton(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     SelectPrimitive.ScrollUpButton,
     __spreadProps(__spreadValues({
       "data-slot": "select-scroll-up-button",
-      className: joinClassNames(getClassName10("scrollButton"), className)
+      className: joinClassNames(getClassName11("scrollButton"), className)
     }, props), {
-      children: /* @__PURE__ */ jsx15(ChevronUp, { size: 14 })
+      children: /* @__PURE__ */ jsx16(ChevronUp, { size: 14 })
     })
   );
 }
@@ -1917,19 +2016,19 @@ function SelectScrollDownButton(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     SelectPrimitive.ScrollDownButton,
     __spreadProps(__spreadValues({
       "data-slot": "select-scroll-down-button",
-      className: joinClassNames(getClassName10("scrollButton"), className)
+      className: joinClassNames(getClassName11("scrollButton"), className)
     }, props), {
-      children: /* @__PURE__ */ jsx15(ChevronDown, { size: 14 })
+      children: /* @__PURE__ */ jsx16(ChevronDown, { size: 14 })
     })
   );
 }
 
 // components/AutoField/fields/SelectField/index.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectField = ({
   field,
   onChange,
@@ -1945,7 +2044,7 @@ var SelectField = ({
     return null;
   }
   const serializedValue = JSON.stringify({ value });
-  return /* @__PURE__ */ jsx16(Label2, { label: label || name, icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx17(Label2, { label: label || name, icon: labelIcon, readOnly, children: /* @__PURE__ */ jsxs8(
     Select,
     {
       value: serializedValue,
@@ -1954,8 +2053,8 @@ var SelectField = ({
       },
       disabled: readOnly,
       children: [
-        /* @__PURE__ */ jsx16(SelectTrigger, { id, style: { width: "100%" }, children: /* @__PURE__ */ jsx16(SelectValue, { placeholder: label || name }) }),
-        /* @__PURE__ */ jsx16(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(SelectTrigger, { id, style: { width: "100%" }, children: /* @__PURE__ */ jsx17(SelectValue, { placeholder: label || name }) }),
+        /* @__PURE__ */ jsx17(SelectContent, { children: field.options.map((option) => /* @__PURE__ */ jsx17(
           SelectItem,
           {
             value: JSON.stringify({ value: option.value }),
@@ -1970,8 +2069,8 @@ var SelectField = ({
 
 // components/AutoField/fields/TextareaField/index.tsx
 init_react_import();
-import { jsx as jsx17 } from "react/jsx-runtime";
-var getClassName11 = get_class_name_factory_default("Input", styles_module_default);
+import { jsx as jsx18 } from "react/jsx-runtime";
+var getClassName12 = get_class_name_factory_default("Input", styles_module_default);
 var TextareaField = ({
   field,
   onChange,
@@ -1983,17 +2082,17 @@ var TextareaField = ({
   Label: Label2
 }) => {
   const [localValue, onChangeLocal] = useLocalValue(name, onChange);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Label2,
     {
       label: label || name,
       icon: labelIcon,
       readOnly,
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx18(
         "textarea",
         {
           id,
-          className: getClassName11("input"),
+          className: getClassName12("input"),
           autoComplete: "off",
           name,
           value: typeof localValue === "undefined" ? "" : localValue,
@@ -2015,14 +2114,14 @@ import { lazy, Suspense } from "react";
 // components/RichTextEditor/components/EditorFallback.tsx
 init_react_import();
 import { memo as memo3 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var EditorFallback = memo3((props) => {
   var _a;
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     EditorInner,
     __spreadProps(__spreadValues({}, props), {
       editor: null,
-      menu: /* @__PURE__ */ jsx18(
+      menu: /* @__PURE__ */ jsx19(
         LoadedRichTextMenuInner,
         {
           field: props.field,
@@ -2031,7 +2130,7 @@ var EditorFallback = memo3((props) => {
           readOnly: (_a = props.readOnly) != null ? _a : false
         }
       ),
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx19(
         "div",
         {
           className: "rich-text",
@@ -2045,9 +2144,9 @@ var EditorFallback = memo3((props) => {
 EditorFallback.displayName = "EditorFallback";
 
 // components/AutoField/fields/RichtextField/index.tsx
-import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-OSAG52QF.mjs").then((m) => ({
+  () => import("./Editor-KXEVJBNG.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2070,14 +2169,14 @@ var RichtextField = ({
     id,
     name
   };
-  return /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(Fragment3, { children: /* @__PURE__ */ jsx20(
     Label2,
     {
       label: label || name,
       icon: labelIcon,
       readOnly,
       el: "div",
-      children: /* @__PURE__ */ jsx19(Suspense, { fallback: /* @__PURE__ */ jsx19(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ jsx19(Editor, __spreadValues({}, editorProps)) })
+      children: /* @__PURE__ */ jsx20(Suspense, { fallback: /* @__PURE__ */ jsx20(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ jsx20(Editor, __spreadValues({}, editorProps)) })
     }
   ) });
 };
@@ -2087,11 +2186,11 @@ 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_1byjv_5", "ObjectField-fieldset": "_ObjectField-fieldset_1byjv_13" };
+var styles_module_default9 = { "ObjectField": "_ObjectField_1byjv_5", "ObjectField-fieldset": "_ObjectField-fieldset_1byjv_13" };
 
 // components/AutoField/fields/ObjectField/index.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var getClassName12 = get_class_name_factory_default("ObjectField", styles_module_default8);
+import { jsx as jsx21 } from "react/jsx-runtime";
+var getClassName13 = get_class_name_factory_default("ObjectField", styles_module_default9);
 var ObjectField = ({
   field,
   onChange,
@@ -2114,17 +2213,17 @@ var ObjectField = ({
   if (field.type !== "object" || !field.objectFields) {
     return null;
   }
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Label2,
     {
       label: label || name,
       icon: labelIcon,
       el: "div",
       readOnly,
-      children: /* @__PURE__ */ jsx20("div", { className: getClassName12(), children: /* @__PURE__ */ jsx20("fieldset", { className: getClassName12("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
+      children: /* @__PURE__ */ jsx21("div", { className: getClassName13(), children: /* @__PURE__ */ jsx21("fieldset", { className: getClassName13("fieldset"), children: Object.keys(field.objectFields).map((subName) => {
         const subField = field.objectFields[subName];
         const subPath = `${localName}.${subName}`;
-        return /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21(
           SubField,
           {
             id: `${id}_${subName}`,
@@ -2161,8 +2260,8 @@ var useSafeId = () => {
 
 // components/AutoField/index.tsx
 import { useShallow as useShallow3 } from "zustand/react/shallow";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var getClassName13 = get_class_name_factory_default("Input", styles_module_default);
+import { jsx as jsx22 } from "react/jsx-runtime";
+var getClassName14 = get_class_name_factory_default("Input", styles_module_default);
 var getClassNameWrapper = get_class_name_factory_default("InputWrapper", styles_module_default);
 var defaultFields = {
   array: ArrayField,
@@ -2173,6 +2272,7 @@ var defaultFields = {
   radio: RadioField,
   text: DefaultField,
   number: DefaultField,
+  color: ColorField,
   richtext: RichtextField
 };
 function AutoFieldInternal(props) {
@@ -2192,7 +2292,7 @@ function AutoFieldInternal(props) {
   const resolvedId = id || defaultId;
   const render = useMemo5(
     () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
       return __spreadProps(__spreadValues({}, overrides.fieldTypes), {
         custom: (_a2 = overrides.fieldTypes) == null ? void 0 : _a2.custom,
         array: ((_b = overrides.fieldTypes) == null ? void 0 : _b.array) || defaultFields.array,
@@ -2203,7 +2303,8 @@ function AutoFieldInternal(props) {
         radio: ((_g = overrides.fieldTypes) == null ? void 0 : _g.radio) || defaultFields.radio,
         text: ((_h = overrides.fieldTypes) == null ? void 0 : _h.text) || defaultFields.text,
         number: ((_i = overrides.fieldTypes) == null ? void 0 : _i.number) || defaultFields.number,
-        richtext: ((_j = overrides.fieldTypes) == null ? void 0 : _j.richtext) || defaultFields.richtext
+        color: ((_j = overrides.fieldTypes) == null ? void 0 : _j.color) || defaultFields.color,
+        richtext: ((_k = overrides.fieldTypes) == null ? void 0 : _k.richtext) || defaultFields.richtext
       });
     },
     [overrides]
@@ -2225,7 +2326,7 @@ function AutoFieldInternal(props) {
     }),
     [props, field, label, labelIcon, Label2, resolvedId, fieldValue]
   );
-  const onFocus = useCallback4(
+  const onFocus = useCallback5(
     (e) => {
       if (mergedProps.name && (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
         e.stopPropagation();
@@ -2239,7 +2340,7 @@ function AutoFieldInternal(props) {
     },
     [mergedProps.name]
   );
-  const onBlur = useCallback4((e) => {
+  const onBlur = useCallback5((e) => {
     if ("name" in e.target) {
       dispatch({
         type: "setUi",
@@ -2276,14 +2377,14 @@ function AutoFieldInternal(props) {
   if (!FieldComponent) {
     throw new Error(`Field type for ${field.type} did not exist.`);
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     NestedFieldContext.Provider,
     {
       value: {
         readOnlyFields: nestedFieldContext.readOnlyFields || readOnly || {},
         localName: (_a = nestedFieldContext.localName) != null ? _a : mergedProps.name
       },
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx22(
         "div",
         {
           className: getClassNameWrapper(),
@@ -2292,28 +2393,28 @@ function AutoFieldInternal(props) {
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ jsx21(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children: /* @__PURE__ */ jsx21(Children, __spreadValues({}, mergedProps)) }))
+          children: /* @__PURE__ */ jsx22(FieldComponent, __spreadProps(__spreadValues({}, mergedProps), { children: /* @__PURE__ */ jsx22(Children, __spreadValues({}, mergedProps)) }))
         }
       )
     }
   );
 }
 function AutoFieldPrivate(props) {
-  return /* @__PURE__ */ jsx21(AutoFieldInternal, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx22(AutoFieldInternal, __spreadValues({}, props));
 }
 function AutoFieldPublicInternal(_a) {
   var _b = _a, { value } = _b, props = __objRest(_b, ["value"]);
   const DefaultLabel = useMemo5(() => {
-    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx21(
+    const DefaultLabel2 = (labelProps) => /* @__PURE__ */ jsx22(
       "div",
       __spreadProps(__spreadValues({}, labelProps), {
-        className: getClassName13({ readOnly: props.readOnly })
+        className: getClassName14({ readOnly: props.readOnly })
       })
     );
     return DefaultLabel2;
   }, [props.readOnly]);
   const fieldStore = useFieldStoreApi();
-  const onChange = useCallback4(
+  const onChange = useCallback5(
     (value2) => {
       if (!props.id) return;
       fieldStore.setState({ [props.id]: value2 });
@@ -2325,7 +2426,7 @@ function AutoFieldPublicInternal(_a) {
     if (!props.id) return;
     fieldStore.setState({ [props.id]: value });
   }, [props.id, value, fieldStore]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     AutoFieldInternal,
     __spreadProps(__spreadValues({}, props), {
       onChange,
@@ -2338,7 +2439,7 @@ function AutoField(props) {
   if (props.field.type === "slot") {
     return null;
   }
-  return /* @__PURE__ */ jsx21(fieldContextStore.Provider, { value: { [id]: props.value }, children: /* @__PURE__ */ jsx21(AutoFieldPublicInternal, __spreadProps(__spreadValues({}, props), { id })) });
+  return /* @__PURE__ */ jsx22(fieldContextStore.Provider, { value: { [id]: props.value }, children: /* @__PURE__ */ jsx22(AutoFieldPublicInternal, __spreadProps(__spreadValues({}, props), { id })) });
 }
 
 // components/Render/index.tsx
@@ -2349,29 +2450,29 @@ init_react_import();
 import {
   forwardRef,
   memo as memo7,
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useContext as useContext9,
   useEffect as useEffect16,
   useMemo as useMemo12,
-  useRef as useRef9
+  useRef as useRef10
 } from "react";
 
 // components/DraggableComponent/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useContext as useContext5,
   useEffect as useEffect8,
   useLayoutEffect,
   useMemo as useMemo7,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState9,
   useTransition
 } from "react";
 
 // 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_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" };
+var styles_module_default10 = { "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";
@@ -2399,11 +2500,11 @@ function getDeepScrollPosition(element) {
 init_react_import();
 import {
   createContext as createContext3,
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useMemo as useMemo6
 } from "react";
 import { createStore as createStore3 } from "zustand";
-import { Fragment as Fragment4, jsx as jsx22 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx23 } from "react/jsx-runtime";
 var dropZoneContext = createContext3(null);
 var ZoneStoreContext = createContext3(
   createStore3(() => ({
@@ -2426,14 +2527,14 @@ var ZoneStoreProvider = ({
   children,
   store
 }) => {
-  return /* @__PURE__ */ jsx22(ZoneStoreContext.Provider, { value: store, children });
+  return /* @__PURE__ */ jsx23(ZoneStoreContext.Provider, { value: store, children });
 };
 var DropZoneProvider = ({
   children,
   value
 }) => {
   const dispatch = useAppStore((s) => s.dispatch);
-  const registerZone = useCallback5(
+  const registerZone = useCallback6(
     (zoneCompound) => {
       dispatch({
         type: "registerZone",
@@ -2448,7 +2549,7 @@ var DropZoneProvider = ({
     }, value),
     [value]
   );
-  return /* @__PURE__ */ jsx22(Fragment4, { children: memoValue && /* @__PURE__ */ jsx22(dropZoneContext.Provider, { value: memoValue, children }) });
+  return /* @__PURE__ */ jsx23(Fragment4, { children: memoValue && /* @__PURE__ */ jsx23(dropZoneContext.Provider, { value: memoValue, children }) });
 };
 
 // components/DraggableComponent/index.tsx
@@ -2458,10 +2559,10 @@ import { Feedback } from "@dnd-kit/dom";
 
 // lib/dnd/use-on-drag-finished.ts
 init_react_import();
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 var useOnDragFinished = (cb, deps = []) => {
   const appStore = useAppStoreApi();
-  return useCallback6(() => {
+  return useCallback7(() => {
     let dispose = () => {
     };
     const processDragging = (isDragging2) => {
@@ -2504,8 +2605,8 @@ function assignRefs(refs, node) {
 }
 
 // components/DraggableComponent/index.tsx
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
-var getClassName14 = get_class_name_factory_default("DraggableComponent", styles_module_default9);
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var getClassName15 = get_class_name_factory_default("DraggableComponent", styles_module_default10);
 var DEBUG2 = false;
 var MEASURE_EVERY_MS = 100;
 var space = 8;
@@ -2516,16 +2617,16 @@ var DefaultActionBar = ({
   label,
   children,
   parentAction
-}) => /* @__PURE__ */ jsxs8(ActionBar, { children: [
-  /* @__PURE__ */ jsxs8(ActionBar.Group, { children: [
+}) => /* @__PURE__ */ jsxs9(ActionBar, { children: [
+  /* @__PURE__ */ jsxs9(ActionBar.Group, { children: [
     parentAction,
-    label && /* @__PURE__ */ jsx23(ActionBar.Label, { label })
+    label && /* @__PURE__ */ jsx24(ActionBar.Label, { label })
   ] }),
-  /* @__PURE__ */ jsx23(ActionBar.Group, { children })
+  /* @__PURE__ */ jsx24(ActionBar.Group, { children })
 ] });
 var DefaultOverlay = ({
   children
-}) => /* @__PURE__ */ jsx23(Fragment5, { children });
+}) => /* @__PURE__ */ jsx24(Fragment5, { children });
 var DraggableComponent = ({
   children,
   depth,
@@ -2558,10 +2659,10 @@ var DraggableComponent = ({
       return ((_a = s.config.components[componentType]) == null ? void 0 : _a.global) === true;
     }
   );
-  const lastMeasureRef = useRef2(0);
+  const lastMeasureRef = useRef3(0);
   const ctx = useContext5(dropZoneContext);
   const [localZones, setLocalZones] = useState9({});
-  const registerLocalZone = useCallback7(
+  const registerLocalZone = useCallback8(
     (zoneCompound2, active) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.registerLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2, active);
@@ -2571,7 +2672,7 @@ var DraggableComponent = ({
     },
     [setLocalZones]
   );
-  const unregisterLocalZone = useCallback7(
+  const unregisterLocalZone = useCallback8(
     (zoneCompound2) => {
       var _a;
       (_a = ctx == null ? void 0 : ctx.unregisterLocalZone) == null ? void 0 : _a.call(ctx, zoneCompound2);
@@ -2652,8 +2753,8 @@ var DraggableComponent = ({
     return cleanup;
   }, [permissions.drag, zoneCompound]);
   const [, setRerender] = useState9(0);
-  const ref = useRef2(null);
-  const refSetter = useCallback7(
+  const ref = useRef3(null);
+  const refSetter = useCallback8(
     (el) => {
       sortableRef(el);
       if (ref.current !== el) {
@@ -2673,7 +2774,7 @@ var DraggableComponent = ({
       iframe.enabled ? (_a = ref.current) == null ? void 0 : _a.ownerDocument.body : (_c = (_b = ref.current) == null ? void 0 : _b.closest("[data-editor-preview]")) != null ? _c : document.body
     );
   }, [iframe.enabled]);
-  const getStyle = useCallback7(() => {
+  const getStyle = useCallback8(() => {
     var _a, _b;
     if (!ref.current) return;
     const el = ref.current;
@@ -2706,15 +2807,15 @@ var DraggableComponent = ({
     return style2;
   }, [iframe.enabled]);
   const [style, setStyle] = useState9();
-  const lastRectRef = useRef2(null);
-  const syncRafRef = useRef2(null);
-  const sync = useCallback7(() => {
+  const lastRectRef = useRef3(null);
+  const syncRafRef = useRef3(null);
+  const sync = useCallback8(() => {
     setStyle(getStyle());
     if (itemRef) {
       assignRefs([itemRef], ref.current);
     }
   }, [getStyle, itemRef]);
-  const scheduleSync = useCallback7(() => {
+  const scheduleSync = useCallback8(() => {
     if (syncRafRef.current != null) return;
     syncRafRef.current = requestAnimationFrame(() => {
       syncRafRef.current = null;
@@ -2742,13 +2843,13 @@ var DraggableComponent = ({
   }, [scheduleSync, itemRef]);
   const registerNode = useAppStore((s) => s.nodes.registerNode);
   const unregisterNode = useAppStore((s) => s.nodes.unregisterNode);
-  const hideOverlay = useCallback7(() => {
+  const hideOverlay = useCallback8(() => {
     setIsVisible(false);
   }, []);
-  const showOverlay = useCallback7(() => {
+  const showOverlay = useCallback8(() => {
     setIsVisible(true);
   }, []);
-  const nodeHandleRef = useRef2({
+  const nodeHandleRef = useRef3({
     sync: () => null,
     hideOverlay: () => null,
     showOverlay: () => null
@@ -2772,7 +2873,7 @@ var DraggableComponent = ({
     () => overrides.componentOverlay || DefaultOverlay,
     [overrides.componentOverlay]
   );
-  const onClick = useCallback7(
+  const onClick = useCallback8(
     (e) => {
       const userIsDragging = !!zoneStore.getState().draggedItem;
       if (userIsDragging) {
@@ -2801,7 +2902,7 @@ var DraggableComponent = ({
     [index, zoneCompound, id, isSelected, fullScreenCanvas]
   );
   const appStore = useAppStoreApi();
-  const onSelectParent = useCallback7(() => {
+  const onSelectParent = useCallback8(() => {
     const { nodes, zones } = appStore.getState().state.indexes;
     const node = nodes[id];
     const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node == null ? void 0 : node.parentId] : null;
@@ -2822,14 +2923,14 @@ var DraggableComponent = ({
       }
     });
   }, [ctx, path]);
-  const onDuplicate = useCallback7(() => {
+  const onDuplicate = useCallback8(() => {
     dispatch({
       type: "duplicate",
       sourceIndex: index,
       sourceZone: zoneCompound
     });
   }, [index, zoneCompound]);
-  const onDelete = useCallback7(() => {
+  const onDelete = useCallback8(() => {
     dispatch({
       type: "remove",
       index,
@@ -2956,7 +3057,7 @@ var DraggableComponent = ({
       cancelAnimationFrame(frame);
     };
   }, [dragFinished, isSelected, thisIsDragging, scheduleSync]);
-  const syncActionsPosition = useCallback7(
+  const syncActionsPosition = useCallback8(
     (el) => {
       if (el) {
         const view = el.ownerDocument.defaultView;
@@ -2996,7 +3097,7 @@ var DraggableComponent = ({
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
   const parentAction = useMemo7(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx23(CornerLeftUp, { size: 16 }) }),
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx24(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx24(CornerLeftUp, { size: 16 }) }),
     [ctx == null ? void 0 : ctx.areaId]
   );
   const nextContextValue = useMemo7(
@@ -3025,12 +3126,12 @@ var DraggableComponent = ({
     }
   );
   const hasNormalActions = permissions.duplicate || permissions.delete;
-  return /* @__PURE__ */ jsxs8(DropZoneProvider, { value: nextContextValue, children: [
+  return /* @__PURE__ */ jsxs9(DropZoneProvider, { value: nextContextValue, children: [
     dragFinished && isVisible && createPortal2(
-      /* @__PURE__ */ jsxs8(
+      /* @__PURE__ */ jsxs9(
         "div",
         {
-          className: getClassName14({
+          className: getClassName15({
             isSelected,
             isDragging: thisIsDragging,
             hover: hover || indicativeHover,
@@ -3040,18 +3141,18 @@ var DraggableComponent = ({
           "data-editor-overlay": true,
           children: [
             debug,
-            isLoading && /* @__PURE__ */ jsx23("div", { className: getClassName14("loadingOverlay"), children: /* @__PURE__ */ jsx23(Loader, {}) }),
-            /* @__PURE__ */ jsx23(
+            isLoading && /* @__PURE__ */ jsx24("div", { className: getClassName15("loadingOverlay"), children: /* @__PURE__ */ jsx24(Loader, {}) }),
+            /* @__PURE__ */ jsx24(
               "div",
               {
-                className: getClassName14("actionsOverlay"),
+                className: getClassName15("actionsOverlay"),
                 style: {
                   top: actionsOverlayTop / zoom
                 },
-                children: /* @__PURE__ */ jsx23(
+                children: /* @__PURE__ */ jsx24(
                   "div",
                   {
-                    className: getClassName14("actions"),
+                    className: getClassName15("actions"),
                     style: {
                       transform: `scale(${1 / zoom}`,
                       top: actionsTop / zoom,
@@ -3060,14 +3161,14 @@ var DraggableComponent = ({
                       paddingRight: actionsSide
                     },
                     ref: syncActionsPosition,
-                    children: /* @__PURE__ */ jsxs8(
+                    children: /* @__PURE__ */ jsxs9(
                       CustomActionBar,
                       {
                         parentAction,
                         label: DEBUG2 ? id : label,
                         children: [
-                          richText && /* @__PURE__ */ jsxs8(Fragment5, { children: [
-                            /* @__PURE__ */ jsx23(
+                          richText && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+                            /* @__PURE__ */ jsx24(
                               LoadedRichTextMenu,
                               {
                                 editor: richText.editor,
@@ -3076,10 +3177,10 @@ var DraggableComponent = ({
                                 readOnly: false
                               }
                             ),
-                            hasNormalActions && /* @__PURE__ */ jsx23(ActionBar.Separator, {})
+                            hasNormalActions && /* @__PURE__ */ jsx24(ActionBar.Separator, {})
                           ] }),
-                          permissions.duplicate && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx23(Copy, { size: 16 }) }),
-                          permissions.delete && /* @__PURE__ */ jsx23(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx23(Trash, { size: 16 }) })
+                          permissions.duplicate && /* @__PURE__ */ jsx24(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx24(Copy, { size: 16 }) }),
+                          permissions.delete && /* @__PURE__ */ jsx24(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx24(Trash, { size: 16 }) })
                         ]
                       }
                     )
@@ -3087,14 +3188,14 @@ var DraggableComponent = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx23("div", { className: getClassName14("overlayWrapper"), children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("div", { className: getClassName15("overlayWrapper"), children: /* @__PURE__ */ jsx24(
               CustomOverlay,
               {
                 componentId: id,
                 componentType,
                 hover,
                 isSelected,
-                children: /* @__PURE__ */ jsx23("div", { className: getClassName14("overlay") })
+                children: /* @__PURE__ */ jsx24("div", { className: getClassName15("overlay") })
               }
             ) })
           ]
@@ -3108,7 +3209,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_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" };
+var styles_module_default11 = { "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 +3219,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Drawer/styles.module.css#css-module
 init_react_import();
-var styles_module_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" };
+var styles_module_default12 = { "Drawer": "_Drawer_146py_1", "Drawer--tile": "_Drawer--tile_146py_8", "Drawer-draggable": "_Drawer-draggable_146py_19", "Drawer-draggableBg": "_Drawer-draggableBg_146py_23", "DrawerItem-draggable": "_DrawerItem-draggable_146py_33", "DrawerItem-icon": "_DrawerItem-icon_146py_50", "DrawerItem--disabled": "_DrawerItem--disabled_146py_56", "DrawerItem": "_DrawerItem_146py_33", "Drawer--isDraggingFrom": "_Drawer--isDraggingFrom_146py_66", "DrawerItem-name": "_DrawerItem-name_146py_91" };
 
 // components/Drawer/index.tsx
 import { useMemo as useMemo9, useState as useState11 } from "react";
@@ -3128,11 +3229,11 @@ init_react_import();
 import { DragDropProvider as DragDropProvider2 } from "@dnd-kit/react";
 import {
   createContext as createContext4,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext6,
   useEffect as useEffect9,
   useMemo as useMemo8,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState10
 } from "react";
 import {
@@ -3539,7 +3640,7 @@ function getDeepDir(el) {
 
 // components/DragDropContext/index.tsx
 import { effect } from "@dnd-kit/state";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DEBUG3 = false;
 var dragListenerContext = createContext4({
   dragListeners: {}
@@ -3556,8 +3657,8 @@ function useDragListener(type, fn, deps = []) {
 }
 var AREA_CHANGE_DEBOUNCE_MS = 100;
 var useTempDisableFallback = (timeout3) => {
-  const lastFallbackDisable = useRef3(null);
-  return useCallback8((manager) => {
+  const lastFallbackDisable = useRef4(null);
+  return useCallback9((manager) => {
     collisionStore.setState({ fallbackEnabled: false });
     const fallbackId = generateId();
     lastFallbackDisable.current = fallbackId;
@@ -3576,7 +3677,7 @@ var DragDropContextClient = ({
   const dispatch = useAppStore((s) => s.dispatch);
   const instanceId = useAppStore((s) => s.instanceId);
   const appStore = useAppStoreApi();
-  const debouncedParamsRef = useRef3(null);
+  const debouncedParamsRef = useRef4(null);
   const tempDisableFallback = useTempDisableFallback(100);
   const [zoneStore] = useState10(() => {
     const rootVirtualizers = /* @__PURE__ */ new Map();
@@ -3597,27 +3698,38 @@ var DragDropContextClient = ({
       },
       scrollToComponent: (id) => {
         const virtualizers = Array.from(rootVirtualizers.values());
-        if (virtualizers.length > 0) {
-          for (const handle of virtualizers) {
-            const index = handle.resolveIndex(id);
-            if (index < 0) {
-              continue;
+        const scroll = () => {
+          if (virtualizers.length > 0) {
+            for (const handle of virtualizers) {
+              const index = handle.resolveIndex(id);
+              if (index < 0) continue;
+              handle.virtualizer.scrollToIndex(index, {
+                behavior: "smooth",
+                align: "center"
+              });
             }
-            handle.virtualizer.scrollToIndex(index, {
-              behavior: "auto",
-              // We avoid smooth scroll as this triggers virtualizer renders
-              align: "auto"
-            });
+            return;
           }
-        } else {
           const frame = getFrame();
-          const el = frame == null ? void 0 : frame.querySelector(`[data-editor-component="${id}"]`);
-          el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
-        }
+          const el = frame == null ? void 0 : frame.querySelector(
+            `[data-editor-component="${id}"]`
+          );
+          el == null ? void 0 : el.scrollIntoView({ behavior: "smooth", block: "center" });
+        };
+        requestAnimationFrame(() => requestAnimationFrame(scroll));
       }
     }));
   });
-  const getChanged = useCallback8(
+  useEffect9(() => {
+    appStore.setState({
+      scrollToComponent: (id) => zoneStore.getState().scrollToComponent(id)
+    });
+    return () => {
+      appStore.setState({ scrollToComponent: () => {
+      } });
+    };
+  }, [appStore, zoneStore]);
+  const getChanged = useCallback9(
     (params) => {
       const { zoneDepthIndex = {}, areaDepthIndex = {} } = zoneStore.getState() || {};
       const stateHasZone = Object.keys(zoneDepthIndex).length > 0;
@@ -3638,7 +3750,7 @@ var DragDropContextClient = ({
     },
     [zoneStore]
   );
-  const setDeepestAndCollide = useCallback8(
+  const setDeepestAndCollide = useCallback9(
     (params, manager) => {
       const { zoneChanged, areaChanged } = getChanged(params);
       if (!zoneChanged && !areaChanged) return;
@@ -3727,8 +3839,8 @@ var DragDropContextClient = ({
   ]);
   const sensors = useSensors();
   const [dragListeners, setDragListeners] = useState10({});
-  const dragMode = useRef3(null);
-  const initialSelector = useRef3(void 0);
+  const dragMode = useRef4(null);
+  const initialSelector = useRef4(void 0);
   const nextContextValue = useMemo8(
     () => ({
       mode: "edit",
@@ -3737,14 +3849,14 @@ var DragDropContextClient = ({
     }),
     []
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     dragListenerContext.Provider,
     {
       value: {
         dragListeners,
         setDragListeners
       },
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx25(
         DragDropProvider2,
         {
           plugins,
@@ -3960,7 +4072,7 @@ var DragDropContextClient = ({
             const entryEl = (_d = getFrame()) == null ? void 0 : _d.querySelector("[data-editor-entry]");
             entryEl == null ? void 0 : entryEl.setAttribute("data-editor-dragging", "true");
           },
-          children: /* @__PURE__ */ jsx24(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx24(DropZoneProvider, { value: nextContextValue, children }) })
+          children: /* @__PURE__ */ jsx25(ZoneStoreProvider, { store: zoneStore, children: /* @__PURE__ */ jsx25(DropZoneProvider, { value: nextContextValue, children }) })
         }
       )
     }
@@ -3974,14 +4086,14 @@ var DragDropContext = ({
   if (status === "LOADING") {
     return children;
   }
-  return /* @__PURE__ */ jsx24(DragDropContextClient, { disableAutoScroll, children });
+  return /* @__PURE__ */ jsx25(DragDropContextClient, { disableAutoScroll, children });
 };
 
 // components/Drawer/index.tsx
 import { useDraggable, useDroppable } from "@dnd-kit/react";
-import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
-var getClassName15 = get_class_name_factory_default("Drawer", styles_module_default11);
-var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default11);
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var getClassName16 = get_class_name_factory_default("Drawer", styles_module_default12);
+var getClassNameItem2 = get_class_name_factory_default("DrawerItem", styles_module_default12);
 var DrawerItemInner = ({
   children,
   name,
@@ -3991,10 +4103,10 @@ var DrawerItemInner = ({
   isDragDisabled
 }) => {
   const CustomInner = useMemo9(
-    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("default"), children: children2 })),
+    () => children || (({ children: children2 }) => /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("default"), children: children2 })),
     [children]
   );
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: getClassNameItem2({ disabled: isDragDisabled }),
@@ -4002,9 +4114,9 @@ var DrawerItemInner = ({
       onMouseDown: (e) => e.preventDefault(),
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-editor-drawer-item": true,
-      children: /* @__PURE__ */ jsx25(CustomInner, { name, children: /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs9("div", { className: getClassNameItem2("draggable"), children: [
-        icon && /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("icon"), children: icon }),
-        /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("name"), children: label != null ? label : name })
+      children: /* @__PURE__ */ jsx26(CustomInner, { name, children: /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs10("div", { className: getClassNameItem2("draggable"), children: [
+        icon && /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("icon"), children: icon }),
+        /* @__PURE__ */ jsx26("div", { className: getClassNameItem2("name"), children: label != null ? label : name })
       ] }) }) })
     }
   );
@@ -4023,9 +4135,9 @@ var DrawerItemDraggable = ({
     disabled: isDragDisabled,
     type: "drawer"
   });
-  return /* @__PURE__ */ jsxs9("div", { className: getClassName15("draggable"), children: [
-    /* @__PURE__ */ jsx25("div", { className: getClassName15("draggableBg"), children: /* @__PURE__ */ jsx25(DrawerItemInner, { name, label, icon, children }) }),
-    /* @__PURE__ */ jsx25("div", { className: getClassName15("draggableFg"), children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs10("div", { className: getClassName16("draggable"), children: [
+    /* @__PURE__ */ jsx26("div", { className: getClassName16("draggableBg"), children: /* @__PURE__ */ jsx26(DrawerItemInner, { name, label, icon, children }) }),
+    /* @__PURE__ */ jsx26("div", { className: getClassName16("draggableFg"), children: /* @__PURE__ */ jsx26(
       DrawerItemInner,
       {
         name,
@@ -4061,7 +4173,7 @@ var DrawerItem = ({
     },
     [resolvedId]
   );
-  return /* @__PURE__ */ jsx25("div", { children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsx26(
     DrawerItemDraggable,
     {
       name,
@@ -4096,10 +4208,10 @@ var Drawer = ({
     collisionPriority: 0
     // Never collide with this, but we use it so NestedDroppablePlugin respects the Drawer
   });
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: getClassName15({ [variant]: variant }),
+      className: getClassName16({ [variant]: variant }),
       ref,
       "data-editor-dnd": id,
       "data-editor-drawer": true,
@@ -4115,7 +4227,7 @@ 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";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState12 } from "react";
 var getNumItems = (appStore, zoneCompound) => appStore.getState().state.indexes.zones[zoneCompound].contentIds.length;
 var useMinEmptyHeight = ({
   zoneCompound,
@@ -4132,7 +4244,7 @@ var useMinEmptyHeight = ({
       isZone: ((_b = s.draggedItem) == null ? void 0 : _b.data.zone) === zoneCompound
     };
   });
-  const numItems = useRef4(0);
+  const numItems = useRef5(0);
   const onDragFinished = useOnDragFinished(
     (finished) => {
       if (finished) {
@@ -4184,10 +4296,10 @@ import { useContext as useContext7, useEffect as useEffect11, useState as useSta
 // lib/dnd/use-rendered-callback.ts
 init_react_import();
 import { useDragDropManager } from "@dnd-kit/react";
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback10 } from "react";
 function useRenderedCallback(callback, deps) {
   const manager = useDragDropManager();
-  return useCallback9(
+  return useCallback10(
     (...args) => __async(null, null, function* () {
       yield manager == null ? void 0 : manager.renderer.rendering;
       return callback(...args);
@@ -4258,7 +4370,7 @@ var useContentIdsWithPreview = (contentIds, zoneCompound) => {
 
 // components/DropZone/lib/use-drag-axis.ts
 init_react_import();
-import { useCallback as useCallback10, useEffect as useEffect12, useState as useState14 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect12, useState as useState14 } from "react";
 var GRID_DRAG_AXIS = "dynamic";
 var FLEX_ROW_DRAG_AXIS = "x";
 var DEFAULT_DRAG_AXIS = "y";
@@ -4267,7 +4379,7 @@ var useDragAxis = (ref, collisionAxis) => {
   const [dragAxis, setDragAxis] = useState14(
     collisionAxis || DEFAULT_DRAG_AXIS
   );
-  const calculateDragAxis = useCallback10(() => {
+  const calculateDragAxis = useCallback11(() => {
     if (ref.current) {
       const computedStyle = window.getComputedStyle(ref.current);
       if (computedStyle.display === "grid") {
@@ -4298,7 +4410,7 @@ import { useShallow as useShallow6 } from "zustand/react/shallow";
 // components/SlotRender/index.tsx
 init_react_import();
 import { useShallow as useShallow5 } from "zustand/react/shallow";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ContextSlotRender = ({
   componentId,
   zone
@@ -4313,7 +4425,7 @@ var ContextSlotRender = ({
       return contentIds.map((contentId) => indexes.nodes[contentId].flatData);
     })
   );
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     SlotRenderPure,
     {
       content: slotContent,
@@ -4326,10 +4438,10 @@ var ContextSlotRender = ({
 
 // lib/field-transforms/use-field-transforms-tracked.tsx
 init_react_import();
-import { useMemo as useMemo10, useRef as useRef5 } from "react";
+import { useMemo as useMemo10, useRef as useRef6 } from "react";
 function useFieldTransformsTracked(config, item, transforms, readOnly, forceReadOnly) {
-  const prevProps = useRef5(null);
-  const prevResult = useRef5(item.props);
+  const prevProps = useRef6(null);
+  const prevResult = useRef6(item.props);
   const mappers = useMemo10(
     () => buildMappers(transforms, readOnly, forceReadOnly),
     [transforms, readOnly, forceReadOnly]
@@ -4372,7 +4484,7 @@ init_react_import();
 
 // components/InlineTextField/index.tsx
 init_react_import();
-import { memo as memo4, useEffect as useEffect13, useRef as useRef6, useState as useState15 } from "react";
+import { memo as memo4, useEffect as useEffect13, useRef as useRef7, useState as useState15 } from "react";
 
 // lib/overlay-portal/index.tsx
 init_react_import();
@@ -4424,11 +4536,11 @@ var registerOverlayPortal = (el, opts = {}) => {
 
 // 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" };
+var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
 
 // components/InlineTextField/index.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var getClassName16 = get_class_name_factory_default("InlineTextField", styles_module_default12);
+import { jsx as jsx28 } from "react/jsx-runtime";
+var getClassName17 = get_class_name_factory_default("InlineTextField", styles_module_default13);
 var InlineTextFieldInternal = ({
   propPath,
   componentId,
@@ -4437,7 +4549,7 @@ var InlineTextFieldInternal = ({
   opts = {}
 }) => {
   var _a;
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   const appStoreApi = useAppStoreApi();
   const disableLineBreaks = (_a = opts.disableLineBreaks) != null ? _a : false;
   useEffect13(() => {
@@ -4488,10 +4600,10 @@ var InlineTextFieldInternal = ({
   }, [appStoreApi, ref.current, value, disableLineBreaks]);
   const [isHovering, setIsHovering] = useState15(false);
   const [isFocused, setIsFocused] = useState15(false);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
-      className: getClassName16(),
+      className: getClassName17(),
       ref,
       contentEditable: isHovering || isFocused ? "plaintext-only" : "false",
       onClick: (e) => {
@@ -4527,11 +4639,11 @@ var InlineTextFieldInternal = ({
 var InlineTextField = memo4(InlineTextFieldInternal);
 
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var getInlineTextTransform = () => ({
   text: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         InlineTextField,
         {
           propPath,
@@ -4546,7 +4658,7 @@ var getInlineTextTransform = () => ({
   },
   textarea: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable) {
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         InlineTextField,
         {
           propPath,
@@ -4560,7 +4672,7 @@ var getInlineTextTransform = () => ({
   },
   custom: ({ value, componentId, field, propPath, isReadOnly }) => {
     if (field.contentEditable && typeof value === "string") {
-      return /* @__PURE__ */ jsx28(
+      return /* @__PURE__ */ jsx29(
         InlineTextField,
         {
           propPath,
@@ -4578,15 +4690,15 @@ var getInlineTextTransform = () => ({
 init_react_import();
 import {
   useEffect as useEffect14,
-  useRef as useRef7,
-  useCallback as useCallback11,
+  useRef as useRef8,
+  useCallback as useCallback12,
   memo as memo5,
   lazy as lazy2,
   Suspense as Suspense2
 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-OSAG52QF.mjs").then((m) => ({
+  () => import("./Editor-KXEVJBNG.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4603,7 +4715,7 @@ var InlineEditorWrapper = memo5(
     field,
     id
   }) => {
-    const portalRef = useRef7(null);
+    const portalRef = useRef8(null);
     const appStoreApi = useAppStoreApi();
     const onClickHandler = (e) => {
       e.preventDefault();
@@ -4625,7 +4737,7 @@ var InlineEditorWrapper = memo5(
       });
       return () => cleanup == null ? void 0 : cleanup();
     }, [portalRef.current]);
-    const handleChange = useCallback11(
+    const handleChange = useCallback12(
       (content, ui) => __async(null, null, function* () {
         var _a;
         const appStore = appStoreApi.getState();
@@ -4649,7 +4761,7 @@ var InlineEditorWrapper = memo5(
       }),
       [appStoreApi, componentId, propPath]
     );
-    const handleFocus = useCallback11(
+    const handleFocus = useCallback12(
       (editor) => {
         appStoreApi.setState({
           currentRichText: {
@@ -4664,7 +4776,7 @@ var InlineEditorWrapper = memo5(
       [field, componentId]
     );
     if (!field.contentEditable)
-      return /* @__PURE__ */ jsx29(Suspense2, { fallback: /* @__PURE__ */ jsx29(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ jsx29(RichTextRender, { content: value, field }) });
+      return /* @__PURE__ */ jsx30(Suspense2, { fallback: /* @__PURE__ */ jsx30(RichTextRenderFallback, { content: value }), children: /* @__PURE__ */ jsx30(RichTextRender, { content: value, field }) });
     const editorProps = {
       content: value,
       onChange: handleChange,
@@ -4674,13 +4786,13 @@ var InlineEditorWrapper = memo5(
       id,
       name: propPath
     };
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       "div",
       {
         ref: portalRef,
         onClick: onClickHandler,
         onClickCapture: onClickCaptureHandler,
-        children: /* @__PURE__ */ jsx29(Suspense2, { fallback: /* @__PURE__ */ jsx29(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ jsx29(Editor2, __spreadValues({}, editorProps)) })
+        children: /* @__PURE__ */ jsx30(Suspense2, { fallback: /* @__PURE__ */ jsx30(EditorFallback, __spreadValues({}, editorProps)), children: /* @__PURE__ */ jsx30(Editor2, __spreadValues({}, editorProps)) })
       }
     );
   }
@@ -4690,10 +4802,10 @@ var getRichTextTransform = () => ({
   richtext: ({ value, componentId, field, propPath, isReadOnly }) => {
     const { contentEditable = true, tiptap } = field;
     if (contentEditable === false || isReadOnly) {
-      return /* @__PURE__ */ jsx29(RichTextRender, { content: value, field });
+      return /* @__PURE__ */ jsx30(RichTextRender, { content: value, field });
     }
     const id = `${componentId}_${field.type}_${propPath}`;
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       InlineEditorWrapper,
       {
         value,
@@ -4737,12 +4849,12 @@ function shallowEqual(obj1, obj2, keysToIgnore = []) {
 }
 
 // components/MemoizeComponent/index.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var RenderComponent = ({
   Component: Component2,
   componentProps: renderProps
 }) => {
-  return /* @__PURE__ */ jsx30(Component2, __spreadValues({}, renderProps));
+  return /* @__PURE__ */ jsx31(Component2, __spreadValues({}, renderProps));
 };
 var MemoizeComponent = memo6(RenderComponent, (prev, next) => {
   let editorEquals = true;
@@ -4755,11 +4867,11 @@ var MemoizeComponent = memo6(RenderComponent, (prev, next) => {
 // components/DropZone/VirtualizedDropZone.tsx
 init_react_import();
 import {
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useContext as useContext8,
   useEffect as useEffect15,
   useMemo as useMemo11,
-  useRef as useRef8
+  useRef as useRef9
 } from "react";
 import {
   defaultRangeExtractor,
@@ -4771,7 +4883,7 @@ import {
   useVirtualizer,
   windowScroll
 } from "@tanstack/react-virtual";
-import { Fragment as Fragment6, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx32 } from "react/jsx-runtime";
 var ROOT_ZONE_VIRTUALIZATION_OVERSCAN = 5;
 var DEFAULT_VIRTUALIZED_ITEM_HEIGHT = 320;
 var measuredItemHeights = /* @__PURE__ */ new Map();
@@ -4810,9 +4922,9 @@ var VirtualizedDropZone = ({
     return null;
   });
   const iframeWindow = frame == null ? void 0 : frame.defaultView;
-  const measureRefsRef = useRef8(/* @__PURE__ */ new Map());
+  const measureRefsRef = useRef9(/* @__PURE__ */ new Map());
   const appStoreApi = useAppStoreApi();
-  const resolveIndex = useCallback12(
+  const resolveIndex = useCallback13(
     (targetId) => {
       var _a, _b, _c, _d;
       if (!targetId || targetId === "root") {
@@ -4847,7 +4959,7 @@ var VirtualizedDropZone = ({
     });
     return Array.from(nextPinnedIndexes).sort((a, b) => a - b);
   }, [dragTargetParentId, draggedItemId, resolveIndex, selectedId]);
-  const rangeExtractor = useCallback12(
+  const rangeExtractor = useCallback13(
     (range) => {
       const indexes = defaultRangeExtractor(range);
       pinnedIndexes.forEach((index) => {
@@ -4881,7 +4993,7 @@ var VirtualizedDropZone = ({
       zoneStore.getState().unregisterRootVirtualizer(zoneCompound);
     };
   }, [resolveIndex, virtualizer, zoneCompound, zoneStore]);
-  const getMeasureRef = useCallback12((componentId) => {
+  const getMeasureRef = useCallback13((componentId) => {
     const cachedRef = measureRefsRef.current.get(componentId);
     if (cachedRef) {
       return cachedRef;
@@ -4918,7 +5030,7 @@ var VirtualizedDropZone = ({
       const gapSize = Math.max(virtualItem.start - previousEnd, 0);
       if (gapSize > 0) {
         items.push(
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             "div",
             {
               style: { height: `${gapSize}px` }
@@ -4940,7 +5052,7 @@ var VirtualizedDropZone = ({
     const trailingGap = Math.max(totalSize - previousEnd, 0);
     if (trailingGap > 0) {
       items.push(
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           "div",
           {
             style: { height: `${trailingGap}px` }
@@ -4951,12 +5063,12 @@ var VirtualizedDropZone = ({
     }
     return items;
   }, [totalSize, virtualItems, getMeasureRef]);
-  return /* @__PURE__ */ jsx31(Fragment6, { children: renderedItems });
+  return /* @__PURE__ */ jsx32(Fragment6, { children: renderedItems });
 };
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
-var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default10);
+import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName18 = get_class_name_factory_default("DropZone", styles_module_default11);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
 var InsertPreview = ({
@@ -4967,12 +5079,12 @@ var InsertPreview = ({
   if (element) {
     return (
       // Safe to use this since the HTML is set by the user
-      /* @__PURE__ */ jsx32("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
+      /* @__PURE__ */ jsx33("div", { dangerouslySetInnerHTML: { __html: element.outerHTML } })
     );
   }
-  return /* @__PURE__ */ jsx32(DrawerItemInner, { name: label, children: override });
+  return /* @__PURE__ */ jsx33(DrawerItemInner, { name: label, children: override });
 };
-var DropZoneEditPure = (props) => /* @__PURE__ */ jsx32(DropZoneEdit, __spreadValues({}, props));
+var DropZoneEditPure = (props) => /* @__PURE__ */ jsx33(DropZoneEdit, __spreadValues({}, props));
 var DropZoneChild = ({
   zoneCompound,
   componentId,
@@ -5070,7 +5182,7 @@ var DropZoneChild = ({
   const plugins = useAppStore((s) => s.plugins);
   const userFieldTransforms = useAppStore((s) => s.fieldTransforms);
   const combinedFieldTransforms = useMemo12(
-    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx32(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
+    () => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getSlotTransform(DropZoneEditPure, (slotProps) => /* @__PURE__ */ jsx33(ContextSlotRender, { componentId, zone: slotProps.zone }))), getInlineTextTransform()), getRichTextTransform()), plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
       {}
     )), userFieldTransforms),
@@ -5084,13 +5196,13 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs10("div", { style: { padding: 48, textAlign: "center" }, children: [
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs11("div", { style: { padding: 48, textAlign: "center" }, children: [
     "No configuration for ",
     item.type
   ] });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     DraggableComponent,
     {
       id: componentId,
@@ -5108,7 +5220,7 @@ var DropZoneChild = ({
       children: (dragRef) => {
         var _a2;
         if ((componentConfig == null ? void 0 : componentConfig.inline) && !isInserting) {
-          return /* @__PURE__ */ jsx32(
+          return /* @__PURE__ */ jsx33(
             MemoizeComponent,
             {
               Component: Render2,
@@ -5118,14 +5230,14 @@ var DropZoneChild = ({
             }
           );
         }
-        return /* @__PURE__ */ jsx32("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33("div", { ref: dragRef, children: isInserting ? /* @__PURE__ */ jsx33(
           InsertPreview,
           {
             label,
             override: (_a2 = overrides.componentItem) != null ? _a2 : overrides.drawerItem,
             element: "element" in item && item.element ? item.element : void 0
           }
-        ) : /* @__PURE__ */ jsx32(
+        ) : /* @__PURE__ */ jsx33(
           MemoizeComponent,
           {
             Component: Render2,
@@ -5205,8 +5317,8 @@ var DropZoneEdit = forwardRef(
     const contentIds = useMemo12(() => {
       return zoneContentIds || [];
     }, [zoneContentIds]);
-    const ref = useRef9(null);
-    const acceptsTarget = useCallback13(
+    const ref = useRef10(null);
+    const acceptsTarget = useCallback14(
       (componentType) => {
         if (!componentType) {
           return true;
@@ -5289,7 +5401,7 @@ var DropZoneEdit = forwardRef(
       userMinEmptyHeight,
       ref
     });
-    const setRefs = useCallback13(
+    const setRefs = useCallback14(
       (node) => {
         assignRefs([ref, dropRef, userRef], node);
       },
@@ -5301,10 +5413,10 @@ var DropZoneEdit = forwardRef(
     const El = as != null ? as : "div";
     const isRootAreaZone = (areaId != null ? areaId : rootAreaId) === rootAreaId && depth === 0;
     const shouldVirtualizeItems = _experimentalVirtualization && isRootAreaZone;
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(
       El,
       {
-        className: `${getClassName17({
+        className: `${getClassName18({
           isRootZone,
           hoveringOverArea,
           isEnabled,
@@ -5319,12 +5431,12 @@ var DropZoneEdit = forwardRef(
           "--min-empty-height": minEmptyHeight,
           backgroundColor: RENDER_DEBUG ? getRandomColor() : style == null ? void 0 : style.backgroundColor
         }),
-        children: shouldVirtualizeItems ? /* @__PURE__ */ jsx32(
+        children: shouldVirtualizeItems ? /* @__PURE__ */ jsx33(
           VirtualizedDropZone,
           {
             contentIds: contentIdsWithPreview,
             zoneCompound,
-            renderItem: (props) => /* @__PURE__ */ jsx32(
+            renderItem: (props) => /* @__PURE__ */ jsx33(
               DropZoneChildMemo,
               {
                 zoneCompound,
@@ -5338,7 +5450,7 @@ var DropZoneEdit = forwardRef(
               props.componentId
             )
           }
-        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ jsx32(
+        ) : contentIdsWithPreview.map((componentId, i) => /* @__PURE__ */ jsx33(
           DropZoneChildMemo,
           {
             zoneCompound,
@@ -5360,7 +5472,7 @@ var DropZoneRenderItem = ({
   metadata
 }) => {
   const Component2 = config.components[item.type];
-  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx32(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
+  const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx33(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
   const nextContextValue = useMemo12(
     () => ({
       areaId: props.id,
@@ -5369,7 +5481,7 @@ var DropZoneRenderItem = ({
     [props]
   );
   const richtextProps = useRichtextProps(Component2.fields, props);
-  return /* @__PURE__ */ jsx32(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx33(
     Component2.render,
     __spreadProps(__spreadValues(__spreadValues({}, props), richtextProps), {
       editor: __spreadProps(__spreadValues({}, props.editor), {
@@ -5379,7 +5491,7 @@ var DropZoneRenderItem = ({
     })
   ) }, props.id);
 };
-var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx32(DropZoneRender, __spreadValues({}, props));
+var DropZoneRenderPure = (props) => /* @__PURE__ */ jsx33(DropZoneRender, __spreadValues({}, props));
 var DropZoneRender = forwardRef(
   function DropZoneRenderInternal({ className, style, zone, as }, ref) {
     const ctx = useContext9(dropZoneContext);
@@ -5401,10 +5513,10 @@ var DropZoneRender = forwardRef(
     if (zoneCompound !== rootDroppableId) {
       content = setupZone(data, zoneCompound).zones[zoneCompound];
     }
-    return /* @__PURE__ */ jsx32(El, { className, style, ref, children: content.map((item) => {
+    return /* @__PURE__ */ jsx33(El, { className, style, ref, children: content.map((item) => {
       const Component2 = config.components[item.type];
       if (Component2) {
-        return /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33(
           DropZoneRenderItem,
           {
             config,
@@ -5418,14 +5530,14 @@ var DropZoneRender = forwardRef(
     }) });
   }
 );
-var DropZonePure = (props) => /* @__PURE__ */ jsx32(DropZone, __spreadValues({}, props));
+var DropZonePure = (props) => /* @__PURE__ */ jsx33(DropZone, __spreadValues({}, props));
 var DropZone = forwardRef(
   function DropZone2(props, ref) {
     const ctx = useContext9(dropZoneContext);
     if ((ctx == null ? void 0 : ctx.mode) === "edit") {
-      return /* @__PURE__ */ jsx32(Fragment7, { children: /* @__PURE__ */ jsx32(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
+      return /* @__PURE__ */ jsx33(Fragment7, { children: /* @__PURE__ */ jsx33(DropZoneEdit, __spreadProps(__spreadValues({}, props), { ref })) });
     }
-    return /* @__PURE__ */ jsx32(Fragment7, { children: /* @__PURE__ */ jsx32(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
+    return /* @__PURE__ */ jsx33(Fragment7, { children: /* @__PURE__ */ jsx33(DropZoneRender, __spreadProps(__spreadValues({}, props), { ref })) });
   }
 );
 
@@ -5482,7 +5594,7 @@ function resolveGlobals(data, config) {
 }
 
 // components/Render/index.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var renderContext = React3.createContext({
   config: { components: {} },
   data: { root: {}, content: [] },
@@ -5517,7 +5629,7 @@ function Render({
   const propsWithSlots = useSlots(
     config,
     { type: "root", props: pageProps },
-    (props) => /* @__PURE__ */ jsx33(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
+    (props) => /* @__PURE__ */ jsx34(SlotRender, __spreadProps(__spreadValues({}, props), { config, metadata }))
   );
   const richtextProps = useRichtextProps((_a = config.root) == null ? void 0 : _a.fields, pageProps);
   const nextContextValue = useMemo13(
@@ -5528,9 +5640,9 @@ function Render({
     []
   );
   if ((_b = config.root) == null ? void 0 : _b.render) {
-    return /* @__PURE__ */ jsx33(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx33(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx33(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ jsx33(DropZoneRenderPure, { zone: rootZone }) })) }) });
+    return /* @__PURE__ */ jsx34(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx34(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx34(config.root.render, __spreadProps(__spreadValues(__spreadValues({}, propsWithSlots), richtextProps), { children: /* @__PURE__ */ jsx34(DropZoneRenderPure, { zone: rootZone }) })) }) });
   }
-  return /* @__PURE__ */ jsx33(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx33(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx33(DropZoneRenderPure, { zone: rootZone }) }) });
+  return /* @__PURE__ */ jsx34(renderContext.Provider, { value: { config, data: defaultedData, metadata }, children: /* @__PURE__ */ jsx34(DropZoneProvider, { value: nextContextValue, children: /* @__PURE__ */ jsx34(DropZoneRenderPure, { zone: rootZone }) }) });
 }
 
 // components/ComponentList/index.tsx
@@ -5538,12 +5650,12 @@ 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_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" };
+var styles_module_default14 = { "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";
-import { jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
-var getClassName18 = get_class_name_factory_default("ComponentList", styles_module_default13);
+import { jsx as jsx35, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName19 = get_class_name_factory_default("ComponentList", styles_module_default14);
 var ComponentListItem = ({
   name,
   label,
@@ -5563,7 +5675,7 @@ var ComponentListItem = ({
       );
     }
   }, [overrides]);
-  return /* @__PURE__ */ jsx34(Drawer.Item, { label, name, icon, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
+  return /* @__PURE__ */ jsx35(Drawer.Item, { label, name, icon, isDragDisabled: !canInsert, children: (_a = overrides.componentItem) != null ? _a : overrides.drawerItem });
 };
 var ComponentList = ({
   children,
@@ -5574,12 +5686,12 @@ var ComponentList = ({
   const setUi = useAppStore((s) => s.setUi);
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
-  return /* @__PURE__ */ jsxs11("div", { className: getClassName18({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className: getClassName19({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
-        className: getClassName18("title"),
+        className: getClassName19("title"),
         onClick: () => setUi({
           componentList: __spreadProps(__spreadValues({}, componentList), {
             [id]: __spreadProps(__spreadValues({}, componentList[id]), {
@@ -5589,15 +5701,15 @@ var ComponentList = ({
         }),
         title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
         children: [
-          /* @__PURE__ */ jsx34("div", { className: getClassName18("titleIcon"), children: /* @__PURE__ */ jsx34(ChevronRight, { size: 12 }) }),
-          /* @__PURE__ */ jsx34("div", { children: title })
+          /* @__PURE__ */ jsx35("div", { className: getClassName19("titleIcon"), children: /* @__PURE__ */ jsx35(ChevronRight, { size: 12 }) }),
+          /* @__PURE__ */ jsx35("div", { children: title })
         ]
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: getClassName18("content"), children: /* @__PURE__ */ jsx34(Drawer, { variant: "tile", children: children || Object.keys(config.components).map((componentKey) => {
+    /* @__PURE__ */ jsx35("div", { className: getClassName19("content"), children: /* @__PURE__ */ jsx35(Drawer, { variant: "tile", children: children || Object.keys(config.components).map((componentKey) => {
       var _a;
       const componentConf = config.components[componentKey] || {};
-      return /* @__PURE__ */ jsx34(
+      return /* @__PURE__ */ jsx35(
         ComponentListItem,
         {
           label: (_a = componentConf["label"]) != null ? _a : componentKey,
@@ -5777,6 +5889,9 @@ var createEditorCommands = (appStore) => {
       root: __spreadProps(__spreadValues({}, root), { props: __spreadValues(__spreadValues({}, prevProps), patch) })
     });
   };
+  const scrollToComponent = (id) => {
+    getState().scrollToComponent(id);
+  };
   const selectComponent = (id) => {
     const dispatch = getState().dispatch;
     if (id === null) {
@@ -5798,7 +5913,8 @@ var createEditorCommands = (appStore) => {
     replaceComponent,
     updateProps,
     updateRoot,
-    selectComponent
+    selectComponent,
+    scrollToComponent
   };
 };
 
@@ -5915,11 +6031,11 @@ 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_recer_1", "Components-searchIcon": "_Components-searchIcon_recer_8", "Components-searchInput": "_Components-searchInput_recer_16", "Components-empty": "_Components-empty_recer_39" };
+var styles_module_default15 = { "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";
-var getClassName19 = get_class_name_factory_default("Components", styles_module_default14);
+import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("Components", styles_module_default15);
 var Components = () => {
   var _a;
   const overrides = useAppStore((s) => s.overrides);
@@ -5954,23 +6070,23 @@ var Components = () => {
     }
     return Array.from(buckets.entries());
   }, [components, search]);
-  return /* @__PURE__ */ jsxs12(Wrapper, { children: [
-    /* @__PURE__ */ jsxs12("div", { className: getClassName19("search"), children: [
-      /* @__PURE__ */ jsx35("div", { className: getClassName19("searchIcon"), children: /* @__PURE__ */ jsx35(Search, { size: 14 }) }),
-      /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs13(Wrapper, { children: [
+    /* @__PURE__ */ jsxs13("div", { className: getClassName20("search"), children: [
+      /* @__PURE__ */ jsx36("div", { className: getClassName20("searchIcon"), children: /* @__PURE__ */ jsx36(Search, { size: 14 }) }),
+      /* @__PURE__ */ jsx36(
         "input",
         {
           type: "search",
-          className: getClassName19("searchInput"),
+          className: getClassName20("searchInput"),
           placeholder: "search",
           value: search,
           onChange: (e) => setSearch(e.target.value)
         }
       )
     ] }),
-    groups.length === 0 ? /* @__PURE__ */ jsx35("div", { className: getClassName19("empty"), children: "No results match your search" }) : groups.length <= 1 && !((_a = groups[0]) == null ? void 0 : _a[0]) ? /* @__PURE__ */ jsx35(ComponentList, { id: "all", children: groups[0][1].map(([name, conf]) => {
+    groups.length === 0 ? /* @__PURE__ */ jsx36("div", { className: getClassName20("empty"), children: "No results match your search" }) : groups.length <= 1 && !((_a = groups[0]) == null ? void 0 : _a[0]) ? /* @__PURE__ */ jsx36(ComponentList, { id: "all", children: groups[0][1].map(([name, conf]) => {
       var _a2;
-      return /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx36(
         ComponentList.Item,
         {
           name,
@@ -5983,14 +6099,14 @@ var Components = () => {
       var _a2, _b;
       const categoryKey = category != null ? category : "other";
       const title = (_b = (_a2 = categoriesConfig == null ? void 0 : categoriesConfig[categoryKey]) == null ? void 0 : _a2.title) != null ? _b : category != null ? category : "Other";
-      return /* @__PURE__ */ jsx35(
+      return /* @__PURE__ */ jsx36(
         ComponentList,
         {
           id: categoryKey,
           title,
           children: entries.map(([name, conf]) => {
             var _a3;
-            return /* @__PURE__ */ jsx35(
+            return /* @__PURE__ */ jsx36(
               ComponentList.Item,
               {
                 name,
@@ -6009,16 +6125,16 @@ var Components = () => {
 
 // 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" };
+var styles_module_default16 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
 
 // plugins/blocks/index.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
-var getClassName20 = get_class_name_factory_default("BlocksPlugin", styles_module_default15);
+import { jsx as jsx37 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("BlocksPlugin", styles_module_default16);
 var blocksPlugin = () => ({
   name: "blocks",
   label: "Blocks",
-  render: () => /* @__PURE__ */ jsx36("div", { className: getClassName20(), children: /* @__PURE__ */ jsx36(Components, {}) }),
-  icon: /* @__PURE__ */ jsx36(Plus, {})
+  render: () => /* @__PURE__ */ jsx37("div", { className: getClassName21(), children: /* @__PURE__ */ jsx37(Components, {}) }),
+  icon: /* @__PURE__ */ jsx37(Plus, {})
 });
 
 // plugins/outline/index.tsx
@@ -6032,19 +6148,19 @@ 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_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" };
+var styles_module_default17 = { "LayerTree": "_LayerTree_3eixb_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_3eixb_11", "LayerTree-helper": "_LayerTree-helper_3eixb_17", "Layer": "_Layer_3eixb_1", "Layer-inner": "_Layer-inner_3eixb_34", "Layer--containsZone": "_Layer--containsZone_3eixb_42", "Layer-clickable": "_Layer-clickable_3eixb_46", "Layer--isSelected": "_Layer--isSelected_3eixb_68", "Layer-icon": "_Layer-icon_3eixb_80", "Layer-zoneIcon": "_Layer-zoneIcon_3eixb_81", "Layer-chevron": "_Layer-chevron_3eixb_85", "Layer--childIsSelected": "_Layer--childIsSelected_3eixb_97", "Layer-zones": "_Layer-zones_3eixb_101", "Layer-title": "_Layer-title_3eixb_117", "Layer-name": "_Layer-name_3eixb_130", "Layer--isGlobal": "_Layer--isGlobal_3eixb_150", "Layer--isUnlinked": "_Layer--isUnlinked_3eixb_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_3eixb_175" };
 
 // components/LayerTree/index.tsx
 import {
   forwardRef as forwardRef2,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useContext as useContext11,
-  useRef as useRef10
+  useRef as useRef11
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("LayerTree", styles_module_default16);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default16);
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("LayerTree", styles_module_default17);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default17);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
@@ -6176,14 +6292,14 @@ var Layer = forwardRef2(function Layer2({
     }
   );
   const containsZone = node.childZones.length > 0;
-  const setItemSelector = useCallback14(
+  const setItemSelector = useCallback15(
     (itemSelector) => {
       dispatch({ type: "setUi", ui: { itemSelector } });
     },
     [dispatch]
   );
   const shouldRenderChildren = isSelected || childIsSelected;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "li",
     {
       ref,
@@ -6198,7 +6314,7 @@ var Layer = forwardRef2(function Layer2({
       "data-index": dataIndex,
       "data-editor-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx38("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs14(
           "button",
           {
             type: "button",
@@ -6223,34 +6339,34 @@ var Layer = forwardRef2(function Layer2({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: containsZone ? isSelected ? "Collapse" : "Expand" : void 0,
-                  children: containsZone && /* @__PURE__ */ jsx37(ChevronRight, { size: "12" })
+                  children: containsZone && /* @__PURE__ */ jsx38(ChevronRight, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ jsxs13("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("icon"), children: /* @__PURE__ */ jsx37(Component, { size: "16" }) }),
-                /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("name"), children: node.label }),
-                isGlobal && isUnlinked && /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsxs14("div", { className: getClassNameLayer("title"), children: [
+                /* @__PURE__ */ jsx38("div", { className: getClassNameLayer("icon"), children: /* @__PURE__ */ jsx38(Component, { size: "16" }) }),
+                /* @__PURE__ */ jsx38("div", { className: getClassNameLayer("name"), children: node.label }),
+                isGlobal && isUnlinked && /* @__PURE__ */ jsx38(
                   "div",
                   {
                     className: getClassNameLayer("unlinkedGlyph"),
                     title: "Unlinked from shared",
-                    children: /* @__PURE__ */ jsx37(Unlink2, { size: "12" })
+                    children: /* @__PURE__ */ jsx38(Unlink2, { size: "12" })
                   }
                 )
               ] })
             ]
           }
         ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx37(
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx38(
           "div",
           {
             className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ jsx37(
+            children: /* @__PURE__ */ jsx38(
               LayerTreeZone,
               {
                 depth: depth + 1,
@@ -6273,9 +6389,9 @@ var LayerTreeZone = ({
   tree
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
-  return /* @__PURE__ */ jsxs13(Fragment8, { children: [
-    tree.label && /* @__PURE__ */ jsx37("div", { className: getClassName21("zoneTitle"), children: tree.label }),
-    shouldVirtualize ? /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
+    tree.label && /* @__PURE__ */ jsx38("div", { className: getClassName22("zoneTitle"), children: tree.label }),
+    shouldVirtualize ? /* @__PURE__ */ jsx38(
       VirtualizedLayerTreeItems,
       {
         depth,
@@ -6283,7 +6399,7 @@ var LayerTreeZone = ({
         selectedPathIds,
         tree
       }
-    ) : /* @__PURE__ */ jsx37(
+    ) : /* @__PURE__ */ jsx38(
       StaticLayerTreeItems,
       {
         depth,
@@ -6300,9 +6416,9 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ jsxs13("ul", { className: getClassName21(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName21("helper"), children: "empty" }),
-    tree.items.map((node) => /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs14("ul", { className: getClassName22(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx38("div", { className: getClassName22("helper"), children: "empty" }),
+    tree.items.map((node) => /* @__PURE__ */ jsx38(
       Layer,
       {
         childIsSelected: selectedPathIds.has(node.itemId),
@@ -6322,7 +6438,7 @@ var VirtualizedLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  const listRef = useRef10(null);
+  const listRef = useRef11(null);
   const virtualizer = useVirtualizer2({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -6348,7 +6464,7 @@ var VirtualizedLayerTreeItems = ({
     const gapSize = Math.max(virtualItem.start - previousEnd, 0);
     if (gapSize > 0) {
       renderedItems.push(
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "li",
           {
             "aria-hidden": "true",
@@ -6359,7 +6475,7 @@ var VirtualizedLayerTreeItems = ({
       );
     }
     renderedItems.push(
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         Layer,
         {
           childIsSelected: selectedPathIds.has(node.itemId),
@@ -6380,7 +6496,7 @@ var VirtualizedLayerTreeItems = ({
   const trailingGap = Math.max(totalSize - previousEnd, 0);
   if (trailingGap > 0) {
     renderedItems.push(
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38(
         "li",
         {
           "aria-hidden": "true",
@@ -6390,8 +6506,8 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ jsxs13("ul", { className: getClassName21(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName21("helper"), children: "empty" }),
+  return /* @__PURE__ */ jsxs14("ul", { className: getClassName22(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx38("div", { className: getClassName22("helper"), children: "empty" }),
     renderedItems
   ] });
 };
@@ -6400,7 +6516,7 @@ var LayerTree = ({
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx37(Fragment8, { children: trees.map((tree) => /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(Fragment8, { children: trees.map((tree) => /* @__PURE__ */ jsx38(
     LayerTreeZone,
     {
       depth: 0,
@@ -6425,7 +6541,7 @@ var findZonesForArea = (state, area) => {
 
 // components/Editor/components/Outline/index.tsx
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
@@ -6458,7 +6574,7 @@ var Outline = () => {
     [config, nodes, rootZones, zones]
   );
   const Wrapper = useMemo15(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx38(Wrapper, { children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(Wrapper, { children: /* @__PURE__ */ jsx39(
     LayerTree,
     {
       selectedId,
@@ -6470,16 +6586,16 @@ var Outline = () => {
 
 // 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" };
+var styles_module_default18 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("OutlinePlugin", styles_module_default17);
+import { jsx as jsx40 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("OutlinePlugin", styles_module_default18);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ jsx39("div", { className: getClassName22(), children: /* @__PURE__ */ jsx39(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx39(Layers, {})
+  render: () => /* @__PURE__ */ jsx40("div", { className: getClassName23(), children: /* @__PURE__ */ jsx40(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx40(Layers, {})
 });
 
 // plugins/fields/index.tsx
@@ -6490,7 +6606,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_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
+var styles_module_default19 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
@@ -6537,26 +6653,26 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx40, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("Breadcrumbs", styles_module_default18);
+import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("Breadcrumbs", styles_module_default19);
 var Breadcrumbs = ({
   children,
   numParents = 1
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs14("div", { className: getClassName23(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs14("div", { className: getClassName23("breadcrumb"), children: [
-      /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs15("div", { className: getClassName24(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs15("div", { className: getClassName24("breadcrumb"), children: [
+      /* @__PURE__ */ jsx41(
         "button",
         {
           type: "button",
-          className: getClassName23("breadcrumbLabel"),
+          className: getClassName24("breadcrumbLabel"),
           onClick: () => setUi({ itemSelector: breadcrumb.selector }),
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx40(ChevronRight, { size: 14 })
+      /* @__PURE__ */ jsx41(ChevronRight, { size: 14 })
     ] }, i)),
     children
   ] });
@@ -6567,23 +6683,23 @@ 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_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" };
+var styles_module_default20 = { "EditorFields": "_EditorFields_3dnua_1", "EditorFields--isLoading": "_EditorFields--isLoading_3dnua_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_3dnua_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_3dnua_25", "EditorFields-field": "_EditorFields-field_3dnua_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_3dnua_36", "EditorFields-syncButton": "_EditorFields-syncButton_3dnua_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_3dnua_78" };
 
 // components/Editor/components/Fields/index.tsx
 import {
   memo as memo8,
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext12,
   useEffect as useEffect19,
   useMemo as useMemo17
 } from "react";
 import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName24 = get_class_name_factory_default("EditorFields", styles_module_default19);
+import { Fragment as Fragment9, jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName25 = get_class_name_factory_default("EditorFields", styles_module_default20);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx41(Fragment9, { children });
+  return /* @__PURE__ */ jsx42(Fragment9, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -6644,7 +6760,7 @@ var FieldsChildInner = ({ fieldName }) => {
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback15(createOnChange(fieldName, appStore), [
+  const onChange = useCallback16(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
@@ -6663,7 +6779,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx41("div", { className: getClassName24("field"), children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42("div", { className: getClassName25("field"), children: /* @__PURE__ */ jsx42(
     AutoFieldPrivate,
     {
       field,
@@ -6681,7 +6797,7 @@ var FieldsChild = ({ fieldName }) => {
     const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
     return { [fieldName]: value };
   }, []);
-  return /* @__PURE__ */ jsx41(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx41(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ jsx42(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx42(FieldsChildInner, { fieldName }) });
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var GlobalSyncButton = () => {
@@ -6711,12 +6827,12 @@ var GlobalSyncButton = () => {
     });
   });
   const syncButtonClass = [
-    getClassName24("syncButton"),
-    isUnlinked ? styles_module_default19["EditorFields-syncButton--unlinked"] : null
+    getClassName25("syncButton"),
+    isUnlinked ? styles_module_default20["EditorFields-syncButton--unlinked"] : null
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs15("button", { type: "button", className: syncButtonClass, onClick, children: [
-    /* @__PURE__ */ jsx41(Link, { size: 14 }),
-    /* @__PURE__ */ jsx41("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
+  return /* @__PURE__ */ jsxs16("button", { type: "button", className: syncButtonClass, onClick, children: [
+    /* @__PURE__ */ jsx42(Link, { size: 14 }),
+    /* @__PURE__ */ jsx42("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
   ] });
 };
 var FieldsInternal = ({ wrapFields = true }) => {
@@ -6744,19 +6860,19 @@ var FieldsInternal = ({ wrapFields = true }) => {
   );
   const isLoading = fieldsLoading || componentResolving;
   const Wrapper = useMemo17(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "form",
     {
-      className: getClassName24({ wrapFields }),
+      className: getClassName25({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsxs15(Wrapper, { isLoading, itemSelector, children: [
-          /* @__PURE__ */ jsx41(GlobalSyncButton, {}),
-          fieldNames.map((fieldName) => /* @__PURE__ */ jsx41(FieldsChildMemo, { fieldName }, fieldName))
+        /* @__PURE__ */ jsxs16(Wrapper, { isLoading, itemSelector, children: [
+          /* @__PURE__ */ jsx42(GlobalSyncButton, {}),
+          fieldNames.map((fieldName) => /* @__PURE__ */ jsx42(FieldsChildMemo, { fieldName }, fieldName))
         ] }),
-        isLoading && /* @__PURE__ */ jsx41("div", { className: getClassName24("loadingOverlay"), children: /* @__PURE__ */ jsx41("div", { className: getClassName24("loadingOverlayInner"), children: /* @__PURE__ */ jsx41(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx42("div", { className: getClassName25("loadingOverlay"), children: /* @__PURE__ */ jsx42("div", { className: getClassName25("loadingOverlayInner"), children: /* @__PURE__ */ jsx42(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -6765,11 +6881,11 @@ 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_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+var styles_module_default21 = { "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";
-var getClassName25 = get_class_name_factory_default("FieldsPlugin", styles_module_default20);
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("FieldsPlugin", styles_module_default21);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     var _a, _b;
@@ -6781,11 +6897,11 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ jsxs16("div", { className: getClassName25(), children: [
-    /* @__PURE__ */ jsx42("div", { className: getClassName25("header"), children: /* @__PURE__ */ jsx42(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx42(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx42(Fields, {})
+  render: () => /* @__PURE__ */ jsxs17("div", { className: getClassName26(), children: [
+    /* @__PURE__ */ jsx43("div", { className: getClassName26("header"), children: /* @__PURE__ */ jsx43(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx43(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx43(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx42(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ jsx43(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
@@ -6793,17 +6909,17 @@ var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
 init_react_import();
 import {
   createContext as createContext8,
-  useCallback as useCallback24,
+  useCallback as useCallback25,
   useContext as useContext15,
   useEffect as useEffect26,
   useMemo as useMemo24,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState24
 } from "react";
 
 // components/Editor/components/Preview/index.tsx
 init_react_import();
-import { useCallback as useCallback16, useEffect as useEffect21, useRef as useRef11, useMemo as useMemo18 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect21, useRef as useRef12, useMemo as useMemo18 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
@@ -6815,7 +6931,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx43 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx44 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -7032,7 +7148,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx43(Fragment10, { children });
+  return /* @__PURE__ */ jsx44(Fragment10, { children });
 };
 var autoFrameContext = createContext6({});
 var useFrame = () => useContext13(autoFrameContext);
@@ -7079,7 +7195,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -7089,7 +7205,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx43(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx44(
         CopyHostStyles,
         {
           debug,
@@ -7105,11 +7221,11 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default21 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var styles_module_default22 = { "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);
+import { Fragment as Fragment11, jsx as jsx45 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("EditorPreview", styles_module_default22);
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -7121,7 +7237,7 @@ var Preview2 = ({ id = "editor-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Page = useCallback16(
+  const Page = useCallback17(
     (pageProps) => {
       var _a, _b, _c, _d;
       const propsWithSlots = useSlots(
@@ -7135,14 +7251,14 @@ var Preview2 = ({ id = "editor-preview" }) => {
       );
       return ((_c = config.root) == null ? void 0 : _c.render) ? (_d = config.root) == null ? void 0 : _d.render(__spreadValues(__spreadValues({
         id: "editor-root"
-      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx44(Fragment11, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx45(Fragment11, { children: propsWithSlots.children });
     },
     [config]
   );
   const Frame = useMemo18(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
-  const ref = useRef11(null);
-  const inner = !renderData ? /* @__PURE__ */ jsx44(
+  const ref = useRef12(null);
+  const inner = !renderData ? /* @__PURE__ */ jsx45(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       editor: {
@@ -7152,18 +7268,18 @@ var Preview2 = ({ id = "editor-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx44(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx45(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx44(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx45(Render, { data: renderData, config, metadata });
   useEffect21(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
-      className: getClassName26(),
+      className: getClassName27(),
       id,
       "data-editor-preview": true,
       onClick: (e) => {
@@ -7172,11 +7288,11 @@ var Preview2 = ({ id = "editor-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx44(
+      children: iframe.enabled ? /* @__PURE__ */ jsx45(
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName26("frame"),
+          className: getClassName27("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -7185,18 +7301,18 @@ var Preview2 = ({ id = "editor-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx44(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx45(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx44(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx45(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx44(
+      ) : /* @__PURE__ */ jsx45(
         "div",
         {
           id: "preview-frame",
-          className: getClassName26("frame"),
+          className: getClassName27("frame"),
           ref,
           "data-editor-entry": true,
           children: inner
@@ -7304,16 +7420,16 @@ function splitGlobals(data, config) {
 // components/Editor/components/Layout/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   useEffect as useEffect25,
   useMemo as useMemo23,
-  useRef as useRef17,
+  useRef as useRef18,
   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_1ty8s_19", "Editor-portal": "_Editor-portal_1ty8s_32", "EditorLayout": "_EditorLayout_1ty8s_37", "EditorLayout-inner": "_EditorLayout-inner_1ty8s_41", "Editor--hidePlugins": "_Editor--hidePlugins_1ty8s_73", "EditorLayout--mounted": "_EditorLayout--mounted_1ty8s_78", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_1ty8s_82", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_1ty8s_82", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_1ty8s_87", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_1ty8s_105", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_1ty8s_127", "EditorLayout-mounted": "_EditorLayout-mounted_1ty8s_146", "EditorLayout-nav": "_EditorLayout-nav_1ty8s_187", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_1ty8s_203", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_1ty8s_213", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_1ty8s_219", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_1ty8s_225", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_1ty8s_245", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_1ty8s_252", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_1ty8s_266", "EditorPluginTab": "_EditorPluginTab_1ty8s_273", "EditorPluginTab--visible": "_EditorPluginTab--visible_1ty8s_279", "EditorPluginTab-body": "_EditorPluginTab-body_1ty8s_284" };
+var styles_module_default23 = { "Editor": "_Editor_1ty8s_19", "Editor-portal": "_Editor-portal_1ty8s_32", "EditorLayout": "_EditorLayout_1ty8s_37", "EditorLayout-inner": "_EditorLayout-inner_1ty8s_41", "Editor--hidePlugins": "_Editor--hidePlugins_1ty8s_73", "EditorLayout--mounted": "_EditorLayout--mounted_1ty8s_78", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_1ty8s_82", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_1ty8s_82", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_1ty8s_87", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_1ty8s_105", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_1ty8s_127", "EditorLayout-mounted": "_EditorLayout-mounted_1ty8s_146", "EditorLayout-nav": "_EditorLayout-nav_1ty8s_187", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_1ty8s_203", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_1ty8s_213", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_1ty8s_219", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_1ty8s_225", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_1ty8s_245", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_1ty8s_252", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_1ty8s_266", "EditorPluginTab": "_EditorPluginTab_1ty8s_273", "EditorPluginTab--visible": "_EditorPluginTab--visible_1ty8s_279", "EditorPluginTab-body": "_EditorPluginTab-body_1ty8s_284" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -7344,15 +7460,15 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx45 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx45(Fragment12, { children });
+import { Fragment as Fragment12, jsx as jsx46 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx46(Fragment12, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback17 } from "react";
+import { useCallback as useCallback18 } from "react";
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = useCallback17(() => {
+  const toggleInteractive = useCallback18(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -7370,11 +7486,11 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_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" };
+var styles_module_default24 = { "SidebarSection": "_SidebarSection_tt2oy_1", "SidebarSection-title": "_SidebarSection-title_tt2oy_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_tt2oy_20", "SidebarSection-content": "_SidebarSection-content_tt2oy_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_tt2oy_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_tt2oy_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_tt2oy_33", "SidebarSection-heading": "_SidebarSection-heading_tt2oy_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_tt2oy_88" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("SidebarSection", styles_module_default23);
+import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default24);
 var SidebarSection = ({
   children,
   title,
@@ -7383,29 +7499,29 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ jsxs17("div", { className: getClassName27({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx46("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs17("div", { className: getClassName27("breadcrumbs"), children: [
-      showBreadcrumbs && /* @__PURE__ */ jsx46(Breadcrumbs, {}),
-      /* @__PURE__ */ jsx46("div", { className: getClassName27("heading"), children: /* @__PURE__ */ jsx46(Heading, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ jsxs18("div", { className: getClassName28({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx47("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName28("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx47(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx47("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx47(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx46("div", { className: getClassName27("content"), children }),
-    isLoading && /* @__PURE__ */ jsx46("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ jsx46(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx47("div", { className: getClassName28("content"), children }),
+    isLoading && /* @__PURE__ */ jsx47("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ jsx47(Loader, { size: 32 }) })
   ] });
 };
 
 // components/Editor/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback19,
   useEffect as useEffect23,
   useMemo as useMemo22,
-  useRef as useRef14,
+  useRef as useRef15,
   useState as useState21
 } from "react";
 
 // components/BrowserBar/index.tsx
 init_react_import();
-import { useMemo as useMemo20, useRef as useRef12, useState as useState20 } from "react";
+import { useMemo as useMemo20, useRef as useRef13, useState as useState20 } from "react";
 
 // components/ui/Combobox/index.tsx
 init_react_import();
@@ -7413,11 +7529,11 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
 init_react_import();
-var styles_module_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" };
+var styles_module_default25 = { "EditorCombobox-input": "_EditorCombobox-input_12a2a_4", "EditorCombobox-trigger": "_EditorCombobox-trigger_12a2a_21", "EditorCombobox-triggerIcon": "_EditorCombobox-triggerIcon_12a2a_42", "EditorCombobox-positioner": "_EditorCombobox-positioner_12a2a_46", "EditorCombobox-content": "_EditorCombobox-content_12a2a_50", "EditorCombobox-list": "_EditorCombobox-list_12a2a_65", "EditorCombobox-item": "_EditorCombobox-item_12a2a_71", "EditorCombobox-itemIndicator": "_EditorCombobox-itemIndicator_12a2a_97", "EditorCombobox-empty": "_EditorCombobox-empty_12a2a_110" };
 
 // 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);
+import { jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName29 = get_class_name_factory_default("EditorCombobox", styles_module_default25);
 var join = (...values) => values.filter(Boolean).join(" ");
 var mergeClassName = (base, override) => {
   if (!override) return base;
@@ -7433,11 +7549,11 @@ function ComboboxInput(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     ComboboxPrimitive.Input,
     __spreadValues({
       "data-slot": "combobox-input",
-      className: mergeClassName(getClassName28("input"), className)
+      className: mergeClassName(getClassName29("input"), className)
     }, props)
   );
 }
@@ -7457,19 +7573,19 @@ function ComboboxContent(_a) {
     "alignOffset",
     "children"
   ]);
-  return /* @__PURE__ */ jsx47(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx48(
     ComboboxPrimitive.Positioner,
     {
       side,
       sideOffset,
       align,
       alignOffset,
-      className: getClassName28("positioner"),
-      children: /* @__PURE__ */ jsx47(
+      className: getClassName29("positioner"),
+      children: /* @__PURE__ */ jsx48(
         ComboboxPrimitive.Popup,
         __spreadProps(__spreadValues({
           "data-slot": "combobox-content",
-          className: mergeClassName(getClassName28("content"), className)
+          className: mergeClassName(getClassName29("content"), className)
         }, props), {
           children
         })
@@ -7483,11 +7599,11 @@ function ComboboxList(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     ComboboxPrimitive.List,
     __spreadValues({
       "data-slot": "combobox-list",
-      className: mergeClassName(getClassName28("list"), className)
+      className: mergeClassName(getClassName29("list"), className)
     }, props)
   );
 }
@@ -7499,14 +7615,14 @@ function ComboboxItem(_a) {
     "className",
     "children"
   ]);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     ComboboxPrimitive.Item,
     __spreadProps(__spreadValues({
       "data-slot": "combobox-item",
-      className: mergeClassName(getClassName28("item"), className)
+      className: mergeClassName(getClassName29("item"), className)
     }, props), {
       children: [
-        /* @__PURE__ */ jsx47("span", { className: getClassName28("itemIndicator"), children: /* @__PURE__ */ jsx47(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(Check, { size: 14 }) }) }),
+        /* @__PURE__ */ jsx48("span", { className: getClassName29("itemIndicator"), children: /* @__PURE__ */ jsx48(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx48(Check, { size: 14 }) }) }),
         children
       ]
     })
@@ -7518,27 +7634,27 @@ function ComboboxEmpty(_a) {
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     ComboboxPrimitive.Empty,
     __spreadValues({
       "data-slot": "combobox-empty",
-      className: mergeClassName(getClassName28("empty"), className)
+      className: mergeClassName(getClassName29("empty"), className)
     }, props)
   );
 }
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "BrowserBar": "_BrowserBar_x10eb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_x10eb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_x10eb_46", "BrowserBar-urlText": "_BrowserBar-urlText_x10eb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_x10eb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_x10eb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_x10eb_74", "BrowserBar-actions": "_BrowserBar-actions_x10eb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_x10eb_89" };
+var styles_module_default26 = { "BrowserBar": "_BrowserBar_x10eb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_x10eb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_x10eb_46", "BrowserBar-urlText": "_BrowserBar-urlText_x10eb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_x10eb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_x10eb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_x10eb_74", "BrowserBar-actions": "_BrowserBar-actions_x10eb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_x10eb_89" };
 
 // components/BrowserBar/index.tsx
-import { jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs20 } 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 getClassName30 = get_class_name_factory_default("BrowserBar", styles_module_default26);
 var DEVICE_VIEWPORTS = {
   desktop: { width: "100%", height: "auto", icon: "Monitor", label: "Desktop" },
   mobile: { width: 360, height: "auto", icon: "Smartphone", label: "Mobile" }
@@ -7574,7 +7690,7 @@ var BrowserBar = ({
   };
   const showRoutePicker = !!routes && currentPath !== void 0 && !!onRouteChange;
   const [inputValue, setInputValue] = useState20(currentPath != null ? currentPath : "");
-  const lastSyncedPath = useRef12(currentPath);
+  const lastSyncedPath = useRef13(currentPath);
   if (lastSyncedPath.current !== currentPath) {
     lastSyncedPath.current = currentPath;
     setInputValue(currentPath != null ? currentPath : "");
@@ -7584,8 +7700,8 @@ var BrowserBar = ({
     if (!next || next === currentPath) return;
     void (onRouteChange == null ? void 0 : onRouteChange(next));
   };
-  return /* @__PURE__ */ jsxs19("div", { className: getClassName29(), children: [
-    showRoutePicker ? /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20("div", { className: getClassName30(), children: [
+    showRoutePicker ? /* @__PURE__ */ jsxs20(
       Combobox,
       {
         items: routes.map((r) => r.path),
@@ -7597,20 +7713,20 @@ var BrowserBar = ({
         onInputValueChange: (next) => setInputValue(next),
         autoHighlight: false,
         children: [
-          /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsxs20(
             "form",
             {
-              className: getClassName29("urlTrigger"),
+              className: getClassName30("urlTrigger"),
               onSubmit: (event) => {
                 event.preventDefault();
                 submit(inputValue);
               },
               children: [
-                /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
-                /* @__PURE__ */ jsx48(
+                /* @__PURE__ */ jsx49(Globe, { className: getClassName30("urlIcon"), size: 14 }),
+                /* @__PURE__ */ jsx49(
                   ComboboxInput,
                   {
-                    className: getClassName29("urlInput"),
+                    className: getClassName30("urlInput"),
                     placeholder: "/",
                     spellCheck: false,
                     autoCorrect: "off",
@@ -7620,39 +7736,39 @@ var BrowserBar = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs19(ComboboxContent, { children: [
-            /* @__PURE__ */ jsx48(ComboboxEmpty, { children: "Press Enter to go to this path" }),
-            /* @__PURE__ */ jsx48(ComboboxList, { children: (path) => {
+          /* @__PURE__ */ jsxs20(ComboboxContent, { children: [
+            /* @__PURE__ */ jsx49(ComboboxEmpty, { children: "Press Enter to go to this path" }),
+            /* @__PURE__ */ jsx49(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
+              return /* @__PURE__ */ jsxs20(ComboboxItem, { value: path, children: [
+                /* @__PURE__ */ jsx49("span", { className: getClassName30("itemPath"), children: path }),
+                (route == null ? void 0 : route.title) ? /* @__PURE__ */ jsx49("span", { className: getClassName30("itemTitle"), children: route.title }) : null
               ] }, path);
             } })
           ] })
         ]
       }
-    ) : /* @__PURE__ */ jsxs19("div", { className: getClassName29("urlTrigger"), children: [
-      /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
-      /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
+    ) : /* @__PURE__ */ jsxs20("div", { className: getClassName30("urlTrigger"), children: [
+      /* @__PURE__ */ jsx49(Globe, { className: getClassName30("urlIcon"), size: 14 }),
+      /* @__PURE__ */ jsx49("span", { className: getClassName30("urlText"), children: "/" })
     ] }),
-    /* @__PURE__ */ jsxs19("div", { className: getClassName29("actions"), children: [
-      /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsxs20("div", { className: getClassName30("actions"), children: [
+      /* @__PURE__ */ jsx49(
         IconButton,
         {
           type: "button",
           title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
           onClick: () => setDevice(activeDevice === "desktop" ? "mobile" : "desktop"),
-          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 16 }) : /* @__PURE__ */ jsx48(Smartphone, { size: 16 }) })
+          children: /* @__PURE__ */ jsx49("span", { className: getClassName30("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx49(Monitor, { size: 16 }) : /* @__PURE__ */ jsx49(Smartphone, { size: 16 }) })
         }
       ),
-      /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx49(
         IconButton,
         {
           type: "button",
           title: isFullScreen ? "Exit full screen" : "Enter full screen",
           onClick: toggleFullScreen,
-          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 16 }) : /* @__PURE__ */ jsx48(Maximize, { size: 16 }) })
+          children: /* @__PURE__ */ jsx49("span", { className: getClassName30("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx49(Minimize, { size: 16 }) : /* @__PURE__ */ jsx49(Maximize, { size: 16 }) })
         }
       )
     ] })
@@ -7661,7 +7777,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_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" };
+var styles_module_default27 = { "EditorCanvas": "_EditorCanvas_es8bv_1", "EditorCanvas-controls": "_EditorCanvas-controls_es8bv_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_es8bv_22", "EditorCanvas-inner": "_EditorCanvas-inner_es8bv_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_es8bv_46", "EditorCanvas-root": "_EditorCanvas-root_es8bv_46", "EditorCanvas--ready": "_EditorCanvas--ready_es8bv_83", "EditorCanvas-loader": "_EditorCanvas-loader_es8bv_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_es8bv_100", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_es8bv_109", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_es8bv_114" };
 
 // components/Editor/components/Canvas/index.tsx
 import { useShallow as useShallow9 } from "zustand/react/shallow";
@@ -7671,22 +7787,22 @@ init_react_import();
 import {
   createContext as createContext7,
   useContext as useContext14,
-  useRef as useRef13,
+  useRef as useRef14,
   useMemo as useMemo21
 } from "react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var FrameContext = createContext7(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = useRef13(null);
+  const frameRef = useRef14(null);
   const value = useMemo21(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx49(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx50(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
   const context = useContext14(FrameContext);
@@ -7697,8 +7813,8 @@ var useCanvasFrame = () => {
 };
 
 // components/Editor/components/Canvas/index.tsx
-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);
+import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("EditorCanvas", styles_module_default27);
 var ZOOM_STEP = 0.15;
 var MIN_ZOOM = 0.25;
 var MAX_ZOOM = 3;
@@ -7738,16 +7854,16 @@ var Canvas = () => {
   const zoomOut = () => setCanvasZoom((z) => Math.max(z - ZOOM_STEP, MIN_ZOOM));
   const resetZoom = () => setCanvasZoom(1);
   const [showTransition, setShowTransition] = useState21(false);
-  const isResizingRef = useRef14(false);
+  const isResizingRef = useRef15(false);
   const defaultRender = useMemo22(() => {
-    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx50(Fragment13, { children });
+    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx51(Fragment13, { children });
     return EditorDefault;
   }, []);
   const CustomPreview = useMemo22(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback18(() => {
+  const getFrameDimensions = useCallback19(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -7768,8 +7884,8 @@ var Canvas = () => {
     }, 500);
   }, []);
   const appStoreApi = useAppStoreApi();
-  const autoSelectingRef = useRef14(true);
-  const pickClosestViewport = useCallback18(() => {
+  const autoSelectingRef = useRef15(true);
+  const pickClosestViewport = useCallback19(() => {
     var _a2, _b2;
     if (typeof window === "undefined") return null;
     const viewportWidth = window.innerWidth;
@@ -7862,10 +7978,10 @@ var Canvas = () => {
     appStoreApi,
     setUi
   ]);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "div",
     {
-      className: getClassName30({
+      className: getClassName31({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas
@@ -7880,16 +7996,16 @@ var Canvas = () => {
           });
         }
       },
-      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 }) })
+      children: /* @__PURE__ */ jsxs21("div", { className: getClassName31("inner"), ref: frameRef, children: [
+        !disableZoomControls && /* @__PURE__ */ jsxs21("div", { className: getClassName31("zoomControls"), children: [
+          /* @__PURE__ */ jsx51(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx51(Minus, { size: 14 }) }),
+          /* @__PURE__ */ jsx51(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ jsx51(RotateCcw, { size: 14 }) }),
+          /* @__PURE__ */ jsx51(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx51(Plus, { size: 14 }) })
         ] }),
-        /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsxs21(
           "div",
           {
-            className: getClassName30("rootColumn"),
+            className: getClassName31("rootColumn"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
               transform: disableZoomControls ? void 0 : `scale(${canvasZoom})`,
@@ -7897,7 +8013,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__ */ jsx50("div", { className: getClassName30("browserBar"), children: /* @__PURE__ */ jsx50(
+              iframe.enabled && /* @__PURE__ */ jsx51("div", { className: getClassName31("browserBar"), children: /* @__PURE__ */ jsx51(
                 BrowserBar,
                 {
                   onViewportChange: (viewport) => {
@@ -7914,23 +8030,23 @@ var Canvas = () => {
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsx50(
+              /* @__PURE__ */ jsx51(
                 "div",
                 {
-                  className: getClassName30("root"),
+                  className: getClassName31("root"),
                   suppressHydrationWarning: true,
                   id: "editor-canvas-root",
                   onTransitionEnd: () => {
                     setShowTransition(false);
                     isResizingRef.current = false;
                   },
-                  children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
+                  children: /* @__PURE__ */ jsx51(CustomPreview, { children: /* @__PURE__ */ jsx51(Preview2, {}) })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
+        /* @__PURE__ */ jsx51("div", { className: getClassName31("loader"), children: /* @__PURE__ */ jsx51(Loader, { size: 24 }) })
       ] })
     }
   );
@@ -7938,10 +8054,10 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback19, useEffect as useEffect24, useRef as useRef15, useState as useState22 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect24, useRef as useRef16, useState as useState22 } from "react";
 function useSidebarResize(position, dispatch) {
   const [width, setWidth] = useState22(null);
-  const sidebarRef = useRef15(null);
+  const sidebarRef = useRef16(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
   );
@@ -7975,7 +8091,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback19(
+  const handleResizeEnd = useCallback20(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -8022,26 +8138,26 @@ init_react_import();
 
 // components/Editor/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback20, useRef as useRef16 } from "react";
+import { useCallback as useCallback21, useRef as useRef17 } from "react";
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default27 = { "ResizeHandle": "_ResizeHandle_1u3rv_2", "ResizeHandle--left": "_ResizeHandle--left_1u3rv_16", "ResizeHandle--right": "_ResizeHandle--right_1u3rv_20" };
+var styles_module_default28 = { "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 jsx51 } from "react/jsx-runtime";
-var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default27);
+import { jsx as jsx52 } from "react/jsx-runtime";
+var getClassName32 = get_class_name_factory_default("ResizeHandle", styles_module_default28);
 var ResizeHandle = ({
   position,
   sidebarRef,
   onResize,
   onResizeEnd
 }) => {
-  const handleRef = useRef16(null);
-  const isDragging = useRef16(false);
-  const startX = useRef16(0);
-  const startWidth = useRef16(0);
-  const handleMouseMove = useCallback20(
+  const handleRef = useRef17(null);
+  const isDragging = useRef17(false);
+  const startX = useRef17(0);
+  const startWidth = useRef17(0);
+  const handleMouseMove = useCallback21(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -8052,7 +8168,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback20(() => {
+  const handleMouseUp = useCallback21(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -8067,7 +8183,7 @@ var ResizeHandle = ({
     const finalWidth = ((_a = sidebarRef.current) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
     onResizeEnd(finalWidth);
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback20(
+  const handleMouseDown = useCallback21(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -8085,11 +8201,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       ref: handleRef,
-      className: getClassName31({ [position]: true }),
+      className: getClassName32({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -8097,11 +8213,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_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" };
+var styles_module_default29 = { "Sidebar": "_Sidebar_14k7q_1", "Sidebar--isVisible": "_Sidebar--isVisible_14k7q_9", "Sidebar--left": "_Sidebar--left_14k7q_13", "Sidebar--right": "_Sidebar--right_14k7q_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_14k7q_37" };
 
 // components/Editor/components/Sidebar/index.tsx
-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);
+import { Fragment as Fragment14, jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+var getClassName33 = get_class_name_factory_default("Sidebar", styles_module_default29);
 var Sidebar = ({
   position,
   sidebarRef,
@@ -8110,16 +8226,16 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs21(Fragment14, { children: [
-    /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs22(Fragment14, { children: [
+    /* @__PURE__ */ jsx53(
       "div",
       {
         ref: sidebarRef,
-        className: getClassName32({ [position]: true, isVisible }),
+        className: getClassName33({ [position]: true, isVisible }),
         children
       }
     ),
-    /* @__PURE__ */ jsx52("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx53("div", { className: `${getClassName33("resizeHandle")}`, children: /* @__PURE__ */ jsx53(
       ResizeHandle,
       {
         position,
@@ -8133,7 +8249,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback22 } from "react";
 
 // lib/should-block-editing-hotkey.ts
 init_react_import();
@@ -8173,7 +8289,7 @@ var shouldBlockEditingHotkey = (e) => {
 // lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = useCallback21(
+  const deleteSelectedComponent = useCallback22(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) {
@@ -8199,7 +8315,7 @@ var useDeleteHotkeys = () => {
 
 // lib/use-clipboard-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback22 } from "react";
+import { useCallback as useCallback23 } from "react";
 var CLIPBOARD_MARKER = "reacteditor/component";
 var isComponentData = (value) => {
   var _a;
@@ -8219,7 +8335,7 @@ var parsePayload = (text) => {
 };
 var useClipboardHotkeys = () => {
   const appStore = useAppStoreApi();
-  const writeSelectionToClipboard = useCallback22(() => {
+  const writeSelectionToClipboard = useCallback23(() => {
     var _a;
     const { selectedItem } = appStore.getState();
     if (!selectedItem) return false;
@@ -8231,14 +8347,14 @@ var useClipboardHotkeys = () => {
     });
     return true;
   }, [appStore]);
-  const copySelectedComponent = useCallback22(
+  const copySelectedComponent = useCallback23(
     (e) => {
       if (shouldBlockEditingHotkey(e)) return false;
       return writeSelectionToClipboard();
     },
     [writeSelectionToClipboard]
   );
-  const cutSelectedComponent = useCallback22(
+  const cutSelectedComponent = useCallback23(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -8257,7 +8373,7 @@ var useClipboardHotkeys = () => {
     },
     [appStore, writeSelectionToClipboard]
   );
-  const pasteComponent = useCallback22(
+  const pasteComponent = useCallback23(
     (e) => {
       var _a, _b;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -8294,12 +8410,12 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
 init_react_import();
-var styles_module_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" };
+var styles_module_default30 = { "Nav": "_Nav_1g4tk_1", "Nav-list": "_Nav-list_1g4tk_18", "Nav-footer": "_Nav-footer_1g4tk_42", "NavItem-link": "_NavItem-link_1g4tk_55", "NavItem-linkLabel": "_NavItem-linkLabel_1g4tk_83", "NavItem": "_NavItem_1g4tk_55", "NavItem-linkIcon": "_NavItem-linkIcon_1g4tk_108", "NavItem--active": "_NavItem--active_1g4tk_121", "NavItem--mobileOnly": "_NavItem--mobileOnly_1g4tk_132", "NavItem--desktopOnly": "_NavItem--desktopOnly_1g4tk_137" };
 
 // components/Editor/components/Nav/index.tsx
-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);
+import { jsx as jsx54, jsxs as jsxs23 } from "react/jsx-runtime";
+var getClassName34 = get_class_name_factory_default("Nav", styles_module_default30);
+var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default30);
 var MenuItem = ({
   label,
   icon,
@@ -8308,7 +8424,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "li",
     {
       className: getClassNameItem3({
@@ -8316,9 +8432,9 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      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 })
+      children: onClick && /* @__PURE__ */ jsxs23("div", { className: getClassNameItem3("link"), onClick, children: [
+        icon && /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+        /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
     }
   );
@@ -8327,17 +8443,17 @@ var Nav = ({
   items,
   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 })
+  return /* @__PURE__ */ jsxs23("nav", { className: getClassName34(), children: [
+    /* @__PURE__ */ jsx54("ul", { className: getClassName34("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx54(MenuItem, __spreadValues({}, item), key)) }),
+    footer && /* @__PURE__ */ jsx54("div", { className: getClassName34("footer"), children: footer })
   ] });
 };
 
 // components/Editor/components/Layout/index.tsx
-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);
+import { Fragment as Fragment15, jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
+var getClassName35 = get_class_name_factory_default("Editor", styles_module_default23);
+var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default23);
+var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default23);
 var FieldSideBarToolbar = () => {
   const appStore = useAppStoreApi();
   const { onPublish } = usePropsContext();
@@ -8348,30 +8464,30 @@ var FieldSideBarToolbar = () => {
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || DefaultOverride
   );
-  return /* @__PURE__ */ jsxs23("div", { className: getClassName34("fieldSideBarToolbar"), children: [
-    /* @__PURE__ */ jsxs23("div", { className: getClassName34("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs24("div", { className: getClassName35("fieldSideBarToolbar"), children: [
+    /* @__PURE__ */ jsxs24("div", { className: getClassName35("fieldSideBarHistory"), children: [
+      /* @__PURE__ */ jsx55(
         IconButton,
         {
           type: "button",
           title: "undo",
           disabled: !hasPast,
           onClick: back,
-          children: /* @__PURE__ */ jsx54(Undo2, { size: 18 })
+          children: /* @__PURE__ */ jsx55(Undo2, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx54(
+      /* @__PURE__ */ jsx55(
         IconButton,
         {
           type: "button",
           title: "redo",
           disabled: !hasFuture,
           onClick: forward,
-          children: /* @__PURE__ */ jsx54(Redo2, { size: 18 })
+          children: /* @__PURE__ */ jsx55(Redo2, { size: 18 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx54("div", { className: getClassName34("fieldSideBarActions"), children: /* @__PURE__ */ jsx54(CustomHeaderActions, { children: /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55("div", { className: getClassName35("fieldSideBarActions"), children: /* @__PURE__ */ jsx55(CustomHeaderActions, { children: /* @__PURE__ */ jsx55(
       Button,
       {
         onClick: () => {
@@ -8390,9 +8506,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__ */ jsxs23(Fragment15, { children: [
-    /* @__PURE__ */ jsx54(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ jsx54(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx54(Fields, {}) })
+  return /* @__PURE__ */ jsxs24(Fragment15, { children: [
+    /* @__PURE__ */ jsx55(FieldSideBarToolbar, {}),
+    /* @__PURE__ */ jsx55(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx55(Fields, {}) })
   ] });
 };
 var PluginTab = ({
@@ -8400,7 +8516,7 @@ var PluginTab = ({
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
@@ -8498,11 +8614,11 @@ var Layout = ({ children }) => {
   const [mobilePanelHeight, setMobilePanelHeight] = useState23(
     null
   );
-  const mobilePanelRef = useRef17(null);
-  const isDraggingMobile = useRef17(false);
-  const dragStartY = useRef17(0);
-  const dragStartHeight = useRef17(0);
-  const handleMobileDragStart = useCallback23(
+  const mobilePanelRef = useRef18(null);
+  const isDraggingMobile = useRef18(false);
+  const dragStartY = useRef18(0);
+  const dragStartHeight = useRef18(0);
+  const handleMobileDragStart = useCallback24(
     (clientY) => {
       isDraggingMobile.current = true;
       dragStartY.current = clientY;
@@ -8513,7 +8629,7 @@ var Layout = ({ children }) => {
     },
     []
   );
-  const handleMobileDragMove = useCallback23((clientY) => {
+  const handleMobileDragMove = useCallback24((clientY) => {
     if (!isDraggingMobile.current) return;
     const delta = dragStartY.current - clientY;
     const viewportHeight = window.innerHeight;
@@ -8522,7 +8638,7 @@ var Layout = ({ children }) => {
     const newH = Math.min(maxH, Math.max(minH, dragStartHeight.current + delta));
     setMobilePanelHeight(newH);
   }, []);
-  const handleMobileDragEnd = useCallback23(() => {
+  const handleMobileDragEnd = useCallback24(() => {
     if (!isDraggingMobile.current) return;
     isDraggingMobile.current = false;
     document.body.style.userSelect = "";
@@ -8567,7 +8683,7 @@ var Layout = ({ children }) => {
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx54(Sun, { size: 18 }) : /* @__PURE__ */ jsx54(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx55(Sun, { size: 18 }) : /* @__PURE__ */ jsx55(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")),
@@ -8592,7 +8708,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx54(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx55(ToyBrick, {}),
           onClick: () => {
             var _a2;
             setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
@@ -8631,17 +8747,17 @@ var Layout = ({ children }) => {
   if (mobilePanelHeight && leftSideBarVisible) {
     mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
-      className: `Editor ${getClassName34({
+      className: `Editor ${getClassName35({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx54(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx54(CustomEditor, { children: children || /* @__PURE__ */ jsx54(FrameProvider, { children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx55(CustomEditor, { children: children || /* @__PURE__ */ jsx55(FrameProvider, { children: /* @__PURE__ */ jsx55(
           "div",
           {
             className: getLayoutClassName({
@@ -8653,17 +8769,17 @@ var Layout = ({ children }) => {
               mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs23(
+            children: /* @__PURE__ */ jsxs24(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
                 children: [
-                  /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx55(
                     Nav,
                     {
                       items: pluginItems,
-                      footer: /* @__PURE__ */ jsx54(
+                      footer: /* @__PURE__ */ jsx55(
                         IconButton,
                         {
                           type: "button",
@@ -8674,19 +8790,19 @@ var Layout = ({ children }) => {
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs23(
+                  /* @__PURE__ */ jsxs24(
                     "div",
                     {
                       ref: mobilePanelRef,
                       className: getLayoutClassName("mobilePanel"),
                       children: [
-                        /* @__PURE__ */ jsx54(
+                        /* @__PURE__ */ jsx55(
                           "div",
                           {
                             className: getLayoutClassName("mobileDragHandle"),
                             onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
                             onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ jsx54(
+                            children: /* @__PURE__ */ jsx55(
                               "div",
                               {
                                 className: getLayoutClassName("mobileDragHandlePill")
@@ -8694,17 +8810,17 @@ var Layout = ({ children }) => {
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx54(
+                        /* @__PURE__ */ jsx55(
                           "div",
                           {
                             className: getLayoutClassName("mobilePanelContent"),
                             children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx54(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx55(
                                 PluginTab,
                                 {
                                   visible: currentPlugin === id,
                                   mobileOnly,
-                                  children: /* @__PURE__ */ jsx54(Render2, {})
+                                  children: /* @__PURE__ */ jsx55(Render2, {})
                                 },
                                 id
                               )
@@ -8714,7 +8830,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55(
                     Sidebar,
                     {
                       position: "left",
@@ -8723,20 +8839,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx54(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx55(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ jsx54(Render2, {})
+                            children: /* @__PURE__ */ jsx55(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx54(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx54(
+                  /* @__PURE__ */ jsx55(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx55(
                     Sidebar,
                     {
                       position: "right",
@@ -8744,7 +8860,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx55(FieldSideBar, {})
                     }
                   )
                 ]
@@ -8752,17 +8868,17 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx54("div", { id: "editor-portal-root", className: getClassName34("portal") })
+        /* @__PURE__ */ jsx55("div", { id: "editor-portal-root", className: getClassName35("portal") })
       ]
     }
   );
 };
 
 // components/Editor/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx55(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx56(propsContext.Provider, { value: props, children: props.children });
 }
 var usePropsContext = () => useContext15(propsContext);
 function EditorProvider({ children }) {
@@ -8876,7 +8992,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback24(
+  const generateAppStore = useCallback25(
     (state) => {
       return {
         instanceId,
@@ -8925,7 +9041,7 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef18(null);
+  const previousData = useRef19(null);
   useEffect26(() => {
     return appStore.subscribe(
       (s) => s.state.data,
@@ -8946,10 +9062,10 @@ function EditorProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx55(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx55(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ jsx56(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx56(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor3(props) {
-  return /* @__PURE__ */ jsx55(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx56(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(Layout, { children: props.children }) })) }));
 }
 Editor3.Components = Components;
 Editor3.Fields = Fields;
@@ -8982,12 +9098,12 @@ function pageMetadata(data) {
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  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, {}) })
+  render: () => /* @__PURE__ */ jsxs25("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx57(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx57(Components, {}) }),
+    /* @__PURE__ */ jsx57(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx57(Outline, {}) })
   ] })
 });