@strapi/admin 5.27.0 → 5.29.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/FormInputs/Json.js

@@ -41,7 +41,7 @@ const JsonInput = /*#__PURE__*/ React__namespace.forwardRef(({ name, required, l
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.JSONInput, {
                 ref: composedRefs,
-                value: typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value,
+                value: typeof field.value === 'object' || typeof field.value === 'boolean' || typeof field.value === 'number' ? JSON.stringify(field.value, null, 2) : field.value,
                 onChange: (json)=>{
                     // Default to null when the field is not required and there is no input value
                     const value = required && !json.length ? null : json;

package/dist/admin/admin/src/components/FormInputs/Json.js.map

@@ -1 +1 @@
-{"version":3,"file":"Json.js","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,0BAAYC,gBAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,aAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,qCAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,6BAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,cAAA,CAACH,mBAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,cAACG,CAAAA,sBAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,KAAAA,EACE,OAAOd,KAAAA,CAAMc,KAAK,IAAI,WAAWC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAM,EAAA,CAAA,CAAA,GAAKd,MAAMc,KAAK;AAErFG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,cAAA,CAACH,mBAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,cAAA,CAACH,mBAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,gBAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}
+{"version":3,"file":"Json.js","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value === 'object' ||\n            typeof field.value === 'boolean' ||\n            typeof field.value === 'number'\n              ? JSON.stringify(field.value, null, 2)\n              : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,0BAAYC,gBAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,aAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,qCAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,6BAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,eAAA,CAACC,mBAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,cAAA,CAACH,mBAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,cAACG,CAAAA,sBAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;gBACLU,KACE,EAAA,OAAOd,KAAMc,CAAAA,KAAK,KAAK,QAAA,IACvB,OAAOd,KAAMc,CAAAA,KAAK,KAAK,SAAA,IACvB,OAAOd,KAAAA,CAAMc,KAAK,KAAK,QAAA,GACnBC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAA,EAAM,CAClCd,CAAAA,GAAAA,KAAAA,CAAMc,KAAK;AAEjBG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,cAAA,CAACH,mBAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,cAAA,CAACH,mBAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,gBAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}

package/dist/admin/admin/src/components/FormInputs/Json.mjs

@@ -20,7 +20,7 @@ const JsonInput = /*#__PURE__*/ React.forwardRef(({ name, required, label, hint,
             }),
             /*#__PURE__*/ jsx(JSONInput, {
                 ref: composedRefs,
-                value: typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value,
+                value: typeof field.value === 'object' || typeof field.value === 'boolean' || typeof field.value === 'number' ? JSON.stringify(field.value, null, 2) : field.value,
                 onChange: (json)=>{
                     // Default to null when the field is not required and there is no input value
                     const value = required && !json.length ? null : json;

package/dist/admin/admin/src/components/FormInputs/Json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Json.mjs","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value == 'object' ? JSON.stringify(field.value, null, 2) : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;AAcA,MAAMA,0BAAYC,KAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,QAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,kBAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,gBAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,GAAA,CAACH,MAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,GAACG,CAAAA,SAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;AACLU,gBAAAA,KAAAA,EACE,OAAOd,KAAAA,CAAMc,KAAK,IAAI,WAAWC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAM,EAAA,CAAA,CAAA,GAAKd,MAAMc,KAAK;AAErFG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,GAAA,CAACH,MAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,GAAA,CAACH,MAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,KAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}
+{"version":3,"file":"Json.mjs","sources":["../../../../../../admin/src/components/FormInputs/Json.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  JSONInput as JSONInputImpl,\n  useComposedRefs,\n  Field,\n  JSONInputRef,\n} from '@strapi/design-system';\n\nimport { useFocusInputField } from '../../hooks/useFocusInputField';\nimport { useField } from '../Form';\n\nimport { InputProps } from './types';\n\nconst JsonInput = React.forwardRef<JSONInputRef, InputProps>(\n  ({ name, required, label, hint, labelAction, ...props }, ref) => {\n    const field = useField(name);\n    const fieldRef = useFocusInputField(name);\n\n    const composedRefs = useComposedRefs(ref, fieldRef);\n\n    return (\n      <Field.Root error={field.error} name={name} hint={hint} required={required}>\n        <Field.Label action={labelAction}>{label}</Field.Label>\n        <JSONInputImpl\n          ref={composedRefs}\n          value={\n            typeof field.value === 'object' ||\n            typeof field.value === 'boolean' ||\n            typeof field.value === 'number'\n              ? JSON.stringify(field.value, null, 2)\n              : field.value\n          }\n          onChange={(json) => {\n            // Default to null when the field is not required and there is no input value\n            const value = required && !json.length ? null : json;\n            field.onChange(name, value);\n          }}\n          minHeight={`25.2rem`}\n          maxHeight={`50.4rem`}\n          {...props}\n        />\n        <Field.Hint />\n        <Field.Error />\n      </Field.Root>\n    );\n  }\n);\n\nconst MemoizedJsonInput = React.memo(JsonInput);\n\nexport { MemoizedJsonInput as JsonInput };\n"],"names":["JsonInput","React","forwardRef","name","required","label","hint","labelAction","props","ref","field","useField","fieldRef","useFocusInputField","composedRefs","useComposedRefs","_jsxs","Field","Root","error","_jsx","Label","action","JSONInputImpl","value","JSON","stringify","onChange","json","length","minHeight","maxHeight","Hint","Error","MemoizedJsonInput","memo"],"mappings":";;;;;;AAcA,MAAMA,0BAAYC,KAAMC,CAAAA,UAAU,CAChC,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AACvD,IAAA,MAAMC,QAAQC,QAASR,CAAAA,IAAAA,CAAAA;AACvB,IAAA,MAAMS,WAAWC,kBAAmBV,CAAAA,IAAAA,CAAAA;IAEpC,MAAMW,YAAAA,GAAeC,gBAAgBN,GAAKG,EAAAA,QAAAA,CAAAA;IAE1C,qBACEI,IAAA,CAACC,MAAMC,IAAI,EAAA;AAACC,QAAAA,KAAAA,EAAOT,MAAMS,KAAK;QAAEhB,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMF,QAAUA,EAAAA,QAAAA;;AAChE,0BAAAgB,GAAA,CAACH,MAAMI,KAAK,EAAA;gBAACC,MAAQf,EAAAA,WAAAA;AAAcF,gBAAAA,QAAAA,EAAAA;;0BACnCe,GAACG,CAAAA,SAAAA,EAAAA;gBACCd,GAAKK,EAAAA,YAAAA;gBACLU,KACE,EAAA,OAAOd,KAAMc,CAAAA,KAAK,KAAK,QAAA,IACvB,OAAOd,KAAMc,CAAAA,KAAK,KAAK,SAAA,IACvB,OAAOd,KAAAA,CAAMc,KAAK,KAAK,QAAA,GACnBC,IAAKC,CAAAA,SAAS,CAAChB,KAAAA,CAAMc,KAAK,EAAE,IAAA,EAAM,CAClCd,CAAAA,GAAAA,KAAAA,CAAMc,KAAK;AAEjBG,gBAAAA,QAAAA,EAAU,CAACC,IAAAA,GAAAA;;AAET,oBAAA,MAAMJ,QAAQpB,QAAY,IAAA,CAACwB,IAAKC,CAAAA,MAAM,GAAG,IAAOD,GAAAA,IAAAA;oBAChDlB,KAAMiB,CAAAA,QAAQ,CAACxB,IAAMqB,EAAAA,KAAAA,CAAAA;AACvB,iBAAA;gBACAM,SAAW,EAAA,CAAC,OAAO,CAAC;gBACpBC,SAAW,EAAA,CAAC,OAAO,CAAC;AACnB,gBAAA,GAAGvB;;AAEN,0BAAAY,GAAA,CAACH,MAAMe,IAAI,EAAA,EAAA,CAAA;AACX,0BAAAZ,GAAA,CAACH,MAAMgB,KAAK,EAAA,EAAA;;;AAGlB,CAAA,CAAA;AAGIC,MAAAA,iBAAAA,iBAAoBjC,KAAMkC,CAAAA,IAAI,CAACnC,SAAAA;;;;"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"GapDropZone.js","sources":["../../../../../admin/src/components/GapDropZone.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\n// TODO: use @dnd-kit/core instead\nimport { useDrop } from 'react-dnd';\nimport { styled } from 'styled-components';\n\nimport {\n  calculateWidgetRows,\n  type WidgetRow,\n  getWidgetElement,\n  getWidgetGridContainer,\n} from '../utils/widgetLayout';\n\nimport type { WidgetWithUID } from '../core/apis/Widgets';\n\nexport const DROP_ZONE_SIZE = 20;\n\nexport interface GapDropZonePosition {\n  insertIndex: number;\n  position: { left: number; top: number; height: number; width: number };\n  isVisible: boolean;\n  type: 'vertical' | 'horizontal';\n  isHorizontalDrop?: boolean;\n  targetRowIndex?: number;\n}\n\ninterface GapDropZoneManagerProps {\n  filteredWidgets: WidgetWithUID[];\n  columnWidths: Record<string, number>;\n  draggedWidgetId?: string;\n  moveWidget: (id: string, to: number, targetRowIndex?: number, isHorizontalDrop?: boolean) => void;\n}\n\nconst getRowInfo = (row: WidgetRow) => {\n  const firstWidgetElement = getWidgetElement(row.widgets[0].uid);\n  const lastWidgetElement = getWidgetElement(row.widgets[row.widgets.length - 1].uid);\n  const containerElement = getWidgetGridContainer();\n\n  if (!firstWidgetElement || !lastWidgetElement || !containerElement) {\n    return null;\n  }\n\n  const firstRect = firstWidgetElement.getBoundingClientRect();\n  const lastRect = lastWidgetElement.getBoundingClientRect();\n  const containerRect = containerElement.getBoundingClientRect();\n\n  return {\n    firstWidgetElement,\n    lastWidgetElement,\n    containerElement,\n    firstRect,\n    lastRect,\n    containerRect,\n    rowHeight: Math.max(firstRect.height, lastRect.height),\n    rowTop: firstRect.top - containerRect.top,\n  };\n};\n\nexport const addVerticalDropZones = (\n  row: WidgetRow,\n  rowInfo: ReturnType<typeof getRowInfo>,\n  rowIndex: number\n): GapDropZonePosition[] => {\n  if (!rowInfo) return [];\n\n  const { containerRect, rowTop, rowHeight } = rowInfo;\n  const widgetCount = row.widgets.length;\n\n  // Get widget positions relative to container\n  const widgetPositions = row.widgets\n    .map((widget) => {\n      const element = getWidgetElement(widget.uid);\n      if (!element) return null;\n\n      const rect = element.getBoundingClientRect();\n      return {\n        left: rect.left - containerRect.left,\n        width: rect.width,\n      };\n    })\n    .filter((pos): pos is NonNullable<typeof pos> => pos !== null);\n\n  if (widgetPositions.length !== widgetCount) return [];\n\n  const gapDropZones: GapDropZonePosition[] = [];\n\n  // Always add drop zone before the first widget\n  gapDropZones.push({\n    insertIndex: row.startIndex,\n    position: {\n      left: widgetPositions[0].left - DROP_ZONE_SIZE,\n      top: rowTop,\n      height: rowHeight,\n      width: DROP_ZONE_SIZE,\n    },\n    isVisible: true,\n    type: 'vertical',\n    targetRowIndex: rowIndex,\n  });\n\n  // Add drop zones between widgets\n  widgetPositions.slice(0, -1).forEach((currentWidget, i) => {\n    gapDropZones.push({\n      insertIndex: row.startIndex + i + 1,\n      position: {\n        left: currentWidget.left + currentWidget.width,\n        top: rowTop,\n        height: rowHeight,\n        width: DROP_ZONE_SIZE,\n      },\n      isVisible: true,\n      type: 'vertical',\n      targetRowIndex: rowIndex,\n    });\n  });\n\n  // Always add drop zone after the last widget\n  const lastWidget = widgetPositions[widgetCount - 1];\n  gapDropZones.push({\n    insertIndex: row.endIndex + 1,\n    position: {\n      left: lastWidget.left + lastWidget.width,\n      top: rowTop,\n      height: rowHeight,\n      width: DROP_ZONE_SIZE,\n    },\n    isVisible: true,\n    type: 'vertical',\n    targetRowIndex: rowIndex,\n  });\n\n  return gapDropZones;\n};\n\nexport const addHorizontalDropZones = (\n  row: WidgetRow,\n  rowIndex: number,\n  rowInfo: ReturnType<typeof getRowInfo>,\n  widgetRows: WidgetRow[],\n  filteredWidgets: WidgetWithUID[]\n): GapDropZonePosition[] => {\n  if (!rowInfo) return [];\n\n  // Don't show horizontal drop zones if there's only one row with one widget\n  if (widgetRows.length === 1 && row.widgets.length === 1) return [];\n\n  const { containerRect } = rowInfo;\n  const containerWidth = containerRect.width;\n  const horizontalDropZoneHeight = DROP_ZONE_SIZE;\n\n  const gapDropZones: GapDropZonePosition[] = [];\n\n  // Add horizontal drop zone above the first row\n  if (rowIndex === 0) {\n    const firstRowRect = rowInfo.firstRect;\n    const firstRowTop = firstRowRect.top - containerRect.top;\n\n    gapDropZones.push({\n      insertIndex: 0,\n      position: {\n        left: 0,\n        top: firstRowTop - horizontalDropZoneHeight,\n        height: horizontalDropZoneHeight,\n        width: containerWidth,\n      },\n      isVisible: true,\n      type: 'horizontal',\n      isHorizontalDrop: true,\n    });\n  }\n\n  // Add horizontal drop zone below the current row (between rows or after last row)\n  if (rowIndex < widgetRows.length - 1) {\n    // Between rows: position above the next row\n    const nextRow = widgetRows[rowIndex + 1];\n    const nextRowFirstWidgetElement = getWidgetElement(nextRow.widgets[0].uid);\n\n    if (nextRowFirstWidgetElement) {\n      const nextRowRect = nextRowFirstWidgetElement.getBoundingClientRect();\n      const nextRowTop = nextRowRect.top - containerRect.top;\n\n      gapDropZones.push({\n        insertIndex: row.endIndex + 1,\n        position: {\n          left: 0,\n          top: nextRowTop - horizontalDropZoneHeight,\n          height: horizontalDropZoneHeight,\n          width: containerWidth,\n        },\n        isVisible: true,\n        type: 'horizontal',\n        isHorizontalDrop: true,\n      });\n    }\n  } else {\n    // After the last row: position below the current row\n    const lastRowRect = rowInfo.lastRect;\n    const lastRowBottom = lastRowRect.bottom - containerRect.top;\n\n    gapDropZones.push({\n      insertIndex: filteredWidgets.length,\n      position: {\n        left: 0,\n        top: lastRowBottom,\n        height: horizontalDropZoneHeight,\n        width: containerWidth,\n      },\n      isVisible: true,\n      type: 'horizontal',\n      isHorizontalDrop: true,\n    });\n  }\n\n  return gapDropZones;\n};\n\nexport const GapDropZoneManager = ({\n  filteredWidgets,\n  columnWidths,\n  draggedWidgetId,\n  moveWidget,\n}: GapDropZoneManagerProps) => {\n  const [positions, setPositions] = React.useState<GapDropZonePosition[]>([]);\n\n  // Calculate widget rows\n  const widgetRows = React.useMemo(() => {\n    return calculateWidgetRows(filteredWidgets, columnWidths);\n  }, [filteredWidgets, columnWidths]);\n\n  // Main function to calculate GapDropZone positions\n  const calculateGapDropZonePositions = React.useCallback(() => {\n    const gapDropZones: GapDropZonePosition[] = [];\n\n    // Find which row the dragged widget is from\n    const draggedWidgetRow = draggedWidgetId\n      ? widgetRows.find((row) => row.widgets.some((widget) => widget.uid === draggedWidgetId))\n      : null;\n\n    widgetRows.forEach((row, rowIndex) => {\n      const rowInfo = getRowInfo(row);\n      if (!rowInfo) return;\n\n      const widgetCount = row.widgets.length;\n\n      // Determine if we should show vertical drop zones for this row\n      const isDraggingFromThisRow = draggedWidgetRow && draggedWidgetRow === row;\n      const isDraggingFromAnotherRow = draggedWidgetRow && draggedWidgetRow !== row;\n      const canAcceptMoreWidgets = widgetCount < 3;\n\n      const shouldShowVerticalDropZones =\n        isDraggingFromThisRow || (isDraggingFromAnotherRow && canAcceptMoreWidgets);\n\n      // Add vertical drop zones based on widget count\n      if (shouldShowVerticalDropZones) {\n        const verticalDropZones = addVerticalDropZones(row, rowInfo, rowIndex);\n        gapDropZones.push(...verticalDropZones);\n      }\n\n      // Add horizontal drop zones\n      const horizontalDropZones = addHorizontalDropZones(\n        row,\n        rowIndex,\n        rowInfo,\n        widgetRows,\n        filteredWidgets\n      );\n      gapDropZones.push(...horizontalDropZones);\n    });\n\n    return gapDropZones;\n  }, [widgetRows, draggedWidgetId, filteredWidgets]);\n\n  React.useLayoutEffect(() => {\n    const updatePositions = () => {\n      const newPositions = calculateGapDropZonePositions();\n      setPositions(newPositions);\n    };\n\n    updatePositions();\n\n    // Update positions on container resize using ResizeObserver\n    const containerElement = getWidgetGridContainer();\n    if (!containerElement) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      updatePositions();\n    });\n\n    resizeObserver.observe(containerElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [calculateGapDropZonePositions]);\n\n  return positions.map((gapDropZone) => (\n    <GapDropZone\n      key={`gap-drop-zone-${gapDropZone.type}-${gapDropZone.insertIndex}-${gapDropZone.targetRowIndex ?? 'no-row'}`}\n      insertIndex={gapDropZone.insertIndex}\n      position={gapDropZone.position}\n      isVisible={gapDropZone.isVisible}\n      type={gapDropZone.type}\n      moveWidget={moveWidget}\n      targetRowIndex={gapDropZone.targetRowIndex}\n    />\n  ));\n};\n\ninterface GapDropZoneProps {\n  insertIndex: number;\n  position: { left: number; top: number; height: number; width: number };\n  isVisible: boolean;\n  type: 'vertical' | 'horizontal';\n  moveWidget: (id: string, to: number, targetRowIndex?: number, isHorizontalDrop?: boolean) => void;\n  targetRowIndex?: number;\n}\n\nconst GapDropZoneContainer = styled(Box)<{\n  $isOver: boolean;\n}>`\n  background-color: ${({ $isOver, theme }) =>\n    $isOver ? `${theme.colors.primary100}` : 'transparent'};\n  border: ${({ $isOver, theme }) =>\n    $isOver ? `2px solid ${theme.colors.primary500}` : '2px solid transparent'};\n  opacity: ${({ $isOver }) => ($isOver ? 1 : 0.6)};\n  transition: all 0.2s ease-in-out;\n  cursor: pointer;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${DROP_ZONE_SIZE}px;\n  z-index: 1;\n`;\n\nconst GapDropZone = ({\n  insertIndex,\n  position,\n  isVisible,\n  type,\n  moveWidget,\n  targetRowIndex,\n}: GapDropZoneProps) => {\n  const isHorizontalDrop = type === 'horizontal';\n\n  const [{ isOver }, drop] = useDrop(\n    () => ({\n      accept: 'widget',\n      drop: (item: { id: string }) => {\n        moveWidget(item.id, insertIndex, targetRowIndex, isHorizontalDrop);\n      },\n      collect: (monitor) => ({\n        isOver: monitor.isOver(),\n      }),\n    }),\n    [insertIndex, isHorizontalDrop, moveWidget, targetRowIndex]\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <GapDropZoneContainer\n      ref={drop}\n      $isOver={isOver}\n      style={{\n        transform: `translate(${position.left}px, ${position.top}px)`,\n        height: `${position.height}px`,\n        width: `${position.width}px`,\n      }}\n    />\n  );\n};\n"],"names":["DROP_ZONE_SIZE","getRowInfo","row","firstWidgetElement","getWidgetElement","widgets","uid","lastWidgetElement","length","containerElement","getWidgetGridContainer","firstRect","getBoundingClientRect","lastRect","containerRect","rowHeight","Math","max","height","rowTop","top","addVerticalDropZones","rowInfo","rowIndex","widgetCount","widgetPositions","map","widget","element","rect","left","width","filter","pos","gapDropZones","push","insertIndex","startIndex","position","isVisible","type","targetRowIndex","slice","forEach","currentWidget","i","lastWidget","endIndex","addHorizontalDropZones","widgetRows","filteredWidgets","containerWidth","horizontalDropZoneHeight","firstRowRect","firstRowTop","isHorizontalDrop","nextRow","nextRowFirstWidgetElement","nextRowRect","nextRowTop","lastRowRect","lastRowBottom","bottom","GapDropZoneManager","columnWidths","draggedWidgetId","moveWidget","positions","setPositions","React","useState","useMemo","calculateWidgetRows","calculateGapDropZonePositions","useCallback","draggedWidgetRow","find","some","isDraggingFromThisRow","isDraggingFromAnotherRow","canAcceptMoreWidgets","shouldShowVerticalDropZones","verticalDropZones","horizontalDropZones","useLayoutEffect","updatePositions","newPositions","resizeObserver","ResizeObserver","observe","disconnect","gapDropZone","_jsx","GapDropZone","GapDropZoneContainer","styled","Box","$isOver","theme","colors","primary100","primary500","borderRadius","isOver","drop","useDrop","accept","item","id","collect","monitor","ref","style","transform"],"mappings":"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"}