@reacteditor/core 0.0.1-alpha.0 → 0.0.2

package/dist/no-external.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();
 
@@ -10789,6 +10784,8 @@ var DragDropContextClient = ({
     }
   }, []);
   const [plugins] = (0, import_react70.useState)(() => [
+    import_dom.ScrollListener,
+    import_dom.Scroller,
     ...disableAutoScroll ? import_dom.defaultPreset.plugins.filter((plugin) => plugin !== import_dom.AutoScroller) : import_dom.defaultPreset.plugins,
     createNestedDroppablePlugin(
       {
@@ -11113,7 +11110,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 +11932,7 @@ var useBubbleIframeEvents = (ref) => {
         (_a = iframe.contentDocument) == null ? void 0 : _a.addEventListener(
           "pointermove",
           handlePointerMove,
-          {
-            capture: true
-          }
+          { capture: true }
         );
       };
       const unregister = () => {
@@ -12963,6 +12958,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 +12971,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 +13063,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 +13100,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 +13134,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 +13239,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 +13275,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 +14652,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 +14674,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/no-external.mjs

@@ -19,8 +19,8 @@ import {
   setDeep,
   useEditor,
   useGetEditor
-} from "./chunk-QNHSXCWU.mjs";
-import "./chunk-F7S5S6I2.mjs";
+} from "./chunk-BQ2PZ2YN.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reacteditor/core",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.2",
   "description": "The open-source visual editor for React",
   "author": "Rami Bitar <rami@frontend.co>",
   "repository": "frontend-inc/react-editor",