@reacteditor/core 0.0.1-alpha.0 → 0.0.3

package/dist/index.js

@@ -587,24 +587,6 @@ var init_globe = __esm({
   }
 });
 
-// ../../node_modules/lucide-react/dist/esm/icons/grip-vertical.js
-var GripVertical;
-var init_grip_vertical = __esm({
-  "../../node_modules/lucide-react/dist/esm/icons/grip-vertical.js"() {
-    "use strict";
-    init_react_import();
-    init_createLucideIcon();
-    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
 var Heading1;
 var init_heading_1 = __esm({
@@ -976,6 +958,20 @@ var init_redo_2 = __esm({
   }
 });
 
+// ../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.js
+var RotateCcw;
+var init_rotate_ccw = __esm({
+  "../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.js"() {
+    "use strict";
+    init_react_import();
+    init_createLucideIcon();
+    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
 var Search;
 var init_search = __esm({
@@ -1183,7 +1179,6 @@ var init_lucide_react = __esm({
     init_copy();
     init_corner_left_up();
     init_globe();
-    init_grip_vertical();
     init_heading_1();
     init_heading_2();
     init_heading_3();
@@ -1204,6 +1199,7 @@ var init_lucide_react = __esm({
     init_plus();
     init_quote();
     init_redo_2();
+    init_rotate_ccw();
     init_search();
     init_sliders_horizontal();
     init_smartphone();
@@ -7869,7 +7865,6 @@ var styles_module_default16 = { "Drawer": "_Drawer_rcm43_1", "Drawer--tile": "_D
 
 // components/Drawer/index.tsx
 init_get_class_name_factory();
-init_lucide_react();
 var import_react71 = require("react");
 init_generate_id();
 
@@ -11113,7 +11108,7 @@ var DrawerItemInner = ({
       "data-testid": dragRef ? `drawer-item:${name}` : "",
       "data-editor-drawer-item": true,
       children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassNameItem2("icon"), children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(GripVertical, { size: 14 }) }),
+        icon && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassNameItem2("icon"), children: icon }),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: getClassNameItem2("name"), children: label != null ? label : name })
       ] }) }) })
     }
@@ -11935,9 +11930,7 @@ var useBubbleIframeEvents = (ref) => {
         (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
           "pointermove",
           handlePointerMove,
-          {
-            capture: true
-          }
+          { capture: true }
         );
       };
       const unregister = () => {
@@ -12963,6 +12956,7 @@ var SidebarSection = ({
 init_react_import();
 init_css_box_model_esm();
 var import_react87 = require("react");
+init_lucide_react();
 init_store();
 
 // components/BrowserBar/index.tsx
@@ -12975,7 +12969,7 @@ init_IconButton2();
 
 // css-module:/Users/rami/Documents/apps/frontend-react-editor/packages/core/components/BrowserBar/styles.module.css#css-module
 init_react_import();
-var styles_module_default27 = { "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_default27 = { "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
 var import_jsx_runtime82 = require("react/jsx-runtime");
@@ -13067,11 +13061,12 @@ 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_default28 = { "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_default28 = { "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
 init_lib();
 init_Loader();
+init_IconButton2();
 var import_shallow9 = require("zustand/react/shallow");
 
 // lib/frame-context.tsx
@@ -13103,11 +13098,18 @@ var useCanvasFrame = () => {
 init_default_viewports();
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var getClassName35 = get_class_name_factory_default("EditorCanvas", styles_module_default28);
+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,
@@ -13130,6 +13132,10 @@ var Canvas = () => {
     }))
   );
   const viewports = useAppStore((s) => s.state.ui.viewports);
+  const [canvasZoom, setCanvasZoom] = (0, import_react87.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_react87.useState)(false);
   const isResizingRef = (0, import_react87.useRef)(false);
   const defaultRender = (0, import_react87.useMemo)(() => {
@@ -13231,13 +13237,20 @@ var Canvas = () => {
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("inner"), ref: frameRef, children: [
+        !disableZoomControls && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("zoomControls"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, { type: "button", title: "Zoom out", onClick: zoomOut, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Minus, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, { type: "button", title: "Reset zoom", onClick: resetZoom, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(RotateCcw, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(IconButton, { type: "button", title: "Zoom in", onClick: zoomIn, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Plus, { size: 14 }) })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
           "div",
           {
             className: getClassName35("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__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("browserBar"), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
@@ -13260,12 +13273,6 @@ var Canvas = () => {
                 "div",
                 {
                   className: getClassName35("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: () => {
@@ -14643,7 +14650,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:
@@ -14666,6 +14672,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/index.mjs

@@ -19,8 +19,8 @@ import {
   setDeep,
   useEditor,
   useGetEditor
-} from "./chunk-QNHSXCWU.mjs";
-import "./chunk-F7S5S6I2.mjs";
+} from "./chunk-QX2COKIL.mjs";
+import "./chunk-TCVU3WEN.mjs";
 import {
   migrate,
   resolveAllData,
@@ -35,11 +35,11 @@ import {
   Label,
   RichTextMenu,
   Separator
-} 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/{loaded-ULSROV73.mjs → loaded-CBJRWD4Z.mjs}

@@ -1,11 +1,11 @@
 import {
   useAlignOptions
-} from "./chunk-6B2Q5R3C.mjs";
+} from "./chunk-HMTHZBH6.mjs";
 import {
   AlignLeft,
   SelectControl,
   useControlContext
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import "./chunk-VUEM62JF.mjs";
 import "./chunk-VOLQMQPK.mjs";
 import "./chunk-Y2EFNT5P.mjs";

package/dist/{loaded-YYRJPIWZ.mjs → loaded-DGSPK47E.mjs}

@@ -1,11 +1,11 @@
 import {
   useListOptions
-} from "./chunk-GUMYXUO3.mjs";
+} from "./chunk-M2RKJTNY.mjs";
 import {
   List,
   SelectControl,
   useControlContext
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import "./chunk-VUEM62JF.mjs";
 import "./chunk-VOLQMQPK.mjs";
 import "./chunk-Y2EFNT5P.mjs";

package/dist/{loaded-35WC23HJ.mjs → loaded-IJNA4SY5.mjs}

@@ -1,11 +1,11 @@
 import {
   useHeadingOptions
-} from "./chunk-DXGQXXQG.mjs";
+} from "./chunk-ZHNRSSMW.mjs";
 import {
   Heading,
   SelectControl,
   useControlContext
-} from "./chunk-SURZYH7D.mjs";
+} from "./chunk-2LVYDXZS.mjs";
 import "./chunk-VUEM62JF.mjs";
 import "./chunk-VOLQMQPK.mjs";
 import "./chunk-Y2EFNT5P.mjs";

package/dist/no-external.css

@@ -2610,7 +2610,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);
@@ -2621,7 +2621,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;
@@ -2634,26 +2634,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;
@@ -2664,58 +2664,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;
@@ -2723,46 +2723,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;
@@ -2771,18 +2768,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) {