@reacteditor/core 0.0.15 → 0.0.17

package/dist/no-external.js

@@ -160,19 +160,29 @@ var init_get_class_name_factory = __esm({
     "use strict";
     init_react_import();
     import_classnames = __toESM(require_classnames());
-    getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}) => {
+    getClassNameFactory = (rootClass, styles2, config = { baseClass: "" }) => (options = {}, modifiers) => {
       if (typeof options === "string") {
         const descendant = options;
-        const style = styles2[`${rootClass}-${descendant}`];
+        const baseKey = `${rootClass}-${descendant}`;
+        const style = styles2[baseKey];
+        if (modifiers) {
+          const prefixedModifiers = {};
+          for (let modifier in modifiers) {
+            prefixedModifiers[styles2[`${baseKey}--${modifier}`]] = modifiers[modifier];
+          }
+          return config.baseClass + (0, import_classnames.default)(__spreadValues({
+            [style]: !!style
+          }, prefixedModifiers));
+        }
         if (style) {
-          return config.baseClass + styles2[`${rootClass}-${descendant}`] || "";
+          return config.baseClass + style;
         }
         return "";
       } else if (typeof options === "object") {
-        const modifiers = options;
+        const modifiers2 = options;
         const prefixedModifiers = {};
-        for (let modifier in modifiers) {
-          prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers[modifier];
+        for (let modifier in modifiers2) {
+          prefixedModifiers[styles2[`${rootClass}--${modifier}`]] = modifiers2[modifier];
         }
         const c = styles2[rootClass];
         return config.baseClass + (0, import_classnames.default)(__spreadValues({
@@ -1072,20 +1082,6 @@ var init_sun = __esm({
   }
 });
 
-// ../../node_modules/lucide-react/dist/esm/icons/tablet.js
-var Tablet;
-var init_tablet = __esm({
-  "../../node_modules/lucide-react/dist/esm/icons/tablet.js"() {
-    "use strict";
-    init_react_import();
-    init_createLucideIcon();
-    Tablet = createLucideIcon("Tablet", [
-      ["rect", { width: "16", height: "20", x: "4", y: "2", rx: "2", ry: "2", key: "76otgf" }],
-      ["line", { x1: "12", x2: "12.01", y1: "18", y2: "18", key: "1dp563" }]
-    ]);
-  }
-});
-
 // ../../node_modules/lucide-react/dist/esm/icons/toy-brick.js
 var ToyBrick;
 var init_toy_brick = __esm({
@@ -1219,7 +1215,6 @@ var init_lucide_react = __esm({
     init_smartphone();
     init_strikethrough();
     init_sun();
-    init_tablet();
     init_toy_brick();
     init_trash();
     init_underline();
@@ -3174,6 +3169,7 @@ var init_default_app_state = __esm({
   "store/default-app-state.ts"() {
     "use strict";
     init_react_import();
+    init_default_viewports();
     defaultAppState = {
       data: { content: [], root: {}, zones: {} },
       ui: {
@@ -3186,9 +3182,10 @@ var init_default_app_state = __esm({
         isDragging: false,
         previewMode: "edit",
         viewports: {
-          // Default to the tablet viewport (the middle option) so the canvas
-          // opens at a comfortable preview width on most screens.
-          current: { width: 768, height: "auto" },
+          current: {
+            width: defaultViewports[0].width,
+            height: defaultViewports[0].height || "auto"
+          },
           options: [],
           controlsVisible: true
         },
@@ -3429,6 +3426,136 @@ var init_store = __esm({
   }
 });
 
+// ../../node_modules/tiny-invariant/dist/esm/tiny-invariant.js
+function invariant(condition, message) {
+  if (condition) {
+    return;
+  }
+  if (isProduction) {
+    throw new Error(prefix);
+  }
+  var provided = typeof message === "function" ? message() : message;
+  var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+  throw new Error(value);
+}
+var isProduction, prefix;
+var init_tiny_invariant = __esm({
+  "../../node_modules/tiny-invariant/dist/esm/tiny-invariant.js"() {
+    "use strict";
+    init_react_import();
+    isProduction = process.env.NODE_ENV === "production";
+    prefix = "Invariant failed";
+  }
+});
+
+// ../../node_modules/css-box-model/dist/css-box-model.esm.js
+var getRect, expand, shrink, noSpacing, createBox, parse, calculateBox, getBox;
+var init_css_box_model_esm = __esm({
+  "../../node_modules/css-box-model/dist/css-box-model.esm.js"() {
+    "use strict";
+    init_react_import();
+    init_tiny_invariant();
+    getRect = function getRect2(_ref) {
+      var top = _ref.top, right = _ref.right, bottom = _ref.bottom, left = _ref.left;
+      var width = right - left;
+      var height = bottom - top;
+      var rect = {
+        top,
+        right,
+        bottom,
+        left,
+        width,
+        height,
+        x: left,
+        y: top,
+        center: {
+          x: (right + left) / 2,
+          y: (bottom + top) / 2
+        }
+      };
+      return rect;
+    };
+    expand = function expand2(target, expandBy) {
+      return {
+        top: target.top - expandBy.top,
+        left: target.left - expandBy.left,
+        bottom: target.bottom + expandBy.bottom,
+        right: target.right + expandBy.right
+      };
+    };
+    shrink = function shrink2(target, shrinkBy) {
+      return {
+        top: target.top + shrinkBy.top,
+        left: target.left + shrinkBy.left,
+        bottom: target.bottom - shrinkBy.bottom,
+        right: target.right - shrinkBy.right
+      };
+    };
+    noSpacing = {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    };
+    createBox = function createBox2(_ref2) {
+      var borderBox = _ref2.borderBox, _ref2$margin = _ref2.margin, margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin, _ref2$border = _ref2.border, border = _ref2$border === void 0 ? noSpacing : _ref2$border, _ref2$padding = _ref2.padding, padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;
+      var marginBox = getRect(expand(borderBox, margin));
+      var paddingBox = getRect(shrink(borderBox, border));
+      var contentBox = getRect(shrink(paddingBox, padding));
+      return {
+        marginBox,
+        borderBox: getRect(borderBox),
+        paddingBox,
+        contentBox,
+        margin,
+        border,
+        padding
+      };
+    };
+    parse = function parse2(raw) {
+      var value = raw.slice(0, -2);
+      var suffix = raw.slice(-2);
+      if (suffix !== "px") {
+        return 0;
+      }
+      var result = Number(value);
+      !!isNaN(result) ? process.env.NODE_ENV !== "production" ? invariant(false, "Could not parse value [raw: " + raw + ", without suffix: " + value + "]") : invariant(false) : void 0;
+      return result;
+    };
+    calculateBox = function calculateBox2(borderBox, styles2) {
+      var margin = {
+        top: parse(styles2.marginTop),
+        right: parse(styles2.marginRight),
+        bottom: parse(styles2.marginBottom),
+        left: parse(styles2.marginLeft)
+      };
+      var padding = {
+        top: parse(styles2.paddingTop),
+        right: parse(styles2.paddingRight),
+        bottom: parse(styles2.paddingBottom),
+        left: parse(styles2.paddingLeft)
+      };
+      var border = {
+        top: parse(styles2.borderTopWidth),
+        right: parse(styles2.borderRightWidth),
+        bottom: parse(styles2.borderBottomWidth),
+        left: parse(styles2.borderLeftWidth)
+      };
+      return createBox({
+        borderBox,
+        margin,
+        padding,
+        border
+      });
+    };
+    getBox = function getBox2(el) {
+      var borderBox = el.getBoundingClientRect();
+      var styles2 = window.getComputedStyle(el);
+      return calculateBox(borderBox, styles2);
+    };
+  }
+});
+
 // lib/get-zoom-config.ts
 var init_get_zoom_config = __esm({
   "lib/get-zoom-config.ts"() {
@@ -7805,7 +7932,7 @@ var import_react_router3 = require("react-router");
 
 // components/Editor/index.tsx
 init_react_import();
-var import_react94 = require("react");
+var import_react95 = require("react");
 init_store();
 
 // components/Editor/components/Fields/index.tsx
@@ -11862,55 +11989,12 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  (0, import_react77.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime76.jsx)(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
       id,
-      srcDoc: '<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /></head><body style="touch-action:none"><div id="frame-root" data-editor-entry></div></body></html>',
+      srcDoc: '<!DOCTYPE html><html><head></head><body><div id="frame-root" data-editor-entry></div></body></html>',
       ref: frameRef,
       onLoad: () => {
         setLoaded(true);
@@ -11931,7 +12015,7 @@ 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_default23 = { "EditorPreview": "_EditorPreview_xou64_1", "EditorPreview-frame": "_EditorPreview-frame_xou64_6" };
+var styles_module_default23 = { "EditorPreview": "_EditorPreview_1ybfe_1", "EditorPreview-frame": "_EditorPreview-frame_1ybfe_6" };
 
 // components/Editor/components/Preview/index.tsx
 init_lib();
@@ -12893,12 +12977,12 @@ init_to_component();
 
 // components/Editor/components/Layout/index.tsx
 init_react_import();
-var import_react93 = require("react");
+var import_react94 = require("react");
 init_lib();
 
 // 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_default25 = { "Editor": "_Editor_1d9v5_8", "Editor-portal": "_Editor-portal_1d9v5_21", "EditorLayout": "_EditorLayout_1d9v5_26", "EditorLayout-inner": "_EditorLayout-inner_1d9v5_30", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_1d9v5_44", "EditorLayout-header": "_EditorLayout-header_1d9v5_49", "EditorLayout-headerStart": "_EditorLayout-headerStart_1d9v5_62", "EditorLayout-headerCenter": "_EditorLayout-headerCenter_1d9v5_70", "EditorLayout-headerEnd": "_EditorLayout-headerEnd_1d9v5_81", "EditorLayout-headerHistory": "_EditorLayout-headerHistory_1d9v5_91", "EditorPluginTab": "_EditorPluginTab_1d9v5_110", "EditorPluginTab--visible": "_EditorPluginTab--visible_1d9v5_116", "EditorPluginTab-body": "_EditorPluginTab-body_1d9v5_121" };
+var styles_module_default25 = { "Editor": "_Editor_l0swf_19", "Editor-portal": "_Editor-portal_l0swf_32", "EditorLayout": "_EditorLayout_l0swf_37", "EditorLayout-inner": "_EditorLayout-inner_l0swf_41", "Editor--hidePlugins": "_Editor--hidePlugins_l0swf_72", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_l0swf_73", "EditorLayout--mounted": "_EditorLayout--mounted_l0swf_82", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_l0swf_86", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_l0swf_86", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_l0swf_91", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_l0swf_109", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_l0swf_129", "EditorLayout-mounted": "_EditorLayout-mounted_l0swf_146", "EditorLayout-header": "_EditorLayout-header_l0swf_187", "EditorHeader": "_EditorHeader_l0swf_194", "EditorHeader-plugins": "_EditorHeader-plugins_l0swf_221", "EditorHeader-pluginItem": "_EditorHeader-pluginItem_l0swf_235", "EditorHeader-pluginItem--mobileOnly": "_EditorHeader-pluginItem--mobileOnly_l0swf_241", "EditorHeader-pluginItem--desktopOnly": "_EditorHeader-pluginItem--desktopOnly_l0swf_246", "EditorHeader-urlBarSlot": "_EditorHeader-urlBarSlot_l0swf_256", "EditorHeader-actions": "_EditorHeader-actions_l0swf_274", "EditorHeader-history": "_EditorHeader-history_l0swf_282", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_l0swf_288", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_l0swf_308", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_l0swf_315", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_l0swf_329", "EditorPluginTab": "_EditorPluginTab_l0swf_336", "EditorPluginTab--visible": "_EditorPluginTab--visible_l0swf_342", "EditorPluginTab-body": "_EditorPluginTab-body_l0swf_347" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -13063,12 +13147,10 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  const showTitleBar = title !== null && title !== void 0;
-  const showBreadcrumbsRow = !!showBreadcrumbs;
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName34({ noBorderTop }), style: { background }, children: [
-    (showTitleBar || showBreadcrumbsRow) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName34("breadcrumbs"), children: [
-      showBreadcrumbsRow && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Breadcrumbs, {}),
-      showTitleBar && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("title"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: getClassName34("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Breadcrumbs, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading7, { rank: "2", size: "xs", children: title }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("content"), children }),
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Loader, { size: 32 }) })
@@ -13077,14 +13159,269 @@ var SidebarSection = ({
 
 // components/Editor/components/Canvas/index.tsx
 init_react_import();
-var import_react88 = require("react");
+init_css_box_model_esm();
+var import_react89 = require("react");
+init_lucide_react();
+init_store();
+
+// components/BrowserBar/index.tsx
+init_react_import();
 init_lucide_react();
-var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
+var import_react87 = require("react");
 init_store();
+init_lib();
+init_IconButton2();
+
+// components/ui/Combobox/index.tsx
+init_react_import();
+var import_react86 = require("@base-ui/react");
+init_lucide_react();
+init_lib();
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
+init_react_import();
+var styles_module_default28 = { "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
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var getClassName35 = get_class_name_factory_default("EditorCombobox", styles_module_default28);
+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 = import_react86.Combobox.Root;
+function ComboboxInput(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_react86.Combobox.Input,
+    __spreadValues({
+      "data-slot": "combobox-input",
+      className: mergeClassName(getClassName35("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__ */ (0, import_jsx_runtime83.jsx)(import_react86.Combobox.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_react86.Combobox.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      className: getClassName35("positioner"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        import_react86.Combobox.Popup,
+        __spreadProps(__spreadValues({
+          "data-slot": "combobox-content",
+          className: mergeClassName(getClassName35("content"), className)
+        }, props), {
+          children
+        })
+      )
+    }
+  ) });
+}
+function ComboboxList(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_react86.Combobox.List,
+    __spreadValues({
+      "data-slot": "combobox-list",
+      className: mergeClassName(getClassName35("list"), className)
+    }, props)
+  );
+}
+function ComboboxItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+    import_react86.Combobox.Item,
+    __spreadProps(__spreadValues({
+      "data-slot": "combobox-item",
+      className: mergeClassName(getClassName35("item"), className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: getClassName35("itemIndicator"), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react86.Combobox.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Check, { size: 14 }) }) }),
+        children
+      ]
+    })
+  );
+}
+function ComboboxEmpty(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    import_react86.Combobox.Empty,
+    __spreadValues({
+      "data-slot": "combobox-empty",
+      className: mergeClassName(getClassName35("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_default29 = { "BrowserBar": "_BrowserBar_glswb_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_glswb_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_glswb_46", "BrowserBar-urlText": "_BrowserBar-urlText_glswb_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_glswb_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_glswb_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_glswb_74", "BrowserBar-actions": "_BrowserBar-actions_glswb_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_glswb_92" };
+
+// components/BrowserBar/index.tsx
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var normalizeRoute = (raw) => {
+  const trimmed = raw.trim();
+  if (!trimmed) return trimmed;
+  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+};
+var getClassName36 = get_class_name_factory_default("BrowserBar", styles_module_default29);
+var DEVICE_VIEWPORTS = {
+  desktop: { width: "100%", height: "auto", icon: "Monitor", label: "Desktop" },
+  mobile: { width: 360, height: "auto", icon: "Smartphone", label: "Mobile" }
+};
+var UrlBar = () => {
+  const { routes, currentRoute, onRouteChange } = usePropsContext();
+  const chrome = useChromeConfig();
+  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
+  const [inputValue, setInputValue] = (0, import_react87.useState)(currentRoute != null ? currentRoute : "");
+  const lastSyncedPath = (0, import_react87.useRef)(currentRoute);
+  if (lastSyncedPath.current !== currentRoute) {
+    lastSyncedPath.current = currentRoute;
+    setInputValue(currentRoute != null ? currentRoute : "");
+  }
+  const submit = (raw) => {
+    const next = normalizeRoute(raw);
+    if (!next || next === currentRoute) return;
+    void (onRouteChange == null ? void 0 : onRouteChange(next));
+  };
+  if (!chrome.showUrlBar) return null;
+  if (showRoutePicker) {
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+      Combobox,
+      {
+        items: routes,
+        value: currentRoute,
+        onValueChange: (next) => {
+          if (typeof next === "string") submit(next);
+        },
+        inputValue,
+        onInputValueChange: (next) => setInputValue(next),
+        autoHighlight: false,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+            "form",
+            {
+              className: getClassName36("urlTrigger"),
+              onSubmit: (event) => {
+                event.preventDefault();
+                submit(inputValue);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Globe, { className: getClassName36("urlIcon"), size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                  ComboboxInput,
+                  {
+                    className: getClassName36("urlInput"),
+                    placeholder: "/",
+                    spellCheck: false,
+                    autoCorrect: "off",
+                    autoCapitalize: "off"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ComboboxContent, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxEmpty, { children: "Press Enter to go to this path" }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxList, { children: (path) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComboboxItem, { value: path, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("itemPath"), children: path }) }, path) })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36("urlTrigger"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Globe, { className: getClassName36("urlIcon"), size: 14 }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("urlText"), children: "/" })
+  ] });
+};
+var DeviceToggle = ({
+  onViewportChange
+}) => {
+  const chrome = useChromeConfig();
+  const viewports = useAppStore((s) => s.state.ui.viewports);
+  const activeDevice = (0, import_react87.useMemo)(() => {
+    const w = viewports.current.width;
+    if (typeof w === "number" && w <= 640) return "mobile";
+    return "desktop";
+  }, [viewports.current.width]);
+  if (!chrome.showDeviceToggle) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    IconButton,
+    {
+      type: "button",
+      title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
+      onClick: () => onViewportChange == null ? void 0 : onViewportChange(
+        DEVICE_VIEWPORTS[activeDevice === "desktop" ? "mobile" : "desktop"]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: activeDevice === "desktop" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Smartphone, { size: 14 }) })
+    }
+  );
+};
+var FullScreenToggle = () => {
+  const chrome = useChromeConfig();
+  const dispatch = useAppStore((s) => s.dispatch);
+  const isFullScreen = useAppStore(
+    (s) => {
+      var _a;
+      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
+    }
+  );
+  if (!chrome.showFullScreenToggle) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    IconButton,
+    {
+      type: "button",
+      title: isFullScreen ? "Exit full screen" : "Enter full screen",
+      onClick: () => dispatch({ type: "setUi", ui: { canvasFullScreen: !isFullScreen } }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minimize, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Maximize, { size: 14 }) })
+    }
+  );
+};
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default28 = { "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" };
+var styles_module_default30 = { "EditorCanvas": "_EditorCanvas_10xv6_1", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_10xv6_24", "EditorCanvas--canvasFullScreen": "_EditorCanvas--canvasFullScreen_10xv6_40", "EditorCanvas-inner": "_EditorCanvas-inner_10xv6_47", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_10xv6_56", "EditorCanvas-root": "_EditorCanvas-root_10xv6_56", "EditorCanvas--ready": "_EditorCanvas--ready_10xv6_93", "EditorCanvas-loader": "_EditorCanvas-loader_10xv6_98", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_10xv6_110", "EditorCanvas-bottomBar": "_EditorCanvas-bottomBar_10xv6_119", "EditorCanvas-bottomBarPill": "_EditorCanvas-bottomBarPill_10xv6_131", "EditorCanvas-bottomBarDivider": "_EditorCanvas-bottomBarDivider_10xv6_144", "EditorCanvas-zoomLevel": "_EditorCanvas-zoomLevel_10xv6_151" };
 
 // components/Editor/components/Canvas/index.tsx
 init_lib();
@@ -13094,77 +13431,56 @@ var import_shallow9 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react86 = require("react");
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var FrameContext = (0, import_react86.createContext)(null);
+var import_react88 = require("react");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var FrameContext = (0, import_react88.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react86.useRef)(null);
-  const value = (0, import_react86.useMemo)(
+  const frameRef = (0, import_react88.useRef)(null);
+  const value = (0, import_react88.useMemo)(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react86.useContext)(FrameContext);
+  const context = (0, import_react88.useContext)(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
   return context;
 };
 
-// lib/theme-context.tsx
-init_react_import();
-var import_react87 = require("react");
-var ThemeContext = (0, import_react87.createContext)({
-  theme: "light",
-  toggleTheme: () => {
-  }
-});
-var useEditorTheme = () => (0, import_react87.useContext)(ThemeContext);
-
 // components/Editor/components/Canvas/index.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var getClassName35 = get_class_name_factory_default("EditorCanvas", styles_module_default28);
+init_default_viewports();
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var getClassName37 = get_class_name_factory_default("EditorCanvas", styles_module_default30);
+var ZOOM_STEP = 0.15;
 var MIN_ZOOM = 0.25;
 var MAX_ZOOM = 3;
-var PREVIEW_MAX_WIDTH = 1200;
-var DEVICE_VIEWPORTS = {
-  desktop: { width: "100%", height: "auto", label: "Desktop" },
-  tablet: { width: 768, height: "auto", label: "Tablet" },
-  mobile: { width: 360, height: "auto", label: "Mobile" }
-};
-var DEVICE_ORDER = ["desktop", "tablet", "mobile"];
-var DEVICE_ICONS = {
-  desktop: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 14 }),
-  tablet: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tablet, { size: 14 }),
-  mobile: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Smartphone, { size: 14 })
-};
-var ZoomConfigSync = () => {
-  const appStoreApi = useAppStoreApi();
-  (0, import_react_zoom_pan_pinch.useTransformEffect)((ref) => {
-    const { zoomConfig, setZoomConfig } = appStoreApi.getState();
-    if (zoomConfig.zoom !== ref.state.scale) {
-      setZoomConfig(__spreadProps(__spreadValues({}, zoomConfig), { zoom: ref.state.scale }));
-    }
-  });
-  return null;
-};
-var ZoomLevel = ({ className }) => {
-  const scale = (0, import_react_zoom_pan_pinch.useTransformComponent)((ctx) => ctx.state.scale);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className, children: `${Math.round(scale * 100)}%` });
-};
-var Canvas = () => {
+var TRANSITION_DURATION = 150;
+var Canvas = ({
+  themeIcon,
+  themeLabel,
+  onToggleTheme
+} = {}) => {
+  var _a, _b;
   const { frameRef } = useCanvasFrame();
-  const { disableZoomControls } = usePropsContext();
+  const chrome = useChromeConfig();
+  const {
+    viewports: viewportOptions = defaultViewports,
+    ui: uiProp,
+    disableZoomControls
+  } = usePropsContext();
   const {
     dispatch,
     overrides,
     setUi,
+    zoomConfig,
+    setZoomConfig,
     status,
     iframe,
     fullScreenCanvas
@@ -13173,6 +13489,8 @@ var Canvas = () => {
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
+      zoomConfig: s.zoomConfig,
+      setZoomConfig: s.setZoomConfig,
       status: s.status,
       iframe: s.iframe,
       fullScreenCanvas: s.fullScreenCanvas
@@ -13181,203 +13499,143 @@ var Canvas = () => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const canvasFullScreen = useAppStore(
     (s) => {
-      var _a;
-      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
+      var _a2;
+      return (_a2 = s.state.ui.canvasFullScreen) != null ? _a2 : false;
     }
   );
-  const chrome = useChromeConfig();
-  const { theme, toggleTheme } = useEditorTheme();
-  const toggleFullScreen = (0, import_react88.useCallback)(
-    () => setUi({ canvasFullScreen: !canvasFullScreen }),
-    [setUi, canvasFullScreen]
-  );
-  const activeDevice = (0, import_react88.useMemo)(() => {
-    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 = (0, import_react88.useCallback)(() => {
-    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 = (0, import_react88.useRef)(null);
-  const defaultRender = (0, import_react88.useMemo)(() => {
-    const EditorDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_jsx_runtime84.Fragment, { children });
+  const [canvasZoom, setCanvasZoom] = (0, import_react89.useState)(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] = (0, import_react89.useState)(false);
+  const isResizingRef = (0, import_react89.useRef)(false);
+  const defaultRender = (0, import_react89.useMemo)(() => {
+    const EditorDefault = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children });
     return EditorDefault;
   }, []);
-  const CustomPreview = (0, import_react88.useMemo)(
+  const CustomPreview = (0, import_react89.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const [showLoader, setShowLoader] = (0, import_react88.useState)(false);
-  (0, import_react88.useEffect)(() => {
+  const getFrameDimensions = (0, import_react89.useCallback)(() => {
+    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]);
+  (0, import_react89.useEffect)(() => {
+    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] = (0, import_react89.useState)(false);
+  (0, import_react89.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  const centerFrame = (0, import_react88.useCallback)(() => {
-    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;
-    };
-  }, []);
-  (0, import_react88.useEffect)(() => {
-    return centerFrame();
-  }, [centerFrame, viewports.current.width]);
-  const handleZoomIn = (0, import_react88.useCallback)(
-    () => {
-      var _a;
-      return (_a = transformRef.current) == null ? void 0 : _a.zoomIn();
-    },
-    []
-  );
-  const handleZoomOut = (0, import_react88.useCallback)(
-    () => {
-      var _a;
-      return (_a = transformRef.current) == null ? void 0 : _a.zoomOut();
-    },
-    []
-  );
-  const handleResetZoom = (0, import_react88.useCallback)(() => {
-    centerFrame();
-  }, [centerFrame]);
-  (0, import_react88.useEffect)(() => {
-    var _a;
-    const handler = (e) => {
-      var _a2;
-      e.preventDefault();
-      const ref = transformRef.current;
-      if (!ref) return;
-      const isPinch = e.ctrlKey || e.metaKey;
-      if (isPinch) {
-        const wrapper = ref.instance.wrapperComponent;
-        if (!wrapper) return;
-        const factor = e.deltaY < 0 ? 1.05 : 1 / 1.05;
-        const currentScale = ref.state.scale;
-        const newScale = Math.max(
-          MIN_ZOOM,
-          Math.min(MAX_ZOOM, currentScale * factor)
-        );
-        if (newScale === currentScale) return;
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const isIframeEvent = ((_a2 = e.target) == null ? void 0 : _a2.ownerDocument) !== document;
-        let cursorX;
-        let cursorY;
-        if (isIframeEvent) {
-          const iframeEl = document.getElementById(
-            "preview-frame"
-          );
-          const iframeRect = iframeEl == null ? void 0 : iframeEl.getBoundingClientRect();
-          if (!iframeRect) return;
-          cursorX = iframeRect.left + e.clientX * currentScale - wrapperRect.left;
-          cursorY = iframeRect.top + e.clientY * currentScale - wrapperRect.top;
-        } else {
-          cursorX = e.clientX - wrapperRect.left;
-          cursorY = e.clientY - wrapperRect.top;
-        }
-        const ratio = newScale / currentScale;
-        const newPositionX = cursorX - (cursorX - ref.state.positionX) * ratio;
-        const newPositionY = cursorY - (cursorY - ref.state.positionY) * ratio;
-        ref.setTransform(newPositionX, newPositionY, newScale, 0);
-        return;
-      }
-      ref.setTransform(
-        ref.state.positionX - e.deltaX,
-        ref.state.positionY - e.deltaY,
-        ref.state.scale,
-        0
-      );
-    };
-    const cleanups = [];
-    const onWindowWheel = (e) => {
-      if (e.ctrlKey || e.metaKey) e.preventDefault();
-    };
-    window.addEventListener("wheel", onWindowWheel, { passive: false });
-    cleanups.push(
-      () => window.removeEventListener("wheel", onWindowWheel)
+  const appStoreApi = useAppStoreApi();
+  const autoSelectingRef = (0, import_react89.useRef)(true);
+  const pickClosestViewport = (0, import_react89.useCallback)(() => {
+    var _a2, _b2;
+    if (typeof window === "undefined") return null;
+    const viewportWidth = window.innerWidth;
+    const frameWidth = (_a2 = frameRef.current) == null ? void 0 : _a2.getBoundingClientRect().width;
+    if (!viewportWidth) return null;
+    if (!frameWidth) return null;
+    if (viewportOptions.length === 0) return null;
+    const fullWidthViewport = Object.values(viewportOptions).find(
+      (v) => v.width === "100%"
     );
-    const viewportEl = (_a = frameRef.current) == null ? void 0 : _a.firstElementChild;
-    if (viewportEl) {
-      viewportEl.addEventListener("wheel", handler, { passive: false });
-      cleanups.push(
-        () => viewportEl.removeEventListener("wheel", handler)
-      );
-    }
+    const viewportDifferences = Object.entries(viewportOptions).filter(([_, value]) => value.width !== "100%").map(([key, value]) => ({
+      key,
+      diff: Math.abs(
+        viewportWidth - (typeof value.width === "string" ? viewportWidth : value.width)
+      ),
+      value
+    })).sort((a, b) => a.diff > b.diff ? 1 : -1);
+    let closestViewport = (_b2 = viewportDifferences[0]) == null ? void 0 : _b2.value;
+    if (!closestViewport) return null;
+    if (closestViewport.width < frameWidth && fullWidthViewport) {
+      closestViewport = fullWidthViewport;
+    }
+    return closestViewport;
+  }, [viewportOptions, frameRef]);
+  (0, import_react89.useEffect)(() => {
+    var _a2;
+    if (typeof window === "undefined") return;
+    if ((_a2 = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a2.current) return;
+    const closestViewport = pickClosestViewport();
+    if (!closestViewport) return;
     if (iframe.enabled) {
-      const tryAttach = () => {
-        const el = document.getElementById(
-          "preview-frame"
-        );
-        const doc = el == null ? void 0 : el.contentDocument;
-        const win = el == null ? void 0 : el.contentWindow;
-        if (!doc || !win) return false;
-        const opts = { passive: false, capture: true };
-        doc.addEventListener("wheel", handler, opts);
-        win.addEventListener("wheel", handler, opts);
-        cleanups.push(() => {
-          doc.removeEventListener("wheel", handler, opts);
-          win.removeEventListener("wheel", handler, opts);
-        });
-        return true;
+      const s = appStoreApi.getState();
+      const appState = {
+        state: __spreadProps(__spreadValues({}, s.state), {
+          ui: __spreadProps(__spreadValues({}, s.state.ui), {
+            viewports: __spreadProps(__spreadValues({}, s.state.ui.viewports), {
+              current: __spreadProps(__spreadValues({}, s.state.ui.viewports.current), {
+                height: (closestViewport == null ? void 0 : closestViewport.height) || "auto",
+                width: closestViewport == null ? void 0 : closestViewport.width
+              })
+            })
+          })
+        })
       };
-      if (!tryAttach()) {
-        const interval = window.setInterval(() => {
-          if (tryAttach()) window.clearInterval(interval);
-        }, 100);
-        cleanups.push(() => window.clearInterval(interval));
+      let history = s.history;
+      if (s.history.histories.length === 1) {
+        history = __spreadProps(__spreadValues({}, history), { histories: [appState] });
       }
+      appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
-    return () => {
-      cleanups.forEach((fn) => fn());
-    };
-  }, [iframe.enabled, frameRef]);
-  const previewWidth = !iframe.enabled ? "100%" : viewports.current.width === "100%" ? PREVIEW_MAX_WIDTH : viewports.current.width;
-  const frameContents = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-    "div",
-    {
-      className: getClassName35("rootColumn"),
-      style: { width: PREVIEW_MAX_WIDTH },
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        "div",
-        {
-          className: getClassName35("frame"),
-          style: { width: previewWidth, margin: "0 auto" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-            "div",
-            {
-              className: getClassName35("root"),
-              suppressHydrationWarning: true,
-              id: "editor-canvas-root",
-              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Preview2, {}) })
-            }
-          )
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  }, [
+    pickClosestViewport,
+    frameRef.current,
+    iframe,
+    appStoreApi,
+    (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
+  ]);
+  (0, import_react89.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime86.jsx)(
     "div",
     {
-      className: getClassName35({
+      className: getClassName37({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas,
@@ -13393,120 +13651,296 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("inner"), ref: frameRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("zoomViewport"), children: disableZoomControls ? frameContents : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
-          import_react_zoom_pan_pinch.TransformWrapper,
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "div",
           {
-            ref: transformRef,
-            minScale: MIN_ZOOM,
-            maxScale: MAX_ZOOM,
-            initialScale: 1,
-            doubleClick: { disabled: true },
-            limitToBounds: false,
-            wheel: { disabled: true },
-            pinch: { step: 5 },
-            panning: { velocityDisabled: true },
-            trackPadPanning: { velocityDisabled: true },
-            alignmentAnimation: { disabled: true },
-            autoAlignment: { disabled: true, sizeX: 0, sizeY: 0 },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ZoomConfigSync, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("toolbar"), children: [
-                chrome.showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                    IconButton,
-                    {
-                      type: "button",
-                      title: theme === "dark" ? "Switch to light mode" : "Switch to dark mode",
-                      onClick: toggleTheme,
-                      children: theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Sun, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Moon, { size: 14 })
-                    }
-                  ),
-                  (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("toolbarDivider") })
-                ] }),
-                chrome.showDeviceToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: `Switch to ${nextDeviceLabel} viewport`,
-                    onClick: cycleDevice,
-                    children: DEVICE_ICONS[activeDevice]
-                  }
-                ),
-                chrome.showFullScreenToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: canvasFullScreen ? "Exit full screen" : "Enter full screen",
-                    onClick: toggleFullScreen,
-                    children: canvasFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minimize, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Maximize, { size: 14 })
-                  }
-                ),
-                (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("toolbarDivider") }),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: "Zoom out",
-                    onClick: handleZoomOut,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minus, { size: 14 })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ZoomLevel, { className: getClassName35("zoomLevel") }),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: "Zoom in",
-                    onClick: handleZoomIn,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Plus, { size: 14 })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                  IconButton,
-                  {
-                    type: "button",
-                    title: "Reset zoom",
-                    onClick: handleResetZoom,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(RotateCcw, { size: 14 })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-                import_react_zoom_pan_pinch.TransformComponent,
-                {
-                  infinite: true,
-                  wrapperStyle: { width: "100%", height: "100%" },
-                  children: frameContents
-                }
-              )
-            ]
+            className: getClassName37("rootColumn"),
+            style: {
+              width: iframe.enabled ? viewports.current.width : "100%",
+              transform: disableZoomControls ? void 0 : `scale(${canvasZoom})`,
+              transformOrigin: disableZoomControls ? void 0 : "center center",
+              transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : disableZoomControls ? void 0 : "transform 150ms ease-out"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              "div",
+              {
+                className: getClassName37("root"),
+                suppressHydrationWarning: true,
+                id: "editor-canvas-root",
+                onTransitionEnd: () => {
+                  setShowTransition(false);
+                  isResizingRef.current = false;
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CustomPreview, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Preview2, {}) })
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Loader, { size: 24 }) })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("bottomBar"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("bottomBarPill"), children: [
+          chrome.showThemeToggle && onToggleTheme && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            IconButton,
+            {
+              type: "button",
+              title: themeLabel != null ? themeLabel : "Toggle theme",
+              onClick: onToggleTheme,
+              children: themeIcon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            DeviceToggle,
+            {
+              onViewportChange: (viewport) => {
+                autoSelectingRef.current = false;
+                setShowTransition(true);
+                isResizingRef.current = true;
+                const uiViewport = __spreadProps(__spreadValues({}, viewport), {
+                  height: viewport.height || "auto",
+                  zoom: 1
+                });
+                setUi({
+                  viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FullScreenToggle, {}),
+          !disableZoomControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: getClassName37("bottomBarDivider") }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              IconButton,
+              {
+                type: "button",
+                title: "Zoom out",
+                onClick: zoomOut,
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Minus, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: getClassName37("zoomLevel"), children: [
+              Math.round(canvasZoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Plus, { size: 14 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              IconButton,
+              {
+                type: "button",
+                title: "Reset zoom",
+                onClick: resetZoom,
+                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(RotateCcw, { size: 14 })
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Loader, { size: 24 }) })
       ] })
     }
   );
 };
 
+// lib/use-sidebar-resize.ts
+init_react_import();
+var import_react90 = require("react");
+init_store();
+function useSidebarResize(position, dispatch) {
+  const [width, setWidth] = (0, import_react90.useState)(null);
+  const sidebarRef = (0, import_react90.useRef)(null);
+  const storeWidth = useAppStore(
+    (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
+  );
+  (0, import_react90.useEffect)(() => {
+    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]);
+  (0, import_react90.useEffect)(() => {
+    if (storeWidth !== void 0) {
+      setWidth(storeWidth);
+    }
+  }, [storeWidth]);
+  const handleResizeEnd = (0, import_react90.useCallback)(
+    (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();
+var import_react91 = require("react");
+init_get_class_name_factory();
+
+// 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_default31 = { "ResizeHandle": "_ResizeHandle_1u3rv_2", "ResizeHandle--left": "_ResizeHandle--left_1u3rv_16", "ResizeHandle--right": "_ResizeHandle--right_1u3rv_20" };
+
+// components/Editor/components/ResizeHandle/index.tsx
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var getClassName38 = get_class_name_factory_default("ResizeHandle", styles_module_default31);
+var ResizeHandle = ({
+  position,
+  sidebarRef,
+  onResize,
+  onResizeEnd
+}) => {
+  const handleRef = (0, import_react91.useRef)(null);
+  const isDragging = (0, import_react91.useRef)(false);
+  const startX = (0, import_react91.useRef)(0);
+  const startWidth = (0, import_react91.useRef)(0);
+  const handleMouseMove = (0, import_react91.useCallback)(
+    (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 = (0, import_react91.useCallback)(() => {
+    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 = (0, import_react91.useCallback)(
+    (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__ */ (0, import_jsx_runtime87.jsx)(
+    "div",
+    {
+      ref: handleRef,
+      className: getClassName38({ [position]: true }),
+      onMouseDown: handleMouseDown
+    }
+  );
+};
+
+// components/Editor/components/Sidebar/index.tsx
 init_get_class_name_factory();
 
 // 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_default29 = { "Sidebar": "_Sidebar_1ynke_8", "Sidebar--left": "_Sidebar--left_1ynke_20", "Sidebar--right": "_Sidebar--right_1ynke_25", "Sidebar-body": "_Sidebar-body_1ynke_30" };
+var styles_module_default32 = { "Sidebar": "_Sidebar_14k7q_1", "Sidebar--isVisible": "_Sidebar--isVisible_14k7q_9", "Sidebar--left": "_Sidebar--left_14k7q_13", "Sidebar--right": "_Sidebar--right_14k7q_25", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_14k7q_37" };
 
 // components/Editor/components/Sidebar/index.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var getClassName36 = get_class_name_factory_default("Sidebar", styles_module_default29);
-var Sidebar = ({ position, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("aside", { className: getClassName36({ [position]: true }), children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: getClassName36("body"), children }) });
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var getClassName39 = get_class_name_factory_default("Sidebar", styles_module_default32);
+var Sidebar = ({
+  position,
+  sidebarRef,
+  isVisible,
+  onResize,
+  onResizeEnd,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      "div",
+      {
+        ref: sidebarRef,
+        className: getClassName39({ [position]: true, isVisible }),
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: `${getClassName39("resizeHandle")}`, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      ResizeHandle,
+      {
+        position,
+        sidebarRef,
+        onResize,
+        onResizeEnd
+      }
+    ) })
+  ] });
 };
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react89 = require("react");
+var import_react92 = require("react");
 init_use_hotkey();
 init_store();
 
@@ -13548,7 +13982,7 @@ var shouldBlockEditingHotkey = (e) => {
 // lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react89.useCallback)(
+  const deleteSelectedComponent = (0, import_react92.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) {
@@ -13574,7 +14008,7 @@ var useDeleteHotkeys = () => {
 
 // lib/use-clipboard-hotkeys.ts
 init_react_import();
-var import_react90 = require("react");
+var import_react93 = require("react");
 init_use_hotkey();
 init_store();
 var CLIPBOARD_MARKER = "reacteditor/component";
@@ -13596,7 +14030,7 @@ var parsePayload = (text) => {
 };
 var useClipboardHotkeys = () => {
   const appStore = useAppStoreApi();
-  const writeSelectionToClipboard = (0, import_react90.useCallback)(() => {
+  const writeSelectionToClipboard = (0, import_react93.useCallback)(() => {
     var _a;
     const { selectedItem } = appStore.getState();
     if (!selectedItem) return false;
@@ -13608,14 +14042,14 @@ var useClipboardHotkeys = () => {
     });
     return true;
   }, [appStore]);
-  const copySelectedComponent = (0, import_react90.useCallback)(
+  const copySelectedComponent = (0, import_react93.useCallback)(
     (e) => {
       if (shouldBlockEditingHotkey(e)) return false;
       return writeSelectionToClipboard();
     },
     [writeSelectionToClipboard]
   );
-  const cutSelectedComponent = (0, import_react90.useCallback)(
+  const cutSelectedComponent = (0, import_react93.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -13634,7 +14068,7 @@ var useClipboardHotkeys = () => {
     },
     [appStore, writeSelectionToClipboard]
   );
-  const pasteComponent = (0, import_react90.useCallback)(
+  const pasteComponent = (0, import_react93.useCallback)(
     (e) => {
       var _a, _b;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -13645,369 +14079,184 @@ var useClipboardHotkeys = () => {
         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_default30 = { "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
-init_lib();
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var getClassName37 = get_class_name_factory_default("Nav", styles_module_default30);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default30);
-var MenuItem = ({
-  label,
-  icon,
-  onClick,
-  isActive,
-  mobileOnly,
-  desktopOnly
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    "li",
-    {
-      className: getClassNameItem3({
-        active: isActive,
-        mobileOnly,
-        desktopOnly
-      }),
-      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
-    }
-  );
-};
-var Nav = ({
-  items,
-  footer,
-  orientation = "vertical"
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("nav", { className: getClassName37({ horizontal: orientation === "horizontal" }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("ul", { className: getClassName37("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("footer"), children: footer })
-  ] });
-};
-
-// components/Editor/components/Layout/index.tsx
-init_IconButton2();
-init_lucide_react();
-
-// plugins/fields/index.tsx
-init_react_import();
-init_lucide_react();
-init_store();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
-init_react_import();
-var styles_module_default31 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
-
-// plugins/fields/index.tsx
-init_lib();
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var getClassName38 = get_class_name_factory_default("FieldsPlugin", styles_module_default31);
-var CurrentTitle = () => {
-  const label = useAppStore((s) => {
-    var _a, _b;
-    const selectedItem = s.selectedItem;
-    return selectedItem ? (_b = (_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.label) != null ? _b : selectedItem.type : "Page";
-  });
-  return label;
-};
-var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
-  name: "fields",
-  label: "Fields",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: getClassName38(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: getClassName38("header"), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Fields, {})
-  ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(RectangleEllipsis, {}),
-  mobileOnly: desktopSideBar === "right"
-});
-
-// components/BrowserBar/index.tsx
-init_react_import();
-init_lucide_react();
-var import_react92 = require("react");
-init_lib();
-
-// components/ui/Combobox/index.tsx
-init_react_import();
-var import_react91 = require("@base-ui/react");
-init_lucide_react();
-init_lib();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/ui/Combobox/styles.module.css#css-module
-init_react_import();
-var styles_module_default32 = { "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
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var getClassName39 = get_class_name_factory_default("EditorCombobox", styles_module_default32);
-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 = import_react91.Combobox.Root;
-function ComboboxInput(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    import_react91.Combobox.Input,
-    __spreadValues({
-      "data-slot": "combobox-input",
-      className: mergeClassName(getClassName39("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__ */ (0, import_jsx_runtime88.jsx)(import_react91.Combobox.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    import_react91.Combobox.Positioner,
-    {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      className: getClassName39("positioner"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-        import_react91.Combobox.Popup,
-        __spreadProps(__spreadValues({
-          "data-slot": "combobox-content",
-          className: mergeClassName(getClassName39("content"), className)
-        }, props), {
-          children
-        })
-      )
-    }
-  ) });
-}
-function ComboboxList(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    import_react91.Combobox.List,
-    __spreadValues({
-      "data-slot": "combobox-list",
-      className: mergeClassName(getClassName39("list"), className)
-    }, props)
-  );
-}
-function ComboboxItem(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
-    import_react91.Combobox.Item,
-    __spreadProps(__spreadValues({
-      "data-slot": "combobox-item",
-      className: mergeClassName(getClassName39("item"), className)
-    }, props), {
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: getClassName39("itemIndicator"), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react91.Combobox.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Check, { size: 14 }) }) }),
-        children
-      ]
-    })
-  );
-}
-function ComboboxEmpty(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    import_react91.Combobox.Empty,
-    __spreadValues({
-      "data-slot": "combobox-empty",
-      className: mergeClassName(getClassName39("empty"), className)
-    }, props)
+        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);
+};
 
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
+// components/Editor/components/Layout/index.tsx
+init_IconButton2();
+init_lucide_react();
+
+// plugins/blocks/index.tsx
 init_react_import();
-var styles_module_default33 = { "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" };
+init_lucide_react();
 
-// components/BrowserBar/index.tsx
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
+init_react_import();
+var styles_module_default33 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
+
+// plugins/blocks/index.tsx
+init_lib();
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var normalizeRoute = (raw) => {
-  const trimmed = raw.trim();
-  if (!trimmed) return trimmed;
-  return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
-};
-var getClassName40 = get_class_name_factory_default("BrowserBar", styles_module_default33);
-var BrowserBar = ({}) => {
-  const { routes, currentRoute, onRouteChange } = usePropsContext();
-  const chrome = useChromeConfig();
-  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
-  const [inputValue, setInputValue] = (0, import_react92.useState)(currentRoute != null ? currentRoute : "");
-  const lastSyncedPath = (0, import_react92.useRef)(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__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName40(), children: showRoutePicker ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
-    Combobox,
-    {
-      items: routes,
-      value: currentRoute,
-      onValueChange: (next) => {
-        if (typeof next === "string") submit(next);
-      },
-      inputValue,
-      onInputValueChange: (next) => setInputValue(next),
-      autoHighlight: false,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
-          "form",
-          {
-            className: getClassName40("urlTrigger"),
-            onSubmit: (event) => {
-              event.preventDefault();
-              submit(inputValue);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Globe, { className: getClassName40("urlIcon"), size: 14 }),
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-                ComboboxInput,
-                {
-                  className: getClassName40("urlInput"),
-                  placeholder: "/",
-                  spellCheck: false,
-                  autoCorrect: "off",
-                  autoCapitalize: "off"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(ComboboxContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ComboboxEmpty, { children: "Press Enter to go to this path" }),
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ComboboxList, { children: (path) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ComboboxItem, { value: path, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassName40("itemPath"), children: path }) }, path) })
-        ] })
-      ]
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassName40("urlTrigger"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Globe, { className: getClassName40("urlIcon"), size: 14 }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassName40("urlText"), children: "/" })
-  ] }) });
+var getClassName40 = get_class_name_factory_default("BlocksPlugin", styles_module_default33);
+var blocksPlugin = () => ({
+  name: "blocks",
+  label: "Blocks",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Components, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Plus, {})
+});
+
+// plugins/fields/index.tsx
+init_react_import();
+init_lucide_react();
+init_store();
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/fields/styles.module.css#css-module
+init_react_import();
+var styles_module_default34 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
+
+// plugins/fields/index.tsx
+init_lib();
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var getClassName41 = get_class_name_factory_default("FieldsPlugin", styles_module_default34);
+var CurrentTitle = () => {
+  const label = useAppStore((s) => {
+    var _a, _b;
+    const selectedItem = s.selectedItem;
+    return selectedItem ? (_b = (_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.label) != null ? _b : selectedItem.type : "Page";
+  });
+  return label;
 };
+var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
+  name: "fields",
+  label: "Fields",
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getClassName41(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName41("header"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Fields, {})
+  ] }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RectangleEllipsis, {}),
+  mobileOnly: desktopSideBar === "right"
+});
 
 // components/Editor/components/Layout/index.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var getClassName41 = get_class_name_factory_default("Editor", styles_module_default25);
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var getClassName42 = get_class_name_factory_default("Editor", styles_module_default25);
 var getLayoutClassName = get_class_name_factory_default("EditorLayout", styles_module_default25);
 var getPluginTabClassName = get_class_name_factory_default("EditorPluginTab", styles_module_default25);
-var FieldSideBarBody = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SidebarSection, { noBorderTop: true, title: null, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Fields, {}) });
-var HeaderPublish = () => {
+var getHeaderClassName = get_class_name_factory_default("EditorHeader", styles_module_default25);
+var TopHeader = ({
+  pluginItems
+}) => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
-  const CustomHeaderActions = useAppStore(
-    (s) => s.overrides.headerActions || DefaultOverride
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-    Button,
-    {
-      onClick: () => {
-        const data = appStore.getState().state.data;
-        onPublish && onPublish(data, currentRoute);
-      },
-      children: "Publish"
-    }
-  ) });
-};
-var HeaderHistory = () => {
+  const chrome = useChromeConfig();
   const back = useAppStore((s) => s.history.back);
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getLayoutClassName("headerHistory"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(IconButton, { type: "button", title: "Undo", disabled: !hasPast, onClick: back, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Undo2, { size: 16 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-      IconButton,
+  const CustomHeaderActions = useAppStore(
+    (s) => s.overrides.headerActions || DefaultOverride
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("header", { className: getHeaderClassName(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getHeaderClassName("plugins"), children: Object.entries(pluginItems).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "span",
       {
-        type: "button",
-        title: "Redo",
-        disabled: !hasFuture,
-        onClick: forward,
-        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Redo2, { size: 16 })
-      }
-    )
+        className: getHeaderClassName("pluginItem", {
+          mobileOnly: item.mobileOnly,
+          desktopOnly: item.desktopOnly
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          IconButton,
+          {
+            type: "button",
+            title: item.label,
+            onClick: item.onClick,
+            active: item.isActive,
+            children: item.icon
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getHeaderClassName("urlBarSlot"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(UrlBar, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getHeaderClassName("actions"), children: [
+      chrome.showHistoryControls && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: getHeaderClassName("history"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          IconButton,
+          {
+            type: "button",
+            title: "undo",
+            disabled: !hasPast,
+            onClick: back,
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Undo2, { size: 18 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          IconButton,
+          {
+            type: "button",
+            title: "redo",
+            disabled: !hasFuture,
+            onClick: forward,
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Redo2, { size: 18 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        Button,
+        {
+          onClick: () => {
+            const data = appStore.getState().state.data;
+            onPublish && onPublish(data, currentRoute);
+          },
+          children: "Publish"
+        }
+      ) })
+    ] })
   ] });
 };
+var FieldSideBar = () => {
+  const title = useAppStore(
+    (s) => {
+      var _a, _b, _c;
+      return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : ((_c = s.config.root) == null ? void 0 : _c.label) || "Page";
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Fields, {}) });
+};
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
     iframe: _iframe,
     dnd,
+    initialHistory: _initialHistory,
     plugins,
     height
   } = usePropsContext();
-  const iframe = (0, import_react93.useMemo)(
+  const iframe = (0, import_react94.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -14015,7 +14264,7 @@ var Layout = ({ children }) => {
     [_iframe]
   );
   useInjectGlobalCss(iframe.enabled);
-  const setUi = useAppStore((s) => s.setUi);
+  const dispatch = useAppStore((s) => s.dispatch);
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
@@ -14023,14 +14272,53 @@ var Layout = ({ children }) => {
   const chrome = useChromeConfig();
   const navBarVisible = chrome.showNavBar;
   const instanceId = useAppStore((s) => s.instanceId);
+  const {
+    width: leftWidth,
+    setWidth: setLeftWidth,
+    sidebarRef: leftSidebarRef,
+    handleResizeEnd: handleLeftSidebarResizeEnd
+  } = useSidebarResize("left", dispatch);
+  const {
+    width: rightWidth,
+    setWidth: setRightWidth,
+    sidebarRef: rightSidebarRef,
+    handleResizeEnd: handleRightSidebarResizeEnd
+  } = useSidebarResize("right", dispatch);
+  (0, import_react94.useEffect)(() => {
+    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 = (0, import_react93.useMemo)(
+  const CustomEditor = (0, import_react94.useMemo)(
     () => overrides.editor || DefaultOverride,
     [overrides]
   );
+  const [mounted, setMounted] = (0, import_react94.useState)(false);
+  (0, import_react94.useEffect)(() => {
+    setMounted(true);
+  }, []);
   const ready = useAppStore((s) => s.status === "READY");
   useMonitorHotkeys();
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -14041,36 +14329,106 @@ var Layout = ({ children }) => {
   usePreviewModeHotkeys();
   useDeleteHotkeys();
   useClipboardHotkeys();
+  const layoutOptions = {};
+  if (leftWidth) {
+    layoutOptions["--editor-user-left-side-bar-width"] = `${leftWidth}px`;
+  }
+  if (rightWidth) {
+    layoutOptions["--editor-user-right-side-bar-width"] = `${rightWidth}px`;
+  }
+  const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => {
     var _a;
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [theme, setTheme] = (0, import_react93.useState)(() => {
+  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (0, import_react94.useState)("toggle");
+  const [mobilePanelHeight, setMobilePanelHeight] = (0, import_react94.useState)(
+    null
+  );
+  const mobilePanelRef = (0, import_react94.useRef)(null);
+  const isDraggingMobile = (0, import_react94.useRef)(false);
+  const dragStartY = (0, import_react94.useRef)(0);
+  const dragStartHeight = (0, import_react94.useRef)(0);
+  const handleMobileDragStart = (0, import_react94.useCallback)(
+    (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 = (0, import_react94.useCallback)((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 = (0, import_react94.useCallback)(() => {
+    if (!isDraggingMobile.current) return;
+    isDraggingMobile.current = false;
+    document.body.style.userSelect = "";
+    document.body.style.touchAction = "";
+  }, []);
+  (0, import_react94.useEffect)(() => {
+    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] = (0, import_react94.useState)(() => {
     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";
   });
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     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__ */ (0, import_jsx_runtime90.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Sun, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Moon, { size: 14 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
-  const hasLegacySideBarPlugin = (0, import_react93.useMemo)(
+  const hasLegacySideBarPlugin = (0, import_react94.useMemo)(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = (0, import_react93.useMemo)(() => {
+  const pluginItems = (0, import_react94.useMemo)(() => {
     const details = {};
+    const defaultPlugins = [blocksPlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
-    const combinedPlugins = [...plugins != null ? plugins : []].sort(
-      (a, b) => isLegacy(a) - isLegacy(b)
-    );
+    const combinedPlugins = [
+      ...defaultPlugins,
+      ...plugins != null ? plugins : []
+    ].sort((a, b) => isLegacy(a) - isLegacy(b));
     if (!(plugins == null ? void 0 : plugins.some((p) => p.name === "fields"))) {
       combinedPlugins.push(fieldsPlugin());
     }
@@ -14082,15 +14440,23 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToyBrick, {}),
           onClick: () => {
+            var _a2;
+            setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
             if (plugin.name === currentPlugin) {
-              setUi({ leftSideBarVisible: !leftSideBarVisible });
-            } else if (plugin.name) {
-              setUi({
-                plugin: { current: plugin.name },
-                leftSideBarVisible: true
-              });
+              if (leftSideBarVisible) {
+                setUi({ leftSideBarVisible: false });
+              } else {
+                setUi({ leftSideBarVisible: true });
+              }
+            } else {
+              if (plugin.name) {
+                setUi({
+                  plugin: { current: plugin.name },
+                  leftSideBarVisible: true
+                });
+              }
             }
           },
           isActive: leftSideBarVisible && currentPlugin === plugin.name,
@@ -14102,65 +14468,141 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  (0, import_react93.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
     }
   }, [pluginItems, currentPlugin]);
   const hasDesktopFieldsPlugin = pluginItems["fields"] && pluginItems["fields"].mobileOnly === false;
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme }, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  const mobilePanelStyle = {};
+  if (mobilePanelHeight && leftSideBarVisible) {
+    mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "div",
     {
-      className: `Editor ${getClassName41({
+      className: `Editor ${getClassName42({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(CustomEditor, { children: children || /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CustomEditor, { children: children || /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "div",
           {
             className: getLayoutClassName({
               leftSideBarVisible,
+              mounted,
               rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
-              navBarVisible
+              navBarVisible,
+              mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
+              mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content",
+              mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getLayoutClassName("inner"), children: [
-              navBarVisible && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("header", { className: getLayoutClassName("header"), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getLayoutClassName("headerStart"), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Nav, { items: pluginItems, orientation: "horizontal" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getLayoutClassName("headerCenter"), children: chrome.showUrlBar && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(BrowserBar, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: getLayoutClassName("headerEnd"), children: [
-                  chrome.showHistoryControls && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(HeaderHistory, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(HeaderPublish, {})
-                ] })
-              ] }),
-              leftSideBarVisible && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Sidebar, { position: "left", children: Object.entries(pluginItems).map(
-                ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-                  PluginTab,
-                  {
-                    visible: currentPlugin === id,
-                    mobileOnly,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Render2, {})
-                  },
-                  id
-                )
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Canvas, {}),
-              !hasDesktopFieldsPlugin && rightSideBarVisible && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Sidebar, { position: "right", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(FieldSideBarBody, {}) })
-            ] })
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+              "div",
+              {
+                className: getLayoutClassName("inner"),
+                style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
+                children: [
+                  navBarVisible && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TopHeader, { pluginItems }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+                    "div",
+                    {
+                      ref: mobilePanelRef,
+                      className: getLayoutClassName("mobilePanel"),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                          "div",
+                          {
+                            className: getLayoutClassName("mobileDragHandle"),
+                            onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
+                            onMouseDown: (e) => handleMobileDragStart(e.clientY),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                              "div",
+                              {
+                                className: getLayoutClassName("mobileDragHandlePill")
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                          "div",
+                          {
+                            className: getLayoutClassName("mobilePanelContent"),
+                            children: Object.entries(pluginItems).map(
+                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                                PluginTab,
+                                {
+                                  visible: currentPlugin === id,
+                                  mobileOnly,
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Render2, {})
+                                },
+                                id
+                              )
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                    Sidebar,
+                    {
+                      position: "left",
+                      sidebarRef: leftSidebarRef,
+                      isVisible: leftSideBarVisible,
+                      onResize: setLeftWidth,
+                      onResizeEnd: handleLeftSidebarResizeEnd,
+                      children: Object.entries(pluginItems).map(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                          PluginTab,
+                          {
+                            visible: currentPlugin === id,
+                            mobileOnly,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Render2, {})
+                          },
+                          id
+                        )
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                    Canvas,
+                    {
+                      theme,
+                      themeIcon,
+                      themeLabel,
+                      onToggleTheme: toggleTheme
+                    }
+                  ),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                    Sidebar,
+                    {
+                      position: "right",
+                      sidebarRef: rightSidebarRef,
+                      isVisible: rightSideBarVisible,
+                      onResize: setRightWidth,
+                      onResizeEnd: handleRightSidebarResizeEnd,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FieldSideBar, {})
+                    }
+                  )
+                ]
+              }
+            )
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { id: "editor-portal-root", className: getClassName41("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { id: "editor-portal-root", className: getClassName42("portal") })
       ]
     }
-  ) });
+  );
 };
 
 // components/Editor/index.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var CHROME_KEYS = [
   "showNavBar",
   "showThemeToggle",
@@ -14190,11 +14632,11 @@ var splitUiConfig = (ui) => {
   }
   return { runtime, chrome };
 };
-var propsContext = (0, import_react94.createContext)({});
+var propsContext = (0, import_react95.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react94.useContext)(propsContext);
+var usePropsContext = () => (0, import_react95.useContext)(propsContext);
 var useChromeConfig = () => {
   const { ui } = usePropsContext();
   const { chrome } = splitUiConfig(ui);
@@ -14218,14 +14660,14 @@ function EditorProvider({ children }) {
     fullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = (0, import_react94.useMemo)(
+  const iframe = (0, import_react95.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react94.useState)(() => {
+  const [generatedAppState] = (0, import_react95.useState)(() => {
     var _a, _b, _c, _d, _e, _f;
     const { runtime: initialUiRuntime } = splitUiConfig(initialUi);
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUiRuntime);
@@ -14278,7 +14720,7 @@ function EditorProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react94.useState)(
+  const [blendedHistories] = (0, import_react95.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -14292,7 +14734,7 @@ function EditorProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (0, import_react94.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react95.useMemo)(() => {
     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;
     }
@@ -14303,7 +14745,7 @@ function EditorProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react94.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react95.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -14312,7 +14754,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react94.useCallback)(
+  const generateAppStore = (0, import_react95.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -14344,15 +14786,15 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react94.useState)(
+  const [appStore] = (0, import_react95.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react94.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [generateAppStore]);
@@ -14361,8 +14803,8 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react94.useRef)(null);
-  (0, import_react94.useEffect)(() => {
+  const previousData = (0, import_react95.useRef)(null);
+  (0, import_react95.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -14376,16 +14818,16 @@ function EditorProvider({ children }) {
   }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react95.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor4(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Layout, { children: props.children }) })) }));
 }
 Editor4.Components = Components;
 Editor4.Fields = Fields;
@@ -14395,15 +14837,15 @@ Editor4.Preview = Preview2;
 
 // components/App/AppProvider.tsx
 init_react_import();
-var import_react97 = require("react");
+var import_react98 = require("react");
 var import_react_router2 = require("react-router");
 
 // lib/use-stable-value.ts
 init_react_import();
-var import_react95 = require("react");
+var import_react96 = require("react");
 var import_fast_equals5 = require("fast-equals");
 var useStableValue = (value) => {
-  const ref = (0, import_react95.useRef)(value);
+  const ref = (0, import_react96.useRef)(value);
   if (!(0, import_fast_equals5.deepEqual)(ref.current, value)) {
     ref.current = value;
   }
@@ -14412,20 +14854,20 @@ var useStableValue = (value) => {
 
 // components/App/context.ts
 init_react_import();
-var import_react96 = require("react");
+var import_react97 = require("react");
 var import_react_router = require("react-router");
-var appConfigContext = (0, import_react96.createContext)(null);
+var appConfigContext = (0, import_react97.createContext)(null);
 var useAppConfigContext = () => {
-  const ctx = (0, import_react96.useContext)(appConfigContext);
+  const ctx = (0, import_react97.useContext)(appConfigContext);
   if (!ctx) {
     throw new Error("useApp must be called inside an <AppProvider> or <App>");
   }
   return ctx;
 };
-var stripPrefix = (path, prefix) => {
-  if (path === prefix) return "/";
-  if (!path.startsWith(`${prefix}/`)) return path;
-  const rest = path.slice(prefix.length);
+var stripPrefix = (path, prefix2) => {
+  if (path === prefix2) return "/";
+  if (!path.startsWith(`${prefix2}/`)) return path;
+  const rest = path.slice(prefix2.length);
   return rest.startsWith("/") ? rest : `/${rest}`;
 };
 var useApp = () => {
@@ -14435,7 +14877,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 = (0, import_react96.useMemo)(() => {
+  const matched = (0, import_react97.useMemo)(() => {
     const routeKeys = Object.keys(cfg.pages);
     if (routeKeys.length === 0) return null;
     const matches = (0, import_react_router.matchRoutes)(
@@ -14451,7 +14893,7 @@ var useApp = () => {
       data: cfg.pages[key]
     };
   }, [cfg.pages, matchRoute]);
-  const routes = (0, import_react96.useMemo)(() => Object.keys(cfg.pages), [cfg.pages]);
+  const routes = (0, import_react97.useMemo)(() => Object.keys(cfg.pages), [cfg.pages]);
   const navigate = (route) => {
     const target = isEditing && cfg.editorPath ? `${cfg.editorPath}${route === "/" ? "" : route}` || "/" : route;
     rrNavigate(target || "/");
@@ -14467,7 +14909,7 @@ var useApp = () => {
 };
 
 // components/App/AppProvider.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -14480,7 +14922,7 @@ function AppProvider({
 }) {
   const stablePages = useStableValue(pages);
   const resolvedEditorPath = editorPath === null ? null : editorPath || EDITOR_PATH;
-  const ctxValue = (0, import_react97.useMemo)(
+  const ctxValue = (0, import_react98.useMemo)(
     () => ({
       config,
       pages: stablePages,
@@ -14488,26 +14930,26 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router2.StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
   }
   if (router === "hash") {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.HashRouter, { children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router2.HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.BrowserRouter, { children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_router2.BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
   "div",
   {
     style: {
@@ -14517,9 +14959,9 @@ var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("h1", { children: "404" }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { children: "No page matches this route." })
+    children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("h1", { children: "404" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { children: "No page matches this route." })
     ] })
   }
 );
@@ -14530,7 +14972,7 @@ function RenderForKey({
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     Render,
     {
       config,
@@ -14548,7 +14990,7 @@ function EditorForKey({
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     Editor4,
     {
       config,
@@ -14585,12 +15027,12 @@ function AppRender({ metadata, renderNotFound }) {
   const { pages, isEditing } = useApp();
   if (isEditing) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_react_router3.Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react_router3.Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           RenderForKey,
           {
             routeKey,
@@ -14600,11 +15042,11 @@ function AppRender({ metadata, renderNotFound }) {
       },
       `render:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react_router3.Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_jsx_runtime93.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DefaultNotFound, {})
       }
     )
   ] });
@@ -14614,12 +15056,12 @@ function AppEditor(props) {
   const { pages, isEditing, editorPath } = useApp();
   if (!isEditing || editorPath === null) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_react_router3.Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react_router3.Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           EditorForKey,
           {
             routeKey,
@@ -14630,26 +15072,26 @@ function AppEditor(props) {
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       import_react_router3.Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_jsx_runtime93.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DefaultNotFound, {})
       }
     )
   ] });
 }
 function DefaultAppLayout(props) {
   const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
       AppRender,
       {
         metadata: editorProps.metadata,
         renderNotFound
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
   ] });
 }
 function App(props) {
@@ -14668,7 +15110,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     AppProvider,
     {
       config,
@@ -14676,7 +15118,7 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
@@ -15009,25 +15451,6 @@ function resolveAllData(_0, _1) {
 // bundle/core.ts
 init_walk_tree();
 
-// plugins/blocks/index.tsx
-init_react_import();
-init_lucide_react();
-
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/blocks/styles.module.css#css-module
-init_react_import();
-var styles_module_default34 = { "BlocksPlugin": "_BlocksPlugin_15ud0_1" };
-
-// plugins/blocks/index.tsx
-init_lib();
-var import_jsx_runtime94 = require("react/jsx-runtime");
-var getClassName42 = get_class_name_factory_default("BlocksPlugin", styles_module_default34);
-var blocksPlugin = () => ({
-  name: "blocks",
-  label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: getClassName42(), children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Components, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Plus, {})
-});
-
 // plugins/outline/index.tsx
 init_react_import();
 init_lucide_react();
@@ -15155,7 +15578,6 @@ lucide-react/dist/esm/icons/smartphone.js:
 lucide-react/dist/esm/icons/square-code.js:
 lucide-react/dist/esm/icons/strikethrough.js:
 lucide-react/dist/esm/icons/sun.js:
-lucide-react/dist/esm/icons/tablet.js:
 lucide-react/dist/esm/icons/toy-brick.js:
 lucide-react/dist/esm/icons/trash.js:
 lucide-react/dist/esm/icons/underline.js: