@strapi/admin 5.27.0 → 5.28.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeIndicator.js","sources":["../../../../../admin/src/components/ResizeIndicator.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport {\n  isValidResize,\n  calculateTargetWidths,\n  shouldTriggerResize,\n  calculateResizeHandlePosition,\n  calculateRowBounds,\n} from '../utils/resizeHandlers';\nimport { getWidgetElement, getWidgetGridContainer } from '../utils/widgetLayout';\n\nimport type { WidgetWithUID } from '../core/apis/Widgets';\n\nconst INDICATOR_SIZE = 20;\n\ninterface ResizeIndicatorProps {\n  isVisible: boolean;\n  position: { left: number; top: number; height: number };\n  currentLeftWidth: number;\n  currentRightWidth: number;\n  totalColumns?: number;\n  rowPosition?: { left: number; top: number; width: number; height: number } | null;\n}\n\nconst IndicatorContainer = styled(Box)<{ $isVisible: boolean }>`\n  position: absolute;\n  z-index: 1;\n  pointer-events: none;\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.2s ease-in-out;\n  background: transparent;\n  height: ${INDICATOR_SIZE}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DotContainer = styled(Box)<{ $position: number }>`\n  position: absolute;\n  top: 50%;\n  left: ${({ $position }) => $position}%;\n  transform: translate(-50%, -50%);\n`;\n\nconst Dot = styled(Box)<{ $isActive: boolean; $isCurrent: boolean }>`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ${({ $isActive, $isCurrent, theme }) => {\n    if ($isCurrent) return theme.colors.primary600;\n    if ($isActive) return theme.colors.primary500;\n    return theme.colors.neutral300;\n  }};\n  transition: all 0.2s ease-in-out;\n  box-shadow: ${({ $isCurrent, theme }) =>\n    $isCurrent ? `0 0 0 3px ${theme.colors.primary100}` : 'none'};\n  transform: ${({ $isCurrent }) => ($isCurrent ? 'scale(1.2)' : 'scale(1)')};\n`;\n\nconst calculateGapAdjustment = (rowWidth: number, leftColumns: number): number => {\n  const dotWidth = 6;\n  const gapAdjustmentPixels = dotWidth / 2; // Half dot width to center on boundary\n  const gapAdjustmentPercent = (gapAdjustmentPixels / rowWidth) * 100;\n\n  // Different adjustments for different positions\n  switch (leftColumns) {\n    case 4:\n      return -gapAdjustmentPercent; // Left dot\n    case 8:\n      return gapAdjustmentPercent; // Right dot\n    default: // Center dot\n      return 0;\n  }\n};\n\nconst ResizeIndicator = ({\n  isVisible,\n  position,\n  currentLeftWidth,\n  currentRightWidth,\n  totalColumns = 12,\n  rowPosition,\n}: ResizeIndicatorProps) => {\n  // Calculate available resize positions accounting for grid gaps\n  const availablePositions = React.useMemo(() => {\n    const rowWidth = rowPosition?.width || 800;\n\n    return [4, 6, 8].map((left) => {\n      const right = totalColumns - left;\n      const basePosition = (left / totalColumns) * 100;\n      const gapAdjustment = calculateGapAdjustment(rowWidth, left);\n      const positionPercent = basePosition + gapAdjustment;\n\n      return { left, right, positionPercent };\n    });\n  }, [totalColumns, rowPosition?.width]);\n\n  // Find the current position index\n  const currentPositionIndex = React.useMemo(() => {\n    return availablePositions.findIndex(\n      (pos) => pos.left === currentLeftWidth && pos.right === currentRightWidth\n    );\n  }, [availablePositions, currentLeftWidth, currentRightWidth]);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  // Calculate positioning - indicator always spans the full row width\n  const indicatorTop = rowPosition\n    ? rowPosition.top - INDICATOR_SIZE\n    : Math.max(10, position.top + position.height / 2 - 40);\n  const isCurrent = (index: number) => index === currentPositionIndex;\n  const isActive = (index: number) => Math.abs(index - currentPositionIndex) <= 1;\n\n  return (\n    <IndicatorContainer\n      $isVisible={isVisible}\n      style={{\n        left: rowPosition ? `${rowPosition.left}px` : `${position.left + 10}px`,\n        top: `${indicatorTop}px`,\n        width: rowPosition ? `${rowPosition.width}px` : 'auto',\n      }}\n    >\n      {availablePositions.map((pos, index) => {\n        return (\n          <DotContainer key={`${pos.left}-${pos.right}`} $position={pos.positionPercent}>\n            <Dot $isActive={isActive(index)} $isCurrent={isCurrent(index)} />\n          </DotContainer>\n        );\n      })}\n    </IndicatorContainer>\n  );\n};\nconst ResizeHandleContainer = styled(Box)<{ $isDragging?: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${INDICATOR_SIZE}px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n  cursor: col-resize;\n  background-color: ${({ $isDragging }) => ($isDragging ? 'rgba(0, 0, 0, 0.1)' : 'transparent')};\n`;\n\nconst ResizeHandleBar = styled(Box)<{ $isDragging?: boolean }>`\n  width: 2px;\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.primary500};\n  border-radius: 1px;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n\n  ${ResizeHandleContainer}:hover & {\n    opacity: 0.8;\n  }\n\n  ${({ $isDragging }) => $isDragging && `opacity: 0.8;`}\n`;\n\ninterface WidgetResizeHandleProps {\n  leftWidgetId: string;\n  rightWidgetId: string;\n  leftWidgetWidth: number;\n  rightWidgetWidth: number;\n  onResize: (\n    leftWidgetId: string,\n    rightWidgetId: string,\n    newLeftWidth: number,\n    newRightWidth: number\n  ) => void;\n  saveLayout: () => void;\n  filteredWidgets?: WidgetWithUID[];\n}\n\nexport const WidgetResizeHandle = ({\n  leftWidgetId,\n  rightWidgetId,\n  leftWidgetWidth,\n  rightWidgetWidth,\n  onResize,\n  saveLayout,\n}: WidgetResizeHandleProps) => {\n  const [state, setState] = React.useState({\n    isDragging: false,\n    startX: 0,\n    startLeftWidth: 0,\n    startRightWidth: 0,\n    position: { left: 0, top: 0, height: 0 },\n    lastResizeValues: { leftWidth: 0, rightWidth: 0 },\n    currentResizeValues: { leftWidth: leftWidgetWidth, rightWidth: rightWidgetWidth },\n    rowPosition: null as { left: number; top: number; width: number; height: number } | null,\n  });\n\n  const throttleRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const handleResize = React.useCallback(\n    (deltaColumns: number) => {\n      // Only resize if there's significant movement (dead zone)\n      if (Math.abs(deltaColumns) < 0.25) {\n        return;\n      }\n\n      // Calculate target widths\n      const { targetLeftWidth, targetRightWidth } = calculateTargetWidths(\n        deltaColumns,\n        state.startLeftWidth,\n        state.startRightWidth\n      );\n\n      // Validate the resize\n      if (!isValidResize(targetLeftWidth, targetRightWidth)) {\n        return;\n      }\n\n      // Update current resize values for the indicator\n      setState((prev) => ({\n        ...prev,\n        currentResizeValues: { leftWidth: targetLeftWidth, rightWidth: targetRightWidth },\n      }));\n\n      // Only trigger resize if values have changed\n      if (shouldTriggerResize(targetLeftWidth, targetRightWidth, state.lastResizeValues)) {\n        setState((prev) => ({\n          ...prev,\n          lastResizeValues: { leftWidth: targetLeftWidth, rightWidth: targetRightWidth },\n        }));\n        onResize(leftWidgetId, rightWidgetId, targetLeftWidth, targetRightWidth);\n      }\n    },\n    [\n      leftWidgetId,\n      rightWidgetId,\n      onResize,\n      state.startLeftWidth,\n      state.startRightWidth,\n      state.lastResizeValues,\n    ]\n  );\n\n  const handlePointerMove = React.useCallback(\n    (e: PointerEvent) => {\n      if (!state.isDragging) return;\n\n      // Clear any existing throttle timeout\n      if (throttleRef.current) {\n        clearTimeout(throttleRef.current);\n      }\n\n      // Throttle the resize calls to prevent excessive updates\n      throttleRef.current = setTimeout(() => {\n        const deltaX = e.clientX - state.startX;\n        const threshold = 120; // Pixels per column unit\n        const deltaColumns = Math.round(deltaX / threshold);\n\n        handleResize(deltaColumns);\n      }, 0);\n    },\n    [state.isDragging, state.startX, handleResize]\n  );\n\n  // Handle pointer up to end drag\n  const handlePointerUp = React.useCallback(() => {\n    // Clear any pending throttle timeout\n    if (throttleRef.current) {\n      clearTimeout(throttleRef.current);\n      throttleRef.current = null;\n    }\n\n    // Save the layout\n    saveLayout();\n\n    // Reset last resize values and stop dragging\n    setState((prev) => ({\n      ...prev,\n      lastResizeValues: { leftWidth: 0, rightWidth: 0 },\n      currentResizeValues: { leftWidth: leftWidgetWidth, rightWidth: rightWidgetWidth },\n      isDragging: false,\n    }));\n  }, [leftWidgetWidth, rightWidgetWidth, saveLayout]);\n\n  // Handle pointer down to start drag\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      setState((prev) => ({\n        ...prev,\n        isDragging: true,\n        startX: e.clientX,\n        startLeftWidth: leftWidgetWidth,\n        startRightWidth: rightWidgetWidth,\n      }));\n    },\n    [leftWidgetWidth, rightWidgetWidth]\n  );\n\n  // Set up drag event listeners\n  React.useEffect(() => {\n    if (state.isDragging) {\n      document.addEventListener('pointermove', handlePointerMove);\n      document.addEventListener('pointerup', handlePointerUp);\n\n      return () => {\n        document.removeEventListener('pointermove', handlePointerMove);\n        document.removeEventListener('pointerup', handlePointerUp);\n      };\n    }\n  }, [state.isDragging, handlePointerMove, handlePointerUp]);\n\n  // Set up resize observer for position updates - watching widgets and grid container\n  React.useLayoutEffect(() => {\n    const leftElement = getWidgetElement(leftWidgetId);\n    const rightElement = getWidgetElement(rightWidgetId);\n    const containerElement = getWidgetGridContainer();\n\n    const updatePosition = () => {\n      const position = calculateResizeHandlePosition(leftElement, rightElement, containerElement);\n      const rowPosition = calculateRowBounds(leftElement, rightElement, containerElement);\n\n      setState((prev) => ({\n        ...prev,\n        position,\n        rowPosition,\n      }));\n    };\n\n    // Create ResizeObserver to watch widgets and grid container\n    const resizeObserver = new ResizeObserver(updatePosition);\n\n    // Observe all relevant elements\n    if (leftElement) resizeObserver.observe(leftElement);\n    if (rightElement) resizeObserver.observe(rightElement);\n    if (containerElement) resizeObserver.observe(containerElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [leftWidgetId, rightWidgetId]);\n\n  // Cleanup throttle timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (throttleRef.current) {\n        clearTimeout(throttleRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <>\n      <ResizeHandleContainer\n        onPointerDown={handlePointerDown}\n        style={{\n          transform: `translate(${state.position.left}px, ${state.position.top}px)`,\n          height: `${state.position.height}px`,\n        }}\n      >\n        <ResizeHandleBar $isDragging={state.isDragging} />\n      </ResizeHandleContainer>\n\n      <ResizeIndicator\n        isVisible={state.isDragging}\n        position={state.position}\n        currentLeftWidth={state.currentResizeValues.leftWidth}\n        currentRightWidth={state.currentResizeValues.rightWidth}\n        rowPosition={state.rowPosition}\n      />\n    </>\n  );\n};\n"],"names":["INDICATOR_SIZE","IndicatorContainer","styled","Box","$isVisible","DotContainer","$position","Dot","$isActive","$isCurrent","theme","colors","primary600","primary500","neutral300","primary100","calculateGapAdjustment","rowWidth","leftColumns","dotWidth","gapAdjustmentPixels","gapAdjustmentPercent","ResizeIndicator","isVisible","position","currentLeftWidth","currentRightWidth","totalColumns","rowPosition","availablePositions","React","useMemo","width","map","left","right","basePosition","gapAdjustment","positionPercent","currentPositionIndex","findIndex","pos","indicatorTop","top","Math","max","height","isCurrent","index","isActive","abs","_jsx","style","ResizeHandleContainer","$isDragging","ResizeHandleBar","WidgetResizeHandle","leftWidgetId","rightWidgetId","leftWidgetWidth","rightWidgetWidth","onResize","saveLayout","state","setState","useState","isDragging","startX","startLeftWidth","startRightWidth","lastResizeValues","leftWidth","rightWidth","currentResizeValues","throttleRef","useRef","handleResize","useCallback","deltaColumns","targetLeftWidth","targetRightWidth","calculateTargetWidths","isValidResize","prev","shouldTriggerResize","handlePointerMove","e","current","clearTimeout","setTimeout","deltaX","clientX","threshold","round","handlePointerUp","handlePointerDown","preventDefault","stopPropagation","useEffect","document","addEventListener","removeEventListener","useLayoutEffect","leftElement","getWidgetElement","rightElement","containerElement","getWidgetGridContainer","updatePosition","calculateResizeHandlePosition","calculateRowBounds","resizeObserver","ResizeObserver","observe","disconnect","_jsxs","_Fragment","onPointerDown","transform"],"mappings":"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"}

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

@@ -0,0 +1,332 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { calculateTargetWidths, isValidResize, shouldTriggerResize, calculateResizeHandlePosition, calculateRowBounds } from '../utils/resizeHandlers.mjs';
+import { getWidgetElement, getWidgetGridContainer } from '../utils/widgetLayout.mjs';
+
+const INDICATOR_SIZE = 20;
+const IndicatorContainer = styled(Box)`
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  opacity: ${({ $isVisible })=>$isVisible ? 1 : 0};
+  transition: opacity 0.2s ease-in-out;
+  background: transparent;
+  height: ${INDICATOR_SIZE}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DotContainer = styled(Box)`
+  position: absolute;
+  top: 50%;
+  left: ${({ $position })=>$position}%;
+  transform: translate(-50%, -50%);
+`;
+const Dot = styled(Box)`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${({ $isActive, $isCurrent, theme })=>{
+    if ($isCurrent) return theme.colors.primary600;
+    if ($isActive) return theme.colors.primary500;
+    return theme.colors.neutral300;
+}};
+  transition: all 0.2s ease-in-out;
+  box-shadow: ${({ $isCurrent, theme })=>$isCurrent ? `0 0 0 3px ${theme.colors.primary100}` : 'none'};
+  transform: ${({ $isCurrent })=>$isCurrent ? 'scale(1.2)' : 'scale(1)'};
+`;
+const calculateGapAdjustment = (rowWidth, leftColumns)=>{
+    const dotWidth = 6;
+    const gapAdjustmentPixels = dotWidth / 2; // Half dot width to center on boundary
+    const gapAdjustmentPercent = gapAdjustmentPixels / rowWidth * 100;
+    // Different adjustments for different positions
+    switch(leftColumns){
+        case 4:
+            return -gapAdjustmentPercent; // Left dot
+        case 8:
+            return gapAdjustmentPercent; // Right dot
+        default:
+            return 0;
+    }
+};
+const ResizeIndicator = ({ isVisible, position, currentLeftWidth, currentRightWidth, totalColumns = 12, rowPosition })=>{
+    // Calculate available resize positions accounting for grid gaps
+    const availablePositions = React.useMemo(()=>{
+        const rowWidth = rowPosition?.width || 800;
+        return [
+            4,
+            6,
+            8
+        ].map((left)=>{
+            const right = totalColumns - left;
+            const basePosition = left / totalColumns * 100;
+            const gapAdjustment = calculateGapAdjustment(rowWidth, left);
+            const positionPercent = basePosition + gapAdjustment;
+            return {
+                left,
+                right,
+                positionPercent
+            };
+        });
+    }, [
+        totalColumns,
+        rowPosition?.width
+    ]);
+    // Find the current position index
+    const currentPositionIndex = React.useMemo(()=>{
+        return availablePositions.findIndex((pos)=>pos.left === currentLeftWidth && pos.right === currentRightWidth);
+    }, [
+        availablePositions,
+        currentLeftWidth,
+        currentRightWidth
+    ]);
+    if (!isVisible) {
+        return null;
+    }
+    // Calculate positioning - indicator always spans the full row width
+    const indicatorTop = rowPosition ? rowPosition.top - INDICATOR_SIZE : Math.max(10, position.top + position.height / 2 - 40);
+    const isCurrent = (index)=>index === currentPositionIndex;
+    const isActive = (index)=>Math.abs(index - currentPositionIndex) <= 1;
+    return /*#__PURE__*/ jsx(IndicatorContainer, {
+        $isVisible: isVisible,
+        style: {
+            left: rowPosition ? `${rowPosition.left}px` : `${position.left + 10}px`,
+            top: `${indicatorTop}px`,
+            width: rowPosition ? `${rowPosition.width}px` : 'auto'
+        },
+        children: availablePositions.map((pos, index)=>{
+            return /*#__PURE__*/ jsx(DotContainer, {
+                $position: pos.positionPercent,
+                children: /*#__PURE__*/ jsx(Dot, {
+                    $isActive: isActive(index),
+                    $isCurrent: isCurrent(index)
+                })
+            }, `${pos.left}-${pos.right}`);
+        })
+    });
+};
+const ResizeHandleContainer = styled(Box)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: ${INDICATOR_SIZE}px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+  cursor: col-resize;
+  background-color: ${({ $isDragging })=>$isDragging ? 'rgba(0, 0, 0, 0.1)' : 'transparent'};
+`;
+const ResizeHandleBar = styled(Box)`
+  width: 2px;
+  height: 100%;
+  background-color: ${({ theme })=>theme.colors.primary500};
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  ${ResizeHandleContainer}:hover & {
+    opacity: 0.8;
+  }
+
+  ${({ $isDragging })=>$isDragging && `opacity: 0.8;`}
+`;
+const WidgetResizeHandle = ({ leftWidgetId, rightWidgetId, leftWidgetWidth, rightWidgetWidth, onResize, saveLayout })=>{
+    const [state, setState] = React.useState({
+        isDragging: false,
+        startX: 0,
+        startLeftWidth: 0,
+        startRightWidth: 0,
+        position: {
+            left: 0,
+            top: 0,
+            height: 0
+        },
+        lastResizeValues: {
+            leftWidth: 0,
+            rightWidth: 0
+        },
+        currentResizeValues: {
+            leftWidth: leftWidgetWidth,
+            rightWidth: rightWidgetWidth
+        },
+        rowPosition: null
+    });
+    const throttleRef = React.useRef(null);
+    const handleResize = React.useCallback((deltaColumns)=>{
+        // Only resize if there's significant movement (dead zone)
+        if (Math.abs(deltaColumns) < 0.25) {
+            return;
+        }
+        // Calculate target widths
+        const { targetLeftWidth, targetRightWidth } = calculateTargetWidths(deltaColumns, state.startLeftWidth, state.startRightWidth);
+        // Validate the resize
+        if (!isValidResize(targetLeftWidth, targetRightWidth)) {
+            return;
+        }
+        // Update current resize values for the indicator
+        setState((prev)=>({
+                ...prev,
+                currentResizeValues: {
+                    leftWidth: targetLeftWidth,
+                    rightWidth: targetRightWidth
+                }
+            }));
+        // Only trigger resize if values have changed
+        if (shouldTriggerResize(targetLeftWidth, targetRightWidth, state.lastResizeValues)) {
+            setState((prev)=>({
+                    ...prev,
+                    lastResizeValues: {
+                        leftWidth: targetLeftWidth,
+                        rightWidth: targetRightWidth
+                    }
+                }));
+            onResize(leftWidgetId, rightWidgetId, targetLeftWidth, targetRightWidth);
+        }
+    }, [
+        leftWidgetId,
+        rightWidgetId,
+        onResize,
+        state.startLeftWidth,
+        state.startRightWidth,
+        state.lastResizeValues
+    ]);
+    const handlePointerMove = React.useCallback((e)=>{
+        if (!state.isDragging) return;
+        // Clear any existing throttle timeout
+        if (throttleRef.current) {
+            clearTimeout(throttleRef.current);
+        }
+        // Throttle the resize calls to prevent excessive updates
+        throttleRef.current = setTimeout(()=>{
+            const deltaX = e.clientX - state.startX;
+            const threshold = 120; // Pixels per column unit
+            const deltaColumns = Math.round(deltaX / threshold);
+            handleResize(deltaColumns);
+        }, 0);
+    }, [
+        state.isDragging,
+        state.startX,
+        handleResize
+    ]);
+    // Handle pointer up to end drag
+    const handlePointerUp = React.useCallback(()=>{
+        // Clear any pending throttle timeout
+        if (throttleRef.current) {
+            clearTimeout(throttleRef.current);
+            throttleRef.current = null;
+        }
+        // Save the layout
+        saveLayout();
+        // Reset last resize values and stop dragging
+        setState((prev)=>({
+                ...prev,
+                lastResizeValues: {
+                    leftWidth: 0,
+                    rightWidth: 0
+                },
+                currentResizeValues: {
+                    leftWidth: leftWidgetWidth,
+                    rightWidth: rightWidgetWidth
+                },
+                isDragging: false
+            }));
+    }, [
+        leftWidgetWidth,
+        rightWidgetWidth,
+        saveLayout
+    ]);
+    // Handle pointer down to start drag
+    const handlePointerDown = React.useCallback((e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        setState((prev)=>({
+                ...prev,
+                isDragging: true,
+                startX: e.clientX,
+                startLeftWidth: leftWidgetWidth,
+                startRightWidth: rightWidgetWidth
+            }));
+    }, [
+        leftWidgetWidth,
+        rightWidgetWidth
+    ]);
+    // Set up drag event listeners
+    React.useEffect(()=>{
+        if (state.isDragging) {
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+            return ()=>{
+                document.removeEventListener('pointermove', handlePointerMove);
+                document.removeEventListener('pointerup', handlePointerUp);
+            };
+        }
+    }, [
+        state.isDragging,
+        handlePointerMove,
+        handlePointerUp
+    ]);
+    // Set up resize observer for position updates - watching widgets and grid container
+    React.useLayoutEffect(()=>{
+        const leftElement = getWidgetElement(leftWidgetId);
+        const rightElement = getWidgetElement(rightWidgetId);
+        const containerElement = getWidgetGridContainer();
+        const updatePosition = ()=>{
+            const position = calculateResizeHandlePosition(leftElement, rightElement, containerElement);
+            const rowPosition = calculateRowBounds(leftElement, rightElement, containerElement);
+            setState((prev)=>({
+                    ...prev,
+                    position,
+                    rowPosition
+                }));
+        };
+        // Create ResizeObserver to watch widgets and grid container
+        const resizeObserver = new ResizeObserver(updatePosition);
+        // Observe all relevant elements
+        if (leftElement) resizeObserver.observe(leftElement);
+        if (rightElement) resizeObserver.observe(rightElement);
+        if (containerElement) resizeObserver.observe(containerElement);
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        leftWidgetId,
+        rightWidgetId
+    ]);
+    // Cleanup throttle timeout on unmount
+    React.useEffect(()=>{
+        return ()=>{
+            if (throttleRef.current) {
+                clearTimeout(throttleRef.current);
+            }
+        };
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(ResizeHandleContainer, {
+                onPointerDown: handlePointerDown,
+                style: {
+                    transform: `translate(${state.position.left}px, ${state.position.top}px)`,
+                    height: `${state.position.height}px`
+                },
+                children: /*#__PURE__*/ jsx(ResizeHandleBar, {
+                    $isDragging: state.isDragging
+                })
+            }),
+            /*#__PURE__*/ jsx(ResizeIndicator, {
+                isVisible: state.isDragging,
+                position: state.position,
+                currentLeftWidth: state.currentResizeValues.leftWidth,
+                currentRightWidth: state.currentResizeValues.rightWidth,
+                rowPosition: state.rowPosition
+            })
+        ]
+    });
+};
+
+export { WidgetResizeHandle };
+//# sourceMappingURL=ResizeIndicator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeIndicator.mjs","sources":["../../../../../admin/src/components/ResizeIndicator.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport {\n  isValidResize,\n  calculateTargetWidths,\n  shouldTriggerResize,\n  calculateResizeHandlePosition,\n  calculateRowBounds,\n} from '../utils/resizeHandlers';\nimport { getWidgetElement, getWidgetGridContainer } from '../utils/widgetLayout';\n\nimport type { WidgetWithUID } from '../core/apis/Widgets';\n\nconst INDICATOR_SIZE = 20;\n\ninterface ResizeIndicatorProps {\n  isVisible: boolean;\n  position: { left: number; top: number; height: number };\n  currentLeftWidth: number;\n  currentRightWidth: number;\n  totalColumns?: number;\n  rowPosition?: { left: number; top: number; width: number; height: number } | null;\n}\n\nconst IndicatorContainer = styled(Box)<{ $isVisible: boolean }>`\n  position: absolute;\n  z-index: 1;\n  pointer-events: none;\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.2s ease-in-out;\n  background: transparent;\n  height: ${INDICATOR_SIZE}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst DotContainer = styled(Box)<{ $position: number }>`\n  position: absolute;\n  top: 50%;\n  left: ${({ $position }) => $position}%;\n  transform: translate(-50%, -50%);\n`;\n\nconst Dot = styled(Box)<{ $isActive: boolean; $isCurrent: boolean }>`\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ${({ $isActive, $isCurrent, theme }) => {\n    if ($isCurrent) return theme.colors.primary600;\n    if ($isActive) return theme.colors.primary500;\n    return theme.colors.neutral300;\n  }};\n  transition: all 0.2s ease-in-out;\n  box-shadow: ${({ $isCurrent, theme }) =>\n    $isCurrent ? `0 0 0 3px ${theme.colors.primary100}` : 'none'};\n  transform: ${({ $isCurrent }) => ($isCurrent ? 'scale(1.2)' : 'scale(1)')};\n`;\n\nconst calculateGapAdjustment = (rowWidth: number, leftColumns: number): number => {\n  const dotWidth = 6;\n  const gapAdjustmentPixels = dotWidth / 2; // Half dot width to center on boundary\n  const gapAdjustmentPercent = (gapAdjustmentPixels / rowWidth) * 100;\n\n  // Different adjustments for different positions\n  switch (leftColumns) {\n    case 4:\n      return -gapAdjustmentPercent; // Left dot\n    case 8:\n      return gapAdjustmentPercent; // Right dot\n    default: // Center dot\n      return 0;\n  }\n};\n\nconst ResizeIndicator = ({\n  isVisible,\n  position,\n  currentLeftWidth,\n  currentRightWidth,\n  totalColumns = 12,\n  rowPosition,\n}: ResizeIndicatorProps) => {\n  // Calculate available resize positions accounting for grid gaps\n  const availablePositions = React.useMemo(() => {\n    const rowWidth = rowPosition?.width || 800;\n\n    return [4, 6, 8].map((left) => {\n      const right = totalColumns - left;\n      const basePosition = (left / totalColumns) * 100;\n      const gapAdjustment = calculateGapAdjustment(rowWidth, left);\n      const positionPercent = basePosition + gapAdjustment;\n\n      return { left, right, positionPercent };\n    });\n  }, [totalColumns, rowPosition?.width]);\n\n  // Find the current position index\n  const currentPositionIndex = React.useMemo(() => {\n    return availablePositions.findIndex(\n      (pos) => pos.left === currentLeftWidth && pos.right === currentRightWidth\n    );\n  }, [availablePositions, currentLeftWidth, currentRightWidth]);\n\n  if (!isVisible) {\n    return null;\n  }\n\n  // Calculate positioning - indicator always spans the full row width\n  const indicatorTop = rowPosition\n    ? rowPosition.top - INDICATOR_SIZE\n    : Math.max(10, position.top + position.height / 2 - 40);\n  const isCurrent = (index: number) => index === currentPositionIndex;\n  const isActive = (index: number) => Math.abs(index - currentPositionIndex) <= 1;\n\n  return (\n    <IndicatorContainer\n      $isVisible={isVisible}\n      style={{\n        left: rowPosition ? `${rowPosition.left}px` : `${position.left + 10}px`,\n        top: `${indicatorTop}px`,\n        width: rowPosition ? `${rowPosition.width}px` : 'auto',\n      }}\n    >\n      {availablePositions.map((pos, index) => {\n        return (\n          <DotContainer key={`${pos.left}-${pos.right}`} $position={pos.positionPercent}>\n            <Dot $isActive={isActive(index)} $isCurrent={isCurrent(index)} />\n          </DotContainer>\n        );\n      })}\n    </IndicatorContainer>\n  );\n};\nconst ResizeHandleContainer = styled(Box)<{ $isDragging?: boolean }>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${INDICATOR_SIZE}px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.8;\n  transition: opacity 0.2s ease-in-out;\n  cursor: col-resize;\n  background-color: ${({ $isDragging }) => ($isDragging ? 'rgba(0, 0, 0, 0.1)' : 'transparent')};\n`;\n\nconst ResizeHandleBar = styled(Box)<{ $isDragging?: boolean }>`\n  width: 2px;\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.primary500};\n  border-radius: 1px;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n\n  ${ResizeHandleContainer}:hover & {\n    opacity: 0.8;\n  }\n\n  ${({ $isDragging }) => $isDragging && `opacity: 0.8;`}\n`;\n\ninterface WidgetResizeHandleProps {\n  leftWidgetId: string;\n  rightWidgetId: string;\n  leftWidgetWidth: number;\n  rightWidgetWidth: number;\n  onResize: (\n    leftWidgetId: string,\n    rightWidgetId: string,\n    newLeftWidth: number,\n    newRightWidth: number\n  ) => void;\n  saveLayout: () => void;\n  filteredWidgets?: WidgetWithUID[];\n}\n\nexport const WidgetResizeHandle = ({\n  leftWidgetId,\n  rightWidgetId,\n  leftWidgetWidth,\n  rightWidgetWidth,\n  onResize,\n  saveLayout,\n}: WidgetResizeHandleProps) => {\n  const [state, setState] = React.useState({\n    isDragging: false,\n    startX: 0,\n    startLeftWidth: 0,\n    startRightWidth: 0,\n    position: { left: 0, top: 0, height: 0 },\n    lastResizeValues: { leftWidth: 0, rightWidth: 0 },\n    currentResizeValues: { leftWidth: leftWidgetWidth, rightWidth: rightWidgetWidth },\n    rowPosition: null as { left: number; top: number; width: number; height: number } | null,\n  });\n\n  const throttleRef = React.useRef<NodeJS.Timeout | null>(null);\n\n  const handleResize = React.useCallback(\n    (deltaColumns: number) => {\n      // Only resize if there's significant movement (dead zone)\n      if (Math.abs(deltaColumns) < 0.25) {\n        return;\n      }\n\n      // Calculate target widths\n      const { targetLeftWidth, targetRightWidth } = calculateTargetWidths(\n        deltaColumns,\n        state.startLeftWidth,\n        state.startRightWidth\n      );\n\n      // Validate the resize\n      if (!isValidResize(targetLeftWidth, targetRightWidth)) {\n        return;\n      }\n\n      // Update current resize values for the indicator\n      setState((prev) => ({\n        ...prev,\n        currentResizeValues: { leftWidth: targetLeftWidth, rightWidth: targetRightWidth },\n      }));\n\n      // Only trigger resize if values have changed\n      if (shouldTriggerResize(targetLeftWidth, targetRightWidth, state.lastResizeValues)) {\n        setState((prev) => ({\n          ...prev,\n          lastResizeValues: { leftWidth: targetLeftWidth, rightWidth: targetRightWidth },\n        }));\n        onResize(leftWidgetId, rightWidgetId, targetLeftWidth, targetRightWidth);\n      }\n    },\n    [\n      leftWidgetId,\n      rightWidgetId,\n      onResize,\n      state.startLeftWidth,\n      state.startRightWidth,\n      state.lastResizeValues,\n    ]\n  );\n\n  const handlePointerMove = React.useCallback(\n    (e: PointerEvent) => {\n      if (!state.isDragging) return;\n\n      // Clear any existing throttle timeout\n      if (throttleRef.current) {\n        clearTimeout(throttleRef.current);\n      }\n\n      // Throttle the resize calls to prevent excessive updates\n      throttleRef.current = setTimeout(() => {\n        const deltaX = e.clientX - state.startX;\n        const threshold = 120; // Pixels per column unit\n        const deltaColumns = Math.round(deltaX / threshold);\n\n        handleResize(deltaColumns);\n      }, 0);\n    },\n    [state.isDragging, state.startX, handleResize]\n  );\n\n  // Handle pointer up to end drag\n  const handlePointerUp = React.useCallback(() => {\n    // Clear any pending throttle timeout\n    if (throttleRef.current) {\n      clearTimeout(throttleRef.current);\n      throttleRef.current = null;\n    }\n\n    // Save the layout\n    saveLayout();\n\n    // Reset last resize values and stop dragging\n    setState((prev) => ({\n      ...prev,\n      lastResizeValues: { leftWidth: 0, rightWidth: 0 },\n      currentResizeValues: { leftWidth: leftWidgetWidth, rightWidth: rightWidgetWidth },\n      isDragging: false,\n    }));\n  }, [leftWidgetWidth, rightWidgetWidth, saveLayout]);\n\n  // Handle pointer down to start drag\n  const handlePointerDown = React.useCallback(\n    (e: React.PointerEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      setState((prev) => ({\n        ...prev,\n        isDragging: true,\n        startX: e.clientX,\n        startLeftWidth: leftWidgetWidth,\n        startRightWidth: rightWidgetWidth,\n      }));\n    },\n    [leftWidgetWidth, rightWidgetWidth]\n  );\n\n  // Set up drag event listeners\n  React.useEffect(() => {\n    if (state.isDragging) {\n      document.addEventListener('pointermove', handlePointerMove);\n      document.addEventListener('pointerup', handlePointerUp);\n\n      return () => {\n        document.removeEventListener('pointermove', handlePointerMove);\n        document.removeEventListener('pointerup', handlePointerUp);\n      };\n    }\n  }, [state.isDragging, handlePointerMove, handlePointerUp]);\n\n  // Set up resize observer for position updates - watching widgets and grid container\n  React.useLayoutEffect(() => {\n    const leftElement = getWidgetElement(leftWidgetId);\n    const rightElement = getWidgetElement(rightWidgetId);\n    const containerElement = getWidgetGridContainer();\n\n    const updatePosition = () => {\n      const position = calculateResizeHandlePosition(leftElement, rightElement, containerElement);\n      const rowPosition = calculateRowBounds(leftElement, rightElement, containerElement);\n\n      setState((prev) => ({\n        ...prev,\n        position,\n        rowPosition,\n      }));\n    };\n\n    // Create ResizeObserver to watch widgets and grid container\n    const resizeObserver = new ResizeObserver(updatePosition);\n\n    // Observe all relevant elements\n    if (leftElement) resizeObserver.observe(leftElement);\n    if (rightElement) resizeObserver.observe(rightElement);\n    if (containerElement) resizeObserver.observe(containerElement);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [leftWidgetId, rightWidgetId]);\n\n  // Cleanup throttle timeout on unmount\n  React.useEffect(() => {\n    return () => {\n      if (throttleRef.current) {\n        clearTimeout(throttleRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <>\n      <ResizeHandleContainer\n        onPointerDown={handlePointerDown}\n        style={{\n          transform: `translate(${state.position.left}px, ${state.position.top}px)`,\n          height: `${state.position.height}px`,\n        }}\n      >\n        <ResizeHandleBar $isDragging={state.isDragging} />\n      </ResizeHandleContainer>\n\n      <ResizeIndicator\n        isVisible={state.isDragging}\n        position={state.position}\n        currentLeftWidth={state.currentResizeValues.leftWidth}\n        currentRightWidth={state.currentResizeValues.rightWidth}\n        rowPosition={state.rowPosition}\n      />\n    </>\n  );\n};\n"],"names":["INDICATOR_SIZE","IndicatorContainer","styled","Box","$isVisible","DotContainer","$position","Dot","$isActive","$isCurrent","theme","colors","primary600","primary500","neutral300","primary100","calculateGapAdjustment","rowWidth","leftColumns","dotWidth","gapAdjustmentPixels","gapAdjustmentPercent","ResizeIndicator","isVisible","position","currentLeftWidth","currentRightWidth","totalColumns","rowPosition","availablePositions","React","useMemo","width","map","left","right","basePosition","gapAdjustment","positionPercent","currentPositionIndex","findIndex","pos","indicatorTop","top","Math","max","height","isCurrent","index","isActive","abs","_jsx","style","ResizeHandleContainer","$isDragging","ResizeHandleBar","WidgetResizeHandle","leftWidgetId","rightWidgetId","leftWidgetWidth","rightWidgetWidth","onResize","saveLayout","state","setState","useState","isDragging","startX","startLeftWidth","startRightWidth","lastResizeValues","leftWidth","rightWidth","currentResizeValues","throttleRef","useRef","handleResize","useCallback","deltaColumns","targetLeftWidth","targetRightWidth","calculateTargetWidths","isValidResize","prev","shouldTriggerResize","handlePointerMove","e","current","clearTimeout","setTimeout","deltaX","clientX","threshold","round","handlePointerUp","handlePointerDown","preventDefault","stopPropagation","useEffect","document","addEventListener","removeEventListener","useLayoutEffect","leftElement","getWidgetElement","rightElement","containerElement","getWidgetGridContainer","updatePosition","calculateResizeHandlePosition","calculateRowBounds","resizeObserver","ResizeObserver","observe","disconnect","_jsxs","_Fragment","onPointerDown","transform"],"mappings":"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"}

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

@@ -0,0 +1,216 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactDnd = require('react-dnd');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var styled = require('styled-components');
+var Tracking = require('../features/Tracking.js');
+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 WidgetActions = styled(designSystem.Flex)`
+  display: flex;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: none;
+  }
+`;
+const DragIconButton = styled(designSystem.IconButton)`
+  display: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    display: flex;
+  }
+`;
+const WidgetContainer = styled(designSystem.Flex)`
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${WidgetActions} {
+      display: flex;
+    }
+  }
+
+  &:focus-within ${WidgetActions} {
+    display: flex;
+  }
+
+  &:focus-within ${DragIconButton} {
+    pointer-events: none;
+
+    ${({ theme })=>theme.breakpoints.medium} {
+      pointer-events: auto;
+    }
+  }
+`;
+const WidgetRoot = ({ title, icon = icons.PuzzlePiece, children, link, uid, findWidget, deleteWidget, onDragStart, onDragEnd, component })=>{
+    const { trackUsage } = Tracking.useTracking();
+    const { formatMessage } = reactIntl.useIntl();
+    const Icon = icon;
+    const handleClickOnLink = ()=>{
+        trackUsage('didOpenHomeWidgetLink', {
+            widgetUID: uid
+        });
+    };
+    const handleDeleteWidget = ()=>{
+        deleteWidget?.(uid);
+    };
+    const [, drag, preview] = reactDnd.useDrag(()=>({
+            type: 'widget',
+            item: ()=>{
+                onDragStart?.(uid);
+                return {
+                    id: uid,
+                    originalIndex: findWidget?.(uid)?.index ?? 0,
+                    title,
+                    icon,
+                    link,
+                    component
+                };
+            },
+            collect: (monitor)=>({
+                    isDragging: monitor.isDragging()
+                }),
+            end: ()=>{
+                onDragEnd?.();
+            }
+        }), [
+        uid,
+        findWidget,
+        onDragStart,
+        onDragEnd,
+        title,
+        icon,
+        link,
+        component
+    ]);
+    // Suppress default drag preview
+    React__namespace.useEffect(()=>{
+        preview(reactDndHtml5Backend.getEmptyImage(), {
+            captureDraggingState: true
+        });
+    }, [
+        preview
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(WidgetContainer, {
+        width: "100%",
+        hasRadius: true,
+        direction: "column",
+        alignItems: "flex-start",
+        background: 'neutral0',
+        borderColor: 'neutral150',
+        shadow: "tableShadow",
+        tag: "section",
+        gap: 4,
+        padding: 6,
+        position: "relative",
+        "aria-labelledby": uid,
+        tabIndex: 0,
+        [widgetLayout.WIDGET_DATA_ATTRIBUTES.WIDGET_ID]: uid,
+        style: {
+            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "row",
+                gap: 2,
+                width: "100%",
+                tag: "header",
+                alignItems: "center",
+                minHeight: "2.25rem",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        gap: 2,
+                        marginRight: "auto",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(Icon, {
+                                fill: "neutral500",
+                                "aria-hidden": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                textColor: "neutral500",
+                                variant: "sigma",
+                                tag: "h2",
+                                id: uid,
+                                children: formatMessage(title)
+                            })
+                        ]
+                    }),
+                    link && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        tag: reactRouterDom.Link,
+                        variant: "omega",
+                        textColor: "primary600",
+                        style: {
+                            textDecoration: 'none'
+                        },
+                        textAlign: "right",
+                        to: link.href,
+                        onClick: handleClickOnLink,
+                        children: formatMessage(link.label)
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(WidgetActions, {
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                variant: "danger-light",
+                                size: "XS",
+                                onClick: handleDeleteWidget,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.delete',
+                                    defaultMessage: 'Delete'
+                                }),
+                                cursor: "pointer",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(DragIconButton, {
+                                variant: "tertiary",
+                                size: "XS",
+                                ref: drag,
+                                tabIndex: -1,
+                                label: formatMessage({
+                                    id: 'HomePage.widget.drag',
+                                    defaultMessage: 'Drag to move'
+                                }),
+                                cursor: "grab",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Drag, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.ScrollArea, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                    width: "100%",
+                    height: "261px",
+                    overflow: "auto",
+                    tag: "main",
+                    children: children
+                })
+            })
+        ]
+    });
+};
+
+exports.WidgetRoot = WidgetRoot;
+//# sourceMappingURL=WidgetRoot.js.map