@strapi/admin 5.26.0 → 5.28.0

package/dist/admin/admin/src/components/DragLayer.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactDnd = require('react-dnd');
+var widgetLayout = require('../utils/widgetLayout.js');
+
+function isWidgetDragItem(item) {
+    return typeof item === 'object' && item !== null && 'id' in item && typeof item.id === 'string' && 'originalIndex' in item && typeof item.originalIndex === 'number' && 'title' in item && 'component' in item;
+}
+function getStyle(initialOffset, currentOffset, mouseOffset, item) {
+    if (!initialOffset || !currentOffset || !mouseOffset) {
+        return {
+            display: 'none'
+        };
+    }
+    const { x, y } = mouseOffset;
+    // Only apply custom offset for widget drags
+    if (isWidgetDragItem(item)) {
+        // Calculate dynamic offset based on widget position and width
+        const widgetElement = widgetLayout.getWidgetElement(item.id);
+        const previewWidth = widgetElement?.clientWidth;
+        const offsetX = previewWidth ? -previewWidth + 20 : 0;
+        const offsetY = 20;
+        return {
+            transform: `translate(${x + offsetX}px, ${y + offsetY}px)`
+        };
+    }
+    // Default positioning for non-widget drags
+    return {
+        transform: `translate(${x}px, ${y}px)`
+    };
+}
+const DragLayer = ({ renderItem })=>{
+    const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = reactDnd.useDragLayer((monitor)=>({
+            item: monitor.getItem(),
+            itemType: monitor.getItemType(),
+            initialOffset: monitor.getInitialSourceClientOffset(),
+            currentOffset: monitor.getSourceClientOffset(),
+            isDragging: monitor.isDragging(),
+            mouseOffset: monitor.getClientOffset()
+        }));
+    if (!isDragging) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        height: "100%",
+        left: 0,
+        position: "fixed",
+        pointerEvents: "none",
+        top: 0,
+        zIndex: 100,
+        width: "100%",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            style: getStyle(initialOffset, currentOffset, mouseOffset, item),
+            children: renderItem({
+                type: itemType,
+                item
+            })
+        })
+    });
+};
+
+exports.DragLayer = DragLayer;
+exports.isWidgetDragItem = isWidgetDragItem;
+//# sourceMappingURL=DragLayer.js.map

package/dist/admin/admin/src/components/DragLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragLayer.js","sources":["../../../../../admin/src/components/DragLayer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';\n\nimport { getWidgetElement } from '../utils/widgetLayout';\n\nimport type { WidgetArgs } from '../core/apis/Widgets';\n\nexport interface WidgetDragItem extends Pick<WidgetArgs, 'title' | 'icon' | 'link' | 'component'> {\n  type: 'widget';\n  id: string;\n  originalIndex: number;\n}\n\nexport function isWidgetDragItem(item: unknown): item is WidgetDragItem {\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    'id' in item &&\n    typeof item.id === 'string' &&\n    'originalIndex' in item &&\n    typeof item.originalIndex === 'number' &&\n    'title' in item &&\n    'component' in item\n  );\n}\n\nfunction getStyle(\n  initialOffset: XYCoord | null,\n  currentOffset: XYCoord | null,\n  mouseOffset: XYCoord | null,\n  item?: unknown\n) {\n  if (!initialOffset || !currentOffset || !mouseOffset) {\n    return { display: 'none' };\n  }\n\n  const { x, y } = mouseOffset;\n\n  // Only apply custom offset for widget drags\n  if (isWidgetDragItem(item)) {\n    // Calculate dynamic offset based on widget position and width\n    const widgetElement = getWidgetElement(item.id);\n    const previewWidth = widgetElement?.clientWidth;\n    const offsetX = previewWidth ? -previewWidth + 20 : 0;\n    const offsetY = 20;\n\n    return {\n      transform: `translate(${x + offsetX}px, ${y + offsetY}px)`,\n    };\n  }\n\n  // Default positioning for non-widget drags\n  return {\n    transform: `translate(${x}px, ${y}px)`,\n  };\n}\n\nexport interface DragLayerProps {\n  renderItem: (item: {\n    item: unknown;\n    type: ReturnType<DragLayerMonitor['getItemType']>;\n  }) => React.ReactNode;\n}\n\nconst DragLayer = ({ renderItem }: DragLayerProps) => {\n  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(\n    (monitor) => ({\n      item: monitor.getItem(),\n      itemType: monitor.getItemType(),\n      initialOffset: monitor.getInitialSourceClientOffset(),\n      currentOffset: monitor.getSourceClientOffset(),\n      isDragging: monitor.isDragging(),\n      mouseOffset: monitor.getClientOffset(),\n    })\n  );\n\n  if (!isDragging) {\n    return null;\n  }\n\n  return (\n    <Box\n      height=\"100%\"\n      left={0}\n      position=\"fixed\"\n      pointerEvents=\"none\"\n      top={0}\n      zIndex={100}\n      width=\"100%\"\n    >\n      <Box style={getStyle(initialOffset, currentOffset, mouseOffset, item)}>\n        {renderItem({ type: itemType, item })}\n      </Box>\n    </Box>\n  );\n};\n\nexport { DragLayer };\n"],"names":["isWidgetDragItem","item","id","originalIndex","getStyle","initialOffset","currentOffset","mouseOffset","display","x","y","widgetElement","getWidgetElement","previewWidth","clientWidth","offsetX","offsetY","transform","DragLayer","renderItem","itemType","isDragging","useDragLayer","monitor","getItem","getItemType","getInitialSourceClientOffset","getSourceClientOffset","getClientOffset","_jsx","Box","height","left","position","pointerEvents","top","zIndex","width","style","type"],"mappings":";;;;;;;;AAeO,SAASA,iBAAiBC,IAAa,EAAA;IAC5C,OACE,OAAOA,SAAS,QAChBA,IAAAA,IAAAA,KAAS,QACT,IAAQA,IAAAA,IAAAA,IACR,OAAOA,IAAKC,CAAAA,EAAE,KAAK,QACnB,IAAA,eAAA,IAAmBD,QACnB,OAAOA,IAAAA,CAAKE,aAAa,KAAK,QAAA,IAC9B,OAAWF,IAAAA,IAAAA,IACX,WAAeA,IAAAA,IAAAA;AAEnB;AAEA,SAASG,SACPC,aAA6B,EAC7BC,aAA6B,EAC7BC,WAA2B,EAC3BN,IAAc,EAAA;AAEd,IAAA,IAAI,CAACI,aAAAA,IAAiB,CAACC,aAAAA,IAAiB,CAACC,WAAa,EAAA;QACpD,OAAO;YAAEC,OAAS,EAAA;AAAO,SAAA;AAC3B;AAEA,IAAA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGH,WAAAA;;AAGjB,IAAA,IAAIP,iBAAiBC,IAAO,CAAA,EAAA;;QAE1B,MAAMU,aAAAA,GAAgBC,6BAAiBX,CAAAA,IAAAA,CAAKC,EAAE,CAAA;AAC9C,QAAA,MAAMW,eAAeF,aAAeG,EAAAA,WAAAA;AACpC,QAAA,MAAMC,OAAUF,GAAAA,YAAAA,GAAe,CAACA,YAAAA,GAAe,EAAK,GAAA,CAAA;AACpD,QAAA,MAAMG,OAAU,GAAA,EAAA;QAEhB,OAAO;YACLC,SAAW,EAAA,CAAC,UAAU,EAAER,CAAIM,GAAAA,OAAAA,CAAQ,IAAI,EAAEL,CAAAA,GAAIM,OAAQ,CAAA,GAAG;AAC3D,SAAA;AACF;;IAGA,OAAO;QACLC,SAAW,EAAA,CAAC,UAAU,EAAER,CAAAA,CAAE,IAAI,EAAEC,CAAAA,CAAE,GAAG;AACvC,KAAA;AACF;AASA,MAAMQ,SAAY,GAAA,CAAC,EAAEC,UAAU,EAAkB,GAAA;AAC/C,IAAA,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEpB,IAAI,EAAEI,aAAa,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGe,qBAChF,CAAA,CAACC,WAAa;AACZtB,YAAAA,IAAAA,EAAMsB,QAAQC,OAAO,EAAA;AACrBJ,YAAAA,QAAAA,EAAUG,QAAQE,WAAW,EAAA;AAC7BpB,YAAAA,aAAAA,EAAekB,QAAQG,4BAA4B,EAAA;AACnDpB,YAAAA,aAAAA,EAAeiB,QAAQI,qBAAqB,EAAA;AAC5CN,YAAAA,UAAAA,EAAYE,QAAQF,UAAU,EAAA;AAC9Bd,YAAAA,WAAAA,EAAagB,QAAQK,eAAe;SACtC,CAAA,CAAA;AAGF,IAAA,IAAI,CAACP,UAAY,EAAA;QACf,OAAO,IAAA;AACT;AAEA,IAAA,qBACEQ,cAACC,CAAAA,gBAAAA,EAAAA;QACCC,MAAO,EAAA,MAAA;QACPC,IAAM,EAAA,CAAA;QACNC,QAAS,EAAA,OAAA;QACTC,aAAc,EAAA,MAAA;QACdC,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,GAAA;QACRC,KAAM,EAAA,MAAA;AAEN,QAAA,QAAA,gBAAAR,cAACC,CAAAA,gBAAAA,EAAAA;YAAIQ,KAAOlC,EAAAA,QAAAA,CAASC,aAAeC,EAAAA,aAAAA,EAAeC,WAAaN,EAAAA,IAAAA,CAAAA;sBAC7DkB,UAAW,CAAA;gBAAEoB,IAAMnB,EAAAA,QAAAA;AAAUnB,gBAAAA;AAAK,aAAA;;;AAI3C;;;;;"}

package/dist/admin/admin/src/components/DragLayer.mjs

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Box } from '@strapi/design-system';
+import { useDragLayer } from 'react-dnd';
+import { getWidgetElement } from '../utils/widgetLayout.mjs';
+
+function isWidgetDragItem(item) {
+    return typeof item === 'object' && item !== null && 'id' in item && typeof item.id === 'string' && 'originalIndex' in item && typeof item.originalIndex === 'number' && 'title' in item && 'component' in item;
+}
+function getStyle(initialOffset, currentOffset, mouseOffset, item) {
+    if (!initialOffset || !currentOffset || !mouseOffset) {
+        return {
+            display: 'none'
+        };
+    }
+    const { x, y } = mouseOffset;
+    // Only apply custom offset for widget drags
+    if (isWidgetDragItem(item)) {
+        // Calculate dynamic offset based on widget position and width
+        const widgetElement = getWidgetElement(item.id);
+        const previewWidth = widgetElement?.clientWidth;
+        const offsetX = previewWidth ? -previewWidth + 20 : 0;
+        const offsetY = 20;
+        return {
+            transform: `translate(${x + offsetX}px, ${y + offsetY}px)`
+        };
+    }
+    // Default positioning for non-widget drags
+    return {
+        transform: `translate(${x}px, ${y}px)`
+    };
+}
+const DragLayer = ({ renderItem })=>{
+    const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer((monitor)=>({
+            item: monitor.getItem(),
+            itemType: monitor.getItemType(),
+            initialOffset: monitor.getInitialSourceClientOffset(),
+            currentOffset: monitor.getSourceClientOffset(),
+            isDragging: monitor.isDragging(),
+            mouseOffset: monitor.getClientOffset()
+        }));
+    if (!isDragging) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Box, {
+        height: "100%",
+        left: 0,
+        position: "fixed",
+        pointerEvents: "none",
+        top: 0,
+        zIndex: 100,
+        width: "100%",
+        children: /*#__PURE__*/ jsx(Box, {
+            style: getStyle(initialOffset, currentOffset, mouseOffset, item),
+            children: renderItem({
+                type: itemType,
+                item
+            })
+        })
+    });
+};
+
+export { DragLayer, isWidgetDragItem };
+//# sourceMappingURL=DragLayer.mjs.map

package/dist/admin/admin/src/components/DragLayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragLayer.mjs","sources":["../../../../../admin/src/components/DragLayer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { DragLayerMonitor, XYCoord, useDragLayer } from 'react-dnd';\n\nimport { getWidgetElement } from '../utils/widgetLayout';\n\nimport type { WidgetArgs } from '../core/apis/Widgets';\n\nexport interface WidgetDragItem extends Pick<WidgetArgs, 'title' | 'icon' | 'link' | 'component'> {\n  type: 'widget';\n  id: string;\n  originalIndex: number;\n}\n\nexport function isWidgetDragItem(item: unknown): item is WidgetDragItem {\n  return (\n    typeof item === 'object' &&\n    item !== null &&\n    'id' in item &&\n    typeof item.id === 'string' &&\n    'originalIndex' in item &&\n    typeof item.originalIndex === 'number' &&\n    'title' in item &&\n    'component' in item\n  );\n}\n\nfunction getStyle(\n  initialOffset: XYCoord | null,\n  currentOffset: XYCoord | null,\n  mouseOffset: XYCoord | null,\n  item?: unknown\n) {\n  if (!initialOffset || !currentOffset || !mouseOffset) {\n    return { display: 'none' };\n  }\n\n  const { x, y } = mouseOffset;\n\n  // Only apply custom offset for widget drags\n  if (isWidgetDragItem(item)) {\n    // Calculate dynamic offset based on widget position and width\n    const widgetElement = getWidgetElement(item.id);\n    const previewWidth = widgetElement?.clientWidth;\n    const offsetX = previewWidth ? -previewWidth + 20 : 0;\n    const offsetY = 20;\n\n    return {\n      transform: `translate(${x + offsetX}px, ${y + offsetY}px)`,\n    };\n  }\n\n  // Default positioning for non-widget drags\n  return {\n    transform: `translate(${x}px, ${y}px)`,\n  };\n}\n\nexport interface DragLayerProps {\n  renderItem: (item: {\n    item: unknown;\n    type: ReturnType<DragLayerMonitor['getItemType']>;\n  }) => React.ReactNode;\n}\n\nconst DragLayer = ({ renderItem }: DragLayerProps) => {\n  const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(\n    (monitor) => ({\n      item: monitor.getItem(),\n      itemType: monitor.getItemType(),\n      initialOffset: monitor.getInitialSourceClientOffset(),\n      currentOffset: monitor.getSourceClientOffset(),\n      isDragging: monitor.isDragging(),\n      mouseOffset: monitor.getClientOffset(),\n    })\n  );\n\n  if (!isDragging) {\n    return null;\n  }\n\n  return (\n    <Box\n      height=\"100%\"\n      left={0}\n      position=\"fixed\"\n      pointerEvents=\"none\"\n      top={0}\n      zIndex={100}\n      width=\"100%\"\n    >\n      <Box style={getStyle(initialOffset, currentOffset, mouseOffset, item)}>\n        {renderItem({ type: itemType, item })}\n      </Box>\n    </Box>\n  );\n};\n\nexport { DragLayer };\n"],"names":["isWidgetDragItem","item","id","originalIndex","getStyle","initialOffset","currentOffset","mouseOffset","display","x","y","widgetElement","getWidgetElement","previewWidth","clientWidth","offsetX","offsetY","transform","DragLayer","renderItem","itemType","isDragging","useDragLayer","monitor","getItem","getItemType","getInitialSourceClientOffset","getSourceClientOffset","getClientOffset","_jsx","Box","height","left","position","pointerEvents","top","zIndex","width","style","type"],"mappings":";;;;;;AAeO,SAASA,iBAAiBC,IAAa,EAAA;IAC5C,OACE,OAAOA,SAAS,QAChBA,IAAAA,IAAAA,KAAS,QACT,IAAQA,IAAAA,IAAAA,IACR,OAAOA,IAAKC,CAAAA,EAAE,KAAK,QACnB,IAAA,eAAA,IAAmBD,QACnB,OAAOA,IAAAA,CAAKE,aAAa,KAAK,QAAA,IAC9B,OAAWF,IAAAA,IAAAA,IACX,WAAeA,IAAAA,IAAAA;AAEnB;AAEA,SAASG,SACPC,aAA6B,EAC7BC,aAA6B,EAC7BC,WAA2B,EAC3BN,IAAc,EAAA;AAEd,IAAA,IAAI,CAACI,aAAAA,IAAiB,CAACC,aAAAA,IAAiB,CAACC,WAAa,EAAA;QACpD,OAAO;YAAEC,OAAS,EAAA;AAAO,SAAA;AAC3B;AAEA,IAAA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAGH,WAAAA;;AAGjB,IAAA,IAAIP,iBAAiBC,IAAO,CAAA,EAAA;;QAE1B,MAAMU,aAAAA,GAAgBC,gBAAiBX,CAAAA,IAAAA,CAAKC,EAAE,CAAA;AAC9C,QAAA,MAAMW,eAAeF,aAAeG,EAAAA,WAAAA;AACpC,QAAA,MAAMC,OAAUF,GAAAA,YAAAA,GAAe,CAACA,YAAAA,GAAe,EAAK,GAAA,CAAA;AACpD,QAAA,MAAMG,OAAU,GAAA,EAAA;QAEhB,OAAO;YACLC,SAAW,EAAA,CAAC,UAAU,EAAER,CAAIM,GAAAA,OAAAA,CAAQ,IAAI,EAAEL,CAAAA,GAAIM,OAAQ,CAAA,GAAG;AAC3D,SAAA;AACF;;IAGA,OAAO;QACLC,SAAW,EAAA,CAAC,UAAU,EAAER,CAAAA,CAAE,IAAI,EAAEC,CAAAA,CAAE,GAAG;AACvC,KAAA;AACF;AASA,MAAMQ,SAAY,GAAA,CAAC,EAAEC,UAAU,EAAkB,GAAA;AAC/C,IAAA,MAAM,EAAEC,QAAQ,EAAEC,UAAU,EAAEpB,IAAI,EAAEI,aAAa,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGe,YAChF,CAAA,CAACC,WAAa;AACZtB,YAAAA,IAAAA,EAAMsB,QAAQC,OAAO,EAAA;AACrBJ,YAAAA,QAAAA,EAAUG,QAAQE,WAAW,EAAA;AAC7BpB,YAAAA,aAAAA,EAAekB,QAAQG,4BAA4B,EAAA;AACnDpB,YAAAA,aAAAA,EAAeiB,QAAQI,qBAAqB,EAAA;AAC5CN,YAAAA,UAAAA,EAAYE,QAAQF,UAAU,EAAA;AAC9Bd,YAAAA,WAAAA,EAAagB,QAAQK,eAAe;SACtC,CAAA,CAAA;AAGF,IAAA,IAAI,CAACP,UAAY,EAAA;QACf,OAAO,IAAA;AACT;AAEA,IAAA,qBACEQ,GAACC,CAAAA,GAAAA,EAAAA;QACCC,MAAO,EAAA,MAAA;QACPC,IAAM,EAAA,CAAA;QACNC,QAAS,EAAA,OAAA;QACTC,aAAc,EAAA,MAAA;QACdC,GAAK,EAAA,CAAA;QACLC,MAAQ,EAAA,GAAA;QACRC,KAAM,EAAA,MAAA;AAEN,QAAA,QAAA,gBAAAR,GAACC,CAAAA,GAAAA,EAAAA;YAAIQ,KAAOlC,EAAAA,QAAAA,CAASC,aAAeC,EAAAA,aAAAA,EAAeC,WAAaN,EAAAA,IAAAA,CAAAA;sBAC7DkB,UAAW,CAAA;gBAAEoB,IAAMnB,EAAAA,QAAAA;AAAUnB,gBAAAA;AAAK,aAAA;;;AAI3C;;;;"}

package/dist/admin/admin/src/components/ErrorElement.js

@@ -6,6 +6,7 @@ var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
+var theme = require('../constants/theme.js');
 var useClipboard = require('../hooks/useClipboard.js');
 
 /**
@@ -30,16 +31,22 @@ ${error.stack}
                 alignItems: "center",
                 height: "100%",
                 justifyContent: "center",
+                paddingLeft: theme.RESPONSIVE_DEFAULT_SPACING,
+                paddingRight: theme.RESPONSIVE_DEFAULT_SPACING,
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                     gap: 7,
-                    padding: 7,
+                    padding: {
+                        initial: 6,
+                        small: 7,
+                        medium: 8
+                    },
                     direction: "column",
-                    width: "35%",
+                    width: "100%",
+                    maxWidth: "512px",
                     shadow: "tableShadow",
                     borderColor: "neutral150",
                     background: "neutral0",
                     hasRadius: true,
-                    maxWidth: "512px",
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                             direction: "column",

package/dist/admin/admin/src/components/ErrorElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorElement.js","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useClipboard } from '../hooks/useClipboard';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleClick = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    return (\n      <Main height=\"100%\">\n        <Flex alignItems=\"center\" height=\"100%\" justifyContent=\"center\">\n          <Flex\n            gap={7}\n            padding={7}\n            direction=\"column\"\n            width=\"35%\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n            maxWidth=\"512px\"\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleClick} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","_jsxs","gap","padding","direction","width","shadow","borderColor","background","hasRadius","maxWidth","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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"}
+{"version":3,"file":"ErrorElement.js","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useClipboard } from '../hooks/useClipboard';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleClick = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    return (\n      <Main height=\"100%\">\n        <Flex\n          alignItems=\"center\"\n          height=\"100%\"\n          justifyContent=\"center\"\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        >\n          <Flex\n            gap={7}\n            padding={{\n              initial: 6,\n              small: 7,\n              medium: 8,\n            }}\n            direction=\"column\"\n            width=\"100%\"\n            maxWidth=\"512px\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleClick} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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"}

package/dist/admin/admin/src/components/ErrorElement.mjs

@@ -4,6 +4,7 @@ import { WarningCircle, Duplicate } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { useRouteError } from 'react-router-dom';
 import { styled } from 'styled-components';
+import { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme.mjs';
 import { useClipboard } from '../hooks/useClipboard.mjs';
 
 /**
@@ -28,16 +29,22 @@ ${error.stack}
                 alignItems: "center",
                 height: "100%",
                 justifyContent: "center",
+                paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+                paddingRight: RESPONSIVE_DEFAULT_SPACING,
                 children: /*#__PURE__*/ jsxs(Flex, {
                     gap: 7,
-                    padding: 7,
+                    padding: {
+                        initial: 6,
+                        small: 7,
+                        medium: 8
+                    },
                     direction: "column",
-                    width: "35%",
+                    width: "100%",
+                    maxWidth: "512px",
                     shadow: "tableShadow",
                     borderColor: "neutral150",
                     background: "neutral0",
                     hasRadius: true,
-                    maxWidth: "512px",
                     children: [
                         /*#__PURE__*/ jsxs(Flex, {
                             direction: "column",

package/dist/admin/admin/src/components/ErrorElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorElement.mjs","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useClipboard } from '../hooks/useClipboard';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleClick = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    return (\n      <Main height=\"100%\">\n        <Flex alignItems=\"center\" height=\"100%\" justifyContent=\"center\">\n          <Flex\n            gap={7}\n            padding={7}\n            direction=\"column\"\n            width=\"35%\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n            maxWidth=\"512px\"\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleClick} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","_jsxs","gap","padding","direction","width","shadow","borderColor","background","hasRadius","maxWidth","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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"}
+{"version":3,"file":"ErrorElement.mjs","sources":["../../../../../admin/src/components/ErrorElement.tsx"],"sourcesContent":["import {\n  Alert,\n  Button,\n  Flex,\n  Main,\n  Typography,\n  Link,\n  TypographyComponent,\n} from '@strapi/design-system';\nimport { Duplicate, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { useRouteError } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { RESPONSIVE_DEFAULT_SPACING } from '../constants/theme';\nimport { useClipboard } from '../hooks/useClipboard';\n\n/**\n * @description this stops the app from going white, and instead shows the error message.\n * But it could be improved for sure.\n */\nconst ErrorElement = () => {\n  const error = useRouteError();\n  const { formatMessage } = useIntl();\n  const { copy } = useClipboard();\n\n  if (error instanceof Error) {\n    console.error(error);\n\n    const handleClick = async () => {\n      await copy(`\n\\`\\`\\`\n${error.stack}\n\\`\\`\\`\n      `);\n    };\n\n    return (\n      <Main height=\"100%\">\n        <Flex\n          alignItems=\"center\"\n          height=\"100%\"\n          justifyContent=\"center\"\n          paddingLeft={RESPONSIVE_DEFAULT_SPACING}\n          paddingRight={RESPONSIVE_DEFAULT_SPACING}\n        >\n          <Flex\n            gap={7}\n            padding={{\n              initial: 6,\n              small: 7,\n              medium: 8,\n            }}\n            direction=\"column\"\n            width=\"100%\"\n            maxWidth=\"512px\"\n            shadow=\"tableShadow\"\n            borderColor=\"neutral150\"\n            background=\"neutral0\"\n            hasRadius\n          >\n            <Flex direction=\"column\" gap={2}>\n              <WarningCircle width=\"32px\" height=\"32px\" fill=\"danger600\" />\n              <Typography fontSize={4} fontWeight=\"bold\" textAlign=\"center\">\n                {formatMessage({\n                  id: 'app.error',\n                  defaultMessage: 'Something went wrong',\n                })}\n              </Typography>\n              <Typography variant=\"omega\" textAlign=\"center\">\n                {formatMessage(\n                  {\n                    id: 'app.error.message',\n                    defaultMessage: `It seems like there is a bug in your instance, but we've got you covered. Please notify your technical team so they can investigate the source of the problem and report the issue to us by opening a bug report on {link}.`,\n                  },\n                  {\n                    link: (\n                      <Link\n                        isExternal\n                        // hack to get rid of the current endIcon, which should be removable by using `null`.\n                        endIcon\n                        href=\"https://github.com/strapi/strapi/issues/new?assignees=&labels=&projects=&template=BUG_REPORT.md\"\n                      >{`Strapi's GitHub`}</Link>\n                    ),\n                  }\n                )}\n              </Typography>\n            </Flex>\n            {/* the Alert component needs to make its close button optional as well as the icon. */}\n            <Flex gap={4} direction=\"column\" width=\"100%\">\n              <StyledAlert onClose={() => {}} width=\"100%\" closeLabel=\"\" variant=\"danger\">\n                <ErrorType>{error.message}</ErrorType>\n              </StyledAlert>\n              <Button onClick={handleClick} variant=\"tertiary\" startIcon={<Duplicate />}>\n                {formatMessage({\n                  id: 'app.error.copy',\n                  defaultMessage: 'Copy to clipboard',\n                })}\n              </Button>\n            </Flex>\n          </Flex>\n        </Flex>\n      </Main>\n    );\n  }\n\n  throw error;\n};\n\nconst StyledAlert = styled(Alert)`\n  & > div:first-child {\n    display: none;\n  }\n\n  & > button {\n    display: none;\n  }\n`;\n\nconst ErrorType = styled<TypographyComponent>(Typography)`\n  word-break: break-all;\n  color: ${({ theme }) => theme.colors.danger600};\n`;\n\nexport { ErrorElement };\n"],"names":["ErrorElement","error","useRouteError","formatMessage","useIntl","copy","useClipboard","Error","console","handleClick","stack","_jsx","Main","height","Flex","alignItems","justifyContent","paddingLeft","RESPONSIVE_DEFAULT_SPACING","paddingRight","_jsxs","gap","padding","initial","small","medium","direction","width","maxWidth","shadow","borderColor","background","hasRadius","WarningCircle","fill","Typography","fontSize","fontWeight","textAlign","id","defaultMessage","variant","link","Link","isExternal","endIcon","href","StyledAlert","onClose","closeLabel","ErrorType","message","Button","onClick","startIcon","Duplicate","styled","Alert","theme","colors","danger600"],"mappings":"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"}

package/dist/admin/admin/src/components/GapDropZone.js

@@ -0,0 +1,292 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactDnd = require('react-dnd');
+var styled = require('styled-components');
+var widgetLayout = require('../utils/widgetLayout.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DROP_ZONE_SIZE = 20;
+const getRowInfo = (row)=>{
+    const firstWidgetElement = widgetLayout.getWidgetElement(row.widgets[0].uid);
+    const lastWidgetElement = widgetLayout.getWidgetElement(row.widgets[row.widgets.length - 1].uid);
+    const containerElement = widgetLayout.getWidgetGridContainer();
+    if (!firstWidgetElement || !lastWidgetElement || !containerElement) {
+        return null;
+    }
+    const firstRect = firstWidgetElement.getBoundingClientRect();
+    const lastRect = lastWidgetElement.getBoundingClientRect();
+    const containerRect = containerElement.getBoundingClientRect();
+    return {
+        firstWidgetElement,
+        lastWidgetElement,
+        containerElement,
+        firstRect,
+        lastRect,
+        containerRect,
+        rowHeight: Math.max(firstRect.height, lastRect.height),
+        rowTop: firstRect.top - containerRect.top
+    };
+};
+const addVerticalDropZones = (row, rowInfo, rowIndex)=>{
+    if (!rowInfo) return [];
+    const { containerRect, rowTop, rowHeight } = rowInfo;
+    const widgetCount = row.widgets.length;
+    // Get widget positions relative to container
+    const widgetPositions = row.widgets.map((widget)=>{
+        const element = widgetLayout.getWidgetElement(widget.uid);
+        if (!element) return null;
+        const rect = element.getBoundingClientRect();
+        return {
+            left: rect.left - containerRect.left,
+            width: rect.width
+        };
+    }).filter((pos)=>pos !== null);
+    if (widgetPositions.length !== widgetCount) return [];
+    const gapDropZones = [];
+    // Always add drop zone before the first widget
+    gapDropZones.push({
+        insertIndex: row.startIndex,
+        position: {
+            left: widgetPositions[0].left - DROP_ZONE_SIZE,
+            top: rowTop,
+            height: rowHeight,
+            width: DROP_ZONE_SIZE
+        },
+        isVisible: true,
+        type: 'vertical',
+        targetRowIndex: rowIndex
+    });
+    // Add drop zones between widgets
+    widgetPositions.slice(0, -1).forEach((currentWidget, i)=>{
+        gapDropZones.push({
+            insertIndex: row.startIndex + i + 1,
+            position: {
+                left: currentWidget.left + currentWidget.width,
+                top: rowTop,
+                height: rowHeight,
+                width: DROP_ZONE_SIZE
+            },
+            isVisible: true,
+            type: 'vertical',
+            targetRowIndex: rowIndex
+        });
+    });
+    // Always add drop zone after the last widget
+    const lastWidget = widgetPositions[widgetCount - 1];
+    gapDropZones.push({
+        insertIndex: row.endIndex + 1,
+        position: {
+            left: lastWidget.left + lastWidget.width,
+            top: rowTop,
+            height: rowHeight,
+            width: DROP_ZONE_SIZE
+        },
+        isVisible: true,
+        type: 'vertical',
+        targetRowIndex: rowIndex
+    });
+    return gapDropZones;
+};
+const addHorizontalDropZones = (row, rowIndex, rowInfo, widgetRows, filteredWidgets)=>{
+    if (!rowInfo) return [];
+    // Don't show horizontal drop zones if there's only one row with one widget
+    if (widgetRows.length === 1 && row.widgets.length === 1) return [];
+    const { containerRect } = rowInfo;
+    const containerWidth = containerRect.width;
+    const horizontalDropZoneHeight = DROP_ZONE_SIZE;
+    const gapDropZones = [];
+    // Add horizontal drop zone above the first row
+    if (rowIndex === 0) {
+        const firstRowRect = rowInfo.firstRect;
+        const firstRowTop = firstRowRect.top - containerRect.top;
+        gapDropZones.push({
+            insertIndex: 0,
+            position: {
+                left: 0,
+                top: firstRowTop - horizontalDropZoneHeight,
+                height: horizontalDropZoneHeight,
+                width: containerWidth
+            },
+            isVisible: true,
+            type: 'horizontal',
+            isHorizontalDrop: true
+        });
+    }
+    // Add horizontal drop zone below the current row (between rows or after last row)
+    if (rowIndex < widgetRows.length - 1) {
+        // Between rows: position above the next row
+        const nextRow = widgetRows[rowIndex + 1];
+        const nextRowFirstWidgetElement = widgetLayout.getWidgetElement(nextRow.widgets[0].uid);
+        if (nextRowFirstWidgetElement) {
+            const nextRowRect = nextRowFirstWidgetElement.getBoundingClientRect();
+            const nextRowTop = nextRowRect.top - containerRect.top;
+            gapDropZones.push({
+                insertIndex: row.endIndex + 1,
+                position: {
+                    left: 0,
+                    top: nextRowTop - horizontalDropZoneHeight,
+                    height: horizontalDropZoneHeight,
+                    width: containerWidth
+                },
+                isVisible: true,
+                type: 'horizontal',
+                isHorizontalDrop: true
+            });
+        }
+    } else {
+        // After the last row: position below the current row
+        const lastRowRect = rowInfo.lastRect;
+        const lastRowBottom = lastRowRect.bottom - containerRect.top;
+        gapDropZones.push({
+            insertIndex: filteredWidgets.length,
+            position: {
+                left: 0,
+                top: lastRowBottom,
+                height: horizontalDropZoneHeight,
+                width: containerWidth
+            },
+            isVisible: true,
+            type: 'horizontal',
+            isHorizontalDrop: true
+        });
+    }
+    return gapDropZones;
+};
+const GapDropZoneManager = ({ filteredWidgets, columnWidths, draggedWidgetId, moveWidget })=>{
+    const [positions, setPositions] = React__namespace.useState([]);
+    // Calculate widget rows
+    const widgetRows = React__namespace.useMemo(()=>{
+        return widgetLayout.calculateWidgetRows(filteredWidgets, columnWidths);
+    }, [
+        filteredWidgets,
+        columnWidths
+    ]);
+    // Main function to calculate GapDropZone positions
+    const calculateGapDropZonePositions = React__namespace.useCallback(()=>{
+        const gapDropZones = [];
+        // Find which row the dragged widget is from
+        const draggedWidgetRow = draggedWidgetId ? widgetRows.find((row)=>row.widgets.some((widget)=>widget.uid === draggedWidgetId)) : null;
+        widgetRows.forEach((row, rowIndex)=>{
+            const rowInfo = getRowInfo(row);
+            if (!rowInfo) return;
+            const widgetCount = row.widgets.length;
+            // Determine if we should show vertical drop zones for this row
+            const isDraggingFromThisRow = draggedWidgetRow && draggedWidgetRow === row;
+            const isDraggingFromAnotherRow = draggedWidgetRow && draggedWidgetRow !== row;
+            const canAcceptMoreWidgets = widgetCount < 3;
+            const shouldShowVerticalDropZones = isDraggingFromThisRow || isDraggingFromAnotherRow && canAcceptMoreWidgets;
+            // Add vertical drop zones based on widget count
+            if (shouldShowVerticalDropZones) {
+                const verticalDropZones = addVerticalDropZones(row, rowInfo, rowIndex);
+                gapDropZones.push(...verticalDropZones);
+            }
+            // Add horizontal drop zones
+            const horizontalDropZones = addHorizontalDropZones(row, rowIndex, rowInfo, widgetRows, filteredWidgets);
+            gapDropZones.push(...horizontalDropZones);
+        });
+        return gapDropZones;
+    }, [
+        widgetRows,
+        draggedWidgetId,
+        filteredWidgets
+    ]);
+    React__namespace.useLayoutEffect(()=>{
+        const updatePositions = ()=>{
+            const newPositions = calculateGapDropZonePositions();
+            setPositions(newPositions);
+        };
+        updatePositions();
+        // Update positions on container resize using ResizeObserver
+        const containerElement = widgetLayout.getWidgetGridContainer();
+        if (!containerElement) return;
+        const resizeObserver = new ResizeObserver(()=>{
+            updatePositions();
+        });
+        resizeObserver.observe(containerElement);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        calculateGapDropZonePositions
+    ]);
+    return positions.map((gapDropZone)=>/*#__PURE__*/ jsxRuntime.jsx(GapDropZone, {
+            insertIndex: gapDropZone.insertIndex,
+            position: gapDropZone.position,
+            isVisible: gapDropZone.isVisible,
+            type: gapDropZone.type,
+            moveWidget: moveWidget,
+            targetRowIndex: gapDropZone.targetRowIndex
+        }, `gap-drop-zone-${gapDropZone.type}-${gapDropZone.insertIndex}-${gapDropZone.targetRowIndex ?? 'no-row'}`));
+};
+const GapDropZoneContainer = styled.styled(designSystem.Box)`
+  background-color: ${({ $isOver, theme })=>$isOver ? `${theme.colors.primary100}` : 'transparent'};
+  border: ${({ $isOver, theme })=>$isOver ? `2px solid ${theme.colors.primary500}` : '2px solid transparent'};
+  opacity: ${({ $isOver })=>$isOver ? 1 : 0.6};
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: ${DROP_ZONE_SIZE}px;
+  z-index: 1;
+`;
+const GapDropZone = ({ insertIndex, position, isVisible, type, moveWidget, targetRowIndex })=>{
+    const isHorizontalDrop = type === 'horizontal';
+    const [{ isOver }, drop] = reactDnd.useDrop(()=>({
+            accept: 'widget',
+            drop: (item)=>{
+                moveWidget(item.id, insertIndex, targetRowIndex, isHorizontalDrop);
+            },
+            collect: (monitor)=>({
+                    isOver: monitor.isOver()
+                })
+        }), [
+        insertIndex,
+        isHorizontalDrop,
+        moveWidget,
+        targetRowIndex
+    ]);
+    if (!isVisible) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(GapDropZoneContainer, {
+        ref: drop,
+        $isOver: isOver,
+        style: {
+            transform: `translate(${position.left}px, ${position.top}px)`,
+            height: `${position.height}px`,
+            width: `${position.width}px`
+        }
+    });
+};
+
+exports.DROP_ZONE_SIZE = DROP_ZONE_SIZE;
+exports.GapDropZoneManager = GapDropZoneManager;
+exports.addHorizontalDropZones = addHorizontalDropZones;
+exports.addVerticalDropZones = addVerticalDropZones;
+//# sourceMappingURL=GapDropZone.js.map