@reacteditor/core 0.0.1-alpha.0 → 0.0.2

package/dist/{Editor-IKMJILGR.mjs → Editor-2TYODRQT.mjs}

@@ -4,16 +4,16 @@ import {
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-F7S5S6I2.mjs";
+} from "./chunk-TCVU3WEN.mjs";
 import "./chunk-MFI3RDA4.mjs";
-import "./chunk-V2OPYD42.mjs";
-import "./chunk-6B2Q5R3C.mjs";
-import "./chunk-DXGQXXQG.mjs";
-import "./chunk-GUMYXUO3.mjs";
+import "./chunk-6Q6A3BQH.mjs";
+import "./chunk-HMTHZBH6.mjs";
+import "./chunk-ZHNRSSMW.mjs";
+import "./chunk-M2RKJTNY.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import "./chunk-VUEM62JF.mjs";
 import "./chunk-VOLQMQPK.mjs";
 import "./chunk-Y2EFNT5P.mjs";

package/dist/{chunk-SURZYH7D.mjs → chunk-2LVYDXZS.mjs}

@@ -255,17 +255,6 @@ var Globe = createLucideIcon("Globe", [
   ["path", { d: "M2 12h20", key: "9i4pu4" }]
 ]);
 
-// ../../node_modules/lucide-react/dist/esm/icons/grip-vertical.js
-init_react_import();
-var GripVertical = createLucideIcon("GripVertical", [
-  ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
-  ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
-  ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
-  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
-  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
-  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
-]);
-
 // ../../node_modules/lucide-react/dist/esm/icons/heading-1.js
 init_react_import();
 var Heading1 = createLucideIcon("Heading1", [
@@ -464,6 +453,13 @@ var Redo2 = createLucideIcon("Redo2", [
   ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
+init_react_import();
+var RotateCcw = createLucideIcon("RotateCcw", [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/search.js
 init_react_import();
 var Search = createLucideIcon("Search", [
@@ -1609,7 +1605,6 @@ export {
   Copy,
   CornerLeftUp,
   Globe,
-  GripVertical,
   Heading1,
   Heading2,
   Heading3,
@@ -1632,6 +1627,7 @@ export {
   Quote,
   RectangleEllipsis,
   Redo2,
+  RotateCcw,
   Search,
   SlidersHorizontal,
   Smartphone,
@@ -1683,7 +1679,6 @@ lucide-react/dist/esm/icons/component.js:
 lucide-react/dist/esm/icons/copy.js:
 lucide-react/dist/esm/icons/corner-left-up.js:
 lucide-react/dist/esm/icons/globe.js:
-lucide-react/dist/esm/icons/grip-vertical.js:
 lucide-react/dist/esm/icons/heading-1.js:
 lucide-react/dist/esm/icons/heading-2.js:
 lucide-react/dist/esm/icons/heading-3.js:
@@ -1704,6 +1699,7 @@ lucide-react/dist/esm/icons/plus.js:
 lucide-react/dist/esm/icons/quote.js:
 lucide-react/dist/esm/icons/rectangle-ellipsis.js:
 lucide-react/dist/esm/icons/redo-2.js:
+lucide-react/dist/esm/icons/rotate-ccw.js:
 lucide-react/dist/esm/icons/search.js:
 lucide-react/dist/esm/icons/sliders-horizontal.js:
 lucide-react/dist/esm/icons/smartphone.js:

package/dist/{chunk-V2OPYD42.mjs → chunk-6Q6A3BQH.mjs}

@@ -1,12 +1,12 @@
 import {
   useAlignOptions
-} from "./chunk-6B2Q5R3C.mjs";
+} from "./chunk-HMTHZBH6.mjs";
 import {
   useHeadingOptions
-} from "./chunk-DXGQXXQG.mjs";
+} from "./chunk-ZHNRSSMW.mjs";
 import {
   useListOptions
-} from "./chunk-GUMYXUO3.mjs";
+} from "./chunk-M2RKJTNY.mjs";
 import {
   AlignCenter,
   AlignJustify,
@@ -26,7 +26,7 @@ import {
   Strikethrough,
   Underline,
   useControlContext
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -349,7 +349,7 @@ function AlignSelectFallback() {
 // components/RichTextMenu/controls/AlignSelect/index.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var AlignSelectLoaded = lazy(
-  () => import("./loaded-ULSROV73.mjs").then((m) => ({
+  () => import("./loaded-CBJRWD4Z.mjs").then((m) => ({
     default: m.AlignSelectLoaded
   }))
 );
@@ -580,7 +580,7 @@ function HeadingSelectFallback() {
 // components/RichTextMenu/controls/HeadingSelect/index.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var HeadingSelectLoaded = lazy2(
-  () => import("./loaded-35WC23HJ.mjs").then((m) => ({
+  () => import("./loaded-IJNA4SY5.mjs").then((m) => ({
     default: m.HeadingSelectLoaded
   }))
 );
@@ -612,7 +612,7 @@ function ListSelectFallback() {
 // components/RichTextMenu/controls/ListSelect/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var ListSelectLoaded = lazy3(
-  () => import("./loaded-YYRJPIWZ.mjs").then((m) => ({
+  () => import("./loaded-DGSPK47E.mjs").then((m) => ({
     default: m.ListSelectLoaded
   }))
 );

package/dist/{chunk-QNHSXCWU.mjs → chunk-BQ2PZ2YN.mjs}

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-F7S5S6I2.mjs";
+} from "./chunk-TCVU3WEN.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -16,7 +16,7 @@ import {
   IconButton,
   LoadedRichTextMenuInner,
   Loader
-} from "./chunk-V2OPYD42.mjs";
+} from "./chunk-6Q6A3BQH.mjs";
 import {
   Check,
   ChevronDown,
@@ -26,17 +26,18 @@ import {
   Copy,
   CornerLeftUp,
   Globe,
-  GripVertical,
   Layers,
   Link,
   Lock,
   Maximize,
   Minimize,
+  Minus,
   Monitor,
   Moon,
   Plus,
   RectangleEllipsis,
   Redo2,
+  RotateCcw,
   Search,
   SlidersHorizontal,
   Smartphone,
@@ -59,7 +60,7 @@ import {
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import {
   getItem,
   insert,
@@ -2104,7 +2105,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment3, jsx as jsx19 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-IKMJILGR.mjs").then((m) => ({
+  () => import("./Editor-2TYODRQT.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -3185,7 +3186,12 @@ import {
   useRef as useRef3,
   useState as useState10
 } from "react";
-import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
+import {
+  AutoScroller,
+  defaultPreset,
+  ScrollListener,
+  Scroller
+} from "@dnd-kit/dom";
 
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
@@ -3700,6 +3706,8 @@ var DragDropContextClient = ({
     }
   }, []);
   const [plugins] = useState10(() => [
+    ScrollListener,
+    Scroller,
     ...disableAutoScroll ? defaultPreset.plugins.filter((plugin) => plugin !== AutoScroller) : defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -4024,7 +4032,7 @@ var DrawerItemInner = ({
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-editor-drawer-item": true,
       children: /* @__PURE__ */ jsx25(CustomInner, { name, children: /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ jsxs9("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("icon"), children: icon != null ? icon : /* @__PURE__ */ jsx25(GripVertical, { size: 14 }) }),
+        icon && /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("icon"), children: icon }),
         /* @__PURE__ */ jsx25("div", { className: getClassNameItem2("name"), children: label != null ? label : name })
       ] }) }) })
     }
@@ -4604,7 +4612,7 @@ import {
 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-IKMJILGR.mjs").then((m) => ({
+  () => import("./Editor-2TYODRQT.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -7030,9 +7038,7 @@ var useBubbleIframeEvents = (ref) => {
         (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
           "pointermove",
           handlePointerMove,
-          {
-            capture: true
-          }
+          { capture: true }
         );
       };
       const unregister = () => {
@@ -7351,7 +7357,7 @@ import { useMemo as useMemo20 } from "react";
 
 // css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default24 = { "BrowserBar": "_BrowserBar_1l19b_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_1l19b_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_1l19b_47", "BrowserBar-urlText": "_BrowserBar-urlText_1l19b_52", "BrowserBar-urlPath": "_BrowserBar-urlPath_1l19b_64", "BrowserBar-urlTitle": "_BrowserBar-urlTitle_1l19b_69", "BrowserBar-actions": "_BrowserBar-actions_1l19b_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_1l19b_89" };
+var styles_module_default24 = { "BrowserBar": "_BrowserBar_oz0sq_1", "BrowserBar-urlTrigger": "_BrowserBar-urlTrigger_oz0sq_16", "BrowserBar-urlIcon": "_BrowserBar-urlIcon_oz0sq_47", "BrowserBar-urlText": "_BrowserBar-urlText_oz0sq_52", "BrowserBar-urlPath": "_BrowserBar-urlPath_oz0sq_64", "BrowserBar-urlTitle": "_BrowserBar-urlTitle_oz0sq_69", "BrowserBar-actions": "_BrowserBar-actions_oz0sq_82", "BrowserBar-deviceIcon": "_BrowserBar-deviceIcon_oz0sq_89" };
 
 // components/BrowserBar/index.tsx
 import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -7443,7 +7449,7 @@ var BrowserBar = ({
 
 // css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "EditorCanvas": "_EditorCanvas_1485f_1", "EditorCanvas-controls": "_EditorCanvas-controls_1485f_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_1485f_22", "EditorCanvas-inner": "_EditorCanvas-inner_1485f_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_1485f_46", "EditorCanvas-root": "_EditorCanvas-root_1485f_46", "EditorCanvas--ready": "_EditorCanvas--ready_1485f_86", "EditorCanvas-loader": "_EditorCanvas-loader_1485f_91", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_1485f_101", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_1485f_111" };
+var styles_module_default25 = { "EditorCanvas": "_EditorCanvas_19sb3_1", "EditorCanvas-controls": "_EditorCanvas-controls_19sb3_17", "EditorCanvas--fullScreen": "_EditorCanvas--fullScreen_19sb3_22", "EditorCanvas-inner": "_EditorCanvas-inner_19sb3_33", "EditorCanvas-rootColumn": "_EditorCanvas-rootColumn_19sb3_46", "EditorCanvas-root": "_EditorCanvas-root_19sb3_46", "EditorCanvas--ready": "_EditorCanvas--ready_19sb3_83", "EditorCanvas-loader": "_EditorCanvas-loader_19sb3_88", "EditorCanvas--showLoader": "_EditorCanvas--showLoader_19sb3_98", "EditorCanvas-browserBar": "_EditorCanvas-browserBar_19sb3_108", "EditorCanvas-zoomControls": "_EditorCanvas-zoomControls_19sb3_113" };
 
 // components/Editor/components/Canvas/index.tsx
 import { useShallow as useShallow9 } from "zustand/react/shallow";
@@ -7481,11 +7487,18 @@ var useCanvasFrame = () => {
 // components/Editor/components/Canvas/index.tsx
 import { Fragment as Fragment13, jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName29 = get_class_name_factory_default("EditorCanvas", styles_module_default25);
+var ZOOM_STEP = 0.15;
+var MIN_ZOOM = 0.25;
+var MAX_ZOOM = 3;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
   var _a;
   const { frameRef } = useCanvasFrame();
-  const { viewports: viewportOptions = defaultViewports, ui: uiProp } = usePropsContext();
+  const {
+    viewports: viewportOptions = defaultViewports,
+    ui: uiProp,
+    disableZoomControls
+  } = usePropsContext();
   const {
     dispatch,
     overrides,
@@ -7508,6 +7521,10 @@ var Canvas = () => {
     }))
   );
   const viewports = useAppStore((s) => s.state.ui.viewports);
+  const [canvasZoom, setCanvasZoom] = useState20(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] = useState20(false);
   const isResizingRef = useRef13(false);
   const defaultRender = useMemo22(() => {
@@ -7609,13 +7626,20 @@ var Canvas = () => {
         }
       },
       children: /* @__PURE__ */ jsxs19("div", { className: getClassName29("inner"), ref: frameRef, children: [
+        !disableZoomControls && /* @__PURE__ */ jsxs19("div", { className: getClassName29("zoomControls"), children: [
+          /* @__PURE__ */ jsx49(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ jsx49(Minus, { size: 14 }) }),
+          /* @__PURE__ */ jsx49(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ jsx49(RotateCcw, { size: 14 }) }),
+          /* @__PURE__ */ jsx49(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ jsx49(Plus, { size: 14 }) })
+        ] }),
         /* @__PURE__ */ jsxs19(
           "div",
           {
             className: getClassName29("rootColumn"),
             style: {
               width: iframe.enabled ? viewports.current.width : "100%",
-              transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out` : ""
+              transform: disableZoomControls ? void 0 : `scale(${canvasZoom})`,
+              transformOrigin: disableZoomControls ? void 0 : "center center",
+              transition: showTransition ? `width ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : disableZoomControls ? void 0 : "transform 150ms ease-out"
             },
             children: [
               iframe.enabled && /* @__PURE__ */ jsx49("div", { className: getClassName29("browserBar"), children: /* @__PURE__ */ jsx49(
@@ -7638,12 +7662,6 @@ var Canvas = () => {
                 "div",
                 {
                   className: getClassName29("root"),
-                  style: {
-                    height: zoomConfig.rootHeight,
-                    transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
-                    transition: showTransition ? `height ${TRANSITION_DURATION}ms ease-out, transform ${TRANSITION_DURATION}ms ease-out` : "",
-                    overflow: iframe.enabled ? void 0 : "auto"
-                  },
                   suppressHydrationWarning: true,
                   id: "editor-canvas-root",
                   onTransitionEnd: () => {

package/dist/{chunk-6B2Q5R3C.mjs → chunk-HMTHZBH6.mjs}

@@ -3,7 +3,7 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{chunk-GUMYXUO3.mjs → chunk-M2RKJTNY.mjs}

@@ -1,7 +1,7 @@
 import {
   List,
   ListOrdered
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{chunk-F7S5S6I2.mjs → chunk-TCVU3WEN.mjs}

@@ -3,11 +3,11 @@ import {
 } from "./chunk-MFI3RDA4.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-V2OPYD42.mjs";
+} from "./chunk-6Q6A3BQH.mjs";
 import {
   useAppStore,
   useAppStoreApi
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -100,7 +100,7 @@ init_react_import();
 import { lazy, Suspense } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LoadedRichTextMenuFull = lazy(
-  () => import("./full-OBTPW7TC.mjs").then((m) => ({
+  () => import("./full-7KJICNR5.mjs").then((m) => ({
     default: m.LoadedRichTextMenuFull
   }))
 );

package/dist/{chunk-DXGQXXQG.mjs → chunk-ZHNRSSMW.mjs}

@@ -5,7 +5,7 @@ import {
   Heading4,
   Heading5,
   Heading6
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import {
   init_react_import
 } from "./chunk-M6W7YEVX.mjs";

package/dist/{full-OBTPW7TC.mjs → full-7KJICNR5.mjs}

@@ -1,10 +1,10 @@
 import {
   LoadedRichTextMenuInner
-} from "./chunk-V2OPYD42.mjs";
-import "./chunk-6B2Q5R3C.mjs";
-import "./chunk-DXGQXXQG.mjs";
-import "./chunk-GUMYXUO3.mjs";
-import "./chunk-SURZYH7D.mjs";
+} from "./chunk-6Q6A3BQH.mjs";
+import "./chunk-HMTHZBH6.mjs";
+import "./chunk-ZHNRSSMW.mjs";
+import "./chunk-M2RKJTNY.mjs";
+import "./chunk-2LVYDXZS.mjs";
 import "./chunk-VUEM62JF.mjs";
 import "./chunk-VOLQMQPK.mjs";
 import "./chunk-Y2EFNT5P.mjs";

package/dist/index.css

@@ -2612,7 +2612,7 @@ body:has(._DropZone--isAnimating_q9qsx_70:empty) [data-editor-overlay] {
 }
 
 /* css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/BrowserBar/styles.module.css/#css-module-data */
-._BrowserBar_1l19b_1 {
+._BrowserBar_oz0sq_1 {
   align-items: center;
   background: var(--re-surface-panel);
   border: 1px solid var(--re-border-subtle);
@@ -2623,7 +2623,7 @@ body:has(._DropZone--isAnimating_q9qsx_70:empty) [data-editor-overlay] {
   padding: 8px 10px;
   width: 100%;
 }
-._BrowserBar-urlTrigger_1l19b_16 {
+._BrowserBar-urlTrigger_oz0sq_16 {
   align-items: center !important;
   background: var(--re-surface-sunken) !important;
   border: 1px solid var(--re-border-subtle) !important;
@@ -2636,26 +2636,26 @@ body:has(._DropZone--isAnimating_q9qsx_70:empty) [data-editor-overlay] {
   justify-content: flex-start !important;
   min-width: 0 !important;
   overflow: hidden !important;
-  padding: 8px 12px !important;
+  padding: 4px 12px !important;
   width: 100% !important;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._BrowserBar-urlTrigger_1l19b_16:hover {
+  ._BrowserBar-urlTrigger_oz0sq_16:hover {
     background: var(--re-surface-hover) !important;
     border-color: var(--re-border-default) !important;
   }
 }
-._BrowserBar-urlTrigger_1l19b_16[data-state=open],
-._BrowserBar-urlTrigger_1l19b_16:focus-visible {
+._BrowserBar-urlTrigger_oz0sq_16[data-state=open],
+._BrowserBar-urlTrigger_oz0sq_16:focus-visible {
   border-color: var(--re-border-default) !important;
   box-shadow: var(--re-ring) !important;
   outline: none !important;
 }
-._BrowserBar-urlIcon_1l19b_47 {
+._BrowserBar-urlIcon_oz0sq_47 {
   color: var(--re-text-tertiary);
   flex-shrink: 0;
 }
-._BrowserBar-urlText_1l19b_52 {
+._BrowserBar-urlText_oz0sq_52 {
   color: var(--re-text-primary);
   display: inline-flex;
   flex: 1;
@@ -2666,58 +2666,58 @@ body:has(._DropZone--isAnimating_q9qsx_70:empty) [data-editor-overlay] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._BrowserBar-urlPath_1l19b_64 {
+._BrowserBar-urlPath_oz0sq_64 {
   color: var(--re-text-tertiary);
   flex-shrink: 0;
 }
-._BrowserBar-urlTitle_1l19b_69 {
+._BrowserBar-urlTitle_oz0sq_69 {
   color: var(--re-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._BrowserBar-urlTrigger_1l19b_16 > svg:last-child {
+._BrowserBar-urlTrigger_oz0sq_16 > svg:last-child {
   display: none;
 }
-._BrowserBar-actions_1l19b_82 {
+._BrowserBar-actions_oz0sq_82 {
   align-items: center;
   display: flex;
   flex-shrink: 0;
   gap: 2px;
 }
-._BrowserBar-deviceIcon_1l19b_89 {
+._BrowserBar-deviceIcon_oz0sq_89 {
   color: var(--re-text-primary);
   display: inline-flex;
 }
 
 /* css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/Canvas/styles.module.css/#css-module-data */
-._EditorCanvas_1485f_1 {
+._EditorCanvas_19sb3_1 {
   background: var(--re-surface-sunken);
   display: flex;
   grid-area: editor;
   flex-direction: column;
   padding: var(--re-space-px);
   position: relative;
-  overflow: auto;
+  overflow: hidden;
 }
 @media (min-width: 1198px) {
-  ._EditorCanvas_1485f_1 {
+  ._EditorCanvas_19sb3_1 {
     padding: calc(var(--re-space-px) * 1.5);
     padding-top: calc(var(--re-space-px) * 0.5);
   }
-  ._EditorCanvas_1485f_1:not(._EditorCanvas_1485f_1:has(._EditorCanvas-controls_1485f_17)) {
+  ._EditorCanvas_19sb3_1:not(._EditorCanvas_19sb3_1:has(._EditorCanvas-controls_19sb3_17)) {
     padding-top: calc(var(--re-space-px) * 1.5);
   }
 }
-._EditorCanvas--fullScreen_1485f_22 {
+._EditorCanvas--fullScreen_19sb3_22 {
   padding: 0;
   overflow: hidden;
 }
 @media (min-width: 1198px) {
-  ._EditorCanvas--fullScreen_1485f_22 {
+  ._EditorCanvas--fullScreen_19sb3_22 {
     padding: 0;
   }
 }
-._EditorCanvas-inner_1485f_33 {
+._EditorCanvas-inner_19sb3_33 {
   display: flex;
   height: 100%;
   justify-content: center;
@@ -2725,46 +2725,43 @@ body:has(._DropZone--isAnimating_q9qsx_70:empty) [data-editor-overlay] {
   position: relative;
   width: 100%;
 }
-._EditorCanvas-rootColumn_1485f_46 {
+._EditorCanvas-rootColumn_19sb3_46 {
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
   min-width: 321px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  height: 100%;
   transform-origin: top;
 }
 @media (min-width: 1198px) {
-  ._EditorCanvas-rootColumn_1485f_46 {
+  ._EditorCanvas-rootColumn_19sb3_46 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._EditorCanvas-rootColumn_1485f_46 {
+  ._EditorCanvas-rootColumn_19sb3_46 {
     transition: none !important;
   }
 }
-._EditorCanvas-root_1485f_46 {
+._EditorCanvas-root_19sb3_46 {
   background: var(--re-surface-panel);
   outline: 1px solid var(--re-border-subtle);
   box-shadow: var(--re-shadow-lg);
   border-radius: 0 0 var(--re-radius-md) var(--re-radius-md);
   flex: 1;
-  min-height: 0;
   pointer-events: none;
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  ._EditorCanvas-root_1485f_46 {
+  ._EditorCanvas-root_19sb3_46 {
     transition: none !important;
   }
 }
-._EditorCanvas--ready_1485f_86 ._EditorCanvas-root_1485f_46 {
+._EditorCanvas--ready_19sb3_83 ._EditorCanvas-root_19sb3_46 {
   pointer-events: unset;
   opacity: 1;
 }
-._EditorCanvas-loader_1485f_91 {
+._EditorCanvas-loader_19sb3_88 {
   align-items: center;
   color: var(--re-text-tertiary);
   display: flex;
@@ -2773,18 +2770,32 @@ body:has(._DropZone--isAnimating_q9qsx_70:empty) [data-editor-overlay] {
   transition: opacity 250ms ease-out;
   opacity: 0;
 }
-._EditorCanvas--showLoader_1485f_101 ._EditorCanvas-loader_1485f_91 {
+._EditorCanvas--showLoader_19sb3_98 ._EditorCanvas-loader_19sb3_88 {
   opacity: 1;
 }
-._EditorCanvas--showLoader_1485f_101._EditorCanvas--ready_1485f_86 ._EditorCanvas-loader_1485f_91 {
+._EditorCanvas--showLoader_19sb3_98._EditorCanvas--ready_19sb3_83 ._EditorCanvas-loader_19sb3_88 {
   opacity: 0;
   height: 0;
   transition: none;
 }
-._EditorCanvas-browserBar_1485f_111 {
+._EditorCanvas-browserBar_19sb3_108 {
   flex-shrink: 0;
   width: 100%;
 }
+._EditorCanvas-zoomControls_19sb3_113 {
+  align-items: center;
+  background: var(--re-surface-panel);
+  border: 1px solid var(--re-border-subtle);
+  border-radius: var(--re-radius-md);
+  bottom: 16px;
+  box-shadow: var(--re-shadow-md);
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  position: absolute;
+  right: 16px;
+  z-index: 10;
+}
 
 /* css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/Editor/components/ResizeHandle/styles.module.css/#css-module-data */
 @media (min-width: 766px) {

package/dist/index.d.mts

@@ -201,6 +201,7 @@ type EditorProps<UserConfig extends Config = Config, G extends UserGenerics<User
     metadata?: Metadata;
     height?: CSSProperties["height"];
     fullScreenCanvas?: boolean;
+    disableZoomControls?: boolean;
     _experimentalVirtualization?: boolean;
 };
 declare function Editor<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(props: EditorProps<UserConfig>): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -201,6 +201,7 @@ type EditorProps<UserConfig extends Config = Config, G extends UserGenerics<User
     metadata?: Metadata;
     height?: CSSProperties["height"];
     fullScreenCanvas?: boolean;
+    disableZoomControls?: boolean;
     _experimentalVirtualization?: boolean;
 };
 declare function Editor<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(props: EditorProps<UserConfig>): react_jsx_runtime.JSX.Element;