@elementor/editor-canvas 4.2.0-911 → 4.2.0-912

package/dist/index.mjs

@@ -360,9 +360,9 @@ import * as React5 from "react";
 import { getElements, useSelectedElement } from "@elementor/editor-elements";
 import {
   __privateUseIsRouteActive as useIsRouteActive,
-  __privateUseListenTo as useListenTo,
+  __privateUseListenTo as useListenTo2,
   useEditMode,
-  windowEvent
+  windowEvent as windowEvent2
 } from "@elementor/editor-v1-adapters";
 
 // src/components/grid-outline/grid-outline-overlay.tsx
@@ -477,38 +477,54 @@ function useFloatingOnElement({ element, isSelected }) {
 }
 
 // src/hooks/use-grid-tracks.ts
-import { useMemo } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
+import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
+import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
 
 // src/utils/grid-outline-utils.ts
-function computeOutlineGeometry(tracks, width, height) {
-  const { columns, rows, columnGap, rowGap, padding } = tracks;
+function toGridTracks(computedStyle) {
   return {
-    vertical: computeBoundaries(columns, columnGap, padding.left),
-    horizontal: computeBoundaries(rows, rowGap, padding.top),
-    top: padding.top,
-    bottom: height - padding.bottom,
-    left: padding.left,
-    right: width - padding.right
+    columns: parseTrackList(computedStyle.gridTemplateColumns),
+    rows: parseTrackList(computedStyle.gridTemplateRows),
+    columnGap: toPx(computedStyle.columnGap),
+    rowGap: toPx(computedStyle.rowGap),
+    padding: {
+      top: toPx(computedStyle.paddingTop),
+      right: toPx(computedStyle.paddingRight),
+      bottom: toPx(computedStyle.paddingBottom),
+      left: toPx(computedStyle.paddingLeft)
+    },
+    borderColor: computedStyle.getPropertyValue("--e-a-border-color-bold").trim()
   };
 }
-function computeBoundaries(sizes, gap, offset2) {
-  if (sizes.length === 0) {
+function computeCellRects(tracks, width, height) {
+  const { columns, rows, columnGap, rowGap, padding } = tracks;
+  const hasColumns = columns.length > 0;
+  const hasRows = rows.length > 0;
+  if (!hasColumns && !hasRows) {
     return [];
   }
-  const boundaries = [];
+  const columnSegments = hasColumns ? computeTrackSegments(columns, columnGap, padding.left) : [{ start: padding.left, size: width - padding.left - padding.right }];
+  const rowSegments = hasRows ? computeTrackSegments(rows, rowGap, padding.top) : [{ start: padding.top, size: height - padding.top - padding.bottom }];
+  const cells = [];
+  for (const row of rowSegments) {
+    for (const column of columnSegments) {
+      cells.push({ x: column.start, y: row.start, width: column.size, height: row.size });
+    }
+  }
+  return cells;
+}
+function computeTrackSegments(sizes, gap, offset2) {
+  const segments = [];
   let cursor = offset2;
   for (let i = 0; i < sizes.length; i++) {
-    if (i === 0) {
-      boundaries.push(cursor);
-    }
+    segments.push({ start: cursor, size: sizes[i] });
     cursor += sizes[i];
-    boundaries.push(cursor);
-    if (i < sizes.length - 1 && gap > 0) {
+    if (i < sizes.length - 1) {
       cursor += gap;
-      boundaries.push(cursor);
     }
   }
-  return boundaries;
+  return segments;
 }
 function snapToHalfPixel(value) {
   return Math.round(value) + 0.5;
@@ -533,30 +549,27 @@ var EMPTY = {
   padding: { top: 0, right: 0, bottom: 0, left: 0 },
   borderColor: ""
 };
+var DEVICE_MODE_CHANGE_EVENT = "elementor/device-mode/change";
 function useGridTracks(element, rect) {
-  return useMemo(() => {
-    if (!element) {
-      return EMPTY;
-    }
-    const previewWindow = element.ownerDocument?.defaultView;
-    if (!previewWindow) {
-      return EMPTY;
+  const [tracks, setTracks] = useState3(EMPTY);
+  const trigger = useListenTo(
+    [windowEvent(ELEMENT_STYLE_CHANGE_EVENT), windowEvent(DEVICE_MODE_CHANGE_EVENT)],
+    () => ({})
+  );
+  useEffect4(() => {
+    const previewWindow = element?.ownerDocument?.defaultView;
+    if (!element || !previewWindow) {
+      setTracks(EMPTY);
+      return;
     }
-    const computedStyle = previewWindow.getComputedStyle(element);
-    return {
-      columns: parseTrackList(computedStyle.gridTemplateColumns),
-      rows: parseTrackList(computedStyle.gridTemplateRows),
-      columnGap: toPx(computedStyle.columnGap),
-      rowGap: toPx(computedStyle.rowGap),
-      padding: {
-        top: toPx(computedStyle.paddingTop),
-        right: toPx(computedStyle.paddingRight),
-        bottom: toPx(computedStyle.paddingBottom),
-        left: toPx(computedStyle.paddingLeft)
-      },
-      borderColor: computedStyle.getPropertyValue("--e-a-border-color-bold").trim()
+    const frame = previewWindow.requestAnimationFrame(() => {
+      setTracks(toGridTracks(previewWindow.getComputedStyle(element)));
+    });
+    return () => {
+      previewWindow.cancelAnimationFrame(frame);
     };
-  }, [element, rect.width, rect.height]);
+  }, [element, rect.width, rect.height, trigger]);
+  return tracks;
 }
 
 // src/components/outline-overlay.tsx
@@ -565,9 +578,9 @@ import { Box, styled } from "@elementor/ui";
 import { FloatingPortal, useHover, useInteractions } from "@floating-ui/react";
 
 // src/hooks/use-bind-react-props-to-element.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 function useBindReactPropsToElement(element, getProps) {
-  useEffect4(() => {
+  useEffect5(() => {
     const el = element;
     const { events, attrs } = groupProps(getProps());
     events.forEach(([eventName, listener]) => el.addEventListener(eventName, listener));
@@ -650,18 +663,19 @@ var OutlineOverlay = ({ element, isSelected, id, isGlobal = false }) => {
 // src/components/grid-outline/grid-outline.tsx
 import * as React3 from "react";
 
-// src/components/grid-outline/grid-outline-line.tsx
+// src/components/grid-outline/grid-outline-cell.tsx
 import * as React2 from "react";
 var FALLBACK_COLOR = "rgba(0, 0, 0, 0.12)";
 var DASH = "2 2";
-function GridOutlineLine({ x1, x2, y1, y2, color }) {
+function GridOutlineCell({ x, y, width, height, color }) {
   return /* @__PURE__ */ React2.createElement(
-    "line",
+    "rect",
     {
-      x1,
-      x2,
-      y1,
-      y2,
+      x,
+      y,
+      width,
+      height,
+      fill: "none",
       stroke: color || FALLBACK_COLOR,
       strokeWidth: 1,
       strokeDasharray: DASH,
@@ -672,7 +686,7 @@ function GridOutlineLine({ x1, x2, y1, y2, color }) {
 
 // src/components/grid-outline/grid-outline.tsx
 function GridOutline({ tracks, width, height }) {
-  const { vertical, horizontal, top, bottom, left, right } = computeOutlineGeometry(tracks, width, height);
+  const cells = computeCellRects(tracks, width, height);
   return /* @__PURE__ */ React3.createElement(
     "svg",
     {
@@ -681,25 +695,14 @@ function GridOutline({ tracks, width, height }) {
       style: { position: "absolute", inset: 0, overflow: "visible" },
       xmlns: "http://www.w3.org/2000/svg"
     },
-    vertical.map((x, i) => /* @__PURE__ */ React3.createElement(
-      GridOutlineLine,
-      {
-        key: `v-${i}`,
-        x1: snapToHalfPixel(x),
-        x2: snapToHalfPixel(x),
-        y1: top,
-        y2: bottom,
-        color: tracks.borderColor
-      }
-    )),
-    horizontal.map((y, i) => /* @__PURE__ */ React3.createElement(
-      GridOutlineLine,
+    cells.map((cell, i) => /* @__PURE__ */ React3.createElement(
+      GridOutlineCell,
       {
-        key: `h-${i}`,
-        x1: left,
-        x2: right,
-        y1: snapToHalfPixel(y),
-        y2: snapToHalfPixel(y),
+        key: i,
+        x: snapToHalfPixel(cell.x),
+        y: snapToHalfPixel(cell.y),
+        width: Math.round(cell.width),
+        height: Math.round(cell.height),
         color: tracks.borderColor
       }
     ))
@@ -770,8 +773,8 @@ function ElementsOverlays() {
   });
 }
 function useElementsDom() {
-  return useListenTo(
-    [windowEvent("elementor/editor/element-rendered"), windowEvent("elementor/editor/element-destroyed")],
+  return useListenTo2(
+    [windowEvent2("elementor/editor/element-rendered"), windowEvent2("elementor/editor/element-destroyed")],
     () => {
       return getElements().filter((el) => isV4Element(el.view?.el?.dataset)).map((element) => ({
         id: element.id,
@@ -791,22 +794,22 @@ function isV4Element(dataset) {
 // src/components/interactions-renderer.tsx
 import * as React6 from "react";
 import {
-  __privateUseListenTo as useListenTo2,
+  __privateUseListenTo as useListenTo3,
   commandEndEvent,
   getCanvasIframeDocument
 } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
 // src/hooks/use-interactions-items.ts
-import { useEffect as useEffect6, useMemo as useMemo2, useState as useState3 } from "react";
+import { useEffect as useEffect7, useMemo, useState as useState4 } from "react";
 import { interactionsRepository } from "@elementor/editor-interactions";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 
 // src/hooks/use-on-mount.ts
-import { useEffect as useEffect5, useRef } from "react";
+import { useEffect as useEffect6, useRef } from "react";
 function useOnMount(cb) {
   const mounted = useRef(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!mounted.current) {
       mounted.current = true;
       cb();
@@ -816,8 +819,8 @@ function useOnMount(cb) {
 
 // src/hooks/use-interactions-items.ts
 function useInteractionsItems() {
-  const [interactionItems, setInteractionItems] = useState3({});
-  const providerAndSubscribers = useMemo2(() => {
+  const [interactionItems, setInteractionItems] = useState4({});
+  const providerAndSubscribers = useMemo(() => {
     try {
       const providers = interactionsRepository.getProviders();
       const mapped = providers.map((provider) => {
@@ -834,7 +837,7 @@ function useInteractionsItems() {
       return [];
     }
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (providerAndSubscribers.length === 0) {
       return;
     }
@@ -865,7 +868,7 @@ function useInteractionsItems() {
       });
     });
   });
-  return useMemo2(() => {
+  return useMemo(() => {
     const result = Object.values(interactionItems).sort(sortByProviderPriority).flatMap(({ items }) => items);
     return result;
   }, [interactionItems]);
@@ -907,13 +910,13 @@ function InteractionsRenderer() {
   ));
 }
 function usePortalContainer() {
-  return useListenTo2(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return useListenTo3(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 
 // src/components/style-renderer.tsx
 import * as React7 from "react";
 import {
-  __privateUseListenTo as useListenTo4,
+  __privateUseListenTo as useListenTo5,
   commandEndEvent as commandEndEvent3,
   getCanvasIframeDocument as getCanvasIframeDocument4
 } from "@elementor/editor-v1-adapters";
@@ -921,7 +924,7 @@ import { Portal as Portal2 } from "@elementor/ui";
 
 // src/hooks/use-documents-css-links.ts
 import {
-  __privateUseListenTo as useListenTo3,
+  __privateUseListenTo as useListenTo4,
   commandEndEvent as commandEndEvent2,
   getCanvasIframeDocument as getCanvasIframeDocument2
 } from "@elementor/editor-v1-adapters";
@@ -930,7 +933,7 @@ var DOCUMENT_WRAPPER_ATTR = "data-elementor-id";
 var CSS_LINK_ID_PREFIX = "elementor-post-";
 var CSS_LINK_ID_SUFFIX = "-css";
 function useDocumentsCssLinks() {
-  return useListenTo3(commandEndEvent2("editor/documents/attach-preview"), () => {
+  return useListenTo4(commandEndEvent2("editor/documents/attach-preview"), () => {
     const iframeDocument = getCanvasIframeDocument2();
     if (!iframeDocument) {
       return [];
@@ -971,7 +974,7 @@ function getLinkAttrs(el) {
 }
 
 // src/hooks/use-style-items.ts
-import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef2, useState as useState5 } from "react";
 import { useBreakpoints } from "@elementor/editor-responsive";
 import { isClassState } from "@elementor/editor-styles";
 import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
@@ -1033,7 +1036,7 @@ function signalizedProcess(signal, steps = []) {
 }
 
 // src/hooks/use-style-prop-resolver.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
 import { enqueueFont } from "@elementor/editor-v1-adapters";
 
@@ -1163,7 +1166,7 @@ var styleTransformersRegistry = createTransformersRegistry();
 
 // src/hooks/use-style-prop-resolver.ts
 function useStylePropResolver() {
-  return useMemo3(() => {
+  return useMemo2(() => {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema2(),
@@ -1178,7 +1181,7 @@ function useStylePropResolver() {
 }
 
 // src/hooks/use-style-renderer.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { useBreakpointsMap } from "@elementor/editor-responsive";
 
 // src/renderers/create-styles-renderer.ts
@@ -1289,7 +1292,7 @@ function customCssToString(customCss) {
 var SELECTOR_PREFIX = ".elementor";
 function useStyleRenderer(resolve) {
   const breakpoints = useBreakpointsMap();
-  return useMemo4(() => {
+  return useMemo3(() => {
     return createStylesRenderer({
       selectorPrefix: SELECTOR_PREFIX,
       breakpoints,
@@ -1303,9 +1306,9 @@ function useStyleItems() {
   const resolve = useStylePropResolver();
   const renderStyles = useStyleRenderer(resolve);
   const breakpoints = useBreakpoints();
-  const [styleItems, setStyleItems] = useState4({});
+  const [styleItems, setStyleItems] = useState5({});
   const styleItemsCacheRef = useRef2(/* @__PURE__ */ new Map());
-  const providerAndSubscribers = useMemo5(() => {
+  const providerAndSubscribers = useMemo4(() => {
     const createEmptyCache = () => {
       return { orderedIds: [], itemsById: /* @__PURE__ */ new Map() };
     };
@@ -1331,7 +1334,7 @@ function useStyleItems() {
       })
     );
   }, [renderStyles]);
-  useEffect7(() => {
+  useEffect8(() => {
     const unsubscribes = providerAndSubscribers.map(
       ({ provider, subscriber }) => provider.subscribe(subscriber)
     );
@@ -1346,11 +1349,11 @@ function useStyleItems() {
       await Promise.all(promises);
     });
   });
-  const breakpointSorter = useMemo5(
+  const breakpointSorter = useMemo4(
     () => createBreakpointSorter(breakpoints.map((breakpoint) => breakpoint.id)),
     [breakpoints]
   );
-  return useMemo5(
+  return useMemo4(
     () => Object.values(styleItems).sort(prioritySorter).flatMap(({ items }) => items).sort(stateSorter).sort(breakpointSorter),
     [styleItems, breakpointSorter]
   );
@@ -1495,7 +1498,7 @@ function StyleRenderer() {
   return /* @__PURE__ */ React7.createElement(Portal2, { container }, filterUniqueStyleDefinitions(styleItems).map((item) => /* @__PURE__ */ React7.createElement("style", { key: `${item.id}-${item.breakpoint}-${item.state ?? "normal"}` }, item.value)), linksAttrs.map((attrs) => /* @__PURE__ */ React7.createElement("link", { ...attrs, key: attrs.id })));
 }
 function usePortalContainer2() {
-  return useListenTo4(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
+  return useListenTo5(commandEndEvent3("editor/documents/attach-preview"), () => getCanvasIframeDocument4()?.head);
 }
 function filterUniqueStyleDefinitions(styleItems) {
   const seen = /* @__PURE__ */ new Map();
@@ -2412,7 +2415,7 @@ function createElementViewClassDeclaration() {
 }
 
 // src/legacy/create-nested-templated-element-type.ts
-import { ELEMENT_STYLE_CHANGE_EVENT } from "@elementor/editor-elements";
+import { ELEMENT_STYLE_CHANGE_EVENT as ELEMENT_STYLE_CHANGE_EVENT2 } from "@elementor/editor-elements";
 
 // src/legacy/create-pending-element.ts
 import {
@@ -2725,7 +2728,7 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
-      window.dispatchEvent(new CustomEvent(ELEMENT_STYLE_CHANGE_EVENT));
+      window.dispatchEvent(new CustomEvent(ELEMENT_STYLE_CHANGE_EVENT2));
     },
     async _renderTemplate() {
       const model = this.model;
@@ -3019,13 +3022,13 @@ var ReplacementBase = class {
 
 // src/legacy/replacements/inline-editing/canvas-inline-editor.tsx
 import * as React8 from "react";
-import { useCallback as useCallback2, useEffect as useEffect9, useLayoutEffect, useState as useState6 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect10, useLayoutEffect, useState as useState7 } from "react";
 import { InlineEditor, InlineEditorToolbar } from "@elementor/editor-controls";
 import { Box as Box3, ThemeProvider } from "@elementor/ui";
 import { autoUpdate as autoUpdate2, flip, FloatingPortal as FloatingPortal3, useFloating as useFloating2 } from "@floating-ui/react";
 
 // src/legacy/replacements/inline-editing/inline-editing-utils.ts
-import { useCallback, useEffect as useEffect8, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect9, useState as useState6 } from "react";
 var TOP_BAR_SELECTOR = "#elementor-editor-wrapper-v2";
 var NAVIGATOR_SELECTOR = "#elementor-navigator";
 var EDITING_PANEL = "#elementor-panel";
@@ -3057,7 +3060,7 @@ var getInlineEditorElement = (elementWrapper, expectedTag) => {
 };
 var useOnClickOutsideIframe = (handleUnmount) => {
   const asyncUnmountInlineEditor = useCallback(() => queueMicrotask(handleUnmount), [handleUnmount]);
-  useEffect8(() => {
+  useEffect9(() => {
     EDITOR_ELEMENTS_OUT_OF_IFRAME.forEach(
       (selector) => document?.querySelector(selector)?.addEventListener("mousedown", asyncUnmountInlineEditor)
     );
@@ -3067,8 +3070,8 @@ var useOnClickOutsideIframe = (handleUnmount) => {
   }, []);
 };
 var useRenderToolbar = (ownerDocument, id) => {
-  const [anchor, setAnchor] = useState5(null);
-  useEffect8(() => {
+  const [anchor, setAnchor] = useState6(null);
+  useEffect9(() => {
     if (!anchor) {
       removeToolbarAnchor(ownerDocument, id);
     }
@@ -3162,10 +3165,10 @@ var CanvasInlineEditor = ({
   setValue,
   requestDestroy
 }) => {
-  const [active, setActive] = useState6(true);
-  const [editor, setEditor] = useState6(null);
+  const [active, setActive] = useState7(true);
+  const [editor, setEditor] = useState7(null);
   const { onSelectionEnd, anchor: toolbarAnchor, clearAnchor } = useRenderToolbar(rootElement.ownerDocument, id);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!active) {
       clearAnchor();
       requestDestroy();
@@ -3176,7 +3179,7 @@ var CanvasInlineEditor = ({
     setActive(false);
   }, []);
   useOnClickOutsideIframe(dismiss);
-  useEffect9(() => {
+  useEffect10(() => {
     const ownerDocument = contentElement.ownerDocument;
     const handleClickAway = (event) => {
       if (contentElement.contains(event.target)) {
@@ -3215,8 +3218,8 @@ var InlineEditingOverlay = ({
   id
 }) => {
   const inlineEditedElement = getInlineEditorElement(rootElement, expectedTag);
-  const [overlayRefElement, setOverlayElement] = useState6(inlineEditedElement);
-  useEffect9(() => {
+  const [overlayRefElement, setOverlayElement] = useState7(inlineEditedElement);
+  useEffect10(() => {
     setOverlayElement(getInlineEditorElement(rootElement, expectedTag));
   }, [expectedTag, rootElement]);
   return overlayRefElement ? /* @__PURE__ */ React8.createElement(OutlineOverlay, { element: overlayRefElement, id, isSelected: true }) : null;
@@ -6030,18 +6033,18 @@ function getRectClipPath(rect, viewport) {
 
 // src/hooks/use-canvas-document.ts
 import {
-  __privateUseListenTo as useListenTo5,
+  __privateUseListenTo as useListenTo6,
   commandEndEvent as commandEndEvent8,
   getCanvasIframeDocument as getCanvasIframeDocument5
 } from "@elementor/editor-v1-adapters";
 function useCanvasDocument() {
-  return useListenTo5(commandEndEvent8("editor/documents/attach-preview"), () => getCanvasIframeDocument5());
+  return useListenTo6(commandEndEvent8("editor/documents/attach-preview"), () => getCanvasIframeDocument5());
 }
 
 // src/hooks/use-escape-on-canvas.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function useEscapeOnCanvas(canvasDocument, onEscape) {
-  useEffect10(() => {
+  useEffect11(() => {
     if (!canvasDocument) {
       return;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.2.0-911",
+  "version": "4.2.0-912",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,25 +37,25 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-911",
+    "@elementor/editor": "4.2.0-912",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.2.0-911",
-    "@elementor/editor-documents": "4.2.0-911",
-    "@elementor/editor-elements": "4.2.0-911",
-    "@elementor/editor-interactions": "4.2.0-911",
-    "@elementor/editor-mcp": "4.2.0-911",
-    "@elementor/editor-notifications": "4.2.0-911",
-    "@elementor/editor-props": "4.2.0-911",
-    "@elementor/editor-responsive": "4.2.0-911",
-    "@elementor/editor-styles": "4.2.0-911",
-    "@elementor/editor-styles-repository": "4.2.0-911",
-    "@elementor/editor-ui": "4.2.0-911",
-    "@elementor/editor-v1-adapters": "4.2.0-911",
-    "@elementor/schema": "4.2.0-911",
-    "@elementor/twing": "4.2.0-911",
+    "@elementor/editor-controls": "4.2.0-912",
+    "@elementor/editor-documents": "4.2.0-912",
+    "@elementor/editor-elements": "4.2.0-912",
+    "@elementor/editor-interactions": "4.2.0-912",
+    "@elementor/editor-mcp": "4.2.0-912",
+    "@elementor/editor-notifications": "4.2.0-912",
+    "@elementor/editor-props": "4.2.0-912",
+    "@elementor/editor-responsive": "4.2.0-912",
+    "@elementor/editor-styles": "4.2.0-912",
+    "@elementor/editor-styles-repository": "4.2.0-912",
+    "@elementor/editor-ui": "4.2.0-912",
+    "@elementor/editor-v1-adapters": "4.2.0-912",
+    "@elementor/schema": "4.2.0-912",
+    "@elementor/twing": "4.2.0-912",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-911",
-    "@elementor/wp-media": "4.2.0-911",
+    "@elementor/utils": "4.2.0-912",
+    "@elementor/wp-media": "4.2.0-912",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx

@@ -122,7 +122,7 @@ describe( '<GridOutlineOverlay />', () => {
 		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'renders one <line> per track boundary plus both edges of every gap', () => {
+	it( 'renders one <rect> per grid cell', () => {
 		mockGridOutlineSetting( null );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
@@ -136,7 +136,7 @@ describe( '<GridOutlineOverlay />', () => {
 
 		const overlay = screen.getByRole( 'presentation' );
 		// eslint-disable-next-line testing-library/no-node-access
-		expect( overlay.querySelectorAll( 'line' ) ).toHaveLength( 6 + 4 );
+		expect( overlay.querySelectorAll( 'rect' ) ).toHaveLength( 3 * 2 );
 	} );
 
 	it( 'mounts inside the canvas wrapper portal', () => {