@reacteditor/core 0.0.14 → 0.0.15

package/dist/no-external.js

@@ -1072,6 +1072,20 @@ 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({
@@ -1205,6 +1219,7 @@ var init_lucide_react = __esm({
     init_smartphone();
     init_strikethrough();
     init_sun();
+    init_tablet();
     init_toy_brick();
     init_trash();
     init_underline();
@@ -3159,7 +3174,6 @@ 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: {
@@ -3172,10 +3186,9 @@ var init_default_app_state = __esm({
         isDragging: false,
         previewMode: "edit",
         viewports: {
-          current: {
-            width: defaultViewports[0].width,
-            height: defaultViewports[0].height || "auto"
-          },
+          // 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" },
           options: [],
           controlsVisible: true
         },
@@ -3416,136 +3429,6 @@ 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"() {
@@ -7922,7 +7805,7 @@ var import_react_router3 = require("react-router");
 
 // components/Editor/index.tsx
 init_react_import();
-var import_react95 = require("react");
+var import_react94 = require("react");
 init_store();
 
 // components/Editor/components/Fields/index.tsx
@@ -11979,12 +11862,55 @@ 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></head><body><div id="frame-root" data-editor-entry></div></body></html>',
+      srcDoc: '<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /></head><body style="touch-action:none"><div id="frame-root" data-editor-entry></div></body></html>',
       ref: frameRef,
       onLoad: () => {
         setLoaded(true);
@@ -12967,12 +12893,12 @@ init_to_component();
 
 // components/Editor/components/Layout/index.tsx
 init_react_import();
-var import_react94 = require("react");
+var import_react93 = 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_frglt_19", "Editor-portal": "_Editor-portal_frglt_32", "EditorLayout": "_EditorLayout_frglt_37", "EditorLayout-inner": "_EditorLayout-inner_frglt_41", "Editor--hidePlugins": "_Editor--hidePlugins_frglt_73", "EditorLayout--navBarVisible": "_EditorLayout--navBarVisible_frglt_74", "EditorLayout--mounted": "_EditorLayout--mounted_frglt_83", "EditorLayout--mobilePanelHeightToggle": "_EditorLayout--mobilePanelHeightToggle_frglt_87", "EditorLayout--leftSideBarVisible": "_EditorLayout--leftSideBarVisible_frglt_87", "EditorLayout--mobilePanelCustomHeight": "_EditorLayout--mobilePanelCustomHeight_frglt_92", "EditorLayout--mobilePanelHeightMinContent": "_EditorLayout--mobilePanelHeightMinContent_frglt_110", "EditorLayout--rightSideBarVisible": "_EditorLayout--rightSideBarVisible_frglt_132", "EditorLayout-mounted": "_EditorLayout-mounted_frglt_151", "EditorLayout-nav": "_EditorLayout-nav_frglt_192", "Editor-fieldSideBarToolbar": "_Editor-fieldSideBarToolbar_frglt_208", "Editor-fieldSideBarHistory": "_Editor-fieldSideBarHistory_frglt_218", "Editor-fieldSideBarActions": "_Editor-fieldSideBarActions_frglt_224", "EditorLayout-mobilePanel": "_EditorLayout-mobilePanel_frglt_230", "EditorLayout-mobilePanelContent": "_EditorLayout-mobilePanelContent_frglt_250", "EditorLayout-mobileDragHandle": "_EditorLayout-mobileDragHandle_frglt_257", "EditorLayout-mobileDragHandlePill": "_EditorLayout-mobileDragHandlePill_frglt_271", "EditorPluginTab": "_EditorPluginTab_frglt_278", "EditorPluginTab--visible": "_EditorPluginTab--visible_frglt_284", "EditorPluginTab-body": "_EditorPluginTab-body_frglt_289" };
+var styles_module_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" };
 
 // lib/use-inject-css.ts
 init_react_import();
@@ -13137,10 +13063,12 @@ 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: [
-    /* @__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 }) })
+    (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("content"), children }),
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: getClassName34("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Loader, { size: 32 }) })
@@ -13149,271 +13077,14 @@ var SidebarSection = ({
 
 // components/Editor/components/Canvas/index.tsx
 init_react_import();
-init_css_box_model_esm();
-var import_react89 = require("react");
-init_lucide_react();
-init_store();
-
-// components/BrowserBar/index.tsx
-init_react_import();
+var import_react88 = require("react");
 init_lucide_react();
-var import_react87 = require("react");
+var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 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_coofe_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_coofe_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_coofe_46", "BrowserBar-urlText": "_BrowserBar-urlText_coofe_51", "BrowserBar-urlInput": "_BrowserBar-urlInput_coofe_63", "BrowserBar-itemPath": "_BrowserBar-itemPath_coofe_69", "BrowserBar-itemTitle": "_BrowserBar-itemTitle_coofe_74", "BrowserBar-actions": "_BrowserBar-actions_coofe_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_coofe_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 BrowserBar = ({
-  onViewportChange
-}) => {
-  const { routes, currentRoute, onRouteChange } = usePropsContext();
-  const chrome = useChromeConfig();
-  const viewports = useAppStore((s) => s.state.ui.viewports);
-  const dispatch = useAppStore((s) => s.dispatch);
-  const isFullScreen = useAppStore(
-    (s) => {
-      var _a;
-      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
-    }
-  );
-  const toggleFullScreen = () => {
-    dispatch({
-      type: "setUi",
-      ui: { canvasFullScreen: !isFullScreen }
-    });
-  };
-  const activeDevice = (0, import_react87.useMemo)(() => {
-    const w = viewports.current.width;
-    if (typeof w === "number" && w <= 640) return "mobile";
-    return "desktop";
-  }, [viewports.current.width]);
-  const setDevice = (device) => {
-    onViewportChange == null ? void 0 : onViewportChange(DEVICE_VIEWPORTS[device]);
-  };
-  const showRoutePicker = !!routes && currentRoute !== void 0 && !!onRouteChange;
-  const [inputValue, setInputValue] = (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 && !chrome.showDeviceToggle && !chrome.showFullScreenToggle) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36(), children: [
-    chrome.showUrlBar && (showRoutePicker ? /* @__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) })
-          ] })
-        ]
-      }
-    ) : /* @__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: "/" })
-    ] })),
-    (chrome.showDeviceToggle || chrome.showFullScreenToggle) && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName36("actions"), children: [
-      chrome.showDeviceToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        IconButton,
-        {
-          type: "button",
-          title: activeDevice === "desktop" ? "Switch to mobile viewport" : "Switch to desktop viewport",
-          onClick: () => setDevice(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: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Smartphone, { size: 16 }) })
-        }
-      ),
-      chrome.showFullScreenToggle && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        IconButton,
-        {
-          type: "button",
-          title: isFullScreen ? "Exit full screen" : "Enter full screen",
-          onClick: toggleFullScreen,
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: getClassName36("deviceIcon"), children: isFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minimize, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Maximize, { size: 16 }) })
-        }
-      )
-    ] })
-  ] });
-};
 
 // 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_default30 = { "EditorCanvas": "_EditorCanvas_1aq14_1", "EditorCanvas-controls": "_EditorCanvas-controls_1aq14_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_1aq14_22", "EditorCanvas--canvasFullScreen": "_EditorCanvas--canvasFullScreen_1aq14_42", "EditorCanvas-inner": "_EditorCanvas-inner_1aq14_49", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_1aq14_62", "EditorCanvas-root": "_EditorCanvas-root_1aq14_62", "EditorCanvas--ready": "_EditorCanvas--ready_1aq14_99", "EditorCanvas-loader": "_EditorCanvas-loader_1aq14_104", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_1aq14_116", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_1aq14_125", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_1aq14_130" };
+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" };
 
 // components/Editor/components/Canvas/index.tsx
 init_lib();
@@ -13423,51 +13094,77 @@ var import_shallow9 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
 init_react_import();
-var import_react88 = require("react");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var FrameContext = (0, import_react88.createContext)(null);
+var import_react86 = require("react");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var FrameContext = (0, import_react86.createContext)(null);
 var FrameProvider = ({
   children
 }) => {
-  const frameRef = (0, import_react88.useRef)(null);
-  const value = (0, import_react88.useMemo)(
+  const frameRef = (0, import_react86.useRef)(null);
+  const value = (0, import_react86.useMemo)(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = (0, import_react88.useContext)(FrameContext);
+  const context = (0, import_react86.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
-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 import_jsx_runtime84 = require("react/jsx-runtime");
+var getClassName35 = get_class_name_factory_default("EditorCanvas", styles_module_default28);
 var MIN_ZOOM = 0.25;
 var MAX_ZOOM = 3;
-var TRANSITION_DURATION = 150;
+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 _a, _b;
   const { frameRef } = useCanvasFrame();
-  const {
-    viewports: viewportOptions = defaultViewports,
-    ui: uiProp,
-    disableZoomControls
-  } = usePropsContext();
+  const { disableZoomControls } = usePropsContext();
   const {
     dispatch,
     overrides,
     setUi,
-    zoomConfig,
-    setZoomConfig,
     status,
     iframe,
     fullScreenCanvas
@@ -13476,8 +13173,6 @@ 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
@@ -13486,143 +13181,203 @@ var Canvas = () => {
   const viewports = useAppStore((s) => s.state.ui.viewports);
   const canvasFullScreen = useAppStore(
     (s) => {
-      var _a2;
-      return (_a2 = s.state.ui.canvasFullScreen) != null ? _a2 : false;
+      var _a;
+      return (_a = s.state.ui.canvasFullScreen) != null ? _a : false;
     }
   );
-  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 });
+  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 });
     return EditorDefault;
   }, []);
-  const CustomPreview = (0, import_react89.useMemo)(
+  const CustomPreview = (0, import_react88.useMemo)(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  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)(() => {
+  const [showLoader, setShowLoader] = (0, import_react88.useState)(false);
+  (0, import_react88.useEffect)(() => {
     setTimeout(() => {
       setShowLoader(true);
     }, 500);
   }, []);
-  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 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 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;
+    const viewportEl = (_a = frameRef.current) == null ? void 0 : _a.firstElementChild;
+    if (viewportEl) {
+      viewportEl.addEventListener("wheel", handler, { passive: false });
+      cleanups.push(
+        () => viewportEl.removeEventListener("wheel", handler)
+      );
+    }
     if (iframe.enabled) {
-      const s = appStoreApi.getState();
-      const appState = {
-        state: __spreadProps(__spreadValues({}, s.state), {
-          ui: __spreadProps(__spreadValues({}, s.state.ui), {
-            viewports: __spreadProps(__spreadValues({}, s.state.ui.viewports), {
-              current: __spreadProps(__spreadValues({}, s.state.ui.viewports.current), {
-                height: (closestViewport == null ? void 0 : closestViewport.height) || "auto",
-                width: closestViewport == null ? void 0 : closestViewport.width
-              })
-            })
-          })
-        })
+      const tryAttach = () => {
+        const el = document.getElementById(
+          "preview-frame"
+        );
+        const doc = el == null ? void 0 : el.contentDocument;
+        const win = el == null ? void 0 : el.contentWindow;
+        if (!doc || !win) return false;
+        const opts = { passive: false, capture: true };
+        doc.addEventListener("wheel", handler, opts);
+        win.addEventListener("wheel", handler, opts);
+        cleanups.push(() => {
+          doc.removeEventListener("wheel", handler, opts);
+          win.removeEventListener("wheel", handler, opts);
+        });
+        return true;
       };
-      let history = s.history;
-      if (s.history.histories.length === 1) {
-        history = __spreadProps(__spreadValues({}, history), { histories: [appState] });
+      if (!tryAttach()) {
+        const interval = window.setInterval(() => {
+          if (tryAttach()) window.clearInterval(interval);
+        }, 100);
+        cleanups.push(() => window.clearInterval(interval));
       }
-      appStoreApi.setState(__spreadProps(__spreadValues({}, appState), { history }));
     }
-  }, [
-    pickClosestViewport,
-    frameRef.current,
-    iframe,
-    appStoreApi,
-    (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
-  ]);
-  (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)(
+    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)(
     "div",
     {
-      className: getClassName37({
+      className: getClassName35({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: fullScreenCanvas,
@@ -13638,265 +13393,120 @@ var Canvas = () => {
           });
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("inner"), ref: frameRef, children: [
-        !disableZoomControls && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: getClassName37("zoomControls"), children: [
-          /* @__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.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)(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Plus, { size: 14 }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-          "div",
+      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,
           {
-            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"
-            },
+            ref: transformRef,
+            minScale: MIN_ZOOM,
+            maxScale: MAX_ZOOM,
+            initialScale: 1,
+            doubleClick: { disabled: true },
+            limitToBounds: false,
+            wheel: { disabled: true },
+            pinch: { step: 5 },
+            panning: { velocityDisabled: true },
+            trackPadPanning: { velocityDisabled: true },
+            alignmentAnimation: { disabled: true },
+            autoAlignment: { disabled: true, sizeX: 0, sizeY: 0 },
             children: [
-              iframe.enabled && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("browserBar"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                BrowserBar,
-                {
-                  onViewportChange: (viewport) => {
-                    autoSelectingRef.current = false;
-                    setShowTransition(true);
-                    isResizingRef.current = true;
-                    const uiViewport = __spreadProps(__spreadValues({}, viewport), {
-                      height: viewport.height || "auto",
-                      zoom: 1
-                    });
-                    setUi({
-                      viewports: __spreadProps(__spreadValues({}, viewports), { current: uiViewport })
-                    });
+              /* @__PURE__ */ (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]
                   }
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-                "div",
+                ),
+                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,
                 {
-                  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, {}) })
+                  infinite: true,
+                  wrapperStyle: { width: "100%", height: "100%" },
+                  children: frameContents
                 }
               )
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: getClassName37("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Loader, { size: 24 }) })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("loader"), children: /* @__PURE__ */ (0, import_jsx_runtime84.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_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" };
+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" };
 
 // components/Editor/components/Sidebar/index.tsx
-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
-      }
-    ) })
-  ] });
+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 }) });
 };
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-var import_react92 = require("react");
+var import_react89 = require("react");
 init_use_hotkey();
 init_store();
 
@@ -13938,7 +13548,7 @@ var shouldBlockEditingHotkey = (e) => {
 // lib/use-delete-hotkeys.ts
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = (0, import_react92.useCallback)(
+  const deleteSelectedComponent = (0, import_react89.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) {
@@ -13964,7 +13574,7 @@ var useDeleteHotkeys = () => {
 
 // lib/use-clipboard-hotkeys.ts
 init_react_import();
-var import_react93 = require("react");
+var import_react90 = require("react");
 init_use_hotkey();
 init_store();
 var CLIPBOARD_MARKER = "reacteditor/component";
@@ -13986,7 +13596,7 @@ var parsePayload = (text) => {
 };
 var useClipboardHotkeys = () => {
   const appStore = useAppStoreApi();
-  const writeSelectionToClipboard = (0, import_react93.useCallback)(() => {
+  const writeSelectionToClipboard = (0, import_react90.useCallback)(() => {
     var _a;
     const { selectedItem } = appStore.getState();
     if (!selectedItem) return false;
@@ -13998,14 +13608,14 @@ var useClipboardHotkeys = () => {
     });
     return true;
   }, [appStore]);
-  const copySelectedComponent = (0, import_react93.useCallback)(
+  const copySelectedComponent = (0, import_react90.useCallback)(
     (e) => {
       if (shouldBlockEditingHotkey(e)) return false;
       return writeSelectionToClipboard();
     },
     [writeSelectionToClipboard]
   );
-  const cutSelectedComponent = (0, import_react93.useCallback)(
+  const cutSelectedComponent = (0, import_react90.useCallback)(
     (e) => {
       var _a;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -14024,7 +13634,7 @@ var useClipboardHotkeys = () => {
     },
     [appStore, writeSelectionToClipboard]
   );
-  const pasteComponent = (0, import_react93.useCallback)(
+  const pasteComponent = (0, import_react90.useCallback)(
     (e) => {
       var _a, _b;
       if (shouldBlockEditingHotkey(e)) return false;
@@ -14059,164 +13669,328 @@ var useClipboardHotkeys = () => {
 // components/Editor/components/Nav/index.tsx
 init_react_import();
 
-// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/Editor/components/Nav/styles.module.css#css-module
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/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)
+  );
+}
+
+// css-module:/Users/rami/Documents/apps/react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default33 = { "Nav": "_Nav_1g4tk_1", "Nav-list": "_Nav-list_1g4tk_18", "Nav-footer": "_Nav-footer_1g4tk_42", "NavItem-link": "_NavItem-link_1g4tk_55", "NavItem-linkLabel": "_NavItem-linkLabel_1g4tk_83", "NavItem": "_NavItem_1g4tk_55", "NavItem-linkIcon": "_NavItem-linkIcon_1g4tk_108", "NavItem--active": "_NavItem--active_1g4tk_121", "NavItem--mobileOnly": "_NavItem--mobileOnly_1g4tk_132", "NavItem--desktopOnly": "_NavItem--desktopOnly_1g4tk_137" };
+var styles_module_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" };
 
-// components/Editor/components/Nav/index.tsx
-init_lib();
+// components/BrowserBar/index.tsx
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var getClassName40 = get_class_name_factory_default("Nav", styles_module_default33);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default33);
-var MenuItem = ({
-  label,
-  icon,
-  onClick,
-  isActive,
-  mobileOnly,
-  desktopOnly
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-    "li",
+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,
     {
-      className: getClassNameItem3({
-        active: isActive,
-        mobileOnly,
-        desktopOnly
-      }),
-      children: onClick && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: getClassNameItem3("linkLabel"), children: label })
-      ] })
+      items: routes,
+      value: currentRoute,
+      onValueChange: (next) => {
+        if (typeof next === "string") submit(next);
+      },
+      inputValue,
+      onInputValueChange: (next) => setInputValue(next),
+      autoHighlight: false,
+      children: [
+        /* @__PURE__ */ (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) })
+        ] })
+      ]
     }
-  );
-};
-var Nav = ({
-  items,
-  footer
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("nav", { className: getClassName40(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("ul", { className: getClassName40("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(MenuItem, __spreadValues({}, item), key)) }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: getClassName40("footer"), children: footer })
-  ] });
+  ) : /* @__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: "/" })
+  ] }) });
 };
 
 // components/Editor/components/Layout/index.tsx
-init_IconButton2();
-init_lucide_react();
-
-// 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_runtime90 = require("react/jsx-runtime");
-var getClassName41 = get_class_name_factory_default("BlocksPlugin", styles_module_default34);
-var blocksPlugin = () => ({
-  name: "blocks",
-  label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Components, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime90.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_default35 = { "FieldsPlugin": "_FieldsPlugin_262zt_1", "FieldsPlugin-header": "_FieldsPlugin-header_262zt_7" };
-
-// plugins/fields/index.tsx
-init_lib();
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var getClassName42 = get_class_name_factory_default("FieldsPlugin", styles_module_default35);
-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_runtime91.jsxs)("div", { className: getClassName42(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName42("header"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Fields, {})
-  ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RectangleEllipsis, {}),
-  mobileOnly: desktopSideBar === "right"
-});
-
-// components/Editor/components/Layout/index.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var getClassName43 = get_class_name_factory_default("Editor", styles_module_default25);
+var getClassName41 = 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 FieldSideBarToolbar = () => {
+var FieldSideBarBody = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SidebarSection, { noBorderTop: true, title: null, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Fields, {}) });
+var HeaderPublish = () => {
   const appStore = useAppStoreApi();
   const { onPublish, currentRoute } = usePropsContext();
-  const chrome = useChromeConfig();
+  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 back = useAppStore((s) => s.history.back);
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  const CustomHeaderActions = useAppStore(
-    (s) => s.overrides.headerActions || DefaultOverride
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName43("fieldSideBarToolbar"), children: [
-    chrome.showHistoryControls ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName43("fieldSideBarHistory"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-        IconButton,
-        {
-          type: "button",
-          title: "undo",
-          disabled: !hasPast,
-          onClick: back,
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Undo2, { size: 18 })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-        IconButton,
-        {
-          type: "button",
-          title: "redo",
-          disabled: !hasFuture,
-          onClick: forward,
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Redo2, { size: 18 })
-        }
-      )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName43("fieldSideBarActions"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomHeaderActions, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-      Button,
+  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,
       {
-        onClick: () => {
-          const data = appStore.getState().state.data;
-          onPublish && onPublish(data, currentRoute);
-        },
-        children: "Publish"
+        type: "button",
+        title: "Redo",
+        disabled: !hasFuture,
+        onClick: forward,
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Redo2, { size: 16 })
       }
-    ) }) })
-  ] });
-};
-var FieldSideBar = () => {
-  const title = useAppStore(
-    (s) => {
-      var _a, _b, _c;
-      return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : ((_c = s.config.root) == null ? void 0 : _c.label) || "Page";
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldSideBarToolbar, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Fields, {}) })
+    )
   ] });
 };
 var PluginTab = ({
@@ -14224,17 +13998,16 @@ var PluginTab = ({
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   const {
     iframe: _iframe,
     dnd,
-    initialHistory: _initialHistory,
     plugins,
     height
   } = usePropsContext();
-  const iframe = (0, import_react94.useMemo)(
+  const iframe = (0, import_react93.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
@@ -14242,7 +14015,7 @@ var Layout = ({ children }) => {
     [_iframe]
   );
   useInjectGlobalCss(iframe.enabled);
-  const dispatch = useAppStore((s) => s.dispatch);
+  const setUi = useAppStore((s) => s.setUi);
   const leftSideBarVisible = useAppStore((s) => s.state.ui.leftSideBarVisible);
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
@@ -14250,53 +14023,14 @@ var Layout = ({ children }) => {
   const chrome = useChromeConfig();
   const navBarVisible = chrome.showNavBar;
   const instanceId = useAppStore((s) => s.instanceId);
-  const {
-    width: leftWidth,
-    setWidth: setLeftWidth,
-    sidebarRef: leftSidebarRef,
-    handleResizeEnd: handleLeftSidebarResizeEnd
-  } = useSidebarResize("left", dispatch);
-  const {
-    width: rightWidth,
-    setWidth: setRightWidth,
-    sidebarRef: rightSidebarRef,
-    handleResizeEnd: handleRightSidebarResizeEnd
-  } = useSidebarResize("right", dispatch);
-  (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_react94.useMemo)(
+  const CustomEditor = (0, import_react93.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_react94.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (ready && iframe.enabled) {
       const frameDoc = getFrame();
       if (frameDoc) {
@@ -14307,106 +14041,36 @@ var Layout = ({ children }) => {
   usePreviewModeHotkeys();
   useDeleteHotkeys();
   useClipboardHotkeys();
-  const layoutOptions = {};
-  if (leftWidth) {
-    layoutOptions["--editor-user-left-side-bar-width"] = `${leftWidth}px`;
-  }
-  if (rightWidth) {
-    layoutOptions["--editor-user-right-side-bar-width"] = `${rightWidth}px`;
-  }
-  const setUi = useAppStore((s) => s.setUi);
   const currentPlugin = useAppStore((s) => {
     var _a;
     return (_a = s.state.ui.plugin) == null ? void 0 : _a.current;
   });
   const appStoreApi = useAppStoreApi();
-  const [mobilePanelHeightMode, setMobilePanelHeightMode] = (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)(() => {
+  const [theme, setTheme] = (0, import_react93.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_react94.useEffect)(() => {
+  (0, import_react93.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_runtime92.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Moon, { size: 18 });
+  const themeIcon = theme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Sun, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Moon, { size: 18 });
   const themeLabel = theme === "dark" ? "Switch to light mode" : "Switch to dark mode";
-  const hasLegacySideBarPlugin = (0, import_react94.useMemo)(
+  const hasLegacySideBarPlugin = (0, import_react93.useMemo)(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = (0, import_react94.useMemo)(() => {
+  const pluginItems = (0, import_react93.useMemo)(() => {
     const details = {};
-    const defaultPlugins = [blocksPlugin()];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
-    const combinedPlugins = [
-      ...defaultPlugins,
-      ...plugins != null ? plugins : []
-    ].sort((a, b) => isLegacy(a) - isLegacy(b));
+    const combinedPlugins = [...plugins != null ? plugins : []].sort(
+      (a, b) => isLegacy(a) - isLegacy(b)
+    );
     if (!(plugins == null ? void 0 : plugins.some((p) => p.name === "fields"))) {
       combinedPlugins.push(fieldsPlugin());
     }
@@ -14418,23 +14082,15 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a = plugin.label) != null ? _a : plugin.name,
-          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ToyBrick, {}),
+          icon: (_b = plugin.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ToyBrick, {}),
           onClick: () => {
-            var _a2;
-            setMobilePanelHeightMode((_a2 = plugin.mobilePanelHeight) != null ? _a2 : "toggle");
             if (plugin.name === currentPlugin) {
-              if (leftSideBarVisible) {
-                setUi({ leftSideBarVisible: false });
-              } else {
-                setUi({ leftSideBarVisible: true });
-              }
-            } else {
-              if (plugin.name) {
-                setUi({
-                  plugin: { current: plugin.name },
-                  leftSideBarVisible: true
-                });
-              }
+              setUi({ leftSideBarVisible: !leftSideBarVisible });
+            } else if (plugin.name) {
+              setUi({
+                plugin: { current: plugin.name },
+                leftSideBarVisible: true
+              });
             }
           },
           isActive: leftSideBarVisible && currentPlugin === plugin.name,
@@ -14446,147 +14102,65 @@ var Layout = ({ children }) => {
     });
     return details;
   }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
       setUi({ plugin: { current: names[0] } });
     }
   }, [pluginItems, currentPlugin]);
   const hasDesktopFieldsPlugin = pluginItems["fields"] && pluginItems["fields"].mobileOnly === false;
-  const mobilePanelStyle = {};
-  if (mobilePanelHeight && leftSideBarVisible) {
-    mobilePanelStyle["--editor-mobile-panel-height"] = `${mobilePanelHeight}px`;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ThemeContext.Provider, { value: { theme, toggleTheme }, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
     "div",
     {
-      className: `Editor ${getClassName43({
+      className: `Editor ${getClassName41({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       "data-theme": theme,
       style: { height },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CustomEditor, { children: children || /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FrameProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__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)(
           "div",
           {
             className: getLayoutClassName({
               leftSideBarVisible,
-              mounted,
               rightSideBarVisible: !hasDesktopFieldsPlugin && rightSideBarVisible,
-              navBarVisible,
-              mobilePanelHeightToggle: mobilePanelHeightMode === "toggle",
-              mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content",
-              mobilePanelCustomHeight: mobilePanelHeight !== null && leftSideBarVisible
+              navBarVisible
             }),
             style: { height },
-            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
-              "div",
-              {
-                className: getLayoutClassName("inner"),
-                style: __spreadValues(__spreadValues({}, layoutOptions), mobilePanelStyle),
-                children: [
-                  navBarVisible && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                    Nav,
-                    {
-                      items: pluginItems,
-                      footer: chrome.showThemeToggle ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                        IconButton,
-                        {
-                          type: "button",
-                          title: themeLabel,
-                          onClick: toggleTheme,
-                          children: themeIcon
-                        }
-                      ) : void 0
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
-                    "div",
-                    {
-                      ref: mobilePanelRef,
-                      className: getLayoutClassName("mobilePanel"),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                          "div",
-                          {
-                            className: getLayoutClassName("mobileDragHandle"),
-                            onTouchStart: (e) => handleMobileDragStart(e.touches[0].clientY),
-                            onMouseDown: (e) => handleMobileDragStart(e.clientY),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                              "div",
-                              {
-                                className: getLayoutClassName("mobileDragHandlePill")
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                          "div",
-                          {
-                            className: getLayoutClassName("mobilePanelContent"),
-                            children: Object.entries(pluginItems).map(
-                              ([id, { mobileOnly, render: Render2 }]) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                                PluginTab,
-                                {
-                                  visible: currentPlugin === id,
-                                  mobileOnly,
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
-                                },
-                                id
-                              )
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.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_runtime92.jsx)(
-                          PluginTab,
-                          {
-                            visible: currentPlugin === id,
-                            mobileOnly,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Render2, {})
-                          },
-                          id
-                        )
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-                    Sidebar,
-                    {
-                      position: "right",
-                      sidebarRef: rightSidebarRef,
-                      isVisible: rightSideBarVisible,
-                      onResize: setRightWidth,
-                      onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldSideBar, {})
-                    }
-                  )
-                ]
-              }
-            )
+            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, {}) })
+            ] })
           }
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "editor-portal-root", className: getClassName43("portal") })
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { id: "editor-portal-root", className: getClassName41("portal") })
       ]
     }
-  );
+  ) });
 };
 
 // components/Editor/index.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var CHROME_KEYS = [
   "showNavBar",
   "showThemeToggle",
@@ -14616,11 +14190,11 @@ var splitUiConfig = (ui) => {
   }
   return { runtime, chrome };
 };
-var propsContext = (0, import_react95.createContext)({});
+var propsContext = (0, import_react94.createContext)({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => (0, import_react95.useContext)(propsContext);
+var usePropsContext = () => (0, import_react94.useContext)(propsContext);
 var useChromeConfig = () => {
   const { ui } = usePropsContext();
   const { chrome } = splitUiConfig(ui);
@@ -14644,14 +14218,14 @@ function EditorProvider({ children }) {
     fullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = (0, import_react95.useMemo)(
+  const iframe = (0, import_react94.useMemo)(
     () => __spreadValues({
       enabled: true,
       waitForStyles: true
     }, _iframe),
     [_iframe]
   );
-  const [generatedAppState] = (0, import_react95.useState)(() => {
+  const [generatedAppState] = (0, import_react94.useState)(() => {
     var _a, _b, _c, _d, _e, _f;
     const { runtime: initialUiRuntime } = splitUiConfig(initialUi);
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUiRuntime);
@@ -14704,7 +14278,7 @@ function EditorProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = (0, import_react95.useState)(
+  const [blendedHistories] = (0, import_react94.useState)(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -14718,7 +14292,7 @@ function EditorProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = (0, import_react95.useMemo)(() => {
+  const initialHistoryIndex = (0, import_react94.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;
     }
@@ -14729,7 +14303,7 @@ function EditorProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = (0, import_react95.useMemo)(() => {
+  const loadedFieldTransforms = (0, import_react94.useMemo)(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -14738,7 +14312,7 @@ function EditorProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = (0, import_react95.useCallback)(
+  const generateAppStore = (0, import_react94.useCallback)(
     (state) => {
       return {
         instanceId,
@@ -14770,15 +14344,15 @@ function EditorProvider({ children }) {
       loadedFieldTransforms
     ]
   );
-  const [appStore] = (0, import_react95.useState)(
+  const [appStore] = (0, import_react94.useState)(
     () => createAppStore(generateAppStore(initialAppState))
   );
-  (0, import_react95.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (process.env.NODE_ENV !== "production") {
       window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
     }
   }, [appStore]);
-  (0, import_react95.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     const state = appStore.getState().state;
     appStore.setState(__spreadValues({}, generateAppStore(state)));
   }, [generateAppStore]);
@@ -14787,8 +14361,8 @@ function EditorProvider({ children }) {
     index: initialHistoryIndex,
     initialAppState
   });
-  const previousData = (0, import_react95.useRef)(null);
-  (0, import_react95.useEffect)(() => {
+  const previousData = (0, import_react94.useRef)(null);
+  (0, import_react94.useEffect)(() => {
     return appStore.subscribe(
       (s) => s.state.data,
       (data) => {
@@ -14802,16 +14376,16 @@ function EditorProvider({ children }) {
   }, [onChange, config]);
   useRegisterPermissionsSlice(appStore, permissions);
   const uEditorStore = useRegisterUseEditorStore(appStore);
-  (0, import_react95.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     const { resolveAndCommitData } = appStore.getState();
     setTimeout(() => {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(UseEditorStoreContext.Provider, { value: uEditorStore, children }) });
 }
 function Editor4(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(EditorProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Layout, { children: props.children }) })) }));
+  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 }) })) }));
 }
 Editor4.Components = Components;
 Editor4.Fields = Fields;
@@ -14821,15 +14395,15 @@ Editor4.Preview = Preview2;
 
 // components/App/AppProvider.tsx
 init_react_import();
-var import_react98 = require("react");
+var import_react97 = require("react");
 var import_react_router2 = require("react-router");
 
 // lib/use-stable-value.ts
 init_react_import();
-var import_react96 = require("react");
+var import_react95 = require("react");
 var import_fast_equals5 = require("fast-equals");
 var useStableValue = (value) => {
-  const ref = (0, import_react96.useRef)(value);
+  const ref = (0, import_react95.useRef)(value);
   if (!(0, import_fast_equals5.deepEqual)(ref.current, value)) {
     ref.current = value;
   }
@@ -14838,20 +14412,20 @@ var useStableValue = (value) => {
 
 // components/App/context.ts
 init_react_import();
-var import_react97 = require("react");
+var import_react96 = require("react");
 var import_react_router = require("react-router");
-var appConfigContext = (0, import_react97.createContext)(null);
+var appConfigContext = (0, import_react96.createContext)(null);
 var useAppConfigContext = () => {
-  const ctx = (0, import_react97.useContext)(appConfigContext);
+  const ctx = (0, import_react96.useContext)(appConfigContext);
   if (!ctx) {
     throw new Error("useApp must be called inside an <AppProvider> or <App>");
   }
   return ctx;
 };
-var stripPrefix = (path, prefix2) => {
-  if (path === prefix2) return "/";
-  if (!path.startsWith(`${prefix2}/`)) return path;
-  const rest = path.slice(prefix2.length);
+var stripPrefix = (path, prefix) => {
+  if (path === prefix) return "/";
+  if (!path.startsWith(`${prefix}/`)) return path;
+  const rest = path.slice(prefix.length);
   return rest.startsWith("/") ? rest : `/${rest}`;
 };
 var useApp = () => {
@@ -14861,7 +14435,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_react97.useMemo)(() => {
+  const matched = (0, import_react96.useMemo)(() => {
     const routeKeys = Object.keys(cfg.pages);
     if (routeKeys.length === 0) return null;
     const matches = (0, import_react_router.matchRoutes)(
@@ -14877,7 +14451,7 @@ var useApp = () => {
       data: cfg.pages[key]
     };
   }, [cfg.pages, matchRoute]);
-  const routes = (0, import_react97.useMemo)(() => Object.keys(cfg.pages), [cfg.pages]);
+  const routes = (0, import_react96.useMemo)(() => Object.keys(cfg.pages), [cfg.pages]);
   const navigate = (route) => {
     const target = isEditing && cfg.editorPath ? `${cfg.editorPath}${route === "/" ? "" : route}` || "/" : route;
     rrNavigate(target || "/");
@@ -14893,7 +14467,7 @@ var useApp = () => {
 };
 
 // components/App/AppProvider.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var EDITOR_PATH = "/editor";
 var isServer = typeof window === "undefined";
 function AppProvider({
@@ -14906,7 +14480,7 @@ function AppProvider({
 }) {
   const stablePages = useStableValue(pages);
   const resolvedEditorPath = editorPath === null ? null : editorPath || EDITOR_PATH;
-  const ctxValue = (0, import_react98.useMemo)(
+  const ctxValue = (0, import_react97.useMemo)(
     () => ({
       config,
       pages: stablePages,
@@ -14914,26 +14488,26 @@ function AppProvider({
     }),
     [config, stablePages, resolvedEditorPath]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(appConfigContext.Provider, { value: ctxValue, children });
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(appConfigContext.Provider, { value: ctxValue, children });
   if (isServer) {
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.StaticRouter, { location: currentPath != null ? currentPath : "/", children: inner });
   }
   if (router === "hash") {
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.HashRouter, { children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.HashRouter, { children: inner });
   }
   if (router === "memory") {
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.MemoryRouter, { initialEntries: [currentPath != null ? currentPath : "/"], children: inner });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_router2.BrowserRouter, { children: inner });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_router2.BrowserRouter, { children: inner });
 }
 
 // components/App/App.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var joinEditorPath = (editorPath, route) => {
   if (route === "/") return editorPath;
   return `${editorPath}${route}`;
 };
-var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
   "div",
   {
     style: {
@@ -14943,9 +14517,9 @@ var DefaultNotFound = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       justifyContent: "center",
       alignItems: "center"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("h1", { children: "404" }),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { children: "No page matches this route." })
+    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." })
     ] })
   }
 );
@@ -14956,7 +14530,7 @@ function RenderForKey({
   const { config, pages } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     Render,
     {
       config,
@@ -14974,7 +14548,7 @@ function EditorForKey({
   const { config, pages, routes, navigate } = useApp();
   const data = pages[routeKey];
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     Editor4,
     {
       config,
@@ -15011,12 +14585,12 @@ function AppRender({ metadata, renderNotFound }) {
   const { pages, isEditing } = useApp();
   if (isEditing) return null;
   const routeKeys = Object.keys(pages);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_react_router3.Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       import_react_router3.Route,
       {
         path: routeKey,
-        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           RenderForKey,
           {
             routeKey,
@@ -15026,11 +14600,11 @@ function AppRender({ metadata, renderNotFound }) {
       },
       `render:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       import_react_router3.Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_jsx_runtime93.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DefaultNotFound, {})
       }
     )
   ] });
@@ -15040,12 +14614,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_runtime95.jsxs)(import_react_router3.Routes, { children: [
-    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_react_router3.Routes, { children: [
+    routeKeys.map((routeKey) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       import_react_router3.Route,
       {
         path: joinEditorPath(editorPath, routeKey),
-        element: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        element: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           EditorForKey,
           {
             routeKey,
@@ -15056,26 +14630,26 @@ function AppEditor(props) {
       },
       `edit:${routeKey}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       import_react_router3.Route,
       {
         path: "*",
-        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultNotFound, {})
+        element: renderNotFound ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_jsx_runtime93.Fragment, { children: renderNotFound() }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DefaultNotFound, {})
       }
     )
   ] });
 }
 function DefaultAppLayout(props) {
   const _a = props, { renderNotFound } = _a, editorProps = __objRest(_a, ["renderNotFound"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       AppRender,
       {
         metadata: editorProps.metadata,
         renderNotFound
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(AppEditor, __spreadProps(__spreadValues({}, editorProps), { renderNotFound }))
   ] });
 }
 function App(props) {
@@ -15094,7 +14668,7 @@ function App(props) {
     "router",
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     AppProvider,
     {
       config,
@@ -15102,7 +14676,7 @@ function App(props) {
       currentPath,
       editorPath,
       router,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(DefaultAppLayout, __spreadValues({}, layoutProps))
     }
   );
 }
@@ -15435,33 +15009,52 @@ 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();
 
 // css-module:/Users/rami/Documents/apps/react-editor/packages/core/plugins/outline/styles.module.css#css-module
 init_react_import();
-var styles_module_default36 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
+var styles_module_default35 = { "OutlinePlugin": "_OutlinePlugin_q92j6_1" };
 
 // plugins/outline/index.tsx
 init_lib();
-var import_jsx_runtime96 = require("react/jsx-runtime");
-var getClassName44 = get_class_name_factory_default("OutlinePlugin", styles_module_default36);
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var getClassName43 = get_class_name_factory_default("OutlinePlugin", styles_module_default35);
 var outlinePlugin = () => ({
   name: "outline",
   label: "Outline",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: getClassName44(), children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Layers, {})
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getClassName43(), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Outline, {}) }),
+  icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Layers, {})
 });
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var legacySideBarPlugin = () => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Components, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Outline, {}) })
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Components, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Outline, {}) })
   ] })
 });
 // Annotate the CommonJS export names for ESM import in node:
@@ -15562,6 +15155,7 @@ 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: