@reacteditor/core 0.0.15 → 0.0.17

package/dist/{chunk-RAMNEU3M.mjs → chunk-AXB6UJ2P.mjs}

@@ -1,13 +1,13 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-647NZJYM.mjs";
+} from "./chunk-2A2HBRLV.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-TFAZFGYZ.mjs";
+} from "./chunk-OAOKQORI.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -16,7 +16,7 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-3CGBQNX4.mjs";
+} from "./chunk-AD67LVXW.mjs";
 import {
   Check,
   ChevronDown,
@@ -42,7 +42,6 @@ import {
   SlidersHorizontal,
   Smartphone,
   Sun,
-  Tablet,
   ToyBrick,
   Trash,
   Undo2,
@@ -50,7 +49,7 @@ import {
   X,
   appStoreContext,
   createAppStore,
-  defaultViewports,
+  getBox,
   monitorHotkeys,
   reorder,
   replace,
@@ -61,7 +60,7 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-T43H325W.mjs";
+} from "./chunk-NUBRSWFJ.mjs";
 import {
   getItem,
   insert,
@@ -70,11 +69,12 @@ import {
   populateIds
 } from "./chunk-M4JDRFYB.mjs";
 import {
-  defaultAppState
-} from "./chunk-NPC7A3V3.mjs";
+  defaultAppState,
+  defaultViewports
+} from "./chunk-FTVOCMGV.mjs";
 import {
   get_class_name_factory_default
-} from "./chunk-Y2EFNT5P.mjs";
+} from "./chunk-DQU3HIP4.mjs";
 import {
   defaultSlots,
   expandNode,
@@ -2146,7 +2146,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment3, jsx as jsx20 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-7UIJWCPN.mjs").then((m) => ({
+  () => import("./Editor-RY6D73N6.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4698,12 +4698,12 @@ import {
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-7UIJWCPN.mjs").then((m) => ({
+  () => import("./Editor-RY6D73N6.mjs").then((m) => ({
     default: m.Editor
   }))
 );
 var RichTextRender = lazy2(
-  () => import("./Render-STFB5CNO.mjs").then((m) => ({
+  () => import("./Render-IDDFFANP.mjs").then((m) => ({
     default: m.RichTextRender
   }))
 );
@@ -6013,6 +6013,121 @@ function useGetEditor() {
   return useEditorApi.getState;
 }
 
+// plugins/blocks/index.tsx
+init_react_import();
+
+// components/Editor/components/Components/index.tsx
+init_react_import();
+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_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 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);
+  const components = useAppStore((s) => s.config.components);
+  const categoriesConfig = useAppStore((s) => s.config.categories);
+  const [search, setSearch] = useState17("");
+  const Wrapper = useMemo14(() => {
+    if (overrides.components) {
+      console.warn(
+        "The `components` override has been deprecated and renamed to `drawer`"
+      );
+    }
+    return overrides.components || overrides.drawer || "div";
+  }, [overrides]);
+  const groups = useMemo14(() => {
+    var _a2;
+    const query = search.trim().toLowerCase();
+    const entries = Object.entries(components != null ? components : {}).filter(([name, conf]) => {
+      var _a3;
+      if (!query) return true;
+      const label = ((_a3 = conf.label) != null ? _a3 : name).toLowerCase();
+      return label.includes(query);
+    });
+    if (!entries.length) return [];
+    const buckets = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      const [, conf] = entry;
+      const key = conf.category;
+      const bucket = (_a2 = buckets.get(key)) != null ? _a2 : [];
+      bucket.push(entry);
+      buckets.set(key, bucket);
+    }
+    return Array.from(buckets.entries());
+  }, [components, search]);
+  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: getClassName20("searchInput"),
+          placeholder: "search",
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      )
+    ] }),
+    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__ */ jsx36(
+        ComponentList.Item,
+        {
+          name,
+          label: (_a2 = conf.label) != null ? _a2 : name,
+          icon: conf.icon
+        },
+        name
+      );
+    }) }) : groups.map(([category, entries]) => {
+      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__ */ jsx36(
+        ComponentList,
+        {
+          id: categoryKey,
+          title,
+          children: entries.map(([name, conf]) => {
+            var _a3;
+            return /* @__PURE__ */ jsx36(
+              ComponentList.Item,
+              {
+                name,
+                label: (_a3 = conf.label) != null ? _a3 : name,
+                icon: conf.icon
+              },
+              name
+            );
+          })
+        },
+        categoryKey
+      );
+    })
+  ] });
+};
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
+init_react_import();
+var styles_module_default16 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
+
+// plugins/blocks/index.tsx
+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__ */ jsx37("div", { className: getClassName21(), children: /* @__PURE__ */ jsx37(Components, {}) }),
+  icon: /* @__PURE__ */ jsx37(Plus, {})
+});
+
 // plugins/fields/index.tsx
 init_react_import();
 
@@ -6021,11 +6136,11 @@ 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_default15 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
+var styles_module_default17 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -6037,7 +6152,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return useMemo14(() => {
+  return useMemo15(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c, _d;
       const [componentId] = zoneCompound.split(":");
@@ -6068,26 +6183,26 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
-var getClassName20 = get_class_name_factory_default("Breadcrumbs", styles_module_default15);
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("Breadcrumbs", styles_module_default17);
 var Breadcrumbs = ({
   children,
   numParents = 1
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs13("div", { className: getClassName20(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName20("breadcrumb"), children: [
-      /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs14("div", { className: getClassName22(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs14("div", { className: getClassName22("breadcrumb"), children: [
+      /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
-          className: getClassName20("breadcrumbLabel"),
+          className: getClassName22("breadcrumbLabel"),
           onClick: () => setUi({ itemSelector: breadcrumb.selector }),
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx36(ChevronRight, { size: 14 })
+      /* @__PURE__ */ jsx38(ChevronRight, { size: 14 })
     ] }, i)),
     children
   ] });
@@ -6098,7 +6213,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "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_default18 = { "EditorFields": "_EditorFields_3dnua_1", "EditorFields--isLoading": "_EditorFields--isLoading_3dnua_6", "EditorFields-loadingOverlay": "_EditorFields-loadingOverlay_3dnua_10", "EditorFields-loadingOverlayInner": "_EditorFields-loadingOverlayInner_3dnua_25", "EditorFields-field": "_EditorFields-field_3dnua_32", "EditorFields--wrapFields": "_EditorFields--wrapFields_3dnua_36", "EditorFields-syncButton": "_EditorFields-syncButton_3dnua_46", "EditorFields-syncButton--unlinked": "_EditorFields-syncButton--unlinked_3dnua_78" };
 
 // components/Editor/components/Fields/index.tsx
 import {
@@ -6106,15 +6221,15 @@ import {
   useCallback as useCallback15,
   useContext as useContext11,
   useEffect as useEffect19,
-  useMemo as useMemo15
+  useMemo as useMemo16
 } from "react";
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName21 = get_class_name_factory_default("EditorFields", styles_module_default16);
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("EditorFields", styles_module_default18);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx37(Fragment8, { children });
+  return /* @__PURE__ */ jsx39(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -6194,7 +6309,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx37("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39("div", { className: getClassName23("field"), children: /* @__PURE__ */ jsx39(
     AutoFieldPrivate,
     {
       field,
@@ -6207,12 +6322,12 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = useMemo15(() => {
+  const initialValue = useMemo16(() => {
     var _a;
     const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
     return { [fieldName]: value };
   }, []);
-  return /* @__PURE__ */ jsx37(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx37(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ jsx39(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx39(FieldsChildInner, { fieldName }) });
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var GlobalSyncButton = () => {
@@ -6242,12 +6357,12 @@ var GlobalSyncButton = () => {
     });
   });
   const syncButtonClass = [
-    getClassName21("syncButton"),
-    isUnlinked ? styles_module_default16["EditorFields-syncButton--unlinked"] : null
+    getClassName23("syncButton"),
+    isUnlinked ? styles_module_default18["EditorFields-syncButton--unlinked"] : null
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs14("button", { type: "button", className: syncButtonClass, onClick, children: [
-    /* @__PURE__ */ jsx37(Link, { size: 14 }),
-    /* @__PURE__ */ jsx37("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
+  return /* @__PURE__ */ jsxs15("button", { type: "button", className: syncButtonClass, onClick, children: [
+    /* @__PURE__ */ jsx39(Link, { size: 14 }),
+    /* @__PURE__ */ jsx39("span", { children: isUnlinked ? "Link to shared" : "Linked to shared" })
   ] });
 };
 var FieldsInternal = ({ wrapFields = true }) => {
@@ -6274,20 +6389,20 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo15(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs14(
+  const Wrapper = useMemo16(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ jsxs15(
     "form",
     {
-      className: getClassName21({ wrapFields }),
+      className: getClassName23({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsxs14(Wrapper, { isLoading, itemSelector, children: [
-          /* @__PURE__ */ jsx37(GlobalSyncButton, {}),
-          fieldNames.map((fieldName) => /* @__PURE__ */ jsx37(FieldsChildMemo, { fieldName }, fieldName))
+        /* @__PURE__ */ jsxs15(Wrapper, { isLoading, itemSelector, children: [
+          /* @__PURE__ */ jsx39(GlobalSyncButton, {}),
+          fieldNames.map((fieldName) => /* @__PURE__ */ jsx39(FieldsChildMemo, { fieldName }, fieldName))
         ] }),
-        isLoading && /* @__PURE__ */ jsx37("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx37("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx37(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx39("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ jsx39("div", { className: getClassName23("loadingOverlayInner"), children: /* @__PURE__ */ jsx39(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -6296,11 +6411,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_default17 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+var styles_module_default19 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("FieldsPlugin", styles_module_default17);
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("FieldsPlugin", styles_module_default19);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     var _a, _b;
@@ -6312,124 +6427,26 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "Fields",
-  render: () => /* @__PURE__ */ jsxs15("div", { className: getClassName22(), children: [
-    /* @__PURE__ */ jsx38("div", { className: getClassName22("header"), children: /* @__PURE__ */ jsx38(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx38(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx38(Fields, {})
+  render: () => /* @__PURE__ */ jsxs16("div", { className: getClassName24(), children: [
+    /* @__PURE__ */ jsx40("div", { className: getClassName24("header"), children: /* @__PURE__ */ jsx40(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx40(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx40(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx38(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ jsx40(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
 // components/Editor/index.tsx
 init_react_import();
 import {
-  createContext as createContext9,
-  useCallback as useCallback22,
-  useContext as useContext16,
-  useEffect as useEffect25,
-  useMemo as useMemo23,
-  useRef as useRef16,
-  useState as useState23
+  createContext as createContext8,
+  useCallback as useCallback25,
+  useContext as useContext15,
+  useEffect as useEffect26,
+  useMemo as useMemo24,
+  useRef as useRef19,
+  useState as useState24
 } from "react";
 
-// components/Editor/components/Components/index.tsx
-init_react_import();
-import { useMemo as useMemo16, 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_default18 = { "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 jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("Components", styles_module_default18);
-var Components = () => {
-  var _a;
-  const overrides = useAppStore((s) => s.overrides);
-  const components = useAppStore((s) => s.config.components);
-  const categoriesConfig = useAppStore((s) => s.config.categories);
-  const [search, setSearch] = useState17("");
-  const Wrapper = useMemo16(() => {
-    if (overrides.components) {
-      console.warn(
-        "The `components` override has been deprecated and renamed to `drawer`"
-      );
-    }
-    return overrides.components || overrides.drawer || "div";
-  }, [overrides]);
-  const groups = useMemo16(() => {
-    var _a2;
-    const query = search.trim().toLowerCase();
-    const entries = Object.entries(components != null ? components : {}).filter(([name, conf]) => {
-      var _a3;
-      if (!query) return true;
-      const label = ((_a3 = conf.label) != null ? _a3 : name).toLowerCase();
-      return label.includes(query);
-    });
-    if (!entries.length) return [];
-    const buckets = /* @__PURE__ */ new Map();
-    for (const entry of entries) {
-      const [, conf] = entry;
-      const key = conf.category;
-      const bucket = (_a2 = buckets.get(key)) != null ? _a2 : [];
-      bucket.push(entry);
-      buckets.set(key, bucket);
-    }
-    return Array.from(buckets.entries());
-  }, [components, search]);
-  return /* @__PURE__ */ jsxs16(Wrapper, { children: [
-    /* @__PURE__ */ jsxs16("div", { className: getClassName23("search"), children: [
-      /* @__PURE__ */ jsx39("div", { className: getClassName23("searchIcon"), children: /* @__PURE__ */ jsx39(Search, { size: 14 }) }),
-      /* @__PURE__ */ jsx39(
-        "input",
-        {
-          type: "search",
-          className: getClassName23("searchInput"),
-          placeholder: "search",
-          value: search,
-          onChange: (e) => setSearch(e.target.value)
-        }
-      )
-    ] }),
-    groups.length === 0 ? /* @__PURE__ */ jsx39("div", { className: getClassName23("empty"), children: "No results match your search" }) : groups.length <= 1 && !((_a = groups[0]) == null ? void 0 : _a[0]) ? /* @__PURE__ */ jsx39(ComponentList, { id: "all", children: groups[0][1].map(([name, conf]) => {
-      var _a2;
-      return /* @__PURE__ */ jsx39(
-        ComponentList.Item,
-        {
-          name,
-          label: (_a2 = conf.label) != null ? _a2 : name,
-          icon: conf.icon
-        },
-        name
-      );
-    }) }) : groups.map(([category, entries]) => {
-      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__ */ jsx39(
-        ComponentList,
-        {
-          id: categoryKey,
-          title,
-          children: entries.map(([name, conf]) => {
-            var _a3;
-            return /* @__PURE__ */ jsx39(
-              ComponentList.Item,
-              {
-                name,
-                label: (_a3 = conf.label) != null ? _a3 : name,
-                icon: conf.icon
-              },
-              name
-            );
-          })
-        },
-        categoryKey
-      );
-    })
-  ] });
-};
-
 // components/Editor/components/Preview/index.tsx
 init_react_import();
 import { useCallback as useCallback16, useEffect as useEffect21, useRef as useRef11, useMemo as useMemo17 } from "react";
@@ -6444,7 +6461,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx40 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx41 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -6661,7 +6678,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx40(Fragment9, { children });
+  return /* @__PURE__ */ jsx41(Fragment9, { children });
 };
 var autoFrameContext = createContext6({});
 var useFrame = () => useContext12(autoFrameContext);
@@ -6708,60 +6725,17 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  useEffect20(() => {
-    const doc = ctx.document;
-    const iframeEl = frameRef.current;
-    if (!doc || !iframeEl || !stylesLoaded) return;
-    let scheduled = false;
-    const update = () => {
-      if (scheduled) return;
-      scheduled = true;
-      requestAnimationFrame(() => {
-        scheduled = false;
-        const html = doc.documentElement;
-        const body = doc.body;
-        if (!html || !body) return;
-        iframeEl.style.height = "0px";
-        const height = Math.max(
-          body.scrollHeight,
-          body.offsetHeight,
-          html.scrollHeight,
-          html.offsetHeight
-        );
-        if (height > 0) {
-          iframeEl.style.height = `${height}px`;
-        }
-      });
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(doc.body);
-    observer.observe(doc.documentElement);
-    const iframeObserver = new ResizeObserver(update);
-    iframeObserver.observe(iframeEl);
-    const mutationObserver = new MutationObserver(update);
-    mutationObserver.observe(doc.body, {
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
-    return () => {
-      observer.disconnect();
-      iframeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, [ctx.document, frameRef, stylesLoaded]);
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
       id,
-      srcDoc: '<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /></head><body style="touch-action:none"><div id="frame-root" data-editor-entry></div></body></html>',
+      srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root" data-editor-entry></div></body></html>',
       ref: frameRef,
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx40(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx41(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx41(
         CopyHostStyles,
         {
           debug,
@@ -6777,11 +6751,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_default19 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var styles_module_default20 = { "EditorPreview": "_EditorPreview_1ybfe_1", "EditorPreview-frame": "_EditorPreview-frame_1ybfe_6" };
 
 // components/Editor/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx41 } from "react/jsx-runtime";
-var getClassName24 = get_class_name_factory_default("EditorPreview", styles_module_default19);
+import { Fragment as Fragment10, jsx as jsx42 } from "react/jsx-runtime";
+var getClassName25 = get_class_name_factory_default("EditorPreview", styles_module_default20);
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -6807,14 +6781,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__ */ jsx41(Fragment10, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx42(Fragment10, { children: propsWithSlots.children });
     },
     [config]
   );
   const Frame = useMemo17(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = useRef11(null);
-  const inner = !renderData ? /* @__PURE__ */ jsx41(
+  const inner = !renderData ? /* @__PURE__ */ jsx42(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       editor: {
@@ -6824,18 +6798,18 @@ var Preview2 = ({ id = "editor-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx41(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx42(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx41(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx42(Render, { data: renderData, config, metadata });
   useEffect21(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
-      className: getClassName24(),
+      className: getClassName25(),
       id,
       "data-editor-preview": true,
       onClick: (e) => {
@@ -6844,11 +6818,11 @@ var Preview2 = ({ id = "editor-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx41(
+      children: iframe.enabled ? /* @__PURE__ */ jsx42(
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName24("frame"),
+          className: getClassName25("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -6857,18 +6831,18 @@ var Preview2 = ({ id = "editor-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx41(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx42(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx41(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx42(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx41(
+      ) : /* @__PURE__ */ jsx42(
         "div",
         {
           id: "preview-frame",
-          className: getClassName24("frame"),
+          className: getClassName25("frame"),
           ref,
           "data-editor-entry": true,
           children: inner
@@ -6886,7 +6860,7 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/LayerTree/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "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_default21 = { "LayerTree": "_LayerTree_3eixb_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_3eixb_11", "LayerTree-helper": "_LayerTree-helper_3eixb_17", "Layer": "_Layer_3eixb_1", "Layer-inner": "_Layer-inner_3eixb_34", "Layer--containsZone": "_Layer--containsZone_3eixb_42", "Layer-clickable": "_Layer-clickable_3eixb_46", "Layer--isSelected": "_Layer--isSelected_3eixb_68", "Layer-icon": "_Layer-icon_3eixb_80", "Layer-zoneIcon": "_Layer-zoneIcon_3eixb_81", "Layer-chevron": "_Layer-chevron_3eixb_85", "Layer--childIsSelected": "_Layer--childIsSelected_3eixb_97", "Layer-zones": "_Layer-zones_3eixb_101", "Layer-title": "_Layer-title_3eixb_117", "Layer-name": "_Layer-name_3eixb_130", "Layer--isGlobal": "_Layer--isGlobal_3eixb_150", "Layer--isUnlinked": "_Layer--isUnlinked_3eixb_171", "Layer-unlinkedGlyph": "_Layer-unlinkedGlyph_3eixb_175" };
 
 // components/LayerTree/index.tsx
 import {
@@ -6896,9 +6870,9 @@ import {
   useRef as useRef12
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("LayerTree", styles_module_default20);
-var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default20);
+import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("LayerTree", styles_module_default21);
+var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default21);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
@@ -7052,7 +7026,7 @@ var Layer = forwardRef2(function Layer2({
       "data-index": dataIndex,
       "data-editor-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx42("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -7077,34 +7051,34 @@ var Layer = forwardRef2(function Layer2({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: containsZone ? isSelected ? "Collapse" : "Expand" : void 0,
-                  children: containsZone && /* @__PURE__ */ jsx42(ChevronRight, { size: "12" })
+                  children: containsZone && /* @__PURE__ */ jsx43(ChevronRight, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
-                /* @__PURE__ */ jsx42("div", { className: getClassNameLayer("icon"), children: /* @__PURE__ */ jsx42(Component, { size: "16" }) }),
-                /* @__PURE__ */ jsx42("div", { className: getClassNameLayer("name"), children: node.label }),
-                isGlobal && isUnlinked && /* @__PURE__ */ jsx42(
+                /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("icon"), children: /* @__PURE__ */ jsx43(Component, { size: "16" }) }),
+                /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("name"), children: node.label }),
+                isGlobal && isUnlinked && /* @__PURE__ */ jsx43(
                   "div",
                   {
                     className: getClassNameLayer("unlinkedGlyph"),
                     title: "Unlinked from shared",
-                    children: /* @__PURE__ */ jsx42(Unlink2, { size: "12" })
+                    children: /* @__PURE__ */ jsx43(Unlink2, { size: "12" })
                   }
                 )
               ] })
             ]
           }
         ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx42(
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx43(
           "div",
           {
             className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ jsx42(
+            children: /* @__PURE__ */ jsx43(
               LayerTreeZone,
               {
                 depth: depth + 1,
@@ -7128,8 +7102,8 @@ var LayerTreeZone = ({
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
   return /* @__PURE__ */ jsxs17(Fragment11, { children: [
-    tree.label && /* @__PURE__ */ jsx42("div", { className: getClassName25("zoneTitle"), children: tree.label }),
-    shouldVirtualize ? /* @__PURE__ */ jsx42(
+    tree.label && /* @__PURE__ */ jsx43("div", { className: getClassName26("zoneTitle"), children: tree.label }),
+    shouldVirtualize ? /* @__PURE__ */ jsx43(
       VirtualizedLayerTreeItems,
       {
         depth,
@@ -7137,7 +7111,7 @@ var LayerTreeZone = ({
         selectedPathIds,
         tree
       }
-    ) : /* @__PURE__ */ jsx42(
+    ) : /* @__PURE__ */ jsx43(
       StaticLayerTreeItems,
       {
         depth,
@@ -7154,9 +7128,9 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ jsxs17("ul", { className: getClassName25(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx42("div", { className: getClassName25("helper"), children: "empty" }),
-    tree.items.map((node) => /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs17("ul", { className: getClassName26(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx43("div", { className: getClassName26("helper"), children: "empty" }),
+    tree.items.map((node) => /* @__PURE__ */ jsx43(
       Layer,
       {
         childIsSelected: selectedPathIds.has(node.itemId),
@@ -7202,7 +7176,7 @@ var VirtualizedLayerTreeItems = ({
     const gapSize = Math.max(virtualItem.start - previousEnd, 0);
     if (gapSize > 0) {
       renderedItems.push(
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "li",
           {
             "aria-hidden": "true",
@@ -7213,7 +7187,7 @@ var VirtualizedLayerTreeItems = ({
       );
     }
     renderedItems.push(
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(
         Layer,
         {
           childIsSelected: selectedPathIds.has(node.itemId),
@@ -7234,7 +7208,7 @@ var VirtualizedLayerTreeItems = ({
   const trailingGap = Math.max(totalSize - previousEnd, 0);
   if (trailingGap > 0) {
     renderedItems.push(
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx43(
         "li",
         {
           "aria-hidden": "true",
@@ -7244,8 +7218,8 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ jsxs17("ul", { className: getClassName25(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx42("div", { className: getClassName25("helper"), children: "empty" }),
+  return /* @__PURE__ */ jsxs17("ul", { className: getClassName26(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx43("div", { className: getClassName26("helper"), children: "empty" }),
     renderedItems
   ] });
 };
@@ -7254,7 +7228,7 @@ var LayerTree = ({
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx42(Fragment11, { children: trees.map((tree) => /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(Fragment11, { children: trees.map((tree) => /* @__PURE__ */ jsx43(
     LayerTreeZone,
     {
       depth: 0,
@@ -7279,7 +7253,7 @@ var findZonesForArea = (state, area) => {
 
 // components/Editor/components/Outline/index.tsx
 import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
@@ -7312,7 +7286,7 @@ var Outline = () => {
     [config, nodes, rootZones, zones]
   );
   const Wrapper = useMemo18(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx43(Wrapper, { children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(Wrapper, { children: /* @__PURE__ */ jsx44(
     LayerTree,
     {
       selectedId,
@@ -7419,11 +7393,17 @@ function splitGlobals(data, config) {
 
 // components/Editor/components/Layout/index.tsx
 init_react_import();
-import { useEffect as useEffect24, useMemo as useMemo22, useState as useState22 } from "react";
+import {
+  useCallback as useCallback24,
+  useEffect as useEffect25,
+  useMemo as useMemo23,
+  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_default21 = { "Editor": "_Editor_1d9v5_8", "Editor-portal": "_Editor-portal_1d9v5_21", "EditorLayout": "_EditorLayout_1d9v5_26", "EditorLayout-inner": "_EditorLayout-inner_1d9v5_30", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_1d9v5_44", "EditorLayout-header": "_EditorLayout-header_1d9v5_49", "EditorLayout-headerStart": "_EditorLayout-headerStart_1d9v5_62", "EditorLayout-headerCenter": "_EditorLayout-headerCenter_1d9v5_70", "EditorLayout-headerEnd": "_EditorLayout-headerEnd_1d9v5_81", "EditorLayout-headerHistory": "_EditorLayout-headerHistory_1d9v5_91", "EditorPluginTab": "_EditorPluginTab_1d9v5_110", "EditorPluginTab--visible": "_EditorPluginTab--visible_1d9v5_116", "EditorPluginTab-body": "_EditorPluginTab-body_1d9v5_121" };
+var styles_module_default22 = { "Editor": "_Editor_l0swf_19", "Editor-portal": "_Editor-portal_l0swf_32", "EditorLayout": "_EditorLayout_l0swf_37", "EditorLayout-inner": "_EditorLayout-inner_l0swf_41", "Editor--hidePlugins": "_Editor--hidePlugins_l0swf_72", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_l0swf_73", "EditorLayout--mounted": "_EditorLayout--mounted_l0swf_82", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_l0swf_86", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_l0swf_86", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_l0swf_91", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_l0swf_109", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_l0swf_129", "EditorLayout-mounted": "_EditorLayout-mounted_l0swf_146", "EditorLayout-header": "_EditorLayout-header_l0swf_187", "EditorHeader": "_EditorHeader_l0swf_194", "EditorHeader-plugins": "_EditorHeader-plugins_l0swf_221", "EditorHeader-pluginItem": "_EditorHeader-pluginItem_l0swf_235", "EditorHeader-pluginItem--mobileOnly": "_EditorHeader-pluginItem--mobileOnly_l0swf_241", "EditorHeader-pluginItem--desktopOnly": "_EditorHeader-pluginItem--desktopOnly_l0swf_246", "EditorHeader-urlBarSlot": "_EditorHeader-urlBarSlot_l0swf_256", "EditorHeader-actions": "_EditorHeader-actions_l0swf_274", "EditorHeader-history": "_EditorHeader-history_l0swf_282", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_l0swf_288", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_l0swf_308", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_l0swf_315", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_l0swf_329", "EditorPluginTab": "_EditorPluginTab_l0swf_336", "EditorPluginTab--visible": "_EditorPluginTab--visible_l0swf_342", "EditorPluginTab-body": "_EditorPluginTab-body_l0swf_347" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -7454,8 +7434,8 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx44 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx44(Fragment12, { children });
+import { Fragment as Fragment12, jsx as jsx45 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx45(Fragment12, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
@@ -7480,11 +7460,11 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "SidebarSection": "_SidebarSection_tt2oy_1", "SidebarSection-title": "_SidebarSection-title_tt2oy_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_tt2oy_20", "SidebarSection-content": "_SidebarSection-content_tt2oy_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_tt2oy_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_tt2oy_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_tt2oy_33", "SidebarSection-heading": "_SidebarSection-heading_tt2oy_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_tt2oy_88" };
+var styles_module_default23 = { "SidebarSection": "_SidebarSection_tt2oy_1", "SidebarSection-title": "_SidebarSection-title_tt2oy_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_tt2oy_20", "SidebarSection-content": "_SidebarSection-content_tt2oy_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_tt2oy_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_tt2oy_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_tt2oy_33", "SidebarSection-heading": "_SidebarSection-heading_tt2oy_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_tt2oy_88" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName26 = get_class_name_factory_default("SidebarSection", styles_module_default22);
+import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("SidebarSection", styles_module_default23);
 var SidebarSection = ({
   children,
   title,
@@ -7493,15 +7473,13 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  const showTitleBar = title !== null && title !== void 0;
-  const showBreadcrumbsRow = !!showBreadcrumbs;
-  return /* @__PURE__ */ jsxs18("div", { className: getClassName26({ noBorderTop }), style: { background }, children: [
-    (showTitleBar || showBreadcrumbsRow) && /* @__PURE__ */ jsx45("div", { className: getClassName26("title"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName26("breadcrumbs"), children: [
-      showBreadcrumbsRow && /* @__PURE__ */ jsx45(Breadcrumbs, {}),
-      showTitleBar && /* @__PURE__ */ jsx45("div", { className: getClassName26("heading"), children: /* @__PURE__ */ jsx45(Heading, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ jsxs18("div", { className: getClassName27({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx46("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName27("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx46(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx46("div", { className: getClassName27("heading"), children: /* @__PURE__ */ jsx46(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx45("div", { className: getClassName26("content"), children }),
-    isLoading && /* @__PURE__ */ jsx45("div", { className: getClassName26("loadingOverlay"), children: /* @__PURE__ */ jsx45(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx46("div", { className: getClassName27("content"), children }),
+    isLoading && /* @__PURE__ */ jsx46("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ jsx46(Loader, { size: 32 }) })
   ] });
 };
 
@@ -7510,102 +7488,323 @@ init_react_import();
 import {
   useCallback as useCallback19,
   useEffect as useEffect23,
-  useMemo as useMemo21,
-  useRef as useRef14,
-  useState as useState20
+  useMemo as useMemo22,
+  useRef as useRef15,
+  useState as useState21
 } from "react";
-import {
-  TransformWrapper,
-  TransformComponent,
-  useTransformComponent,
-  useTransformEffect
-} from "react-zoom-pan-pinch";
 
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
+// components/BrowserBar/index.tsx
 init_react_import();
-var styles_module_default23 = { "EditorCanvas": "_EditorCanvas_1h1vv_1", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_1h1vv_11", "EditorCanvas--canvasFullScreen": "_EditorCanvas--canvasFullScreen_1h1vv_31", "EditorCanvas-inner": "_EditorCanvas-inner_1h1vv_38", "EditorCanvas-bar": "_EditorCanvas-bar_1h1vv_50", "EditorCanvas-zoomViewport": "_EditorCanvas-zoomViewport_1h1vv_60", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_1h1vv_69", "EditorCanvas-frame": "_EditorCanvas-frame_1h1vv_74", "EditorCanvas-root": "_EditorCanvas-root_1h1vv_69", "EditorCanvas--ready": "_EditorCanvas--ready_1h1vv_98", "EditorCanvas-loader": "_EditorCanvas-loader_1h1vv_103", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_1h1vv_115", "EditorCanvas-toolbar": "_EditorCanvas-toolbar_1h1vv_128", "EditorCanvas-toolbarDivider": "_EditorCanvas-toolbarDivider_1h1vv_144", "EditorCanvas-zoomLevel": "_EditorCanvas-zoomLevel_1h1vv_152" };
-
-// components/Editor/components/Canvas/index.tsx
-import { useShallow as useShallow9 } from "zustand/react/shallow";
+import { useMemo as useMemo20, useRef as useRef13, useState as useState20 } from "react";
 
-// lib/frame-context.tsx
+// components/ui/Combobox/index.tsx
 init_react_import();
-import {
-  createContext as createContext7,
-  useContext as useContext14,
-  useRef as useRef13,
-  useMemo as useMemo20
-} from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var FrameContext = createContext7(null);
-var FrameProvider = ({
-  children
-}) => {
-  const frameRef = useRef13(null);
-  const value = useMemo20(
-    () => ({
-      frameRef
-    }),
-    []
-  );
-  return /* @__PURE__ */ jsx46(FrameContext.Provider, { value, children });
-};
-var useCanvasFrame = () => {
-  const context = useContext14(FrameContext);
-  if (context === null) {
-    throw new Error("useCanvasFrame must be used within a FrameProvider");
-  }
-  return context;
-};
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 
-// lib/theme-context.tsx
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
 init_react_import();
-import { createContext as createContext8, useContext as useContext15 } from "react";
-var ThemeContext = createContext8({
-  theme: "light",
-  toggleTheme: () => {
-  }
-});
-var useEditorTheme = () => useContext15(ThemeContext);
+var styles_module_default24 = { "EditorCombobox-input": "_EditorCombobox-input_12a2a_4", "EditorCombobox-trigger": "_EditorCombobox-trigger_12a2a_21", "EditorCombobox-triggerIcon": "_EditorCombobox-triggerIcon_12a2a_42", "EditorCombobox-positioner": "_EditorCombobox-positioner_12a2a_46", "EditorCombobox-content": "_EditorCombobox-content_12a2a_50", "EditorCombobox-list": "_EditorCombobox-list_12a2a_65", "EditorCombobox-item": "_EditorCombobox-item_12a2a_71", "EditorCombobox-itemIndicator": "_EditorCombobox-itemIndicator_12a2a_97", "EditorCombobox-empty": "_EditorCombobox-empty_12a2a_110" };
 
-// components/Editor/components/Canvas/index.tsx
-import { Fragment as Fragment13, jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("EditorCanvas", styles_module_default23);
-var MIN_ZOOM = 0.25;
-var MAX_ZOOM = 3;
-var PREVIEW_MAX_WIDTH = 1200;
-var DEVICE_VIEWPORTS = {
-  desktop: { width: "100%", height: "auto", label: "Desktop" },
-  tablet: { width: 768, height: "auto", label: "Tablet" },
-  mobile: { width: 360, height: "auto", label: "Mobile" }
-};
-var DEVICE_ORDER = ["desktop", "tablet", "mobile"];
-var DEVICE_ICONS = {
-  desktop: /* @__PURE__ */ jsx47(Monitor, { size: 14 }),
-  tablet: /* @__PURE__ */ jsx47(Tablet, { size: 14 }),
-  mobile: /* @__PURE__ */ jsx47(Smartphone, { size: 14 })
-};
-var ZoomConfigSync = () => {
-  const appStoreApi = useAppStoreApi();
-  useTransformEffect((ref) => {
-    const { zoomConfig, setZoomConfig } = appStoreApi.getState();
-    if (zoomConfig.zoom !== ref.state.scale) {
-      setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), { zoom: ref.state.scale }));
-    }
-  });
-  return null;
-};
-var ZoomLevel = ({ className }) => {
-  const scale = useTransformComponent((ctx) => ctx.state.scale);
-  return /* @__PURE__ */ jsx47("span", { className, children: `${Math.round(scale * 100)}%` });
+// components/ui/Combobox/index.tsx
+import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("EditorCombobox", styles_module_default24);
+var join = (...values) => values.filter(Boolean).join(" ");
+var mergeClassName = (base, override) => {
+  if (!override) return base;
+  if (typeof override === "function") {
+    return (state) => join(base, override(state));
+  }
+  return join(base, override);
 };
-var Canvas = () => {
-  const { frameRef } = useCanvasFrame();
-  const { disableZoomControls } = usePropsContext();
-  const {
+var Combobox = ComboboxPrimitive.Root;
+function ComboboxInput(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.Input,
+    __spreadValues({
+      "data-slot": "combobox-input",
+      className: mergeClassName(getClassName28("input"), className)
+    }, props)
+  );
+}
+function ComboboxContent(_a) {
+  var _b = _a, {
+    className,
+    side = "bottom",
+    sideOffset = 4,
+    align = "start",
+    alignOffset = 0,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "side",
+    "sideOffset",
+    "align",
+    "alignOffset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx47(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      className: getClassName28("positioner"),
+      children: /* @__PURE__ */ jsx47(
+        ComboboxPrimitive.Popup,
+        __spreadProps(__spreadValues({
+          "data-slot": "combobox-content",
+          className: mergeClassName(getClassName28("content"), className)
+        }, props), {
+          children
+        })
+      )
+    }
+  ) });
+}
+function ComboboxList(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.List,
+    __spreadValues({
+      "data-slot": "combobox-list",
+      className: mergeClassName(getClassName28("list"), className)
+    }, props)
+  );
+}
+function ComboboxItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs19(
+    ComboboxPrimitive.Item,
+    __spreadProps(__spreadValues({
+      "data-slot": "combobox-item",
+      className: mergeClassName(getClassName28("item"), className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx47("span", { className: getClassName28("itemIndicator"), children: /* @__PURE__ */ jsx47(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(Check, { size: 14 }) }) }),
+        children
+      ]
+    })
+  );
+}
+function ComboboxEmpty(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx47(
+    ComboboxPrimitive.Empty,
+    __spreadValues({
+      "data-slot": "combobox-empty",
+      className: mergeClassName(getClassName28("empty"), className)
+    }, props)
+  );
+}
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
+init_react_import();
+var styles_module_default25 = { "BrowserBar": "_BrowserBar_glswb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_glswb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_glswb_46", "BrowserBar-urlText": "_BrowserBar-urlText_glswb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_glswb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_glswb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_glswb_74", "BrowserBar-actions": "_BrowserBar-actions_glswb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_glswb_92" };
+
+// components/BrowserBar/index.tsx
+import { jsx as jsx48, jsxs as jsxs20 } from "react/jsx-runtime";
+var normalizeRoute = (raw) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return trimmed;
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+};
+var getClassName29 = get_class_name_factory_default("BrowserBar", styles_module_default25);
+var DEVICE_VIEWPORTS = {
+  desktop: { width: "100%", height: "auto", icon: "Monitor", label: "Desktop" },
+  mobile: { width: 360, height: "auto", icon: "Smartphone", label: "Mobile" }
+};
+var UrlBar = () => {
+  const { routes, currentRoute, onRouteChange } = usePropsContext();
+  const chrome = useChromeConfig();
+  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
+  const [inputValue, setInputValue] = useState20(currentRoute != null ? currentRoute : "");
+  const lastSyncedPath = useRef13(currentRoute);
+  if (lastSyncedPath.current !== currentRoute) {
+    lastSyncedPath.current = currentRoute;
+    setInputValue(currentRoute != null ? currentRoute : "");
+  }
+  const submit = (raw) => {
+    const next = normalizeRoute(raw);
+    if (!next || next === currentRoute) return;
+    void (onRouteChange == null ? void 0 : onRouteChange(next));
+  };
+  if (!chrome.showUrlBar) return null;
+  if (showRoutePicker) {
+    return /* @__PURE__ */ jsxs20(
+      Combobox,
+      {
+        items: routes,
+        value: currentRoute,
+        onValueChange: (next) => {
+          if (typeof next === "string") submit(next);
+        },
+        inputValue,
+        onInputValueChange: (next) => setInputValue(next),
+        autoHighlight: false,
+        children: [
+          /* @__PURE__ */ jsxs20(
+            "form",
+            {
+              className: getClassName29("urlTrigger"),
+              onSubmit: (event) => {
+                event.preventDefault();
+                submit(inputValue);
+              },
+              children: [
+                /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+                /* @__PURE__ */ jsx48(
+                  ComboboxInput,
+                  {
+                    className: getClassName29("urlInput"),
+                    placeholder: "/",
+                    spellCheck: false,
+                    autoCorrect: "off",
+                    autoCapitalize: "off"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs20(ComboboxContent, { children: [
+            /* @__PURE__ */ jsx48(ComboboxEmpty, { children: "Press Enter to go to this path" }),
+            /* @__PURE__ */ jsx48(ComboboxList, { children: (path) => /* @__PURE__ */ jsx48(ComboboxItem, { value: path, children: /* @__PURE__ */ jsx48("span", { className: getClassName29("itemPath"), children: path }) }, path) })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs20("div", { className: getClassName29("urlTrigger"), children: [
+    /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
+    /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
+  ] });
+};
+var DeviceToggle = ({
+  onViewportChange
+}) => {
+  const chrome = useChromeConfig();
+  const viewports = useAppStore((s) => s.state.ui.viewports);
+  const activeDevice = useMemo20(() => {
+    const w = viewports.current.width;
+    if (typeof w === "number" && w <= 640) return "mobile";
+    return "desktop";
+  }, [viewports.current.width]);
+  if (!chrome.showDeviceToggle) return null;
+  return /* @__PURE__ */ jsx48(
+    IconButton,
+    {
+      type: "button",
+      title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
+      onClick: () => onViewportChange == null ? void 0 : onViewportChange(
+        DEVICE_VIEWPORTS[activeDevice === "desktop" ? "mobile" : "desktop"]
+      ),
+      children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 14 }) : /* @__PURE__ */ jsx48(Smartphone, { size: 14 }) })
+    }
+  );
+};
+var FullScreenToggle = () => {
+  const chrome = useChromeConfig();
+  const dispatch = useAppStore((s) => s.dispatch);
+  const isFullScreen = useAppStore(
+    (s) => {
+      var _a;
+      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
+    }
+  );
+  if (!chrome.showFullScreenToggle) return null;
+  return /* @__PURE__ */ jsx48(
+    IconButton,
+    {
+      type: "button",
+      title: isFullScreen ? "Exit full screen" : "Enter full screen",
+      onClick: () => dispatch({ type: "setUi", ui: { canvasFullScreen: !isFullScreen } }),
+      children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 14 }) : /* @__PURE__ */ jsx48(Maximize, { size: 14 }) })
+    }
+  );
+};
+
+// 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_10xv6_1", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_10xv6_24", "EditorCanvas--canvasFullScreen": "_EditorCanvas--canvasFullScreen_10xv6_40", "EditorCanvas-inner": "_EditorCanvas-inner_10xv6_47", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_10xv6_56", "EditorCanvas-root": "_EditorCanvas-root_10xv6_56", "EditorCanvas--ready": "_EditorCanvas--ready_10xv6_93", "EditorCanvas-loader": "_EditorCanvas-loader_10xv6_98", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_10xv6_110", "EditorCanvas-bottomBar": "_EditorCanvas-bottomBar_10xv6_119", "EditorCanvas-bottomBarPill": "_EditorCanvas-bottomBarPill_10xv6_131", "EditorCanvas-bottomBarDivider": "_EditorCanvas-bottomBarDivider_10xv6_144", "EditorCanvas-zoomLevel": "_EditorCanvas-zoomLevel_10xv6_151" };
+
+// components/Editor/components/Canvas/index.tsx
+import { useShallow as useShallow9 } from "zustand/react/shallow";
+
+// lib/frame-context.tsx
+init_react_import();
+import {
+  createContext as createContext7,
+  useContext as useContext14,
+  useRef as useRef14,
+  useMemo as useMemo21
+} from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var FrameContext = createContext7(null);
+var FrameProvider = ({
+  children
+}) => {
+  const frameRef = useRef14(null);
+  const value = useMemo21(
+    () => ({
+      frameRef
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx49(FrameContext.Provider, { value, children });
+};
+var useCanvasFrame = () => {
+  const context = useContext14(FrameContext);
+  if (context === null) {
+    throw new Error("useCanvasFrame must be used within a FrameProvider");
+  }
+  return context;
+};
+
+// components/Editor/components/Canvas/index.tsx
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName30 = get_class_name_factory_default("EditorCanvas", styles_module_default26);
+var ZOOM_STEP = 0.15;
+var MIN_ZOOM = 0.25;
+var MAX_ZOOM = 3;
+var TRANSITION_DURATION = 150;
+var Canvas = ({
+  themeIcon,
+  themeLabel,
+  onToggleTheme
+} = {}) => {
+  var _a, _b;
+  const { frameRef } = useCanvasFrame();
+  const chrome = useChromeConfig();
+  const {
+    viewports: viewportOptions = defaultViewports,
+    ui: uiProp,
+    disableZoomControls
+  } = usePropsContext();
+  const {
     dispatch,
     overrides,
     setUi,
+    zoomConfig,
+    setZoomConfig,
     status,
     iframe,
     fullScreenCanvas
@@ -7614,6 +7813,8 @@ var Canvas = () => {
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
+      zoomConfig: s.zoomConfig,
+      setZoomConfig: s.setZoomConfig,
       status: s.status,
       iframe: s.iframe,
       fullScreenCanvas: s.fullScreenCanvas
@@ -7622,203 +7823,143 @@ var Canvas = () => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const canvasFullScreen = useAppStore(
     (s) => {
-      var _a;
-      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
+      var _a2;
+      return (_a2 = s.state.ui.canvasFullScreen) != null ? _a2 : false;
     }
   );
-  const chrome = useChromeConfig();
-  const { theme, toggleTheme } = useEditorTheme();
-  const toggleFullScreen = useCallback19(
-    () => setUi({ canvasFullScreen: !canvasFullScreen }),
-    [setUi, canvasFullScreen]
-  );
-  const activeDevice = useMemo21(() => {
-    const w = viewports.current.width;
-    if (w === "100%") return "desktop";
-    if (typeof w === "number" && w <= 640) return "mobile";
-    return "tablet";
-  }, [viewports.current.width]);
-  const cycleDevice = useCallback19(() => {
-    const next = DEVICE_ORDER[(DEVICE_ORDER.indexOf(activeDevice) + 1) % DEVICE_ORDER.length];
-    const v = DEVICE_VIEWPORTS[next];
-    setUi({
-      viewports: __spreadProps(__spreadValues({}, viewports), {
-        current: { width: v.width, height: v.height }
-      })
-    });
-  }, [activeDevice, setUi, viewports]);
-  const nextDeviceLabel = DEVICE_VIEWPORTS[DEVICE_ORDER[(DEVICE_ORDER.indexOf(activeDevice) + 1) % DEVICE_ORDER.length]].label;
-  const transformRef = useRef14(null);
-  const defaultRender = useMemo21(() => {
-    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx47(Fragment13, { children });
+  const [canvasZoom, setCanvasZoom] = useState21(1);
+  const zoomIn = () => setCanvasZoom((z) => Math.min(z + ZOOM_STEP, MAX_ZOOM));
+  const zoomOut = () => setCanvasZoom((z) => Math.max(z - ZOOM_STEP, MIN_ZOOM));
+  const resetZoom = () => setCanvasZoom(1);
+  const [showTransition, setShowTransition] = useState21(false);
+  const isResizingRef = useRef15(false);
+  const defaultRender = useMemo22(() => {
+    const EditorDefault = ({ children }) => /* @__PURE__ */ jsx50(Fragment13, { children });
     return EditorDefault;
   }, []);
-  const CustomPreview = useMemo21(
+  const CustomPreview = useMemo22(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const [showLoader, setShowLoader] = useState20(false);
+  const getFrameDimensions = useCallback19(() => {
+    if (frameRef.current) {
+      const frame = frameRef.current;
+      const box = getBox(frame);
+      return { width: box.contentBox.width, height: box.contentBox.height };
+    }
+    return { width: 0, height: 0 };
+  }, [frameRef]);
+  useEffect23(() => {
+    const { height: frameHeight } = getFrameDimensions();
+    if (viewports.current.height === "auto") {
+      setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), { zoom: 1, rootHeight: frameHeight }));
+    }
+  }, [getFrameDimensions, setZoomConfig, viewports.current.height]);
+  const [showLoader, setShowLoader] = useState21(false);
   useEffect23(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  const centerFrame = useCallback19(() => {
-    let canceled = false;
-    requestAnimationFrame(() => {
-      if (canceled) return;
-      requestAnimationFrame(() => {
-        if (canceled) return;
-        const ref = transformRef.current;
-        const wrapper = ref == null ? void 0 : ref.instance.wrapperComponent;
-        if (!ref || !wrapper) return;
-        const wrapperW = wrapper.clientWidth;
-        const x = Math.max(0, (wrapperW - PREVIEW_MAX_WIDTH) / 2);
-        ref.setTransform(x, 16, 1, 0);
-      });
-    });
-    return () => {
-      canceled = true;
-    };
-  }, []);
-  useEffect23(() => {
-    return centerFrame();
-  }, [centerFrame, viewports.current.width]);
-  const handleZoomIn = useCallback19(
-    () => {
-      var _a;
-      return (_a = transformRef.current) == null ? void 0 : _a.zoomIn();
-    },
-    []
-  );
-  const handleZoomOut = useCallback19(
-    () => {
-      var _a;
-      return (_a = transformRef.current) == null ? void 0 : _a.zoomOut();
-    },
-    []
-  );
-  const handleResetZoom = useCallback19(() => {
-    centerFrame();
-  }, [centerFrame]);
-  useEffect23(() => {
-    var _a;
-    const handler = (e) => {
-      var _a2;
-      e.preventDefault();
-      const ref = transformRef.current;
-      if (!ref) return;
-      const isPinch = e.ctrlKey || e.metaKey;
-      if (isPinch) {
-        const wrapper = ref.instance.wrapperComponent;
-        if (!wrapper) return;
-        const factor = e.deltaY < 0 ? 1.05 : 1 / 1.05;
-        const currentScale = ref.state.scale;
-        const newScale = Math.max(
-          MIN_ZOOM,
-          Math.min(MAX_ZOOM, currentScale * factor)
-        );
-        if (newScale === currentScale) return;
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const isIframeEvent = ((_a2 = e.target) == null ? void 0 : _a2.ownerDocument) !== document;
-        let cursorX;
-        let cursorY;
-        if (isIframeEvent) {
-          const iframeEl = document.getElementById(
-            "preview-frame"
-          );
-          const iframeRect = iframeEl == null ? void 0 : iframeEl.getBoundingClientRect();
-          if (!iframeRect) return;
-          cursorX = iframeRect.left + e.clientX * currentScale - wrapperRect.left;
-          cursorY = iframeRect.top + e.clientY * currentScale - wrapperRect.top;
-        } else {
-          cursorX = e.clientX - wrapperRect.left;
-          cursorY = e.clientY - wrapperRect.top;
-        }
-        const ratio = newScale / currentScale;
-        const newPositionX = cursorX - (cursorX - ref.state.positionX) * ratio;
-        const newPositionY = cursorY - (cursorY - ref.state.positionY) * ratio;
-        ref.setTransform(newPositionX, newPositionY, newScale, 0);
-        return;
-      }
-      ref.setTransform(
-        ref.state.positionX - e.deltaX,
-        ref.state.positionY - e.deltaY,
-        ref.state.scale,
-        0
-      );
-    };
-    const cleanups = [];
-    const onWindowWheel = (e) => {
-      if (e.ctrlKey || e.metaKey) e.preventDefault();
-    };
-    window.addEventListener("wheel", onWindowWheel, { passive: false });
-    cleanups.push(
-      () => window.removeEventListener("wheel", onWindowWheel)
+  const appStoreApi = useAppStoreApi();
+  const autoSelectingRef = useRef15(true);
+  const pickClosestViewport = useCallback19(() => {
+    var _a2, _b2;
+    if (typeof window === "undefined") return null;
+    const viewportWidth = window.innerWidth;
+    const frameWidth = (_a2 = frameRef.current) == null ? void 0 : _a2.getBoundingClientRect().width;
+    if (!viewportWidth) return null;
+    if (!frameWidth) return null;
+    if (viewportOptions.length === 0) return null;
+    const fullWidthViewport = Object.values(viewportOptions).find(
+      (v) => v.width === "100%"
     );
-    const viewportEl = (_a = frameRef.current) == null ? void 0 : _a.firstElementChild;
-    if (viewportEl) {
-      viewportEl.addEventListener("wheel", handler, { passive: false });
-      cleanups.push(
-        () => viewportEl.removeEventListener("wheel", handler)
-      );
-    }
+    const viewportDifferences = Object.entries(viewportOptions).filter(([_, value]) => value.width !== "100%").map(([key, value]) => ({
+      key,
+      diff: Math.abs(
+        viewportWidth - (typeof value.width === "string" ? viewportWidth : value.width)
+      ),
+      value
+    })).sort((a, b) => a.diff > b.diff ? 1 : -1);
+    let closestViewport = (_b2 = viewportDifferences[0]) == null ? void 0 : _b2.value;
+    if (!closestViewport) return null;
+    if (closestViewport.width < frameWidth && fullWidthViewport) {
+      closestViewport = fullWidthViewport;
+    }
+    return closestViewport;
+  }, [viewportOptions, frameRef]);
+  useEffect23(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const closestViewport = pickClosestViewport();
+    if (!closestViewport) return;
     if (iframe.enabled) {
-      const tryAttach = () => {
-        const el = document.getElementById(
-          "preview-frame"
-        );
-        const doc = el == null ? void 0 : el.contentDocument;
-        const win = el == null ? void 0 : el.contentWindow;
-        if (!doc || !win) return false;
-        const opts = { passive: false, capture: true };
-        doc.addEventListener("wheel", handler, opts);
-        win.addEventListener("wheel", handler, opts);
-        cleanups.push(() => {
-          doc.removeEventListener("wheel", handler, opts);
-          win.removeEventListener("wheel", handler, opts);
-        });
-        return true;
+      const s = appStoreApi.getState();
+      const appState = {
+        state: __spreadProps(__spreadValues({}, s.state), {
+          ui: __spreadProps(__spreadValues({}, s.state.ui), {
+            viewports: __spreadProps(__spreadValues({}, s.state.ui.viewports), {
+              current: __spreadProps(__spreadValues({}, s.state.ui.viewports.current), {
+                height: (closestViewport == null ? void 0 : closestViewport.height) || "auto",
+                width: closestViewport == null ? void 0 : closestViewport.width
+              })
+            })
+          })
+        })
       };
-      if (!tryAttach()) {
-        const interval = window.setInterval(() => {
-          if (tryAttach()) window.clearInterval(interval);
-        }, 100);
-        cleanups.push(() => window.clearInterval(interval));
+      let history = s.history;
+      if (s.history.histories.length === 1) {
+        history = __spreadProps(__spreadValues({}, history), { histories: [appState] });
       }
+      appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
-    return () => {
-      cleanups.forEach((fn) => fn());
-    };
-  }, [iframe.enabled, frameRef]);
-  const previewWidth = !iframe.enabled ? "100%" : viewports.current.width === "100%" ? PREVIEW_MAX_WIDTH : viewports.current.width;
-  const frameContents = /* @__PURE__ */ jsx47(
-    "div",
-    {
-      className: getClassName27("rootColumn"),
-      style: { width: PREVIEW_MAX_WIDTH },
-      children: /* @__PURE__ */ jsx47(
-        "div",
-        {
-          className: getClassName27("frame"),
-          style: { width: previewWidth, margin: "0 auto" },
-          children: /* @__PURE__ */ jsx47(
-            "div",
-            {
-              className: getClassName27("root"),
-              suppressHydrationWarning: true,
-              id: "editor-canvas-root",
-              children: /* @__PURE__ */ jsx47(CustomPreview, { children: /* @__PURE__ */ jsx47(Preview2, {}) })
-            }
-          )
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ jsx47(
+  }, [
+    pickClosestViewport,
+    frameRef.current,
+    iframe,
+    appStoreApi,
+    (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
+  ]);
+  useEffect23(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if (!iframe.enabled) return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const target = frameRef.current;
+    if (!target) return;
+    const observer = new ResizeObserver(() => {
+      if (!autoSelectingRef.current) return;
+      const closestViewport = pickClosestViewport();
+      if (!closestViewport) return;
+      const s = appStoreApi.getState();
+      const current = s.state.ui.viewports.current;
+      if (current.width === closestViewport.width && current.height === (closestViewport.height || "auto")) {
+        return;
+      }
+      setUi({
+        viewports: __spreadProps(__spreadValues({}, s.state.ui.viewports), {
+          current: __spreadProps(__spreadValues({}, current), {
+            width: closestViewport.width,
+            height: closestViewport.height || "auto"
+          })
+        })
+      });
+    });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [
+    pickClosestViewport,
+    frameRef,
+    iframe.enabled,
+    (_b = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _b.current,
+    appStoreApi,
+    setUi
+  ]);
+  return /* @__PURE__ */ jsx50(
     "div",
     {
-      className: getClassName27({
+      className: getClassName30({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas,
@@ -7834,119 +7975,291 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), ref: frameRef, children: [
-        /* @__PURE__ */ jsx47("div", { className: getClassName27("zoomViewport"), children: disableZoomControls ? frameContents : /* @__PURE__ */ jsxs19(
-          TransformWrapper,
+      children: /* @__PURE__ */ jsxs21("div", { className: getClassName30("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ jsx50(
+          "div",
           {
-            ref: transformRef,
-            minScale: MIN_ZOOM,
-            maxScale: MAX_ZOOM,
-            initialScale: 1,
-            doubleClick: { disabled: true },
-            limitToBounds: false,
-            wheel: { disabled: true },
-            pinch: { step: 5 },
-            panning: { velocityDisabled: true },
-            trackPadPanning: { velocityDisabled: true },
-            alignmentAnimation: { disabled: true },
-            autoAlignment: { disabled: true, sizeX: 0, sizeY: 0 },
-            children: [
-              /* @__PURE__ */ jsx47(ZoomConfigSync, {}),
-              /* @__PURE__ */ jsxs19("div", { className: getClassName27("toolbar"), children: [
-                chrome.showThemeToggle && /* @__PURE__ */ jsxs19(Fragment13, { children: [
-                  /* @__PURE__ */ jsx47(
-                    IconButton,
-                    {
-                      type: "button",
-                      title: theme === "dark" ? "Switch to light mode" : "Switch to dark mode",
-                      onClick: toggleTheme,
-                      children: theme === "dark" ? /* @__PURE__ */ jsx47(Sun, { size: 14 }) : /* @__PURE__ */ jsx47(Moon, { size: 14 })
-                    }
-                  ),
-                  (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ jsx47("div", { className: getClassName27("toolbarDivider") })
-                ] }),
-                chrome.showDeviceToggle && /* @__PURE__ */ jsx47(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: `Switch to ${nextDeviceLabel} viewport`,
-                    onClick: cycleDevice,
-                    children: DEVICE_ICONS[activeDevice]
-                  }
-                ),
-                chrome.showFullScreenToggle && /* @__PURE__ */ jsx47(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: canvasFullScreen ? "Exit full screen" : "Enter full screen",
-                    onClick: toggleFullScreen,
-                    children: canvasFullScreen ? /* @__PURE__ */ jsx47(Minimize, { size: 14 }) : /* @__PURE__ */ jsx47(Maximize, { size: 14 })
-                  }
-                ),
-                (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ jsx47("div", { className: getClassName27("toolbarDivider") }),
-                /* @__PURE__ */ jsx47(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: "Zoom out",
-                    onClick: handleZoomOut,
-                    children: /* @__PURE__ */ jsx47(Minus, { size: 14 })
-                  }
-                ),
-                /* @__PURE__ */ jsx47(ZoomLevel, { className: getClassName27("zoomLevel") }),
-                /* @__PURE__ */ jsx47(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: "Zoom in",
-                    onClick: handleZoomIn,
-                    children: /* @__PURE__ */ jsx47(Plus, { size: 14 })
-                  }
-                ),
-                /* @__PURE__ */ jsx47(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: "Reset zoom",
-                    onClick: handleResetZoom,
-                    children: /* @__PURE__ */ jsx47(RotateCcw, { size: 14 })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx47(
-                TransformComponent,
-                {
-                  infinite: true,
-                  wrapperStyle: { width: "100%", height: "100%" },
-                  children: frameContents
-                }
-              )
-            ]
+            className: getClassName30("rootColumn"),
+            style: {
+              width: iframe.enabled ? viewports.current.width : "100%",
+              transform: disableZoomControls ? void 0 : `scale(${canvasZoom})`,
+              transformOrigin: disableZoomControls ? void 0 : "center center",
+              transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : disableZoomControls ? void 0 : "transform 150ms ease-out"
+            },
+            children: /* @__PURE__ */ jsx50(
+              "div",
+              {
+                className: getClassName30("root"),
+                suppressHydrationWarning: true,
+                id: "editor-canvas-root",
+                onTransitionEnd: () => {
+                  setShowTransition(false);
+                  isResizingRef.current = false;
+                },
+                children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ jsx47("div", { className: getClassName27("loader"), children: /* @__PURE__ */ jsx47(Loader, { size: 24 }) })
+        ),
+        /* @__PURE__ */ jsx50("div", { className: getClassName30("bottomBar"), children: /* @__PURE__ */ jsxs21("div", { className: getClassName30("bottomBarPill"), children: [
+          chrome.showThemeToggle && onToggleTheme && /* @__PURE__ */ jsx50(
+            IconButton,
+            {
+              type: "button",
+              title: themeLabel != null ? themeLabel : "Toggle theme",
+              onClick: onToggleTheme,
+              children: themeIcon
+            }
+          ),
+          /* @__PURE__ */ jsx50(
+            DeviceToggle,
+            {
+              onViewportChange: (viewport) => {
+                autoSelectingRef.current = false;
+                setShowTransition(true);
+                isResizingRef.current = true;
+                const uiViewport = __spreadProps(__spreadValues({}, viewport), {
+                  height: viewport.height || "auto",
+                  zoom: 1
+                });
+                setUi({
+                  viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx50(FullScreenToggle, {}),
+          !disableZoomControls && /* @__PURE__ */ jsxs21(Fragment13, { children: [
+            /* @__PURE__ */ jsx50("span", { className: getClassName30("bottomBarDivider") }),
+            /* @__PURE__ */ jsx50(
+              IconButton,
+              {
+                type: "button",
+                title: "Zoom out",
+                onClick: zoomOut,
+                children: /* @__PURE__ */ jsx50(Minus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsxs21("span", { className: getClassName30("zoomLevel"), children: [
+              Math.round(canvasZoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx50(Plus, { size: 14 }) }),
+            /* @__PURE__ */ jsx50(
+              IconButton,
+              {
+                type: "button",
+                title: "Reset zoom",
+                onClick: resetZoom,
+                children: /* @__PURE__ */ jsx50(RotateCcw, { size: 14 })
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
       ] })
     }
   );
 };
 
+// lib/use-sidebar-resize.ts
+init_react_import();
+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 = useRef16(null);
+  const storeWidth = useAppStore(
+    (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
+  );
+  useEffect24(() => {
+    if (typeof window !== "undefined" && !storeWidth) {
+      try {
+        const savedWidths = localStorage.getItem("editor-sidebar-widths");
+        if (savedWidths) {
+          const widths = JSON.parse(savedWidths);
+          const savedWidth = widths[position];
+          const key = position === "left" ? "leftSideBarWidth" : "rightSideBarWidth";
+          if (savedWidth) {
+            dispatch({
+              type: "setUi",
+              ui: {
+                [key]: savedWidth
+              }
+            });
+          }
+        }
+      } catch (error) {
+        console.error(
+          `Failed to load ${position} sidebar width from localStorage`,
+          error
+        );
+      }
+    }
+  }, [dispatch, position, storeWidth]);
+  useEffect24(() => {
+    if (storeWidth !== void 0) {
+      setWidth(storeWidth);
+    }
+  }, [storeWidth]);
+  const handleResizeEnd = useCallback20(
+    (width2) => {
+      dispatch({
+        type: "setUi",
+        ui: {
+          [position === "left" ? "leftSideBarWidth" : "rightSideBarWidth"]: width2
+        }
+      });
+      let widths = {};
+      try {
+        const savedWidths = localStorage.getItem("editor-sidebar-widths");
+        widths = savedWidths ? JSON.parse(savedWidths) : {};
+      } catch (error) {
+        console.error(
+          `Failed to save ${position} sidebar width to localStorage`,
+          error
+        );
+      } finally {
+        localStorage.setItem(
+          "editor-sidebar-widths",
+          JSON.stringify(__spreadProps(__spreadValues({}, widths), {
+            [position]: width2
+          }))
+        );
+      }
+      window.dispatchEvent(
+        new CustomEvent("viewportchange", {
+          bubbles: true,
+          cancelable: false
+        })
+      );
+    },
+    [dispatch, position]
+  );
+  return {
+    width,
+    setWidth,
+    sidebarRef,
+    handleResizeEnd
+  };
+}
+
 // components/Editor/components/Sidebar/index.tsx
 init_react_import();
 
+// components/Editor/components/ResizeHandle/index.tsx
+init_react_import();
+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" };
+
+// 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);
+var ResizeHandle = ({
+  position,
+  sidebarRef,
+  onResize,
+  onResizeEnd
+}) => {
+  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;
+      const newWidth = position === "left" ? startWidth.current + delta : startWidth.current - delta;
+      const width = Math.max(192, newWidth);
+      onResize(width);
+      e.preventDefault();
+    },
+    [onResize, position]
+  );
+  const handleMouseUp = useCallback21(() => {
+    var _a;
+    if (!isDragging.current) return;
+    isDragging.current = false;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    const overlay = document.getElementById("resize-overlay");
+    if (overlay) {
+      document.body.removeChild(overlay);
+    }
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    const finalWidth = ((_a = sidebarRef.current) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
+    onResizeEnd(finalWidth);
+  }, [onResizeEnd]);
+  const handleMouseDown = useCallback21(
+    (e) => {
+      var _a;
+      isDragging.current = true;
+      startX.current = e.clientX;
+      startWidth.current = ((_a = sidebarRef.current) == null ? void 0 : _a.getBoundingClientRect().width) || 0;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      const overlay = document.createElement("div");
+      overlay.id = "resize-overlay";
+      overlay.setAttribute("data-resize-overlay", "");
+      document.body.appendChild(overlay);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      e.preventDefault();
+    },
+    [position, handleMouseMove, handleMouseUp]
+  );
+  return /* @__PURE__ */ jsx51(
+    "div",
+    {
+      ref: handleRef,
+      className: getClassName31({ [position]: true }),
+      onMouseDown: handleMouseDown
+    }
+  );
+};
+
 // 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_default24 = { "Sidebar": "_Sidebar_1ynke_8", "Sidebar--left": "_Sidebar--left_1ynke_20", "Sidebar--right": "_Sidebar--right_1ynke_25", "Sidebar-body": "_Sidebar-body_1ynke_30" };
+var styles_module_default28 = { "Sidebar": "_Sidebar_14k7q_1", "Sidebar--isVisible": "_Sidebar--isVisible_14k7q_9", "Sidebar--left": "_Sidebar--left_14k7q_13", "Sidebar--right": "_Sidebar--right_14k7q_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_14k7q_37" };
 
 // components/Editor/components/Sidebar/index.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var getClassName28 = get_class_name_factory_default("Sidebar", styles_module_default24);
-var Sidebar = ({ position, children }) => {
-  return /* @__PURE__ */ jsx48("aside", { className: getClassName28({ [position]: true }), children: /* @__PURE__ */ jsx48("div", { className: getClassName28("body"), children }) });
+import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
+var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default28);
+var Sidebar = ({
+  position,
+  sidebarRef,
+  isVisible,
+  onResize,
+  onResizeEnd,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs22(Fragment14, { children: [
+    /* @__PURE__ */ jsx52(
+      "div",
+      {
+        ref: sidebarRef,
+        className: getClassName32({ [position]: true, isVisible }),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx52("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx52(
+      ResizeHandle,
+      {
+        position,
+        sidebarRef,
+        onResize,
+        onResizeEnd
+      }
+    ) })
+  ] });
 };
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback20 } from "react";
+import { useCallback as useCallback22 } from "react";
 
 // lib/should-block-editing-hotkey.ts
 init_react_import();
@@ -7986,7 +8299,7 @@ var shouldBlockEditingHotkey = (e) => {
 // lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = useCallback20(
+  const deleteSelectedComponent = useCallback22(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) {
@@ -8012,397 +8325,198 @@ var useDeleteHotkeys = () => {
 
 // lib/use-clipboard-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback21 } from "react";
-var CLIPBOARD_MARKER = "reacteditor/component";
-var isComponentData = (value) => {
-  var _a;
-  if (!value || typeof value !== "object") return false;
-  const v = value;
-  return typeof v.type === "string" && typeof ((_a = v.props) == null ? void 0 : _a.id) === "string";
-};
-var parsePayload = (text) => {
-  try {
-    const parsed = JSON.parse(text);
-    if (parsed && typeof parsed === "object" && parsed.__reactEditor === CLIPBOARD_MARKER && isComponentData(parsed.data)) {
-      return parsed.data;
-    }
-  } catch (e) {
-  }
-  return null;
-};
-var useClipboardHotkeys = () => {
-  const appStore = useAppStoreApi();
-  const writeSelectionToClipboard = useCallback21(() => {
-    var _a;
-    const { selectedItem } = appStore.getState();
-    if (!selectedItem) return false;
-    const payload = {
-      __reactEditor: CLIPBOARD_MARKER,
-      data: selectedItem
-    };
-    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(JSON.stringify(payload)).catch(() => {
-    });
-    return true;
-  }, [appStore]);
-  const copySelectedComponent = useCallback21(
-    (e) => {
-      if (shouldBlockEditingHotkey(e)) return false;
-      return writeSelectionToClipboard();
-    },
-    [writeSelectionToClipboard]
-  );
-  const cutSelectedComponent = useCallback21(
-    (e) => {
-      var _a;
-      if (shouldBlockEditingHotkey(e)) return false;
-      const { state, dispatch, permissions, selectedItem } = appStore.getState();
-      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
-      if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return false;
-      if (!permissions.getPermissions({ item: selectedItem }).delete)
-        return true;
-      if (!writeSelectionToClipboard()) return false;
-      dispatch({
-        type: "remove",
-        index: sel.index,
-        zone: sel.zone
-      });
-      return true;
-    },
-    [appStore, writeSelectionToClipboard]
-  );
-  const pasteComponent = useCallback21(
-    (e) => {
-      var _a, _b;
-      if (shouldBlockEditingHotkey(e)) return false;
-      const { state, dispatch, config } = appStore.getState();
-      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
-      if (!(sel == null ? void 0 : sel.zone)) return false;
-      (_b = navigator.clipboard) == null ? void 0 : _b.readText().then((text) => {
-        const data = parsePayload(text);
-        if (!data) return;
-        if (!config.components[data.type]) return;
-        dispatch({
-          type: "insert",
-          componentType: data.type,
-          destinationIndex: sel.index + 1,
-          destinationZone: sel.zone,
-          data
-        });
-      }).catch(() => {
-      });
-      return true;
-    },
-    [appStore]
-  );
-  useHotkey({ meta: true, c: true }, copySelectedComponent);
-  useHotkey({ ctrl: true, c: true }, copySelectedComponent);
-  useHotkey({ meta: true, v: true }, pasteComponent);
-  useHotkey({ ctrl: true, v: true }, pasteComponent);
-  useHotkey({ meta: true, x: true }, cutSelectedComponent);
-  useHotkey({ ctrl: true, x: true }, cutSelectedComponent);
-};
-
-// components/Editor/components/Nav/index.tsx
-init_react_import();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
-init_react_import();
-var styles_module_default25 = { "Nav": "_Nav_1ft0o_1", "Nav--horizontal": "_Nav--horizontal_1ft0o_20", "Nav-list": "_Nav-list_1ft0o_36", "Nav-footer": "_Nav-footer_1ft0o_83", "NavItem-link": "_NavItem-link_1ft0o_96", "NavItem-linkLabel": "_NavItem-linkLabel_1ft0o_124", "NavItem": "_NavItem_1ft0o_96", "NavItem-linkIcon": "_NavItem-linkIcon_1ft0o_149", "NavItem--active": "_NavItem--active_1ft0o_162", "NavItem--mobileOnly": "_NavItem--mobileOnly_1ft0o_173", "NavItem--desktopOnly": "_NavItem--desktopOnly_1ft0o_178" };
-
-// components/Editor/components/Nav/index.tsx
-import { jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
-var getClassName29 = get_class_name_factory_default("Nav", styles_module_default25);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default25);
-var MenuItem = ({
-  label,
-  icon,
-  onClick,
-  isActive,
-  mobileOnly,
-  desktopOnly
-}) => {
-  return /* @__PURE__ */ jsx49(
-    "li",
-    {
-      className: getClassNameItem3({
-        active: isActive,
-        mobileOnly,
-        desktopOnly
-      }),
-      children: onClick && /* @__PURE__ */ jsxs20("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx49("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx49("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
-    }
-  );
-};
-var Nav = ({
-  items,
-  footer,
-  orientation = "vertical"
-}) => {
-  return /* @__PURE__ */ jsxs20("nav", { className: getClassName29({ horizontal: orientation === "horizontal" }), children: [
-    /* @__PURE__ */ jsx49("ul", { className: getClassName29("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx49(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ jsx49("div", { className: getClassName29("footer"), children: footer })
-  ] });
-};
-
-// components/BrowserBar/index.tsx
-init_react_import();
-import { useRef as useRef15, useState as useState21 } from "react";
-
-// components/ui/Combobox/index.tsx
-init_react_import();
-import { Combobox as ComboboxPrimitive } from "@base-ui/react";
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
-init_react_import();
-var styles_module_default26 = { "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 jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
-var getClassName30 = get_class_name_factory_default("EditorCombobox", styles_module_default26);
-var join = (...values) => values.filter(Boolean).join(" ");
-var mergeClassName = (base, override) => {
-  if (!override) return base;
-  if (typeof override === "function") {
-    return (state) => join(base, override(state));
-  }
-  return join(base, override);
-};
-var Combobox = ComboboxPrimitive.Root;
-function ComboboxInput(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx50(
-    ComboboxPrimitive.Input,
-    __spreadValues({
-      "data-slot": "combobox-input",
-      className: mergeClassName(getClassName30("input"), className)
-    }, props)
-  );
-}
-function ComboboxContent(_a) {
-  var _b = _a, {
-    className,
-    side = "bottom",
-    sideOffset = 4,
-    align = "start",
-    alignOffset = 0,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "side",
-    "sideOffset",
-    "align",
-    "alignOffset",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsx50(ComboboxPrimitive.Portal, { children: /* @__PURE__ */ jsx50(
-    ComboboxPrimitive.Positioner,
-    {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      className: getClassName30("positioner"),
-      children: /* @__PURE__ */ jsx50(
-        ComboboxPrimitive.Popup,
-        __spreadProps(__spreadValues({
-          "data-slot": "combobox-content",
-          className: mergeClassName(getClassName30("content"), className)
-        }, props), {
-          children
-        })
-      )
-    }
-  ) });
-}
-function ComboboxList(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx50(
-    ComboboxPrimitive.List,
-    __spreadValues({
-      "data-slot": "combobox-list",
-      className: mergeClassName(getClassName30("list"), className)
-    }, props)
-  );
-}
-function ComboboxItem(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxs21(
-    ComboboxPrimitive.Item,
-    __spreadProps(__spreadValues({
-      "data-slot": "combobox-item",
-      className: mergeClassName(getClassName30("item"), className)
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx50("span", { className: getClassName30("itemIndicator"), children: /* @__PURE__ */ jsx50(ComboboxPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx50(Check, { size: 14 }) }) }),
-        children
-      ]
-    })
-  );
-}
-function ComboboxEmpty(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx50(
-    ComboboxPrimitive.Empty,
-    __spreadValues({
-      "data-slot": "combobox-empty",
-      className: mergeClassName(getClassName30("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_default27 = { "BrowserBar": "_BrowserBar_ey7dt_3", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_ey7dt_13", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_ey7dt_43", "BrowserBar-urlText": "_BrowserBar-urlText_ey7dt_48", "BrowserBar-urlInput": "_BrowserBar-urlInput_ey7dt_60", "BrowserBar-itemPath": "_BrowserBar-itemPath_ey7dt_66", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_ey7dt_71" };
-
-// components/BrowserBar/index.tsx
-import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
-var normalizeRoute = (raw) => {
-  const trimmed = raw.trim();
-  if (!trimmed) return trimmed;
-  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+import { useCallback as useCallback23 } from "react";
+var CLIPBOARD_MARKER = "reacteditor/component";
+var isComponentData = (value) => {
+  var _a;
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return typeof v.type === "string" && typeof ((_a = v.props) == null ? void 0 : _a.id) === "string";
 };
-var getClassName31 = get_class_name_factory_default("BrowserBar", styles_module_default27);
-var BrowserBar = ({}) => {
-  const { routes, currentRoute, onRouteChange } = usePropsContext();
-  const chrome = useChromeConfig();
-  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
-  const [inputValue, setInputValue] = useState21(currentRoute != null ? currentRoute : "");
-  const lastSyncedPath = useRef15(currentRoute);
-  if (lastSyncedPath.current !== currentRoute) {
-    lastSyncedPath.current = currentRoute;
-    setInputValue(currentRoute != null ? currentRoute : "");
-  }
-  const submit = (raw) => {
-    const next = normalizeRoute(raw);
-    if (!next || next === currentRoute) return;
-    void (onRouteChange == null ? void 0 : onRouteChange(next));
-  };
-  if (!chrome.showUrlBar) return null;
-  return /* @__PURE__ */ jsx51("div", { className: getClassName31(), children: showRoutePicker ? /* @__PURE__ */ jsxs22(
-    Combobox,
-    {
-      items: routes,
-      value: currentRoute,
-      onValueChange: (next) => {
-        if (typeof next === "string") submit(next);
-      },
-      inputValue,
-      onInputValueChange: (next) => setInputValue(next),
-      autoHighlight: false,
-      children: [
-        /* @__PURE__ */ jsxs22(
-          "form",
-          {
-            className: getClassName31("urlTrigger"),
-            onSubmit: (event) => {
-              event.preventDefault();
-              submit(inputValue);
-            },
-            children: [
-              /* @__PURE__ */ jsx51(Globe, { className: getClassName31("urlIcon"), size: 14 }),
-              /* @__PURE__ */ jsx51(
-                ComboboxInput,
-                {
-                  className: getClassName31("urlInput"),
-                  placeholder: "/",
-                  spellCheck: false,
-                  autoCorrect: "off",
-                  autoCapitalize: "off"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs22(ComboboxContent, { children: [
-          /* @__PURE__ */ jsx51(ComboboxEmpty, { children: "Press Enter to go to this path" }),
-          /* @__PURE__ */ jsx51(ComboboxList, { children: (path) => /* @__PURE__ */ jsx51(ComboboxItem, { value: path, children: /* @__PURE__ */ jsx51("span", { className: getClassName31("itemPath"), children: path }) }, path) })
-        ] })
-      ]
+var parsePayload = (text) => {
+  try {
+    const parsed = JSON.parse(text);
+    if (parsed && typeof parsed === "object" && parsed.__reactEditor === CLIPBOARD_MARKER && isComponentData(parsed.data)) {
+      return parsed.data;
     }
-  ) : /* @__PURE__ */ jsxs22("div", { className: getClassName31("urlTrigger"), children: [
-    /* @__PURE__ */ jsx51(Globe, { className: getClassName31("urlIcon"), size: 14 }),
-    /* @__PURE__ */ jsx51("span", { className: getClassName31("urlText"), children: "/" })
-  ] }) });
+  } catch (e) {
+  }
+  return null;
+};
+var useClipboardHotkeys = () => {
+  const appStore = useAppStoreApi();
+  const writeSelectionToClipboard = useCallback23(() => {
+    var _a;
+    const { selectedItem } = appStore.getState();
+    if (!selectedItem) return false;
+    const payload = {
+      __reactEditor: CLIPBOARD_MARKER,
+      data: selectedItem
+    };
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(JSON.stringify(payload)).catch(() => {
+    });
+    return true;
+  }, [appStore]);
+  const copySelectedComponent = useCallback23(
+    (e) => {
+      if (shouldBlockEditingHotkey(e)) return false;
+      return writeSelectionToClipboard();
+    },
+    [writeSelectionToClipboard]
+  );
+  const cutSelectedComponent = useCallback23(
+    (e) => {
+      var _a;
+      if (shouldBlockEditingHotkey(e)) return false;
+      const { state, dispatch, permissions, selectedItem } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return false;
+      if (!permissions.getPermissions({ item: selectedItem }).delete)
+        return true;
+      if (!writeSelectionToClipboard()) return false;
+      dispatch({
+        type: "remove",
+        index: sel.index,
+        zone: sel.zone
+      });
+      return true;
+    },
+    [appStore, writeSelectionToClipboard]
+  );
+  const pasteComponent = useCallback23(
+    (e) => {
+      var _a, _b;
+      if (shouldBlockEditingHotkey(e)) return false;
+      const { state, dispatch, config } = appStore.getState();
+      const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
+      if (!(sel == null ? void 0 : sel.zone)) return false;
+      (_b = navigator.clipboard) == null ? void 0 : _b.readText().then((text) => {
+        const data = parsePayload(text);
+        if (!data) return;
+        if (!config.components[data.type]) return;
+        dispatch({
+          type: "insert",
+          componentType: data.type,
+          destinationIndex: sel.index + 1,
+          destinationZone: sel.zone,
+          data
+        });
+      }).catch(() => {
+      });
+      return true;
+    },
+    [appStore]
+  );
+  useHotkey({ meta: true, c: true }, copySelectedComponent);
+  useHotkey({ ctrl: true, c: true }, copySelectedComponent);
+  useHotkey({ meta: true, v: true }, pasteComponent);
+  useHotkey({ ctrl: true, v: true }, pasteComponent);
+  useHotkey({ meta: true, x: true }, cutSelectedComponent);
+  useHotkey({ ctrl: true, x: true }, cutSelectedComponent);
 };
 
 // components/Editor/components/Layout/index.tsx
-import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
-var getClassName32 = get_class_name_factory_default("Editor", styles_module_default21);
-var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default21);
-var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default21);
-var FieldSideBarBody = () => /* @__PURE__ */ jsx52(SidebarSection, { noBorderTop: true, title: null, children: /* @__PURE__ */ jsx52(Fields, {}) });
-var HeaderPublish = () => {
+import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
+var getClassName33 = get_class_name_factory_default("Editor", styles_module_default22);
+var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default22);
+var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default22);
+var getHeaderClassName = get_class_name_factory_default("EditorHeader", styles_module_default22);
+var TopHeader = ({
+  pluginItems
+}) => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
-  const CustomHeaderActions = useAppStore(
-    (s) => s.overrides.headerActions || DefaultOverride
-  );
-  return /* @__PURE__ */ jsx52(CustomHeaderActions, { children: /* @__PURE__ */ jsx52(
-    Button,
-    {
-      onClick: () => {
-        const data = appStore.getState().state.data;
-        onPublish && onPublish(data, currentRoute);
-      },
-      children: "Publish"
-    }
-  ) });
-};
-var HeaderHistory = () => {
+  const chrome = useChromeConfig();
   const back = useAppStore((s) => s.history.back);
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsxs23("div", { className: getLayoutClassName("headerHistory"), children: [
-    /* @__PURE__ */ jsx52(IconButton, { type: "button", title: "Undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ jsx52(Undo2, { size: 16 }) }),
-    /* @__PURE__ */ jsx52(
-      IconButton,
+  const CustomHeaderActions = useAppStore(
+    (s) => s.overrides.headerActions || DefaultOverride
+  );
+  return /* @__PURE__ */ jsxs23("header", { className: getHeaderClassName(), children: [
+    /* @__PURE__ */ jsx53("div", { className: getHeaderClassName("plugins"), children: Object.entries(pluginItems).map(([key, item]) => /* @__PURE__ */ jsx53(
+      "span",
       {
-        type: "button",
-        title: "Redo",
-        disabled: !hasFuture,
-        onClick: forward,
-        children: /* @__PURE__ */ jsx52(Redo2, { size: 16 })
-      }
-    )
+        className: getHeaderClassName("pluginItem", {
+          mobileOnly: item.mobileOnly,
+          desktopOnly: item.desktopOnly
+        }),
+        children: /* @__PURE__ */ jsx53(
+          IconButton,
+          {
+            type: "button",
+            title: item.label,
+            onClick: item.onClick,
+            active: item.isActive,
+            children: item.icon
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsx53("div", { className: getHeaderClassName("urlBarSlot"), children: /* @__PURE__ */ jsx53(UrlBar, {}) }),
+    /* @__PURE__ */ jsxs23("div", { className: getHeaderClassName("actions"), children: [
+      chrome.showHistoryControls && /* @__PURE__ */ jsxs23("div", { className: getHeaderClassName("history"), children: [
+        /* @__PURE__ */ jsx53(
+          IconButton,
+          {
+            type: "button",
+            title: "undo",
+            disabled: !hasPast,
+            onClick: back,
+            children: /* @__PURE__ */ jsx53(Undo2, { size: 18 })
+          }
+        ),
+        /* @__PURE__ */ jsx53(
+          IconButton,
+          {
+            type: "button",
+            title: "redo",
+            disabled: !hasFuture,
+            onClick: forward,
+            children: /* @__PURE__ */ jsx53(Redo2, { size: 18 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx53(CustomHeaderActions, { children: /* @__PURE__ */ jsx53(
+        Button,
+        {
+          onClick: () => {
+            const data = appStore.getState().state.data;
+            onPublish && onPublish(data, currentRoute);
+          },
+          children: "Publish"
+        }
+      ) })
+    ] })
   ] });
 };
+var FieldSideBar = () => {
+  const title = useAppStore(
+    (s) => {
+      var _a, _b, _c;
+      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__ */ jsx53(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx53(Fields, {}) });
+};
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx52("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx52("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx53("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx53("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
     iframe: _iframe,
     dnd,
+    initialHistory: _initialHistory,
     plugins,
     height
   } = usePropsContext();
-  const iframe = useMemo22(
+  const iframe = useMemo23(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -8410,7 +8524,7 @@ var Layout = ({ children }) => {
     [_iframe]
   );
   useInjectGlobalCss(iframe.enabled);
-  const setUi = useAppStore((s) => s.setUi);
+  const dispatch = useAppStore((s) => s.dispatch);
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
@@ -8418,14 +8532,53 @@ var Layout = ({ children }) => {
   const chrome = useChromeConfig();
   const navBarVisible = chrome.showNavBar;
   const instanceId = useAppStore((s) => s.instanceId);
+  const {
+    width: leftWidth,
+    setWidth: setLeftWidth,
+    sidebarRef: leftSidebarRef,
+    handleResizeEnd: handleLeftSidebarResizeEnd
+  } = useSidebarResize("left", dispatch);
+  const {
+    width: rightWidth,
+    setWidth: setRightWidth,
+    sidebarRef: rightSidebarRef,
+    handleResizeEnd: handleRightSidebarResizeEnd
+  } = useSidebarResize("right", dispatch);
+  useEffect25(() => {
+    if (!window.matchMedia("(min-width: 638px)").matches) {
+      dispatch({
+        type: "setUi",
+        ui: {
+          leftSideBarVisible: false,
+          rightSideBarVisible: false
+        }
+      });
+    }
+    const handleResize = () => {
+      if (!window.matchMedia("(min-width: 638px)").matches) {
+        dispatch({
+          type: "setUi",
+          ui: (ui) => __spreadValues(__spreadValues({}, ui), ui.rightSideBarVisible ? { leftSideBarVisible: false } : {})
+        });
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomEditor = useMemo22(
+  const CustomEditor = useMemo23(
     () => overrides.editor || DefaultOverride,
     [overrides]
   );
+  const [mounted, setMounted] = useState23(false);
+  useEffect25(() => {
+    setMounted(true);
+  }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  useEffect24(() => {
+  useEffect25(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -8436,36 +8589,106 @@ var Layout = ({ children }) => {
   usePreviewModeHotkeys();
   useDeleteHotkeys();
   useClipboardHotkeys();
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--editor-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--editor-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => {
     var _a;
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [theme, setTheme] = useState22(() => {
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = useState23("toggle");
+  const [mobilePanelHeight, setMobilePanelHeight] = useState23(
+    null
+  );
+  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;
+      const panel = mobilePanelRef.current;
+      dragStartHeight.current = panel ? panel.getBoundingClientRect().height : 0;
+      document.body.style.userSelect = "none";
+      document.body.style.touchAction = "none";
+    },
+    []
+  );
+  const handleMobileDragMove = useCallback24((clientY) => {
+    if (!isDraggingMobile.current) return;
+    const delta = dragStartY.current - clientY;
+    const viewportHeight = window.innerHeight;
+    const minH = viewportHeight * 0.15;
+    const maxH = viewportHeight * 0.75;
+    const newH = Math.min(maxH, Math.max(minH, dragStartHeight.current + delta));
+    setMobilePanelHeight(newH);
+  }, []);
+  const handleMobileDragEnd = useCallback24(() => {
+    if (!isDraggingMobile.current) return;
+    isDraggingMobile.current = false;
+    document.body.style.userSelect = "";
+    document.body.style.touchAction = "";
+  }, []);
+  useEffect25(() => {
+    const onTouchMove = (e) => {
+      if (isDraggingMobile.current) {
+        e.preventDefault();
+        handleMobileDragMove(e.touches[0].clientY);
+      }
+    };
+    const onTouchEnd = () => handleMobileDragEnd();
+    const onMouseMove = (e) => {
+      if (isDraggingMobile.current) {
+        e.preventDefault();
+        handleMobileDragMove(e.clientY);
+      }
+    };
+    const onMouseUp = () => handleMobileDragEnd();
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [handleMobileDragMove, handleMobileDragEnd]);
+  const [theme, setTheme] = useState23(() => {
     if (typeof window === "undefined") return "light";
     const stored = window.localStorage.getItem("editor-theme");
     if (stored === "light" || stored === "dark") return stored;
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
-  useEffect24(() => {
+  useEffect25(() => {
     if (typeof window === "undefined") return;
     window.localStorage.setItem("editor-theme", theme);
   }, [theme]);
   const toggleTheme = () => {
     setTheme((t) => t === "dark" ? "light" : "dark");
   };
-  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx52(Sun, { size: 18 }) : /* @__PURE__ */ jsx52(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx53(Sun, { size: 14 }) : /* @__PURE__ */ jsx53(Moon, { size: 14 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
-  const hasLegacySideBarPlugin = useMemo22(
+  const hasLegacySideBarPlugin = useMemo23(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = useMemo22(() => {
+  const pluginItems = useMemo23(() => {
     const details = {};
+    const defaultPlugins = [blocksPlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
-    const combinedPlugins = [...plugins != null ? plugins : []].sort(
-      (a, b) => isLegacy(a) - isLegacy(b)
-    );
+    const combinedPlugins = [
+      ...defaultPlugins,
+      ...plugins != null ? plugins : []
+    ].sort((a, b) => isLegacy(a) - isLegacy(b));
     if (!(plugins == null ? void 0 : plugins.some((p) => p.name === "fields"))) {
       combinedPlugins.push(fieldsPlugin());
     }
@@ -8477,15 +8700,23 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx52(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx53(ToyBrick, {}),
           onClick: () => {
+            var _a2;
+            setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
             if (plugin.name === currentPlugin) {
-              setUi({ leftSideBarVisible: !leftSideBarVisible });
-            } else if (plugin.name) {
-              setUi({
-                plugin: { current: plugin.name },
-                leftSideBarVisible: true
-              });
+              if (leftSideBarVisible) {
+                setUi({ leftSideBarVisible: false });
+              } else {
+                setUi({ leftSideBarVisible: true });
+              }
+            } else {
+              if (plugin.name) {
+                setUi({
+                  plugin: { current: plugin.name },
+                  leftSideBarVisible: true
+                });
+              }
             }
           },
           isActive: leftSideBarVisible && currentPlugin === plugin.name,
@@ -8497,65 +8728,141 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
     }
   }, [pluginItems, currentPlugin]);
   const hasDesktopFieldsPlugin = pluginItems["fields"] && pluginItems["fields"].mobileOnly === false;
-  return /* @__PURE__ */ jsx52(ThemeContext.Provider, { value: { theme, toggleTheme }, children: /* @__PURE__ */ jsxs23(
+  const mobilePanelStyle = {};
+  if (mobilePanelHeight && leftSideBarVisible) {
+    mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
+  }
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: `Editor ${getClassName32({
+      className: `Editor ${getClassName33({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx52(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx52(CustomEditor, { children: children || /* @__PURE__ */ jsx52(FrameProvider, { children: /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx53(CustomEditor, { children: children || /* @__PURE__ */ jsx53(FrameProvider, { children: /* @__PURE__ */ jsx53(
           "div",
           {
             className: getLayoutClassName({
               leftSideBarVisible,
+              mounted,
               rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
-              navBarVisible
+              navBarVisible,
+              mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
+              mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content",
+              mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs23("div", { className: getLayoutClassName("inner"), children: [
-              navBarVisible && /* @__PURE__ */ jsxs23("header", { className: getLayoutClassName("header"), children: [
-                /* @__PURE__ */ jsx52("div", { className: getLayoutClassName("headerStart"), children: /* @__PURE__ */ jsx52(Nav, { items: pluginItems, orientation: "horizontal" }) }),
-                /* @__PURE__ */ jsx52("div", { className: getLayoutClassName("headerCenter"), children: chrome.showUrlBar && /* @__PURE__ */ jsx52(BrowserBar, {}) }),
-                /* @__PURE__ */ jsxs23("div", { className: getLayoutClassName("headerEnd"), children: [
-                  chrome.showHistoryControls && /* @__PURE__ */ jsx52(HeaderHistory, {}),
-                  /* @__PURE__ */ jsx52(HeaderPublish, {})
-                ] })
-              ] }),
-              leftSideBarVisible && /* @__PURE__ */ jsx52(Sidebar, { position: "left", children: Object.entries(pluginItems).map(
-                ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx52(
-                  PluginTab,
-                  {
-                    visible: currentPlugin === id,
-                    mobileOnly,
-                    children: /* @__PURE__ */ jsx52(Render2, {})
-                  },
-                  id
-                )
-              ) }),
-              /* @__PURE__ */ jsx52(Canvas, {}),
-              !hasDesktopFieldsPlugin && rightSideBarVisible && /* @__PURE__ */ jsx52(Sidebar, { position: "right", children: /* @__PURE__ */ jsx52(FieldSideBarBody, {}) })
-            ] })
+            children: /* @__PURE__ */ jsxs23(
+              "div",
+              {
+                className: getLayoutClassName("inner"),
+                style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
+                children: [
+                  navBarVisible && /* @__PURE__ */ jsx53("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx53(TopHeader, { pluginItems }) }),
+                  /* @__PURE__ */ jsxs23(
+                    "div",
+                    {
+                      ref: mobilePanelRef,
+                      className: getLayoutClassName("mobilePanel"),
+                      children: [
+                        /* @__PURE__ */ jsx53(
+                          "div",
+                          {
+                            className: getLayoutClassName("mobileDragHandle"),
+                            onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
+                            onMouseDown: (e) => handleMobileDragStart(e.clientY),
+                            children: /* @__PURE__ */ jsx53(
+                              "div",
+                              {
+                                className: getLayoutClassName("mobileDragHandlePill")
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx53(
+                          "div",
+                          {
+                            className: getLayoutClassName("mobilePanelContent"),
+                            children: Object.entries(pluginItems).map(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx53(
+                                PluginTab,
+                                {
+                                  visible: currentPlugin === id,
+                                  mobileOnly,
+                                  children: /* @__PURE__ */ jsx53(Render2, {})
+                                },
+                                id
+                              )
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx53(
+                    Sidebar,
+                    {
+                      position: "left",
+                      sidebarRef: leftSidebarRef,
+                      isVisible: leftSideBarVisible,
+                      onResize: setLeftWidth,
+                      onResizeEnd: handleLeftSidebarResizeEnd,
+                      children: Object.entries(pluginItems).map(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx53(
+                          PluginTab,
+                          {
+                            visible: currentPlugin === id,
+                            mobileOnly,
+                            children: /* @__PURE__ */ jsx53(Render2, {})
+                          },
+                          id
+                        )
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx53(
+                    Canvas,
+                    {
+                      theme,
+                      themeIcon,
+                      themeLabel,
+                      onToggleTheme: toggleTheme
+                    }
+                  ),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx53(
+                    Sidebar,
+                    {
+                      position: "right",
+                      sidebarRef: rightSidebarRef,
+                      isVisible: rightSideBarVisible,
+                      onResize: setRightWidth,
+                      onResizeEnd: handleRightSidebarResizeEnd,
+                      children: /* @__PURE__ */ jsx53(FieldSideBar, {})
+                    }
+                  )
+                ]
+              }
+            )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx52("div", { id: "editor-portal-root", className: getClassName32("portal") })
+        /* @__PURE__ */ jsx53("div", { id: "editor-portal-root", className: getClassName33("portal") })
       ]
     }
-  ) });
+  );
 };
 
 // components/Editor/index.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var CHROME_KEYS = [
   "showNavBar",
   "showThemeToggle",
@@ -8585,11 +8892,11 @@ var splitUiConfig = (ui) => {
   }
   return { runtime, chrome };
 };
-var propsContext = createContext9({});
+var propsContext = createContext8({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx53(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx54(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => useContext16(propsContext);
+var usePropsContext = () => useContext15(propsContext);
 var useChromeConfig = () => {
   const { ui } = usePropsContext();
   const { chrome } = splitUiConfig(ui);
@@ -8613,14 +8920,14 @@ function EditorProvider({ children }) {
     fullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = useMemo23(
+  const iframe = useMemo24(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState23(() => {
+  const [generatedAppState] = useState24(() => {
     var _a, _b, _c, _d, _e, _f;
     const { runtime: initialUiRuntime } = splitUiConfig(initialUi);
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUiRuntime);
@@ -8673,7 +8980,7 @@ function EditorProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState23(
+  const [blendedHistories] = useState24(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -8687,7 +8994,7 @@ function EditorProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = useMemo23(() => {
+  const initialHistoryIndex = useMemo24(() => {
     if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
       return _initialHistory == null ? void 0 : _initialHistory.index;
     }
@@ -8698,7 +9005,7 @@ function EditorProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = useMemo23(() => {
+  const loadedFieldTransforms = useMemo24(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -8707,7 +9014,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback22(
+  const generateAppStore = useCallback25(
     (state) => {
       return {
         instanceId,
@@ -8739,15 +9046,15 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState23(
+  const [appStore] = useState24(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  useEffect25(() => {
+  useEffect26(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  useEffect25(() => {
+  useEffect26(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [generateAppStore]);
@@ -8756,8 +9063,8 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef16(null);
-  useEffect25(() => {
+  const previousData = useRef19(null);
+  useEffect26(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -8771,16 +9078,16 @@ function EditorProvider({ children }) {
   }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
-  useEffect25(() => {
+  useEffect26(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx53(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx53(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ jsx54(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx54(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor3(props) {
-  return /* @__PURE__ */ jsx53(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx53(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx53(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx54(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx54(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx54(Layout, { children: props.children }) })) }));
 }
 Editor3.Components = Components;
 Editor3.Fields = Fields;
@@ -8790,10 +9097,10 @@ Editor3.Preview = Preview2;
 
 // lib/use-stable-value.ts
 init_react_import();
-import { useRef as useRef17 } from "react";
+import { useRef as useRef20 } from "react";
 import { deepEqual as deepEqual3 } from "fast-equals";
 var useStableValue = (value) => {
-  const ref = useRef17(value);
+  const ref = useRef20(value);
   if (!deepEqual3(ref.current, value)) {
     ref.current = value;
   }
@@ -8802,11 +9109,11 @@ var useStableValue = (value) => {
 
 // components/App/context.ts
 init_react_import();
-import { createContext as createContext10, useContext as useContext17, useMemo as useMemo24 } from "react";
+import { createContext as createContext9, useContext as useContext16, useMemo as useMemo25 } from "react";
 import { matchRoutes, useLocation, useNavigate } from "react-router";
-var appConfigContext = createContext10(null);
+var appConfigContext = createContext9(null);
 var useAppConfigContext = () => {
-  const ctx = useContext17(appConfigContext);
+  const ctx = useContext16(appConfigContext);
   if (!ctx) {
     throw new Error("useApp must be called inside an <AppProvider> or <App>");
   }
@@ -8825,7 +9132,7 @@ var useApp = () => {
   const currentPath = location.pathname || "/";
   const isEditing = cfg.editorPath !== null && (currentPath === cfg.editorPath || currentPath.startsWith(`${cfg.editorPath}/`));
   const matchRoute = isEditing ? stripPrefix(currentPath, cfg.editorPath) : currentPath;
-  const matched = useMemo24(() => {
+  const matched = useMemo25(() => {
     const routeKeys = Object.keys(cfg.pages);
     if (routeKeys.length === 0) return null;
     const matches = matchRoutes(
@@ -8841,7 +9148,7 @@ var useApp = () => {
       data: cfg.pages[key]
     };
   }, [cfg.pages, matchRoute]);
-  const routes = useMemo24(() => Object.keys(cfg.pages), [cfg.pages]);
+  const routes = useMemo25(() => Object.keys(cfg.pages), [cfg.pages]);
   const navigate = (route) => {
     const target = isEditing && cfg.editorPath ? `${cfg.editorPath}${route === "/" ? "" : route}` || "/" : route;
     rrNavigate(target || "/");
@@ -8858,14 +9165,14 @@ var useApp = () => {
 
 // components/App/AppProvider.tsx
 init_react_import();
-import { useMemo as useMemo25 } from "react";
+import { useMemo as useMemo26 } from "react";
 import {
   BrowserRouter,
   HashRouter,
   MemoryRouter,
   StaticRouter
 } from "react-router";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -8878,7 +9185,7 @@ function AppProvider({
 }) {
   const stablePages = useStableValue(pages);
   const resolvedEditorPath = editorPath === null ? null : editorPath || EDITOR_PATH;
-  const ctxValue = useMemo25(
+  const ctxValue = useMemo26(
     () => ({
       config,
       pages: stablePages,
@@ -8886,28 +9193,28 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ jsx54(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ jsx55(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ jsx54(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    return /* @__PURE__ */ jsx55(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
   }
   if (router === "hash") {
-    return /* @__PURE__ */ jsx54(HashRouter, { children: inner });
+    return /* @__PURE__ */ jsx55(HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ jsx54(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ jsx55(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ jsx54(BrowserRouter, { children: inner });
+  return /* @__PURE__ */ jsx55(BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
 init_react_import();
 import { Route, Routes } from "react-router";
-import { Fragment as Fragment14, jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ jsx55(
+var DefaultNotFound = () => /* @__PURE__ */ jsx56(
   "div",
   {
     style: {
@@ -8918,8 +9225,8 @@ var DefaultNotFound = () => /* @__PURE__ */ jsx55(
       alignItems: "center"
     },
     children: /* @__PURE__ */ jsxs24("div", { children: [
-      /* @__PURE__ */ jsx55("h1", { children: "404" }),
-      /* @__PURE__ */ jsx55("p", { children: "No page matches this route." })
+      /* @__PURE__ */ jsx56("h1", { children: "404" }),
+      /* @__PURE__ */ jsx56("p", { children: "No page matches this route." })
     ] })
   }
 );
@@ -8930,7 +9237,7 @@ function RenderForKey({
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     Render,
     {
       config,
@@ -8948,7 +9255,7 @@ function EditorForKey({
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     Editor3,
     {
       config,
@@ -8986,11 +9293,11 @@ function AppRender({ metadata, renderNotFound }) {
   if (isEditing) return null;
   const routeKeys = Object.keys(pages);
   return /* @__PURE__ */ jsxs24(Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ jsx55(
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx56(
       Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ jsx55(
+        element: /* @__PURE__ */ jsx56(
           RenderForKey,
           {
             routeKey,
@@ -9000,11 +9307,11 @@ function AppRender({ metadata, renderNotFound }) {
       },
       `render:${routeKey}`
     )),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ jsx55(Fragment14, { children: renderNotFound() }) : /* @__PURE__ */ jsx55(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ jsx56(Fragment15, { children: renderNotFound() }) : /* @__PURE__ */ jsx56(DefaultNotFound, {})
       }
     )
   ] });
@@ -9015,11 +9322,11 @@ function AppEditor(props) {
   if (!isEditing || editorPath === null) return null;
   const routeKeys = Object.keys(pages);
   return /* @__PURE__ */ jsxs24(Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ jsx55(
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx56(
       Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ jsx55(
+        element: /* @__PURE__ */ jsx56(
           EditorForKey,
           {
             routeKey,
@@ -9030,26 +9337,26 @@ function AppEditor(props) {
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ jsx55(Fragment14, { children: renderNotFound() }) : /* @__PURE__ */ jsx55(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ jsx56(Fragment15, { children: renderNotFound() }) : /* @__PURE__ */ jsx56(DefaultNotFound, {})
       }
     )
   ] });
 }
 function DefaultAppLayout(props) {
   const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
-  return /* @__PURE__ */ jsxs24(Fragment14, { children: [
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs24(Fragment15, { children: [
+    /* @__PURE__ */ jsx56(
       AppRender,
       {
         metadata: editorProps.metadata,
         renderNotFound
       }
     ),
-    /* @__PURE__ */ jsx55(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+    /* @__PURE__ */ jsx56(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
   ] });
 }
 function App(props) {
@@ -9068,7 +9375,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     AppProvider,
     {
       config,
@@ -9076,7 +9383,7 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ jsx55(DefaultAppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ jsx56(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
@@ -9114,23 +9421,6 @@ function pageMetadata(data) {
   return out;
 }
 
-// plugins/blocks/index.tsx
-init_react_import();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
-init_react_import();
-var styles_module_default28 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
-
-// plugins/blocks/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-var getClassName33 = get_class_name_factory_default("BlocksPlugin", styles_module_default28);
-var blocksPlugin = () => ({
-  name: "blocks",
-  label: "Blocks",
-  render: () => /* @__PURE__ */ jsx56("div", { className: getClassName33(), children: /* @__PURE__ */ jsx56(Components, {}) }),
-  icon: /* @__PURE__ */ jsx56(Plus, {})
-});
-
 // plugins/outline/index.tsx
 init_react_import();
 
@@ -9215,6 +9505,7 @@ export {
   createUseEditor,
   useEditor,
   useGetEditor,
+  blocksPlugin,
   fieldsPlugin,
   usePropsContext,
   Editor3 as Editor,
@@ -9225,7 +9516,6 @@ export {
   App,
   useRouteParams,
   pageMetadata,
-  blocksPlugin,
   outlinePlugin,
   legacySideBarPlugin
 };