@reacteditor/core 0.0.13 → 0.0.15

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

@@ -1,13 +1,13 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-BZ4BQZJR.mjs";
+} from "./chunk-647NZJYM.mjs";
 import {
   ActionBar,
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-BUR5T7IX.mjs";
+} from "./chunk-TFAZFGYZ.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -16,7 +16,7 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-PUDWMFBH.mjs";
+} from "./chunk-3CGBQNX4.mjs";
 import {
   Check,
   ChevronDown,
@@ -42,6 +42,7 @@ import {
   SlidersHorizontal,
   Smartphone,
   Sun,
+  Tablet,
   ToyBrick,
   Trash,
   Undo2,
@@ -49,7 +50,7 @@ import {
   X,
   appStoreContext,
   createAppStore,
-  getBox,
+  defaultViewports,
   monitorHotkeys,
   reorder,
   replace,
@@ -60,7 +61,7 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-LRFRIIKG.mjs";
+} from "./chunk-T43H325W.mjs";
 import {
   getItem,
   insert,
@@ -69,9 +70,8 @@ import {
   populateIds
 } from "./chunk-M4JDRFYB.mjs";
 import {
-  defaultAppState,
-  defaultViewports
-} from "./chunk-IIRJMJFU.mjs";
+  defaultAppState
+} from "./chunk-NPC7A3V3.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -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-3COFH5WN.mjs").then((m) => ({
+  () => import("./Editor-7UIJWCPN.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4698,7 +4698,7 @@ import {
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-3COFH5WN.mjs").then((m) => ({
+  () => import("./Editor-7UIJWCPN.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -6013,121 +6013,6 @@ 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();
 
@@ -6136,11 +6021,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_default17 = { "Breadcrumbs": "_Breadcrumbs_1cjxk_1", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_1cjxk_10", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_1cjxk_17" };
+var styles_module_default15 = { "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 useMemo15 } from "react";
+import { useMemo as useMemo14 } from "react";
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -6152,7 +6037,7 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return useMemo15(() => {
+  return useMemo14(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c, _d;
       const [componentId] = zoneCompound.split(":");
@@ -6183,26 +6068,26 @@ var useBreadcrumbs = (renderCount) => {
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName22 = get_class_name_factory_default("Breadcrumbs", styles_module_default17);
+import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("Breadcrumbs", styles_module_default15);
 var Breadcrumbs = ({
   children,
   numParents = 1
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs14("div", { className: getClassName22(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs14("div", { className: getClassName22("breadcrumb"), children: [
-      /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs13("div", { className: getClassName20(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName20("breadcrumb"), children: [
+      /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
-          className: getClassName22("breadcrumbLabel"),
+          className: getClassName20("breadcrumbLabel"),
           onClick: () => setUi({ itemSelector: breadcrumb.selector }),
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx38(ChevronRight, { size: 14 })
+      /* @__PURE__ */ jsx36(ChevronRight, { size: 14 })
     ] }, i)),
     children
   ] });
@@ -6213,7 +6098,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_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" };
+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" };
 
 // components/Editor/components/Fields/index.tsx
 import {
@@ -6221,15 +6106,15 @@ import {
   useCallback as useCallback15,
   useContext as useContext11,
   useEffect as useEffect19,
-  useMemo as useMemo16
+  useMemo as useMemo15
 } from "react";
 import { useShallow as useShallow7 } from "zustand/react/shallow";
-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);
+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);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx39(Fragment8, { children });
+  return /* @__PURE__ */ jsx37(Fragment8, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -6309,7 +6194,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx39("div", { className: getClassName23("field"), children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx37("div", { className: getClassName21("field"), children: /* @__PURE__ */ jsx37(
     AutoFieldPrivate,
     {
       field,
@@ -6322,12 +6207,12 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = useMemo16(() => {
+  const initialValue = useMemo15(() => {
     var _a;
     const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
     return { [fieldName]: value };
   }, []);
-  return /* @__PURE__ */ jsx39(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx39(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ jsx37(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx37(FieldsChildInner, { fieldName }) });
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var GlobalSyncButton = () => {
@@ -6357,12 +6242,12 @@ var GlobalSyncButton = () => {
     });
   });
   const syncButtonClass = [
-    getClassName23("syncButton"),
-    isUnlinked ? styles_module_default18["EditorFields-syncButton--unlinked"] : null
+    getClassName21("syncButton"),
+    isUnlinked ? styles_module_default16["EditorFields-syncButton--unlinked"] : null
   ].filter(Boolean).join(" ");
-  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" })
+  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" })
   ] });
 };
 var FieldsInternal = ({ wrapFields = true }) => {
@@ -6389,20 +6274,20 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo16(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs15(
+  const Wrapper = useMemo15(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ jsxs14(
     "form",
     {
-      className: getClassName23({ wrapFields }),
+      className: getClassName21({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsxs15(Wrapper, { isLoading, itemSelector, children: [
-          /* @__PURE__ */ jsx39(GlobalSyncButton, {}),
-          fieldNames.map((fieldName) => /* @__PURE__ */ jsx39(FieldsChildMemo, { fieldName }, fieldName))
+        /* @__PURE__ */ jsxs14(Wrapper, { isLoading, itemSelector, children: [
+          /* @__PURE__ */ jsx37(GlobalSyncButton, {}),
+          fieldNames.map((fieldName) => /* @__PURE__ */ jsx37(FieldsChildMemo, { fieldName }, fieldName))
         ] }),
-        isLoading && /* @__PURE__ */ jsx39("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ jsx39("div", { className: getClassName23("loadingOverlayInner"), children: /* @__PURE__ */ jsx39(Loader, { size: 16 }) }) })
+        isLoading && /* @__PURE__ */ jsx37("div", { className: getClassName21("loadingOverlay"), children: /* @__PURE__ */ jsx37("div", { className: getClassName21("loadingOverlayInner"), children: /* @__PURE__ */ jsx37(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -6411,11 +6296,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_default19 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+var styles_module_default17 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
-var getClassName24 = get_class_name_factory_default("FieldsPlugin", styles_module_default19);
+import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("FieldsPlugin", styles_module_default17);
 var CurrentTitle = () => {
   const label = useAppStore((s) => {
     var _a, _b;
@@ -6427,26 +6312,124 @@ var CurrentTitle = () => {
 var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
   name: "fields",
   label: "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, {})
+  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, {})
   ] }),
-  icon: /* @__PURE__ */ jsx40(RectangleEllipsis, {}),
+  icon: /* @__PURE__ */ jsx38(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
 // components/Editor/index.tsx
 init_react_import();
 import {
-  createContext as createContext8,
-  useCallback as useCallback25,
-  useContext as useContext15,
-  useEffect as useEffect26,
-  useMemo as useMemo24,
-  useRef as useRef19,
-  useState as useState24
+  createContext as createContext9,
+  useCallback as useCallback22,
+  useContext as useContext16,
+  useEffect as useEffect25,
+  useMemo as useMemo23,
+  useRef as useRef16,
+  useState as useState23
 } 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";
@@ -6461,7 +6444,7 @@ import {
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx41 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx40 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var collectStyles = (doc) => {
   const collected = [];
@@ -6678,7 +6661,7 @@ var CopyHostStyles = ({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx41(Fragment9, { children });
+  return /* @__PURE__ */ jsx40(Fragment9, { children });
 };
 var autoFrameContext = createContext6({});
 var useFrame = () => useContext12(autoFrameContext);
@@ -6725,17 +6708,60 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx41(
+  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(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
       id,
-      srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root" data-editor-entry></div></body></html>',
+      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>',
       ref: frameRef,
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx41(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx40(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx40(
         CopyHostStyles,
         {
           debug,
@@ -6751,11 +6777,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_default20 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var styles_module_default19 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
 
 // components/Editor/components/Preview/index.tsx
-import { Fragment as Fragment10, jsx as jsx42 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("EditorPreview", styles_module_default20);
+import { Fragment as Fragment10, jsx as jsx41 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("EditorPreview", styles_module_default19);
 var Preview2 = ({ id = "editor-preview" }) => {
   const dispatch = useAppStore((s) => s.dispatch);
   const root = useAppStore((s) => s.state.data.root);
@@ -6781,14 +6807,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__ */ jsx42(Fragment10, { children: propsWithSlots.children });
+      }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx41(Fragment10, { children: propsWithSlots.children });
     },
     [config]
   );
   const Frame = useMemo17(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = useRef11(null);
-  const inner = !renderData ? /* @__PURE__ */ jsx42(
+  const inner = !renderData ? /* @__PURE__ */ jsx41(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       editor: {
@@ -6798,18 +6824,18 @@ var Preview2 = ({ id = "editor-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx42(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx41(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx42(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx41(Render, { data: renderData, config, metadata });
   useEffect21(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
-      className: getClassName25(),
+      className: getClassName24(),
       id,
       "data-editor-preview": true,
       onClick: (e) => {
@@ -6818,11 +6844,11 @@ var Preview2 = ({ id = "editor-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx42(
+      children: iframe.enabled ? /* @__PURE__ */ jsx41(
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName25("frame"),
+          className: getClassName24("frame"),
           "data-rfd-iframe": true,
           onReady: () => {
             setStatus("READY");
@@ -6831,18 +6857,18 @@ var Preview2 = ({ id = "editor-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx42(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx41(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx42(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx41(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx42(
+      ) : /* @__PURE__ */ jsx41(
         "div",
         {
           id: "preview-frame",
-          className: getClassName25("frame"),
+          className: getClassName24("frame"),
           ref,
           "data-editor-entry": true,
           children: inner
@@ -6860,7 +6886,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_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" };
+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" };
 
 // components/LayerTree/index.tsx
 import {
@@ -6870,9 +6896,9 @@ import {
   useRef as useRef12
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-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);
+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);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
 var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
 var MIN_VIRTUALIZED_LAYER_COUNT = 25;
@@ -7026,7 +7052,7 @@ var Layer = forwardRef2(function Layer2({
       "data-index": dataIndex,
       "data-editor-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx43("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
+        /* @__PURE__ */ jsx42("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs17(
           "button",
           {
             type: "button",
@@ -7051,34 +7077,34 @@ var Layer = forwardRef2(function Layer2({
               zoneStore.setState({ hoveringComponent: null });
             },
             children: [
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx42(
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
                   title: containsZone ? isSelected ? "Collapse" : "Expand" : void 0,
-                  children: containsZone && /* @__PURE__ */ jsx43(ChevronRight, { size: "12" })
+                  children: containsZone && /* @__PURE__ */ jsx42(ChevronRight, { size: "12" })
                 }
               ),
               /* @__PURE__ */ jsxs17("div", { className: getClassNameLayer("title"), children: [
-                /* @__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(
+                /* @__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(
                   "div",
                   {
                     className: getClassNameLayer("unlinkedGlyph"),
                     title: "Unlinked from shared",
-                    children: /* @__PURE__ */ jsx43(Unlink2, { size: "12" })
+                    children: /* @__PURE__ */ jsx42(Unlink2, { size: "12" })
                   }
                 )
               ] })
             ]
           }
         ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx43(
+        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx42(
           "div",
           {
             className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ jsx43(
+            children: /* @__PURE__ */ jsx42(
               LayerTreeZone,
               {
                 depth: depth + 1,
@@ -7102,8 +7128,8 @@ var LayerTreeZone = ({
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
   return /* @__PURE__ */ jsxs17(Fragment11, { children: [
-    tree.label && /* @__PURE__ */ jsx43("div", { className: getClassName26("zoneTitle"), children: tree.label }),
-    shouldVirtualize ? /* @__PURE__ */ jsx43(
+    tree.label && /* @__PURE__ */ jsx42("div", { className: getClassName25("zoneTitle"), children: tree.label }),
+    shouldVirtualize ? /* @__PURE__ */ jsx42(
       VirtualizedLayerTreeItems,
       {
         depth,
@@ -7111,7 +7137,7 @@ var LayerTreeZone = ({
         selectedPathIds,
         tree
       }
-    ) : /* @__PURE__ */ jsx43(
+    ) : /* @__PURE__ */ jsx42(
       StaticLayerTreeItems,
       {
         depth,
@@ -7128,9 +7154,9 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  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(
+  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(
       Layer,
       {
         childIsSelected: selectedPathIds.has(node.itemId),
@@ -7176,7 +7202,7 @@ var VirtualizedLayerTreeItems = ({
     const gapSize = Math.max(virtualItem.start - previousEnd, 0);
     if (gapSize > 0) {
       renderedItems.push(
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx42(
           "li",
           {
             "aria-hidden": "true",
@@ -7187,7 +7213,7 @@ var VirtualizedLayerTreeItems = ({
       );
     }
     renderedItems.push(
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx42(
         Layer,
         {
           childIsSelected: selectedPathIds.has(node.itemId),
@@ -7208,7 +7234,7 @@ var VirtualizedLayerTreeItems = ({
   const trailingGap = Math.max(totalSize - previousEnd, 0);
   if (trailingGap > 0) {
     renderedItems.push(
-      /* @__PURE__ */ jsx43(
+      /* @__PURE__ */ jsx42(
         "li",
         {
           "aria-hidden": "true",
@@ -7218,8 +7244,8 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ jsxs17("ul", { className: getClassName26(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx43("div", { className: getClassName26("helper"), children: "empty" }),
+  return /* @__PURE__ */ jsxs17("ul", { className: getClassName25(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx42("div", { className: getClassName25("helper"), children: "empty" }),
     renderedItems
   ] });
 };
@@ -7228,7 +7254,7 @@ var LayerTree = ({
   selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx43(Fragment11, { children: trees.map((tree) => /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(Fragment11, { children: trees.map((tree) => /* @__PURE__ */ jsx42(
     LayerTreeZone,
     {
       depth: 0,
@@ -7253,7 +7279,7 @@ var findZonesForArea = (state, area) => {
 
 // components/Editor/components/Outline/index.tsx
 import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
@@ -7286,7 +7312,7 @@ var Outline = () => {
     [config, nodes, rootZones, zones]
   );
   const Wrapper = useMemo18(() => outlineOverride || "div", [outlineOverride]);
-  return /* @__PURE__ */ jsx44(Wrapper, { children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(Wrapper, { children: /* @__PURE__ */ jsx43(
     LayerTree,
     {
       selectedId,
@@ -7393,17 +7419,11 @@ function splitGlobals(data, config) {
 
 // components/Editor/components/Layout/index.tsx
 init_react_import();
-import {
-  useCallback as useCallback24,
-  useEffect as useEffect25,
-  useMemo as useMemo23,
-  useRef as useRef18,
-  useState as useState23
-} from "react";
+import { useEffect as useEffect24, useMemo as useMemo22, useState as useState22 } from "react";
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default22 = { "Editor": "_Editor_frglt_19", "Editor-portal": "_Editor-portal_frglt_32", "EditorLayout": "_EditorLayout_frglt_37", "EditorLayout-inner": "_EditorLayout-inner_frglt_41", "Editor--hidePlugins": "_Editor--hidePlugins_frglt_73", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_frglt_74", "EditorLayout--mounted": "_EditorLayout--mounted_frglt_83", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_frglt_87", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_frglt_87", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_frglt_92", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_frglt_110", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_frglt_132", "EditorLayout-mounted": "_EditorLayout-mounted_frglt_151", "EditorLayout-nav": "_EditorLayout-nav_frglt_192", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_frglt_208", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_frglt_218", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_frglt_224", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_frglt_230", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_frglt_250", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_frglt_257", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_frglt_271", "EditorPluginTab": "_EditorPluginTab_frglt_278", "EditorPluginTab--visible": "_EditorPluginTab--visible_frglt_284", "EditorPluginTab-body": "_EditorPluginTab-body_frglt_289" };
+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" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -7434,8 +7454,8 @@ var useInjectGlobalCss = (iframeEnabled) => {
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment12, jsx as jsx45 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx45(Fragment12, { children });
+import { Fragment as Fragment12, jsx as jsx44 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx44(Fragment12, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
@@ -7460,11 +7480,11 @@ init_react_import();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/SidebarSection/styles.module.css#css-module
 init_react_import();
-var styles_module_default23 = { "SidebarSection": "_SidebarSection_tt2oy_1", "SidebarSection-title": "_SidebarSection-title_tt2oy_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_tt2oy_20", "SidebarSection-content": "_SidebarSection-content_tt2oy_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_tt2oy_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_tt2oy_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_tt2oy_33", "SidebarSection-heading": "_SidebarSection-heading_tt2oy_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_tt2oy_88" };
+var styles_module_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" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx46, jsxs as jsxs18 } from "react/jsx-runtime";
-var getClassName27 = get_class_name_factory_default("SidebarSection", styles_module_default23);
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("SidebarSection", styles_module_default22);
 var SidebarSection = ({
   children,
   title,
@@ -7473,13 +7493,15 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  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 }) })
+  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 }) })
     ] }) }),
-    /* @__PURE__ */ jsx46("div", { className: getClassName27("content"), children }),
-    isLoading && /* @__PURE__ */ jsx46("div", { className: getClassName27("loadingOverlay"), children: /* @__PURE__ */ jsx46(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx45("div", { className: getClassName26("content"), children }),
+    isLoading && /* @__PURE__ */ jsx45("div", { className: getClassName26("loadingOverlay"), children: /* @__PURE__ */ jsx45(Loader, { size: 32 }) })
   ] });
 };
 
@@ -7488,323 +7510,102 @@ init_react_import();
 import {
   useCallback as useCallback19,
   useEffect as useEffect23,
-  useMemo as useMemo22,
-  useRef as useRef15,
-  useState as useState21
+  useMemo as useMemo21,
+  useRef as useRef14,
+  useState as useState20
 } from "react";
+import {
+  TransformWrapper,
+  TransformComponent,
+  useTransformComponent,
+  useTransformEffect
+} from "react-zoom-pan-pinch";
 
-// components/BrowserBar/index.tsx
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
 init_react_import();
-import { useMemo as useMemo20, useRef as useRef13, useState as useState20 } from "react";
+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/ui/Combobox/index.tsx
-init_react_import();
-import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+// components/Editor/components/Canvas/index.tsx
+import { useShallow as useShallow9 } from "zustand/react/shallow";
 
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
+// lib/frame-context.tsx
 init_react_import();
-var styles_module_default24 = { "EditorCombobox-input": "_EditorCombobox-input_12a2a_4", "EditorCombobox-trigger": "_EditorCombobox-trigger_12a2a_21", "EditorCombobox-triggerIcon": "_EditorCombobox-triggerIcon_12a2a_42", "EditorCombobox-positioner": "_EditorCombobox-positioner_12a2a_46", "EditorCombobox-content": "_EditorCombobox-content_12a2a_50", "EditorCombobox-list": "_EditorCombobox-list_12a2a_65", "EditorCombobox-item": "_EditorCombobox-item_12a2a_71", "EditorCombobox-itemIndicator": "_EditorCombobox-itemIndicator_12a2a_97", "EditorCombobox-empty": "_EditorCombobox-empty_12a2a_110" };
+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;
+};
 
-// 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));
+// lib/theme-context.tsx
+init_react_import();
+import { createContext as createContext8, useContext as useContext15 } from "react";
+var ThemeContext = createContext8({
+  theme: "light",
+  toggleTheme: () => {
   }
-  return join(base, override);
+});
+var useEditorTheme = () => useContext15(ThemeContext);
+
+// 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 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_x10eb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_x10eb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_x10eb_46", "BrowserBar-urlText": "_BrowserBar-urlText_x10eb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_x10eb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_x10eb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_x10eb_74", "BrowserBar-actions": "_BrowserBar-actions_x10eb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_x10eb_89" };
-
-// components/BrowserBar/index.tsx
-import { jsx as jsx48, jsxs as 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 BrowserBar = ({
-  onViewportChange
-}) => {
-  const { routes, currentRoute, onRouteChange } = usePropsContext();
-  const chrome = useChromeConfig();
-  const viewports = useAppStore((s) => s.state.ui.viewports);
-  const dispatch = useAppStore((s) => s.dispatch);
-  const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
-  const rightSideBarVisible = useAppStore(
-    (s) => s.state.ui.rightSideBarVisible
-  );
-  const isFullScreen = !leftSideBarVisible && !rightSideBarVisible;
-  const toggleFullScreen = () => {
-    const next = !isFullScreen;
-    dispatch({
-      type: "setUi",
-      ui: {
-        leftSideBarVisible: !next,
-        rightSideBarVisible: !next
-      }
-    });
-  };
-  const activeDevice = useMemo20(() => {
-    const w = viewports.current.width;
-    if (typeof w === "number" && w <= 640) return "mobile";
-    return "desktop";
-  }, [viewports.current.width]);
-  const setDevice = (device) => {
-    onViewportChange == null ? void 0 : onViewportChange(DEVICE_VIEWPORTS[device]);
-  };
-  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 && !chrome.showDeviceToggle && !chrome.showFullScreenToggle) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs20("div", { className: getClassName29(), children: [
-    chrome.showUrlBar && (showRoutePicker ? /* @__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) })
-          ] })
-        ]
-      }
-    ) : /* @__PURE__ */ jsxs20("div", { className: getClassName29("urlTrigger"), children: [
-      /* @__PURE__ */ jsx48(Globe, { className: getClassName29("urlIcon"), size: 14 }),
-      /* @__PURE__ */ jsx48("span", { className: getClassName29("urlText"), children: "/" })
-    ] })),
-    (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ jsxs20("div", { className: getClassName29("actions"), children: [
-      chrome.showDeviceToggle && /* @__PURE__ */ jsx48(
-        IconButton,
-        {
-          type: "button",
-          title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
-          onClick: () => setDevice(activeDevice === "desktop" ? "mobile" : "desktop"),
-          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ jsx48(Monitor, { size: 16 }) : /* @__PURE__ */ jsx48(Smartphone, { size: 16 }) })
-        }
-      ),
-      chrome.showFullScreenToggle && /* @__PURE__ */ jsx48(
-        IconButton,
-        {
-          type: "button",
-          title: isFullScreen ? "Exit full screen" : "Enter full screen",
-          onClick: toggleFullScreen,
-          children: /* @__PURE__ */ jsx48("span", { className: getClassName29("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ jsx48(Minimize, { size: 16 }) : /* @__PURE__ */ jsx48(Maximize, { size: 16 }) })
-        }
-      )
-    ] })
-  ] });
+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 })
 };
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
-init_react_import();
-var styles_module_default26 = { "EditorCanvas": "_EditorCanvas_es8bv_1", "EditorCanvas-controls": "_EditorCanvas-controls_es8bv_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_es8bv_22", "EditorCanvas-inner": "_EditorCanvas-inner_es8bv_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_es8bv_46", "EditorCanvas-root": "_EditorCanvas-root_es8bv_46", "EditorCanvas--ready": "_EditorCanvas--ready_es8bv_83", "EditorCanvas-loader": "_EditorCanvas-loader_es8bv_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_es8bv_100", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_es8bv_109", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_es8bv_114" };
-
-// 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 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 useCanvasFrame = () => {
-  const context = useContext14(FrameContext);
-  if (context === null) {
-    throw new Error("useCanvasFrame must be used within a FrameProvider");
-  }
-  return context;
+var ZoomLevel = ({ className }) => {
+  const scale = useTransformComponent((ctx) => ctx.state.scale);
+  return /* @__PURE__ */ jsx47("span", { className, children: `${Math.round(scale * 100)}%` });
 };
-
-// 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 = () => {
-  var _a, _b;
   const { frameRef } = useCanvasFrame();
-  const {
-    viewports: viewportOptions = defaultViewports,
-    ui: uiProp,
-    disableZoomControls
-  } = usePropsContext();
+  const { disableZoomControls } = usePropsContext();
   const {
     dispatch,
     overrides,
     setUi,
-    zoomConfig,
-    setZoomConfig,
     status,
     iframe,
     fullScreenCanvas
@@ -7813,150 +7614,215 @@ 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
     }))
   );
   const viewports = useAppStore((s) => s.state.ui.viewports);
-  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 });
+  const canvasFullScreen = useAppStore(
+    (s) => {
+      var _a;
+      return (_a = s.state.ui.canvasFullScreen) != null ? _a : 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 });
     return EditorDefault;
   }, []);
-  const CustomPreview = useMemo22(
+  const CustomPreview = useMemo21(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  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);
+  const [showLoader, setShowLoader] = useState20(false);
   useEffect23(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  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 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]);
+  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(() => {
-    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;
+    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 viewportEl = (_a = frameRef.current) == null ? void 0 : _a.firstElementChild;
+    if (viewportEl) {
+      viewportEl.addEventListener("wheel", handler, { passive: false });
+      cleanups.push(
+        () => viewportEl.removeEventListener("wheel", handler)
+      );
+    }
     if (iframe.enabled) {
-      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
-              })
-            })
-          })
-        })
+      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;
       };
-      let history = s.history;
-      if (s.history.histories.length === 1) {
-        history = __spreadProps(__spreadValues({}, history), { histories: [appState] });
+      if (!tryAttach()) {
+        const interval = window.setInterval(() => {
+          if (tryAttach()) window.clearInterval(interval);
+        }, 100);
+        cleanups.push(() => window.clearInterval(interval));
       }
-      appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
-  }, [
-    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(
+    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(
     "div",
     {
-      className: getClassName30({
+      className: getClassName27({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
-        fullScreen: fullScreenCanvas
+        fullScreen: fullScreenCanvas,
+        canvasFullScreen
       }),
       onClick: (e) => {
         const el = e.target;
@@ -7968,260 +7834,119 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: getClassName30("inner"), ref: frameRef, children: [
-        !disableZoomControls && /* @__PURE__ */ jsxs21("div", { className: getClassName30("zoomControls"), children: [
-          /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx50(Minus, { size: 14 }) }),
-          /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ jsx50(RotateCcw, { size: 14 }) }),
-          /* @__PURE__ */ jsx50(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx50(Plus, { size: 14 }) })
-        ] }),
-        /* @__PURE__ */ jsxs21(
-          "div",
+      children: /* @__PURE__ */ jsxs19("div", { className: getClassName27("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ jsx47("div", { className: getClassName27("zoomViewport"), children: disableZoomControls ? frameContents : /* @__PURE__ */ jsxs19(
+          TransformWrapper,
           {
-            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"
-            },
+            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: [
-              iframe.enabled && /* @__PURE__ */ jsx50("div", { className: getClassName30("browserBar"), children: /* @__PURE__ */ jsx50(
-                BrowserBar,
-                {
-                  onViewportChange: (viewport) => {
-                    autoSelectingRef.current = false;
-                    setShowTransition(true);
-                    isResizingRef.current = true;
-                    const uiViewport = __spreadProps(__spreadValues({}, viewport), {
-                      height: viewport.height || "auto",
-                      zoom: 1
-                    });
-                    setUi({
-                      viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
-                    });
+              /* @__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]
                   }
-                }
-              ) }),
-              /* @__PURE__ */ jsx50(
-                "div",
+                ),
+                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,
                 {
-                  className: getClassName30("root"),
-                  suppressHydrationWarning: true,
-                  id: "editor-canvas-root",
-                  onTransitionEnd: () => {
-                    setShowTransition(false);
-                    isResizingRef.current = false;
-                  },
-                  children: /* @__PURE__ */ jsx50(CustomPreview, { children: /* @__PURE__ */ jsx50(Preview2, {}) })
+                  infinite: true,
+                  wrapperStyle: { width: "100%", height: "100%" },
+                  children: frameContents
                 }
               )
             ]
           }
-        ),
-        /* @__PURE__ */ jsx50("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx50(Loader, { size: 24 }) })
+        ) }),
+        /* @__PURE__ */ jsx47("div", { className: getClassName27("loader"), children: /* @__PURE__ */ jsx47(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_default28 = { "Sidebar": "_Sidebar_14k7q_1", "Sidebar--isVisible": "_Sidebar--isVisible_14k7q_9", "Sidebar--left": "_Sidebar--left_14k7q_13", "Sidebar--right": "_Sidebar--right_14k7q_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_14k7q_37" };
+var styles_module_default24 = { "Sidebar": "_Sidebar_1ynke_8", "Sidebar--left": "_Sidebar--left_1ynke_20", "Sidebar--right": "_Sidebar--right_1ynke_25", "Sidebar-body": "_Sidebar-body_1ynke_30" };
 
 // components/Editor/components/Sidebar/index.tsx
-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
-      }
-    ) })
-  ] });
+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 }) });
 };
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback22 } from "react";
+import { useCallback as useCallback20 } from "react";
 
 // lib/should-block-editing-hotkey.ts
 init_react_import();
@@ -8261,7 +7986,7 @@ var shouldBlockEditingHotkey = (e) => {
 // lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = useCallback22(
+  const deleteSelectedComponent = useCallback20(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) {
@@ -8287,7 +8012,7 @@ var useDeleteHotkeys = () => {
 
 // lib/use-clipboard-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback23 } from "react";
+import { useCallback as useCallback21 } from "react";
 var CLIPBOARD_MARKER = "reacteditor/component";
 var isComponentData = (value) => {
   var _a;
@@ -8307,7 +8032,7 @@ var parsePayload = (text) => {
 };
 var useClipboardHotkeys = () => {
   const appStore = useAppStoreApi();
-  const writeSelectionToClipboard = useCallback23(() => {
+  const writeSelectionToClipboard = useCallback21(() => {
     var _a;
     const { selectedItem } = appStore.getState();
     if (!selectedItem) return false;
@@ -8319,14 +8044,14 @@ var useClipboardHotkeys = () => {
     });
     return true;
   }, [appStore]);
-  const copySelectedComponent = useCallback23(
+  const copySelectedComponent = useCallback21(
     (e) => {
       if (shouldBlockEditingHotkey(e)) return false;
       return writeSelectionToClipboard();
     },
     [writeSelectionToClipboard]
   );
-  const cutSelectedComponent = useCallback23(
+  const cutSelectedComponent = useCallback21(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -8345,143 +8070,322 @@ var useClipboardHotkeys = () => {
     },
     [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]
+  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)
   );
-  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
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default29 = { "Nav": "_Nav_1g4tk_1", "Nav-list": "_Nav-list_1g4tk_18", "Nav-footer": "_Nav-footer_1g4tk_42", "NavItem-link": "_NavItem-link_1g4tk_55", "NavItem-linkLabel": "_NavItem-linkLabel_1g4tk_83", "NavItem": "_NavItem_1g4tk_55", "NavItem-linkIcon": "_NavItem-linkIcon_1g4tk_108", "NavItem--active": "_NavItem--active_1g4tk_121", "NavItem--mobileOnly": "_NavItem--mobileOnly_1g4tk_132", "NavItem--desktopOnly": "_NavItem--desktopOnly_1g4tk_137" };
+var styles_module_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/Editor/components/Nav/index.tsx
-import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
-var getClassName33 = get_class_name_factory_default("Nav", styles_module_default29);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default29);
-var MenuItem = ({
-  label,
-  icon,
-  onClick,
-  isActive,
-  mobileOnly,
-  desktopOnly
-}) => {
-  return /* @__PURE__ */ jsx53(
-    "li",
+// 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}`;
+};
+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,
     {
-      className: getClassNameItem3({
-        active: isActive,
-        mobileOnly,
-        desktopOnly
-      }),
-      children: onClick && /* @__PURE__ */ jsxs23("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx53("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
+      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 Nav = ({
-  items,
-  footer
-}) => {
-  return /* @__PURE__ */ jsxs23("nav", { className: getClassName33(), children: [
-    /* @__PURE__ */ jsx53("ul", { className: getClassName33("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx53(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ jsx53("div", { className: getClassName33("footer"), children: footer })
-  ] });
+  ) : /* @__PURE__ */ jsxs22("div", { className: getClassName31("urlTrigger"), children: [
+    /* @__PURE__ */ jsx51(Globe, { className: getClassName31("urlIcon"), size: 14 }),
+    /* @__PURE__ */ jsx51("span", { className: getClassName31("urlText"), children: "/" })
+  ] }) });
 };
 
 // components/Editor/components/Layout/index.tsx
-import { Fragment as Fragment15, jsx as jsx54, jsxs as jsxs24 } from "react/jsx-runtime";
-var getClassName34 = get_class_name_factory_default("Editor", styles_module_default22);
-var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default22);
-var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default22);
-var FieldSideBarToolbar = () => {
+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 = () => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
-  const chrome = useChromeConfig();
+  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 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());
-  const CustomHeaderActions = useAppStore(
-    (s) => s.overrides.headerActions || DefaultOverride
-  );
-  return /* @__PURE__ */ jsxs24("div", { className: getClassName34("fieldSideBarToolbar"), children: [
-    chrome.showHistoryControls ? /* @__PURE__ */ jsxs24("div", { className: getClassName34("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ jsx54(
-        IconButton,
-        {
-          type: "button",
-          title: "undo",
-          disabled: !hasPast,
-          onClick: back,
-          children: /* @__PURE__ */ jsx54(Undo2, { size: 18 })
-        }
-      ),
-      /* @__PURE__ */ jsx54(
-        IconButton,
-        {
-          type: "button",
-          title: "redo",
-          disabled: !hasFuture,
-          onClick: forward,
-          children: /* @__PURE__ */ jsx54(Redo2, { size: 18 })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx54("div", {}),
-    /* @__PURE__ */ jsx54("div", { className: getClassName34("fieldSideBarActions"), children: /* @__PURE__ */ jsx54(CustomHeaderActions, { children: /* @__PURE__ */ jsx54(
-      Button,
+  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,
       {
-        onClick: () => {
-          const data = appStore.getState().state.data;
-          onPublish && onPublish(data, currentRoute);
-        },
-        children: "Publish"
+        type: "button",
+        title: "Redo",
+        disabled: !hasFuture,
+        onClick: forward,
+        children: /* @__PURE__ */ jsx52(Redo2, { size: 16 })
       }
-    ) }) })
-  ] });
-};
-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__ */ jsxs24(Fragment15, { children: [
-    /* @__PURE__ */ jsx54(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ jsx54(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx54(Fields, {}) })
+    )
   ] });
 };
 var PluginTab = ({
@@ -8489,17 +8393,16 @@ var PluginTab = ({
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx54("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx52("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx52("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
     iframe: _iframe,
     dnd,
-    initialHistory: _initialHistory,
     plugins,
     height
   } = usePropsContext();
-  const iframe = useMemo23(
+  const iframe = useMemo22(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -8507,7 +8410,7 @@ var Layout = ({ children }) => {
     [_iframe]
   );
   useInjectGlobalCss(iframe.enabled);
-  const dispatch = useAppStore((s) => s.dispatch);
+  const setUi = useAppStore((s) => s.setUi);
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
@@ -8515,53 +8418,14 @@ 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 = useMemo23(
+  const CustomEditor = useMemo22(
     () => overrides.editor || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState23(false);
-  useEffect25(() => {
-    setMounted(true);
-  }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  useEffect25(() => {
+  useEffect24(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -8572,106 +8436,36 @@ 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 [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(() => {
+  const [theme, setTheme] = useState22(() => {
     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";
   });
-  useEffect25(() => {
+  useEffect24(() => {
     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__ */ jsx54(Sun, { size: 18 }) : /* @__PURE__ */ jsx54(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ jsx52(Sun, { size: 18 }) : /* @__PURE__ */ jsx52(Moon, { size: 18 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
-  const hasLegacySideBarPlugin = useMemo23(
+  const hasLegacySideBarPlugin = useMemo22(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = useMemo23(() => {
+  const pluginItems = useMemo22(() => {
     const details = {};
-    const defaultPlugins = [blocksPlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
-    const combinedPlugins = [
-      ...defaultPlugins,
-      ...plugins != null ? plugins : []
-    ].sort((a, b) => isLegacy(a) - isLegacy(b));
+    const combinedPlugins = [...plugins != null ? plugins : []].sort(
+      (a, b) => isLegacy(a) - isLegacy(b)
+    );
     if (!(plugins == null ? void 0 : plugins.some((p) => p.name === "fields"))) {
       combinedPlugins.push(fieldsPlugin());
     }
@@ -8683,23 +8477,15 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx54(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ jsx52(ToyBrick, {}),
           onClick: () => {
-            var _a2;
-            setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
             if (plugin.name === currentPlugin) {
-              if (leftSideBarVisible) {
-                setUi({ leftSideBarVisible: false });
-              } else {
-                setUi({ leftSideBarVisible: true });
-              }
-            } else {
-              if (plugin.name) {
-                setUi({
-                  plugin: { current: plugin.name },
-                  leftSideBarVisible: true
-                });
-              }
+              setUi({ leftSideBarVisible: !leftSideBarVisible });
+            } else if (plugin.name) {
+              setUi({
+                plugin: { current: plugin.name },
+                leftSideBarVisible: true
+              });
             }
           },
           isActive: leftSideBarVisible && currentPlugin === plugin.name,
@@ -8711,147 +8497,65 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  useEffect25(() => {
+  useEffect24(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
     }
   }, [pluginItems, currentPlugin]);
   const hasDesktopFieldsPlugin = pluginItems["fields"] && pluginItems["fields"].mobileOnly === false;
-  const mobilePanelStyle = {};
-  if (mobilePanelHeight && leftSideBarVisible) {
-    mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
-  }
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx52(ThemeContext.Provider, { value: { theme, toggleTheme }, children: /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: `Editor ${getClassName34({
+      className: `Editor ${getClassName32({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ jsx54(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx54(CustomEditor, { children: children || /* @__PURE__ */ jsx54(FrameProvider, { children: /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx52(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx52(CustomEditor, { children: children || /* @__PURE__ */ jsx52(FrameProvider, { children: /* @__PURE__ */ jsx52(
           "div",
           {
             className: getLayoutClassName({
               leftSideBarVisible,
-              mounted,
               rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
-              navBarVisible,
-              mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
-              mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content",
-              mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
+              navBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs24(
-              "div",
-              {
-                className: getLayoutClassName("inner"),
-                style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
-                children: [
-                  navBarVisible && /* @__PURE__ */ jsx54("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx54(
-                    Nav,
-                    {
-                      items: pluginItems,
-                      footer: chrome.showThemeToggle ? /* @__PURE__ */ jsx54(
-                        IconButton,
-                        {
-                          type: "button",
-                          title: themeLabel,
-                          onClick: toggleTheme,
-                          children: themeIcon
-                        }
-                      ) : void 0
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs24(
-                    "div",
-                    {
-                      ref: mobilePanelRef,
-                      className: getLayoutClassName("mobilePanel"),
-                      children: [
-                        /* @__PURE__ */ jsx54(
-                          "div",
-                          {
-                            className: getLayoutClassName("mobileDragHandle"),
-                            onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
-                            onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ jsx54(
-                              "div",
-                              {
-                                className: getLayoutClassName("mobileDragHandlePill")
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx54(
-                          "div",
-                          {
-                            className: getLayoutClassName("mobilePanelContent"),
-                            children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ jsx54(
-                                PluginTab,
-                                {
-                                  visible: currentPlugin === id,
-                                  mobileOnly,
-                                  children: /* @__PURE__ */ jsx54(Render2, {})
-                                },
-                                id
-                              )
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx54(
-                    Sidebar,
-                    {
-                      position: "left",
-                      sidebarRef: leftSidebarRef,
-                      isVisible: leftSideBarVisible,
-                      onResize: setLeftWidth,
-                      onResizeEnd: handleLeftSidebarResizeEnd,
-                      children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx54(
-                          PluginTab,
-                          {
-                            visible: currentPlugin === id,
-                            mobileOnly,
-                            children: /* @__PURE__ */ jsx54(Render2, {})
-                          },
-                          id
-                        )
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx54(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx54(
-                    Sidebar,
-                    {
-                      position: "right",
-                      sidebarRef: rightSidebarRef,
-                      isVisible: rightSideBarVisible,
-                      onResize: setRightWidth,
-                      onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx54(FieldSideBar, {})
-                    }
-                  )
-                ]
-              }
-            )
+            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, {}) })
+            ] })
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx54("div", { id: "editor-portal-root", className: getClassName34("portal") })
+        /* @__PURE__ */ jsx52("div", { id: "editor-portal-root", className: getClassName32("portal") })
       ]
     }
-  );
+  ) });
 };
 
 // components/Editor/index.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var CHROME_KEYS = [
   "showNavBar",
   "showThemeToggle",
@@ -8881,11 +8585,11 @@ var splitUiConfig = (ui) => {
   }
   return { runtime, chrome };
 };
-var propsContext = createContext8({});
+var propsContext = createContext9({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx55(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx53(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => useContext15(propsContext);
+var usePropsContext = () => useContext16(propsContext);
 var useChromeConfig = () => {
   const { ui } = usePropsContext();
   const { chrome } = splitUiConfig(ui);
@@ -8909,14 +8613,14 @@ function EditorProvider({ children }) {
     fullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = useMemo24(
+  const iframe = useMemo23(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState24(() => {
+  const [generatedAppState] = useState23(() => {
     var _a, _b, _c, _d, _e, _f;
     const { runtime: initialUiRuntime } = splitUiConfig(initialUi);
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUiRuntime);
@@ -8969,7 +8673,7 @@ function EditorProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState24(
+  const [blendedHistories] = useState23(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -8983,7 +8687,7 @@ function EditorProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = useMemo24(() => {
+  const initialHistoryIndex = useMemo23(() => {
     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;
     }
@@ -8994,7 +8698,7 @@ function EditorProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = useMemo24(() => {
+  const loadedFieldTransforms = useMemo23(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -9003,7 +8707,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback25(
+  const generateAppStore = useCallback22(
     (state) => {
       return {
         instanceId,
@@ -9035,15 +8739,15 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState24(
+  const [appStore] = useState23(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  useEffect26(() => {
+  useEffect25(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  useEffect26(() => {
+  useEffect25(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [generateAppStore]);
@@ -9052,8 +8756,8 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = useRef19(null);
-  useEffect26(() => {
+  const previousData = useRef16(null);
+  useEffect25(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -9067,16 +8771,16 @@ function EditorProvider({ children }) {
   }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
-  useEffect26(() => {
+  useEffect25(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx55(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx55(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ jsx53(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx53(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor3(props) {
-  return /* @__PURE__ */ jsx55(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx55(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx53(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx53(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx53(Layout, { children: props.children }) })) }));
 }
 Editor3.Components = Components;
 Editor3.Fields = Fields;
@@ -9086,10 +8790,10 @@ Editor3.Preview = Preview2;
 
 // lib/use-stable-value.ts
 init_react_import();
-import { useRef as useRef20 } from "react";
+import { useRef as useRef17 } from "react";
 import { deepEqual as deepEqual3 } from "fast-equals";
 var useStableValue = (value) => {
-  const ref = useRef20(value);
+  const ref = useRef17(value);
   if (!deepEqual3(ref.current, value)) {
     ref.current = value;
   }
@@ -9098,11 +8802,11 @@ var useStableValue = (value) => {
 
 // components/App/context.ts
 init_react_import();
-import { createContext as createContext9, useContext as useContext16, useMemo as useMemo25 } from "react";
+import { createContext as createContext10, useContext as useContext17, useMemo as useMemo24 } from "react";
 import { matchRoutes, useLocation, useNavigate } from "react-router";
-var appConfigContext = createContext9(null);
+var appConfigContext = createContext10(null);
 var useAppConfigContext = () => {
-  const ctx = useContext16(appConfigContext);
+  const ctx = useContext17(appConfigContext);
   if (!ctx) {
     throw new Error("useApp must be called inside an <AppProvider> or <App>");
   }
@@ -9121,7 +8825,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 = useMemo25(() => {
+  const matched = useMemo24(() => {
     const routeKeys = Object.keys(cfg.pages);
     if (routeKeys.length === 0) return null;
     const matches = matchRoutes(
@@ -9137,7 +8841,7 @@ var useApp = () => {
       data: cfg.pages[key]
     };
   }, [cfg.pages, matchRoute]);
-  const routes = useMemo25(() => Object.keys(cfg.pages), [cfg.pages]);
+  const routes = useMemo24(() => Object.keys(cfg.pages), [cfg.pages]);
   const navigate = (route) => {
     const target = isEditing && cfg.editorPath ? `${cfg.editorPath}${route === "/" ? "" : route}` || "/" : route;
     rrNavigate(target || "/");
@@ -9154,14 +8858,14 @@ var useApp = () => {
 
 // components/App/AppProvider.tsx
 init_react_import();
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo25 } from "react";
 import {
   BrowserRouter,
   HashRouter,
   MemoryRouter,
   StaticRouter
 } from "react-router";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -9174,7 +8878,7 @@ function AppProvider({
 }) {
   const stablePages = useStableValue(pages);
   const resolvedEditorPath = editorPath === null ? null : editorPath || EDITOR_PATH;
-  const ctxValue = useMemo26(
+  const ctxValue = useMemo25(
     () => ({
       config,
       pages: stablePages,
@@ -9182,28 +8886,28 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ jsx56(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ jsx54(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ jsx56(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    return /* @__PURE__ */ jsx54(StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
   }
   if (router === "hash") {
-    return /* @__PURE__ */ jsx56(HashRouter, { children: inner });
+    return /* @__PURE__ */ jsx54(HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ jsx56(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ jsx54(MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ jsx56(BrowserRouter, { children: inner });
+  return /* @__PURE__ */ jsx54(BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
 init_react_import();
 import { Route, Routes } from "react-router";
-import { Fragment as Fragment16, jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ jsx57(
+var DefaultNotFound = () => /* @__PURE__ */ jsx55(
   "div",
   {
     style: {
@@ -9213,9 +8917,9 @@ var DefaultNotFound = () => /* @__PURE__ */ jsx57(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ jsxs25("div", { children: [
-      /* @__PURE__ */ jsx57("h1", { children: "404" }),
-      /* @__PURE__ */ jsx57("p", { children: "No page matches this route." })
+    children: /* @__PURE__ */ jsxs24("div", { children: [
+      /* @__PURE__ */ jsx55("h1", { children: "404" }),
+      /* @__PURE__ */ jsx55("p", { children: "No page matches this route." })
     ] })
   }
 );
@@ -9226,7 +8930,7 @@ function RenderForKey({
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55(
     Render,
     {
       config,
@@ -9244,7 +8948,7 @@ function EditorForKey({
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55(
     Editor3,
     {
       config,
@@ -9281,12 +8985,12 @@ function AppRender({ metadata, renderNotFound }) {
   const { pages, isEditing } = useApp();
   if (isEditing) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ jsxs25(Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs24(Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx55(
       Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ jsx57(
+        element: /* @__PURE__ */ jsx55(
           RenderForKey,
           {
             routeKey,
@@ -9296,11 +9000,11 @@ function AppRender({ metadata, renderNotFound }) {
       },
       `render:${routeKey}`
     )),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx55(
       Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ jsx57(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx57(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ jsx55(Fragment14, { children: renderNotFound() }) : /* @__PURE__ */ jsx55(DefaultNotFound, {})
       }
     )
   ] });
@@ -9310,12 +9014,12 @@ function AppEditor(props) {
   const { pages, isEditing, editorPath } = useApp();
   if (!isEditing || editorPath === null) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ jsxs25(Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs24(Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ jsx55(
       Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ jsx57(
+        element: /* @__PURE__ */ jsx55(
           EditorForKey,
           {
             routeKey,
@@ -9326,26 +9030,26 @@ function AppEditor(props) {
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx55(
       Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ jsx57(Fragment16, { children: renderNotFound() }) : /* @__PURE__ */ jsx57(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ jsx55(Fragment14, { children: renderNotFound() }) : /* @__PURE__ */ jsx55(DefaultNotFound, {})
       }
     )
   ] });
 }
 function DefaultAppLayout(props) {
   const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
-  return /* @__PURE__ */ jsxs25(Fragment16, { children: [
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs24(Fragment14, { children: [
+    /* @__PURE__ */ jsx55(
       AppRender,
       {
         metadata: editorProps.metadata,
         renderNotFound
       }
     ),
-    /* @__PURE__ */ jsx57(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+    /* @__PURE__ */ jsx55(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
   ] });
 }
 function App(props) {
@@ -9364,7 +9068,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx55(
     AppProvider,
     {
       config,
@@ -9372,7 +9076,7 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ jsx57(DefaultAppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ jsx55(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
@@ -9410,31 +9114,48 @@ 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();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
 init_react_import();
-var styles_module_default30 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+var styles_module_default29 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
-var getClassName35 = get_class_name_factory_default("OutlinePlugin", styles_module_default30);
+import { jsx as jsx57 } from "react/jsx-runtime";
+var getClassName34 = get_class_name_factory_default("OutlinePlugin", styles_module_default29);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ jsx58("div", { className: getClassName35(), children: /* @__PURE__ */ jsx58(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx58(Layers, {})
+  render: () => /* @__PURE__ */ jsx57("div", { className: getClassName34(), children: /* @__PURE__ */ jsx57(Outline, {}) }),
+  icon: /* @__PURE__ */ jsx57(Layers, {})
 });
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs26("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ jsx59(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx59(Components, {}) }),
-    /* @__PURE__ */ jsx59(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx59(Outline, {}) })
+  render: () => /* @__PURE__ */ jsxs25("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx58(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx58(Components, {}) }),
+    /* @__PURE__ */ jsx58(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx58(Outline, {}) })
   ] })
 });
 
@@ -9494,7 +9215,6 @@ export {
   createUseEditor,
   useEditor,
   useGetEditor,
-  blocksPlugin,
   fieldsPlugin,
   usePropsContext,
   Editor3 as Editor,
@@ -9505,6 +9225,7 @@ export {
   App,
   useRouteParams,
   pageMetadata,
+  blocksPlugin,
   outlinePlugin,
   legacySideBarPlugin
 };