@wordpress/grid 0.1.0

package/build/dashboard-lanes/index.cjs

@@ -0,0 +1,558 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/grid/src/dashboard-lanes/index.tsx
+var dashboard_lanes_exports = {};
+__export(dashboard_lanes_exports, {
+  DashboardLanes: () => DashboardLanes
+});
+module.exports = __toCommonJS(dashboard_lanes_exports);
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_clsx = __toESM(require("clsx"));
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_lanes_item = require("./lanes-item.cjs");
+var import_use_lane_placement = require("./use-lane-placement.cjs");
+var import_grid_overlay = require("../shared/grid-overlay.cjs");
+var import_resize_snap = require("../shared/resize-snap.cjs");
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(
+    `style[${STYLE_HASH_ATTRIBUTE}]`
+  )) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(
+    targetDocument,
+    (runtime.documents.get(targetDocument) ?? 0) + 1
+  );
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/grid/src/shared/layout-shift-animation.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("9e5573e51f", "._2db63116caa90ae9__layout-animating [data-wp-grid-item-key]{transition:transform var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1))}@media (prefers-reduced-motion:reduce){._2db63116caa90ae9__layout-animating [data-wp-grid-item-key]{transition:none}}");
+}
+var layout_shift_animation_default = { "layout-animating": "_2db63116caa90ae9__layout-animating" };
+
+// packages/grid/src/dashboard-lanes/index.tsx
+var import_item_exit_overlay = require("../shared/item-exit-overlay.cjs");
+var import_use_layout_shift_animation = require("../shared/use-layout-shift-animation.cjs");
+var import_use_item_exit_animation = require("../shared/use-item-exit-animation.cjs");
+var import_drag_overlay_drop_animation = require("../shared/drag-overlay-drop-animation.cjs");
+
+// packages/grid/src/dashboard-lanes/lanes.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("44ea80456a", "._8cc368bc6c2d79c6__lanes{column-gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));display:grid-lanes;position:relative;row-gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px))}@supports not (display:grid-lanes){._8cc368bc6c2d79c6__lanes{display:grid;grid-auto-flow:dense;grid-auto-rows:var(--wp-grid-lane-row-unit,4px);row-gap:0}}._1bfa908a532e32a4__drag-preview-frame{border-radius:var(--wp-grid-drag-preview-radius,0);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);cursor:grabbing;height:100%;pointer-events:none}.bd684ee9f92388ed__drag-preview-frame__lift{height:100%;transform:scale(var(--wp-grid-drag-preview-scale,1.05));transform-origin:center}@media not (prefers-reduced-motion:reduce){._1bfa908a532e32a4__drag-preview-frame{animation:_5f4a1718cb7927ee__wp-grid-drag-preview-shadow-enter var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) both}.bd684ee9f92388ed__drag-preview-frame__lift{animation:_29f7f02d4f227b1e__wp-grid-drag-preview-scale-enter var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) both}}@media not (prefers-reduced-motion:reduce){@keyframes _5f4a1718cb7927ee__wp-grid-drag-preview-shadow-enter{0%{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}to{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}}@keyframes _29f7f02d4f227b1e__wp-grid-drag-preview-scale-enter{0%{transform:scale(1)}to{transform:scale(var(--wp-grid-drag-preview-scale,1.05))}}}@media not (prefers-reduced-motion:reduce){._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting{animation:_6883de14c5fb8559__wp-grid-drag-preview-shadow-exit var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting .bd684ee9f92388ed__drag-preview-frame__lift{animation:_0de4da1cd817e536__wp-grid-drag-preview-scale-exit var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}@keyframes _6883de14c5fb8559__wp-grid-drag-preview-shadow-exit{0%{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}to{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}}@keyframes _0de4da1cd817e536__wp-grid-drag-preview-scale-exit{0%{transform:scale(var(--wp-grid-drag-preview-scale,1.05))}to{transform:scale(1)}}}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting .bd684ee9f92388ed__drag-preview-frame__lift{transform:scale(1)}@media (prefers-reduced-motion:reduce){._1bfa908a532e32a4__drag-preview-frame{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}.bd684ee9f92388ed__drag-preview-frame__lift{transform:none}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003);transition:none}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting .bd684ee9f92388ed__drag-preview-frame__lift{transition:none}}");
+}
+var lanes_default = { "lanes": "_8cc368bc6c2d79c6__lanes", "drag-preview-frame": "_1bfa908a532e32a4__drag-preview-frame", "drag-preview-frame__lift": "bd684ee9f92388ed__drag-preview-frame__lift", "wp-grid-drag-preview-shadow-enter": "_5f4a1718cb7927ee__wp-grid-drag-preview-shadow-enter", "wp-grid-drag-preview-scale-enter": "_29f7f02d4f227b1e__wp-grid-drag-preview-scale-enter", "dragPreviewFrameExiting": "_13e2d868ade475b5__dragPreviewFrameExiting", "wp-grid-drag-preview-shadow-exit": "_6883de14c5fb8559__wp-grid-drag-preview-shadow-exit", "wp-grid-drag-preview-scale-exit": "_0de4da1cd817e536__wp-grid-drag-preview-scale-exit" };
+
+// packages/grid/src/dashboard-lanes/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var dashboardDragDropAnimation = (0, import_drag_overlay_drop_animation.createDashboardDragDropAnimation)(
+  lanes_default["drag-preview-frame"],
+  lanes_default.dragPreviewFrameExiting
+);
+var FALLBACK_GAP_PX = 24;
+var DEFAULT_COLUMNS = 6;
+var NO_SORT_STRATEGY = () => null;
+var DashboardLanes = (0, import_element.forwardRef)(
+  function DashboardLanes2(props, ref) {
+    const {
+      layout,
+      columns,
+      children,
+      className,
+      style,
+      flowTolerance = 16,
+      rowUnit = 4,
+      minColumnWidth,
+      editMode = false,
+      onChangeLayout,
+      onPreviewLayout,
+      renderResizeHandle,
+      renderDragPreview,
+      renderGridOverlay,
+      ...divProps
+    } = props;
+    const [temporaryLayout, setTemporaryLayout] = (0, import_element.useState)();
+    const [activeId, setActiveId] = (0, import_element.useState)(null);
+    const [isResizing, setIsResizing] = (0, import_element.useState)(false);
+    const [resizeSnapPreview, setResizeSnapPreview] = (0, import_element.useState)(null);
+    const latestLayoutRef = (0, import_element.useRef)();
+    const lastReorderCursorRef = (0, import_element.useRef)(null);
+    const resizeBaselineRef = (0, import_element.useRef)(null);
+    const captureLayoutSnapshotRef = (0, import_element.useRef)(() => {
+    });
+    const childrenCacheRef = (0, import_element.useRef)(
+      /* @__PURE__ */ new Map()
+    );
+    const activeLayout = temporaryLayout ?? layout;
+    const [container, setContainer] = (0, import_element.useState)(
+      null
+    );
+    const [containerWidth, setContainerWidth] = (0, import_element.useState)(0);
+    const [gapPx, setGapPx] = (0, import_element.useState)(FALLBACK_GAP_PX);
+    const resizeObserverRef = (0, import_compose.useResizeObserver)(
+      ([{ contentRect }]) => {
+        setContainerWidth(contentRect.width);
+      }
+    );
+    const mergedRootRef = (0, import_compose.useMergeRefs)([
+      setContainer,
+      resizeObserverRef,
+      ref
+    ]);
+    (0, import_element.useLayoutEffect)(() => {
+      if (!container) {
+        return;
+      }
+      const { width } = container.getBoundingClientRect();
+      if (width > 0) {
+        setContainerWidth(width);
+      }
+      const parsed = Number.parseFloat(
+        window.getComputedStyle(container).columnGap
+      );
+      if (Number.isFinite(parsed) && parsed > 0) {
+        setGapPx(parsed);
+      }
+    }, [container]);
+    const effectiveColumns = (0, import_element.useMemo)(() => {
+      if (!minColumnWidth) {
+        return columns ?? DEFAULT_COLUMNS;
+      }
+      const totalWidthPerColumn = minColumnWidth + gapPx;
+      const maxFit = Math.max(
+        1,
+        Math.floor((containerWidth + gapPx) / totalWidthPerColumn)
+      );
+      return columns !== void 0 ? Math.min(columns, maxFit) : maxFit;
+    }, [minColumnWidth, gapPx, containerWidth, columns]);
+    const columnWidth = (containerWidth - (effectiveColumns - 1) * gapPx) / effectiveColumns;
+    const minResizeWidthPx = (0, import_resize_snap.gridSpanToPixelSize)(
+      1,
+      1,
+      columnWidth,
+      gapPx,
+      null
+    ).widthPx;
+    const layoutMap = (0, import_element.useMemo)(() => {
+      const map = /* @__PURE__ */ new Map();
+      activeLayout.forEach((item) => map.set(item.key, item));
+      return map;
+    }, [activeLayout]);
+    const layoutKeys = (0, import_element.useMemo)(
+      () => new Set(layout.map((item) => item.key)),
+      [layout]
+    );
+    const sortedItems = (0, import_element.useMemo)(
+      () => activeLayout.map((item, index) => ({ item, index })).sort(
+        (a, b) => (a.item.order ?? a.index) - (b.item.order ?? b.index)
+      ).map(({ item }) => item.key),
+      [activeLayout]
+    );
+    const items = sortedItems;
+    const placementItems = (0, import_element.useMemo)(() => {
+      return items.map((key) => {
+        const item = layoutMap.get(key);
+        const width = item?.width;
+        const span = typeof width === "number" ? Math.max(1, Math.min(width, effectiveColumns)) : 1;
+        return { key, span, lane: item?.lane };
+      });
+    }, [items, layoutMap, effectiveColumns]);
+    const { itemStyles } = (0, import_use_lane_placement.useLanePlacement)(container, {
+      items: placementItems,
+      lanes: effectiveColumns,
+      gap: gapPx,
+      flowTolerance,
+      rowUnit
+    });
+    const [childrenMap, actionableAreaMap, remaining, renderedByKey] = (0, import_element.useMemo)(() => {
+      const childMap = /* @__PURE__ */ new Map();
+      const actionableMap = /* @__PURE__ */ new Map();
+      const rest = [];
+      const byKey = /* @__PURE__ */ new Map();
+      import_element.Children.forEach(children, (child) => {
+        if (!(0, import_element.isValidElement)(child)) {
+          rest.push(child);
+          return;
+        }
+        const key = child.key?.toString();
+        if (!key) {
+          rest.push(child);
+          return;
+        }
+        const { actionableArea } = child.props;
+        const stripped = actionableArea !== void 0 ? (0, import_element.cloneElement)(
+          child,
+          { actionableArea: void 0 }
+        ) : child;
+        byKey.set(key, stripped);
+        if (layoutKeys.has(key)) {
+          if (actionableArea !== void 0) {
+            actionableMap.set(key, actionableArea);
+          }
+          childMap.set(key, stripped);
+        } else {
+          rest.push(child);
+        }
+      });
+      return [childMap, actionableMap, rest, byKey];
+    }, [children, layoutKeys]);
+    (0, import_element.useLayoutEffect)(() => {
+      for (const [key, child] of renderedByKey) {
+        childrenCacheRef.current.set(key, child);
+      }
+    }, [renderedByKey]);
+    const sensors = (0, import_core.useSensors)(
+      (0, import_core.useSensor)(import_core.PointerSensor),
+      (0, import_core.useSensor)(import_core.KeyboardSensor, {
+        coordinateGetter: import_sortable.sortableKeyboardCoordinates
+      })
+    );
+    const handleDragStart = (0, import_compose.useEvent)((event) => {
+      setActiveId(String(event.active.id));
+      lastReorderCursorRef.current = null;
+    });
+    const handleDragCancel = (0, import_compose.useEvent)(() => {
+      setActiveId(null);
+      latestLayoutRef.current = void 0;
+      lastReorderCursorRef.current = null;
+      resizeBaselineRef.current = null;
+      setIsResizing(false);
+      setResizeSnapPreview(null);
+      setTemporaryLayout(void 0);
+    });
+    const handleDragMove = (0, import_compose.useEvent)((event) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      const activeRect = active.rect.current.translated;
+      if (!activeRect) {
+        return;
+      }
+      const activeCenterX = activeRect.left + activeRect.width / 2;
+      const activeCenterY = activeRect.top + activeRect.height / 2;
+      const lastCursor = lastReorderCursorRef.current;
+      if (lastCursor) {
+        const dx = activeCenterX - lastCursor.x;
+        const dy = activeCenterY - lastCursor.y;
+        if (dx * dx + dy * dy < 100) {
+          return;
+        }
+      }
+      const overCenterX = over.rect.left + over.rect.width / 2;
+      const insertAfter = activeCenterX > overCenterX;
+      const currentIndex = items.indexOf(String(active.id));
+      const overIndex = items.indexOf(String(over.id));
+      let newIndex;
+      if (insertAfter) {
+        newIndex = currentIndex > overIndex ? overIndex + 1 : overIndex;
+      } else {
+        newIndex = currentIndex > overIndex ? overIndex : overIndex - 1;
+      }
+      newIndex = Math.max(0, Math.min(newIndex, items.length - 1));
+      if (newIndex === currentIndex) {
+        return;
+      }
+      const updatedItems = (0, import_sortable.arrayMove)(items, currentIndex, newIndex);
+      const orderByKey = /* @__PURE__ */ new Map();
+      updatedItems.forEach((key, index) => {
+        orderByKey.set(key, index);
+      });
+      const updatedLayout = activeLayout.map((item) => ({
+        ...item,
+        order: orderByKey.get(item.key) ?? 0
+      }));
+      lastReorderCursorRef.current = {
+        x: activeCenterX,
+        y: activeCenterY
+      };
+      latestLayoutRef.current = updatedLayout;
+      captureLayoutSnapshotRef.current();
+      setTemporaryLayout(updatedLayout);
+      onPreviewLayout?.(updatedLayout);
+    });
+    const persistTemporaryLayout = (0, import_compose.useEvent)(() => {
+      const latest = latestLayoutRef.current;
+      latestLayoutRef.current = void 0;
+      resizeBaselineRef.current = null;
+      setIsResizing(false);
+      setResizeSnapPreview(null);
+      if (!onChangeLayout || !latest) {
+        setTemporaryLayout(void 0);
+        return;
+      }
+      onChangeLayout(latest);
+      setTemporaryLayout(void 0);
+    });
+    const handleResize = (0, import_compose.useEvent)((id, delta) => {
+      if (!editMode) {
+        return;
+      }
+      if (!isResizing) {
+        setIsResizing(true);
+      }
+      const relativeDelta = Math.round(
+        delta.width / (columnWidth + gapPx)
+      );
+      if (resizeBaselineRef.current === null) {
+        const baseItem = layoutMap.get(id);
+        const baseWidth = typeof baseItem?.width === "number" ? baseItem.width : 1;
+        resizeBaselineRef.current = baseWidth;
+      }
+      const baseline = resizeBaselineRef.current;
+      const newWidth = Math.max(
+        1,
+        Math.min(baseline + relativeDelta, effectiveColumns)
+      );
+      setResizeSnapPreview({
+        id,
+        snap: (0, import_resize_snap.gridSpanToPixelSize)(
+          newWidth,
+          1,
+          columnWidth,
+          gapPx,
+          null
+        )
+      });
+      const pendingItem = latestLayoutRef.current?.find(
+        (item) => item.key === id
+      );
+      const currentItem = pendingItem ?? layoutMap.get(id);
+      if (currentItem && currentItem.width === newWidth) {
+        return;
+      }
+      const updatedLayout = activeLayout.map(
+        (item) => item.key === id ? { ...item, width: newWidth } : item
+      );
+      latestLayoutRef.current = updatedLayout;
+      captureLayoutSnapshotRef.current();
+      setTemporaryLayout(updatedLayout);
+      onPreviewLayout?.(updatedLayout);
+    });
+    const interacting = activeId !== null || isResizing;
+    const activeClone = activeId ? childrenMap.get(activeId) : null;
+    const DragPreview = renderDragPreview;
+    const dragOverlayContent = activeId && activeClone ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: lanes_default["drag-preview-frame"], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: lanes_default["drag-preview-frame__lift"], children: DragPreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragPreview, { itemId: activeId, children: activeClone }) : activeClone }) }) : null;
+    const Overlay = renderGridOverlay ?? import_grid_overlay.GridOverlay;
+    const gridOverlay = (0, import_element.useMemo)(
+      () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overlay, { columns: effectiveColumns, isActive: editMode }),
+      [Overlay, editMode, effectiveColumns]
+    );
+    const layoutFingerprint = (0, import_element.useMemo)(() => {
+      const layoutSig = (0, import_use_layout_shift_animation.getLayoutFingerprint)(activeLayout);
+      const placementSig = (0, import_use_layout_shift_animation.getPlacementFingerprint)(itemStyles);
+      return `${layoutSig}\0${placementSig}`;
+    }, [activeLayout, itemStyles]);
+    const excludeLayoutAnimationKey = activeId ?? (isResizing ? resizeSnapPreview?.id : null);
+    const { captureLayoutSnapshot, getPositionsBeforeLastChange } = (0, import_use_layout_shift_animation.useLayoutShiftAnimation)({
+      container,
+      enabled: editMode,
+      layoutFingerprint,
+      excludeItemKey: excludeLayoutAnimationKey
+    });
+    const { exitingItems, clearExitingItem } = (0, import_use_item_exit_animation.useItemExitAnimation)({
+      container,
+      enabled: editMode,
+      layoutKeys,
+      getPositionsBeforeLastChange,
+      childrenCacheRef
+    });
+    const layoutAnimating = editMode;
+    (0, import_element.useLayoutEffect)(() => {
+      captureLayoutSnapshotRef.current = captureLayoutSnapshot;
+    }, [captureLayoutSnapshot]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core.DndContext,
+      {
+        sensors,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        onDragMove: handleDragMove,
+        onDragEnd: () => {
+          persistTemporaryLayout();
+          lastReorderCursorRef.current = null;
+          setActiveId(null);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items, strategy: NO_SORT_STRATEGY, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ...divProps,
+              ref: mergedRootRef,
+              className: (0, import_clsx.default)(
+                lanes_default.lanes,
+                layoutAnimating && layout_shift_animation_default["layout-animating"],
+                className
+              ),
+              "data-wp-grid-dragging": activeId || void 0,
+              "data-wp-grid-resizing": isResizing || void 0,
+              style: {
+                ...style,
+                gridTemplateColumns: `repeat(${effectiveColumns}, minmax(0, 1fr))`,
+                // `column-gap` and `row-gap` are set in
+                // `lanes.module.css` from the
+                // design-system gap token, with an
+                // `@supports` block that zeroes `row-gap`
+                // in polyfill mode (the skyline already
+                // encodes vertical spacing in each tile's
+                // `top`). Driving the toggle from CSS
+                // keeps SSR and client output identical
+                // regardless of native support.
+                "--wp-grid-lane-row-unit": `${Math.max(
+                  1,
+                  rowUnit
+                )}px`
+              },
+              children: [
+                gridOverlay,
+                items.map((id) => {
+                  const child = childrenMap.get(id);
+                  if (!child) {
+                    return null;
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_lanes_item.LanesItem,
+                    {
+                      itemKey: id,
+                      placementStyle: itemStyles.get(id) ?? {},
+                      disabled: !editMode,
+                      interacting,
+                      dragging: activeId !== null,
+                      onResize: handleResize,
+                      onResizeEnd: persistTemporaryLayout,
+                      resizeSnapPreview: resizeSnapPreview?.id === id ? resizeSnapPreview.snap : null,
+                      minResizeWidthPx,
+                      actionableArea: actionableAreaMap.get(
+                        id
+                      ),
+                      renderResizeHandle,
+                      children: child
+                    },
+                    id
+                  );
+                }),
+                remaining,
+                exitingItems.map(({ key, rect, child }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_item_exit_overlay.ItemExitOverlay,
+                  {
+                    itemKey: key,
+                    rect,
+                    onAnimationEnd: () => clearExitingItem(key),
+                    children: child
+                  },
+                  `exiting-${key}`
+                ))
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { dropAnimation: dashboardDragDropAnimation, children: dragOverlayContent })
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DashboardLanes
+});
+//# sourceMappingURL=index.cjs.map

package/build/dashboard-lanes/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dashboard-lanes/index.tsx", "../../../style-runtime/src/index.ts", "../../src/shared/layout-shift-animation.module.css", "../../src/dashboard-lanes/lanes.module.css"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tDndContext,\n\tDragOverlay,\n\tKeyboardSensor,\n\tPointerSensor,\n\tuseSensor,\n\tuseSensors,\n} from '@dnd-kit/core';\nimport {\n\tarrayMove,\n\tSortableContext,\n\tsortableKeyboardCoordinates,\n} from '@dnd-kit/sortable';\nimport type { DragMoveEvent, DragStartEvent } from '@dnd-kit/core';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver, useEvent, useMergeRefs } from '@wordpress/compose';\nimport {\n\tforwardRef,\n\tuseMemo,\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { LanesItem } from './lanes-item';\nimport { useLanePlacement } from './use-lane-placement';\nimport { GridOverlay } from '../shared/grid-overlay';\nimport { gridSpanToPixelSize } from '../shared/resize-snap';\nimport layoutAnimationStyles from '../shared/layout-shift-animation.module.css';\nimport { ItemExitOverlay } from '../shared/item-exit-overlay';\nimport {\n\tgetLayoutFingerprint,\n\tgetPlacementFingerprint,\n\tuseLayoutShiftAnimation,\n} from '../shared/use-layout-shift-animation';\nimport { useItemExitAnimation } from '../shared/use-item-exit-animation';\nimport type { DashboardLanesLayoutItem, DashboardLanesProps } from './types';\nimport type { ResizeSnapSize } from '../shared/resize-snap';\nimport type { ResizeDelta } from '../shared/types';\nimport { createDashboardDragDropAnimation } from '../shared/drag-overlay-drop-animation';\nimport styles from './lanes.module.css';\n\nconst dashboardDragDropAnimation = createDashboardDragDropAnimation(\n\tstyles[ 'drag-preview-frame' ],\n\tstyles.dragPreviewFrameExiting\n);\n\n// Fallback gap in pixels for math that runs before the computed gap\n// can be read from the DOM. Matches the `'xl'` step the surface\n// resolves to in CSS (`--wpds-dimension-gap-xl`); the next layout\n// effect overwrites this with the actual computed value.\nconst FALLBACK_GAP_PX = 24;\n\n// Default lane cap when no explicit `columns` or `minColumnWidth` is\n// supplied. Layered semantics: `columns` acts as a cap and\n// `minColumnWidth` as a per-tile floor; if neither is set we still\n// need a finite count to render against.\nconst DEFAULT_COLUMNS = 6;\n\nconst NO_SORT_STRATEGY = () => null;\n\n/**\n * Masonry-style surface aligned with `display: grid-lanes`. Items\n * declare a column span; heights are driven by content; placement\n * follows the source-ordered, shortest-lane algorithm with\n * `flow-tolerance` tiebreaking.\n *\n * On browsers that support `display: grid-lanes` natively, the\n * component emits the spec's CSS and lets the engine handle layout.\n * Otherwise, `useLanePlacement` measures item heights and assigns\n * explicit `grid-column-start` / `grid-row-start` values that\n * approximate the same result inside CSS Grid.\n *\n * Each child's `key` must match an entry in the `layout` array;\n * children without a match render at the end of the surface without\n * explicit placement and fall through the lanes auto-flow.\n *\n * @example\n * ```jsx\n * <DashboardLanes\n *     layout={ [\n *         { key: 'a' },\n *         { key: 'b', width: 2 },\n *         { key: 'c' },\n *     ] }\n *     columns={ 3 }\n *     editMode\n *     onChangeLayout={ setLayout }\n * >\n *     <Tile key=\"a\">A</Tile>\n *     <Tile key=\"b\">B</Tile>\n *     <Tile key=\"c\">C</Tile>\n * </DashboardLanes>\n * ```\n *\n * @param props Component props.\n * @param ref   Forwarded to the surface's root `<div>`.\n */\nexport const DashboardLanes = forwardRef< HTMLDivElement, DashboardLanesProps >(\n\tfunction DashboardLanes( props, ref ) {\n\t\tconst {\n\t\t\tlayout,\n\t\t\tcolumns,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tstyle,\n\t\t\tflowTolerance = 16,\n\t\t\trowUnit = 4,\n\t\t\tminColumnWidth,\n\t\t\teditMode = false,\n\t\t\tonChangeLayout,\n\t\t\tonPreviewLayout,\n\t\t\trenderResizeHandle,\n\t\t\trenderDragPreview,\n\t\t\trenderGridOverlay,\n\t\t\t...divProps\n\t\t} = props;\n\n\t\tconst [ temporaryLayout, setTemporaryLayout ] = useState<\n\t\t\tDashboardLanesLayoutItem[] | undefined\n\t\t>();\n\t\tconst [ activeId, setActiveId ] = useState< string | null >( null );\n\t\tconst [ isResizing, setIsResizing ] = useState( false );\n\t\tconst [ resizeSnapPreview, setResizeSnapPreview ] = useState< {\n\t\t\tid: string;\n\t\t\tsnap: ResizeSnapSize;\n\t\t} | null >( null );\n\t\tconst latestLayoutRef = useRef<\n\t\t\tDashboardLanesLayoutItem[] | undefined\n\t\t>();\n\t\tconst lastReorderCursorRef = useRef< {\n\t\t\tx: number;\n\t\t\ty: number;\n\t\t} | null >( null );\n\t\tconst resizeBaselineRef = useRef< number | null >( null );\n\t\tconst captureLayoutSnapshotRef = useRef< () => void >( () => {} );\n\t\tconst childrenCacheRef = useRef< Map< string, React.ReactElement > >(\n\t\t\tnew Map()\n\t\t);\n\t\tconst activeLayout = temporaryLayout ?? layout;\n\n\t\tconst [ container, setContainer ] = useState< HTMLDivElement | null >(\n\t\t\tnull\n\t\t);\n\t\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\t\tconst [ gapPx, setGapPx ] = useState( FALLBACK_GAP_PX );\n\t\tconst resizeObserverRef = useResizeObserver(\n\t\t\t( [ { contentRect } ] ) => {\n\t\t\t\tsetContainerWidth( contentRect.width );\n\t\t\t}\n\t\t);\n\t\tconst mergedRootRef = useMergeRefs( [\n\t\t\tsetContainer,\n\t\t\tresizeObserverRef,\n\t\t\tref,\n\t\t] );\n\n\t\t// Measure synchronously before paint and snapshot the computed\n\t\t// `column-gap` so the placement math tracks the design-system\n\t\t// token under any density.\n\t\tuseLayoutEffect( () => {\n\t\t\tif ( ! container ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst { width } = container.getBoundingClientRect();\n\t\t\tif ( width > 0 ) {\n\t\t\t\tsetContainerWidth( width );\n\t\t\t}\n\t\t\tconst parsed = Number.parseFloat(\n\t\t\t\twindow.getComputedStyle( container ).columnGap\n\t\t\t);\n\t\t\tif ( Number.isFinite( parsed ) && parsed > 0 ) {\n\t\t\t\tsetGapPx( parsed );\n\t\t\t}\n\t\t}, [ container ] );\n\t\tconst effectiveColumns = useMemo( () => {\n\t\t\tif ( ! minColumnWidth ) {\n\t\t\t\treturn columns ?? DEFAULT_COLUMNS;\n\t\t\t}\n\t\t\tconst totalWidthPerColumn = minColumnWidth + gapPx;\n\t\t\tconst maxFit = Math.max(\n\t\t\t\t1,\n\t\t\t\tMath.floor( ( containerWidth + gapPx ) / totalWidthPerColumn )\n\t\t\t);\n\t\t\treturn columns !== undefined ? Math.min( columns, maxFit ) : maxFit;\n\t\t}, [ minColumnWidth, gapPx, containerWidth, columns ] );\n\t\tconst columnWidth =\n\t\t\t( containerWidth - ( effectiveColumns - 1 ) * gapPx ) /\n\t\t\teffectiveColumns;\n\t\tconst minResizeWidthPx = gridSpanToPixelSize(\n\t\t\t1,\n\t\t\t1,\n\t\t\tcolumnWidth,\n\t\t\tgapPx,\n\t\t\tnull\n\t\t).widthPx;\n\n\t\tconst layoutMap = useMemo( () => {\n\t\t\tconst map = new Map< string, DashboardLanesLayoutItem >();\n\t\t\tactiveLayout.forEach( ( item ) => map.set( item.key, item ) );\n\t\t\treturn map;\n\t\t}, [ activeLayout ] );\n\n\t\t// Stable-identity key set for the children walk (see grid.tsx).\n\t\tconst layoutKeys = useMemo(\n\t\t\t() => new Set( layout.map( ( item ) => item.key ) ),\n\t\t\t[ layout ]\n\t\t);\n\n\t\t// Sorted item keys, identity-stable when the resulting sequence\n\t\t// is unchanged (avoids invalidating SortableContext).\n\t\tconst sortedItems = useMemo(\n\t\t\t() =>\n\t\t\t\tactiveLayout\n\t\t\t\t\t.map( ( item, index ) => ( { item, index } ) )\n\t\t\t\t\t.sort(\n\t\t\t\t\t\t( a, b ) =>\n\t\t\t\t\t\t\t( a.item.order ?? a.index ) -\n\t\t\t\t\t\t\t( b.item.order ?? b.index )\n\t\t\t\t\t)\n\t\t\t\t\t.map( ( { item } ) => item.key ),\n\t\t\t[ activeLayout ]\n\t\t);\n\t\tconst items = sortedItems;\n\n\t\t// Placement input for the hook: each item with its clamped span\n\t\t// in source (sorted) order. `lane` forwards the optional explicit\n\t\t// pin from the layout item; the algorithm clamps out-of-range\n\t\t// values, so no surface-level guard is needed.\n\t\tconst placementItems = useMemo( () => {\n\t\t\treturn items.map( ( key ) => {\n\t\t\t\tconst item = layoutMap.get( key );\n\t\t\t\tconst width = item?.width;\n\t\t\t\tconst span =\n\t\t\t\t\ttypeof width === 'number'\n\t\t\t\t\t\t? Math.max( 1, Math.min( width, effectiveColumns ) )\n\t\t\t\t\t\t: 1;\n\t\t\t\treturn { key, span, lane: item?.lane };\n\t\t\t} );\n\t\t}, [ items, layoutMap, effectiveColumns ] );\n\n\t\tconst { itemStyles } = useLanePlacement( container, {\n\t\t\titems: placementItems,\n\t\t\tlanes: effectiveColumns,\n\t\t\tgap: gapPx,\n\t\t\tflowTolerance,\n\t\t\trowUnit,\n\t\t} );\n\n\t\tconst [ childrenMap, actionableAreaMap, remaining, renderedByKey ] =\n\t\t\tuseMemo( () => {\n\t\t\t\tconst childMap = new Map< string, React.ReactElement >();\n\t\t\t\tconst actionableMap = new Map< string, React.ReactNode >();\n\t\t\t\tconst rest: React.ReactNode[] = [];\n\t\t\t\tconst byKey = new Map< string, React.ReactElement >();\n\n\t\t\t\tChildren.forEach( children, ( child ) => {\n\t\t\t\t\tif ( ! isValidElement( child ) ) {\n\t\t\t\t\t\trest.push( child );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tconst key = child.key?.toString();\n\t\t\t\t\tif ( ! key ) {\n\t\t\t\t\t\trest.push( child );\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Strip `actionableArea` so it does not leak to the DOM;\n\t\t\t\t\t// the grid lifts it to a slot separately.\n\t\t\t\t\tconst { actionableArea } = child.props as {\n\t\t\t\t\t\tactionableArea?: React.ReactNode;\n\t\t\t\t\t};\n\t\t\t\t\tconst stripped =\n\t\t\t\t\t\tactionableArea !== undefined\n\t\t\t\t\t\t\t? cloneElement(\n\t\t\t\t\t\t\t\t\tchild as React.ReactElement< {\n\t\t\t\t\t\t\t\t\t\tactionableArea?: React.ReactNode;\n\t\t\t\t\t\t\t\t\t} >,\n\t\t\t\t\t\t\t\t\t{ actionableArea: undefined }\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: ( child as React.ReactElement );\n\n\t\t\t\t\tbyKey.set( key, stripped );\n\n\t\t\t\t\tif ( layoutKeys.has( key ) ) {\n\t\t\t\t\t\tif ( actionableArea !== undefined ) {\n\t\t\t\t\t\t\tactionableMap.set( key, actionableArea );\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchildMap.set( key, stripped );\n\t\t\t\t\t} else {\n\t\t\t\t\t\trest.push( child );\n\t\t\t\t\t}\n\t\t\t\t} );\n\n\t\t\t\treturn [ childMap, actionableMap, rest, byKey ];\n\t\t\t}, [ children, layoutKeys ] );\n\n\t\t// Persist the latest rendered children so a removed tile's content\n\t\t// is still available for its exit overlay. Filled from an effect so a\n\t\t// discarded render never writes to the cache.\n\t\tuseLayoutEffect( () => {\n\t\t\tfor ( const [ key, child ] of renderedByKey ) {\n\t\t\t\tchildrenCacheRef.current.set( key, child );\n\t\t\t}\n\t\t}, [ renderedByKey ] );\n\n\t\tconst sensors = useSensors(\n\t\t\tuseSensor( PointerSensor ),\n\t\t\tuseSensor( KeyboardSensor, {\n\t\t\t\tcoordinateGetter: sortableKeyboardCoordinates,\n\t\t\t} )\n\t\t);\n\n\t\tconst handleDragStart = useEvent( ( event: DragStartEvent ) => {\n\t\t\tsetActiveId( String( event.active.id ) );\n\t\t\tlastReorderCursorRef.current = null;\n\t\t} );\n\n\t\tconst handleDragCancel = useEvent( () => {\n\t\t\tsetActiveId( null );\n\t\t\tlatestLayoutRef.current = undefined;\n\t\t\tlastReorderCursorRef.current = null;\n\t\t\tresizeBaselineRef.current = null;\n\t\t\tsetIsResizing( false );\n\t\t\tsetResizeSnapPreview( null );\n\t\t\tsetTemporaryLayout( undefined );\n\t\t} );\n\n\t\tconst handleDragMove = useEvent( ( event: DragMoveEvent ) => {\n\t\t\tconst { active, over } = event;\n\t\t\tif ( ! over || active.id === over.id ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst activeRect = active.rect.current.translated;\n\t\t\tif ( ! activeRect ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst activeCenterX = activeRect.left + activeRect.width / 2;\n\t\t\tconst activeCenterY = activeRect.top + activeRect.height / 2;\n\n\t\t\tconst lastCursor = lastReorderCursorRef.current;\n\t\t\tif ( lastCursor ) {\n\t\t\t\tconst dx = activeCenterX - lastCursor.x;\n\t\t\t\tconst dy = activeCenterY - lastCursor.y;\n\t\t\t\tif ( dx * dx + dy * dy < 100 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst overCenterX = over.rect.left + over.rect.width / 2;\n\t\t\tconst insertAfter = activeCenterX > overCenterX;\n\n\t\t\tconst currentIndex = items.indexOf( String( active.id ) );\n\t\t\tconst overIndex = items.indexOf( String( over.id ) );\n\t\t\tlet newIndex: number;\n\t\t\tif ( insertAfter ) {\n\t\t\t\tnewIndex = currentIndex > overIndex ? overIndex + 1 : overIndex;\n\t\t\t} else {\n\t\t\t\tnewIndex = currentIndex > overIndex ? overIndex : overIndex - 1;\n\t\t\t}\n\t\t\tnewIndex = Math.max( 0, Math.min( newIndex, items.length - 1 ) );\n\n\t\t\tif ( newIndex === currentIndex ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst updatedItems = arrayMove( items, currentIndex, newIndex );\n\t\t\t// Build a key→index lookup so the .map below is O(n)\n\t\t\t// instead of O(n²) from per-item `indexOf` calls.\n\t\t\tconst orderByKey = new Map< string, number >();\n\t\t\tupdatedItems.forEach( ( key, index ) => {\n\t\t\t\torderByKey.set( key, index );\n\t\t\t} );\n\t\t\tconst updatedLayout = activeLayout.map( ( item ) => ( {\n\t\t\t\t...item,\n\t\t\t\torder: orderByKey.get( item.key ) ?? 0,\n\t\t\t} ) );\n\n\t\t\tlastReorderCursorRef.current = {\n\t\t\t\tx: activeCenterX,\n\t\t\t\ty: activeCenterY,\n\t\t\t};\n\t\t\tlatestLayoutRef.current = updatedLayout;\n\t\t\tcaptureLayoutSnapshotRef.current();\n\t\t\tsetTemporaryLayout( updatedLayout );\n\t\t\tonPreviewLayout?.( updatedLayout );\n\t\t} );\n\n\t\tconst persistTemporaryLayout = useEvent( () => {\n\t\t\tconst latest = latestLayoutRef.current;\n\t\t\tlatestLayoutRef.current = undefined;\n\t\t\tresizeBaselineRef.current = null;\n\t\t\tsetIsResizing( false );\n\t\t\tsetResizeSnapPreview( null );\n\t\t\tif ( ! onChangeLayout || ! latest ) {\n\t\t\t\tsetTemporaryLayout( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeLayout( latest );\n\t\t\tsetTemporaryLayout( undefined );\n\t\t} );\n\n\t\tconst handleResize = useEvent( ( id: string, delta: ResizeDelta ) => {\n\t\t\tif ( ! editMode ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( ! isResizing ) {\n\t\t\t\tsetIsResizing( true );\n\t\t\t}\n\n\t\t\tconst relativeDelta = Math.round(\n\t\t\t\tdelta.width / ( columnWidth + gapPx )\n\t\t\t);\n\n\t\t\tif ( resizeBaselineRef.current === null ) {\n\t\t\t\tconst baseItem = layoutMap.get( id );\n\t\t\t\tconst baseWidth =\n\t\t\t\t\ttypeof baseItem?.width === 'number' ? baseItem.width : 1;\n\t\t\t\tresizeBaselineRef.current = baseWidth;\n\t\t\t}\n\t\t\tconst baseline = resizeBaselineRef.current;\n\t\t\tconst newWidth = Math.max(\n\t\t\t\t1,\n\t\t\t\tMath.min( baseline + relativeDelta, effectiveColumns )\n\t\t\t);\n\n\t\t\tsetResizeSnapPreview( {\n\t\t\t\tid,\n\t\t\t\tsnap: gridSpanToPixelSize(\n\t\t\t\t\tnewWidth,\n\t\t\t\t\t1,\n\t\t\t\t\tcolumnWidth,\n\t\t\t\t\tgapPx,\n\t\t\t\t\tnull\n\t\t\t\t),\n\t\t\t} );\n\n\t\t\tconst pendingItem = latestLayoutRef.current?.find(\n\t\t\t\t( item ) => item.key === id\n\t\t\t);\n\t\t\tconst currentItem = pendingItem ?? layoutMap.get( id );\n\t\t\tif ( currentItem && currentItem.width === newWidth ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst updatedLayout = activeLayout.map( ( item ) =>\n\t\t\t\titem.key === id ? { ...item, width: newWidth } : item\n\t\t\t);\n\n\t\t\tlatestLayoutRef.current = updatedLayout;\n\t\t\tcaptureLayoutSnapshotRef.current();\n\t\t\tsetTemporaryLayout( updatedLayout );\n\t\t\tonPreviewLayout?.( updatedLayout );\n\t\t} );\n\n\t\tconst interacting = activeId !== null || isResizing;\n\n\t\t// Drag-overlay clone composition: the surface always wraps with a\n\t\t// thin functional frame (lift, cursor, pointer pass-through). When\n\t\t// `renderDragPreview` is supplied, the consumer's wrapper sits\n\t\t// inside the frame around the cloned children; otherwise the\n\t\t// cloned children render directly so any persistent chrome on\n\t\t// them carries through unchanged.\n\t\tconst activeClone = activeId ? childrenMap.get( activeId ) : null;\n\t\tconst DragPreview = renderDragPreview;\n\t\tconst dragOverlayContent =\n\t\t\tactiveId && activeClone ? (\n\t\t\t\t<div className={ styles[ 'drag-preview-frame' ] }>\n\t\t\t\t\t<div className={ styles[ 'drag-preview-frame__lift' ] }>\n\t\t\t\t\t\t{ DragPreview ? (\n\t\t\t\t\t\t\t<DragPreview itemId={ activeId }>\n\t\t\t\t\t\t\t\t{ activeClone }\n\t\t\t\t\t\t\t</DragPreview>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tactiveClone\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : null;\n\n\t\t// Edit-mode background. Lanes are content-driven vertically, so\n\t\t// the overlay mirrors columns only. Rendered unconditionally so\n\t\t// it can cross-fade on edit-mode toggles (`isActive` drives the\n\t\t// transition); memoized so drag/resize re-renders skip it.\n\t\tconst Overlay = renderGridOverlay ?? GridOverlay;\n\t\tconst gridOverlay = useMemo(\n\t\t\t() => (\n\t\t\t\t<Overlay columns={ effectiveColumns } isActive={ editMode } />\n\t\t\t),\n\t\t\t[ Overlay, editMode, effectiveColumns ]\n\t\t);\n\n\t\tconst layoutFingerprint = useMemo( () => {\n\t\t\tconst layoutSig = getLayoutFingerprint( activeLayout );\n\t\t\tconst placementSig = getPlacementFingerprint( itemStyles );\n\t\t\treturn `${ layoutSig }\\0${ placementSig }`;\n\t\t}, [ activeLayout, itemStyles ] );\n\t\tconst excludeLayoutAnimationKey =\n\t\t\tactiveId ?? ( isResizing ? resizeSnapPreview?.id : null );\n\t\tconst { captureLayoutSnapshot, getPositionsBeforeLastChange } =\n\t\t\tuseLayoutShiftAnimation( {\n\t\t\t\tcontainer,\n\t\t\t\tenabled: editMode,\n\t\t\t\tlayoutFingerprint,\n\t\t\t\texcludeItemKey: excludeLayoutAnimationKey,\n\t\t\t} );\n\t\tconst { exitingItems, clearExitingItem } = useItemExitAnimation( {\n\t\t\tcontainer,\n\t\t\tenabled: editMode,\n\t\t\tlayoutKeys,\n\t\t\tgetPositionsBeforeLastChange,\n\t\t\tchildrenCacheRef,\n\t\t} );\n\t\tconst layoutAnimating = editMode;\n\t\tuseLayoutEffect( () => {\n\t\t\tcaptureLayoutSnapshotRef.current = captureLayoutSnapshot;\n\t\t}, [ captureLayoutSnapshot ] );\n\n\t\treturn (\n\t\t\t<DndContext\n\t\t\t\tsensors={ sensors }\n\t\t\t\tonDragStart={ handleDragStart }\n\t\t\t\tonDragCancel={ handleDragCancel }\n\t\t\t\tonDragMove={ handleDragMove }\n\t\t\t\tonDragEnd={ () => {\n\t\t\t\t\tpersistTemporaryLayout();\n\t\t\t\t\tlastReorderCursorRef.current = null;\n\t\t\t\t\tsetActiveId( null );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<SortableContext items={ items } strategy={ NO_SORT_STRATEGY }>\n\t\t\t\t\t<div\n\t\t\t\t\t\t{ ...divProps }\n\t\t\t\t\t\tref={ mergedRootRef }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tstyles.lanes,\n\t\t\t\t\t\t\tlayoutAnimating &&\n\t\t\t\t\t\t\t\tlayoutAnimationStyles[ 'layout-animating' ],\n\t\t\t\t\t\t\tclassName\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tdata-wp-grid-dragging={ activeId || undefined }\n\t\t\t\t\t\tdata-wp-grid-resizing={ isResizing || undefined }\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat(${ effectiveColumns }, minmax(0, 1fr))`,\n\t\t\t\t\t\t\t\t// `column-gap` and `row-gap` are set in\n\t\t\t\t\t\t\t\t// `lanes.module.css` from the\n\t\t\t\t\t\t\t\t// design-system gap token, with an\n\t\t\t\t\t\t\t\t// `@supports` block that zeroes `row-gap`\n\t\t\t\t\t\t\t\t// in polyfill mode (the skyline already\n\t\t\t\t\t\t\t\t// encodes vertical spacing in each tile's\n\t\t\t\t\t\t\t\t// `top`). Driving the toggle from CSS\n\t\t\t\t\t\t\t\t// keeps SSR and client output identical\n\t\t\t\t\t\t\t\t// regardless of native support.\n\t\t\t\t\t\t\t\t'--wp-grid-lane-row-unit': `${ Math.max(\n\t\t\t\t\t\t\t\t\t1,\n\t\t\t\t\t\t\t\t\trowUnit\n\t\t\t\t\t\t\t\t) }px`,\n\t\t\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ gridOverlay }\n\t\t\t\t\t\t{ items.map( ( id ) => {\n\t\t\t\t\t\t\tconst child = childrenMap.get( id );\n\t\t\t\t\t\t\tif ( ! child ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<LanesItem\n\t\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\t\titemKey={ id }\n\t\t\t\t\t\t\t\t\tplacementStyle={\n\t\t\t\t\t\t\t\t\t\titemStyles.get( id ) ?? {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ ! editMode }\n\t\t\t\t\t\t\t\t\tinteracting={ interacting }\n\t\t\t\t\t\t\t\t\tdragging={ activeId !== null }\n\t\t\t\t\t\t\t\t\tonResize={ handleResize }\n\t\t\t\t\t\t\t\t\tonResizeEnd={ persistTemporaryLayout }\n\t\t\t\t\t\t\t\t\tresizeSnapPreview={\n\t\t\t\t\t\t\t\t\t\tresizeSnapPreview?.id === id\n\t\t\t\t\t\t\t\t\t\t\t? resizeSnapPreview.snap\n\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tminResizeWidthPx={ minResizeWidthPx }\n\t\t\t\t\t\t\t\t\tactionableArea={ actionableAreaMap.get(\n\t\t\t\t\t\t\t\t\t\tid\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\trenderResizeHandle={ renderResizeHandle }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ child }\n\t\t\t\t\t\t\t\t</LanesItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t{ remaining }\n\t\t\t\t\t\t{ exitingItems.map( ( { key, rect, child } ) => (\n\t\t\t\t\t\t\t<ItemExitOverlay\n\t\t\t\t\t\t\t\tkey={ `exiting-${ key }` }\n\t\t\t\t\t\t\t\titemKey={ key }\n\t\t\t\t\t\t\t\trect={ rect }\n\t\t\t\t\t\t\t\tonAnimationEnd={ () => clearExitingItem( key ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ child }\n\t\t\t\t\t\t\t</ItemExitOverlay>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t</SortableContext>\n\t\t\t\t<DragOverlay dropAnimation={ dashboardDragDropAnimation }>\n\t\t\t\t\t{ dragOverlayContent }\n\t\t\t\t</DragOverlay>\n\t\t\t</DndContext>\n\t\t);\n\t}\n);\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"9e5573e51f\", \"._2db63116caa90ae9__layout-animating [data-wp-grid-item-key]{transition:transform var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1))}@media (prefers-reduced-motion:reduce){._2db63116caa90ae9__layout-animating [data-wp-grid-item-key]{transition:none}}\");\n}\nexport default {\"layout-animating\":\"_2db63116caa90ae9__layout-animating\"};\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"44ea80456a\", \"._8cc368bc6c2d79c6__lanes{column-gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));display:grid-lanes;position:relative;row-gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px))}@supports not (display:grid-lanes){._8cc368bc6c2d79c6__lanes{display:grid;grid-auto-flow:dense;grid-auto-rows:var(--wp-grid-lane-row-unit,4px);row-gap:0}}._1bfa908a532e32a4__drag-preview-frame{border-radius:var(--wp-grid-drag-preview-radius,0);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);cursor:grabbing;height:100%;pointer-events:none}.bd684ee9f92388ed__drag-preview-frame__lift{height:100%;transform:scale(var(--wp-grid-drag-preview-scale,1.05));transform-origin:center}@media not (prefers-reduced-motion:reduce){._1bfa908a532e32a4__drag-preview-frame{animation:_5f4a1718cb7927ee__wp-grid-drag-preview-shadow-enter var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) both}.bd684ee9f92388ed__drag-preview-frame__lift{animation:_29f7f02d4f227b1e__wp-grid-drag-preview-scale-enter var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) both}}@media not (prefers-reduced-motion:reduce){@keyframes _5f4a1718cb7927ee__wp-grid-drag-preview-shadow-enter{0%{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}to{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}}@keyframes _29f7f02d4f227b1e__wp-grid-drag-preview-scale-enter{0%{transform:scale(1)}to{transform:scale(var(--wp-grid-drag-preview-scale,1.05))}}}@media not (prefers-reduced-motion:reduce){._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting{animation:_6883de14c5fb8559__wp-grid-drag-preview-shadow-exit var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting .bd684ee9f92388ed__drag-preview-frame__lift{animation:_0de4da1cd817e536__wp-grid-drag-preview-scale-exit var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}@keyframes _6883de14c5fb8559__wp-grid-drag-preview-shadow-exit{0%{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}to{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}}@keyframes _0de4da1cd817e536__wp-grid-drag-preview-scale-exit{0%{transform:scale(var(--wp-grid-drag-preview-scale,1.05))}to{transform:scale(1)}}}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting .bd684ee9f92388ed__drag-preview-frame__lift{transform:scale(1)}@media (prefers-reduced-motion:reduce){._1bfa908a532e32a4__drag-preview-frame{box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005)}.bd684ee9f92388ed__drag-preview-frame__lift{transform:none}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003);transition:none}._1bfa908a532e32a4__drag-preview-frame._13e2d868ade475b5__dragPreviewFrameExiting .bd684ee9f92388ed__drag-preview-frame__lift{transition:none}}\");\n}\nexport default {\"lanes\":\"_8cc368bc6c2d79c6__lanes\",\"drag-preview-frame\":\"_1bfa908a532e32a4__drag-preview-frame\",\"drag-preview-frame__lift\":\"bd684ee9f92388ed__drag-preview-frame__lift\",\"wp-grid-drag-preview-shadow-enter\":\"_5f4a1718cb7927ee__wp-grid-drag-preview-shadow-enter\",\"wp-grid-drag-preview-scale-enter\":\"_29f7f02d4f227b1e__wp-grid-drag-preview-scale-enter\",\"dragPreviewFrameExiting\":\"_13e2d868ade475b5__dragPreviewFrameExiting\",\"wp-grid-drag-preview-shadow-exit\":\"_6883de14c5fb8559__wp-grid-drag-preview-shadow-exit\",\"wp-grid-drag-preview-scale-exit\":\"_0de4da1cd817e536__wp-grid-drag-preview-scale-exit\"};\n"],
+  "mappings": "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",
+  "names": ["DashboardLanes", "clsx"]
+}