@wordpress/grid 0.1.0

package/build/shared/use-item-exit-animation.cjs

@@ -0,0 +1,148 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/grid/src/shared/use-item-exit-animation.ts
+var use_item_exit_animation_exports = {};
+__export(use_item_exit_animation_exports, {
+  useItemExitAnimation: () => useItemExitAnimation
+});
+module.exports = __toCommonJS(use_item_exit_animation_exports);
+var import_element = require("@wordpress/element");
+var EXIT_SAFETY_TIMEOUT_MS = 1e3;
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useItemExitAnimation({
+  container,
+  enabled,
+  layoutKeys,
+  getPositionsBeforeLastChange,
+  childrenCacheRef
+}) {
+  const [exitingItems, setExitingItems] = (0, import_element.useState)(
+    []
+  );
+  const prevLayoutKeysRef = (0, import_element.useRef)(/* @__PURE__ */ new Set());
+  const exitTimeoutsRef = (0, import_element.useRef)(/* @__PURE__ */ new Map());
+  const clearExitingItem = (0, import_element.useCallback)(
+    (key) => {
+      const timeout = exitTimeoutsRef.current.get(key);
+      if (timeout) {
+        clearTimeout(timeout);
+        exitTimeoutsRef.current.delete(key);
+      }
+      setExitingItems(
+        (current) => current.filter((item) => item.key !== key)
+      );
+      childrenCacheRef.current.delete(key);
+    },
+    [childrenCacheRef]
+  );
+  const scheduleExitComplete = (0, import_element.useCallback)(
+    (key) => {
+      if (exitTimeoutsRef.current.has(key)) {
+        return;
+      }
+      const timeout = setTimeout(() => {
+        exitTimeoutsRef.current.delete(key);
+        clearExitingItem(key);
+      }, EXIT_SAFETY_TIMEOUT_MS);
+      exitTimeoutsRef.current.set(key, timeout);
+    },
+    [clearExitingItem]
+  );
+  (0, import_element.useLayoutEffect)(() => {
+    if (!enabled || !container) {
+      prevLayoutKeysRef.current = new Set(layoutKeys);
+      for (const timeout of exitTimeoutsRef.current.values()) {
+        clearTimeout(timeout);
+      }
+      exitTimeoutsRef.current.clear();
+      setExitingItems([]);
+      return;
+    }
+    const prevKeys = prevLayoutKeysRef.current;
+    const removed = [];
+    for (const key of prevKeys) {
+      if (!layoutKeys.has(key)) {
+        removed.push(key);
+      }
+    }
+    prevLayoutKeysRef.current = new Set(layoutKeys);
+    if (removed.length === 0) {
+      return;
+    }
+    const lastPositions = getPositionsBeforeLastChange();
+    if (!lastPositions) {
+      return;
+    }
+    const nextExiting = [];
+    for (const key of removed) {
+      const position = lastPositions.get(key);
+      const child = childrenCacheRef.current.get(key);
+      if (!position || !child) {
+        continue;
+      }
+      nextExiting.push({
+        key,
+        rect: position,
+        child
+      });
+    }
+    if (nextExiting.length === 0) {
+      return;
+    }
+    if (prefersReducedMotion()) {
+      for (const { key } of nextExiting) {
+        childrenCacheRef.current.delete(key);
+      }
+      return;
+    }
+    setExitingItems((current) => [...current, ...nextExiting]);
+    for (const { key } of nextExiting) {
+      scheduleExitComplete(key);
+    }
+  }, [
+    container,
+    enabled,
+    getPositionsBeforeLastChange,
+    layoutKeys,
+    childrenCacheRef,
+    scheduleExitComplete
+  ]);
+  (0, import_element.useLayoutEffect)(() => {
+    const exitTimeouts = exitTimeoutsRef.current;
+    return () => {
+      for (const timeout of exitTimeouts.values()) {
+        clearTimeout(timeout);
+      }
+      exitTimeouts.clear();
+    };
+  }, []);
+  return {
+    exitingItems,
+    hasExitingItems: exitingItems.length > 0,
+    clearExitingItem
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useItemExitAnimation
+});
+//# sourceMappingURL=use-item-exit-animation.cjs.map

package/build/shared/use-item-exit-animation.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shared/use-item-exit-animation.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ItemExitOverlayRect } from './item-exit-overlay';\nimport type { RectSnapshot } from './use-layout-shift-animation';\n\n/*\n * Last-resort cleanup if `animationend` never fires (the overlay's\n * `onAnimationEnd` is the primary path). Kept well above the motion\n * token durations so the timeout can never clip the exit animation.\n */\nconst EXIT_SAFETY_TIMEOUT_MS = 1000;\n\nexport type ExitingGridItem = {\n\tkey: string;\n\trect: ItemExitOverlayRect;\n\tchild: React.ReactElement;\n};\n\ntype UseItemExitAnimationOptions = {\n\tcontainer: HTMLElement | null;\n\tenabled: boolean;\n\tlayoutKeys: ReadonlySet< string >;\n\tgetPositionsBeforeLastChange: () => ReadonlyMap<\n\t\tstring,\n\t\tRectSnapshot\n\t> | null;\n\tchildrenCacheRef: React.MutableRefObject<\n\t\tMap< string, React.ReactElement >\n\t>;\n};\n\ntype UseItemExitAnimationResult = {\n\texitingItems: ExitingGridItem[];\n\thasExitingItems: boolean;\n\tclearExitingItem: ( key: string ) => void;\n};\n\nfunction prefersReducedMotion(): boolean {\n\treturn (\n\t\ttypeof window !== 'undefined' &&\n\t\twindow.matchMedia( '(prefers-reduced-motion: reduce)' ).matches\n\t);\n}\n\n/**\n * When `layout` loses keys in edit mode, keeps a short-lived overlay at\n * the removed tile's last position (scale + fade) while siblings FLIP.\n *\n * @param root0                              Hook options.\n * @param root0.container                    Surface root that contains grid tiles.\n * @param root0.enabled                      When false, exiting state is cleared.\n * @param root0.layoutKeys                   Keys in the committed `layout` prop.\n * @param root0.getPositionsBeforeLastChange Container-relative rects before the latest layout commit.\n * @param root0.childrenCacheRef             Last rendered children keyed by tile id.\n * @return Exiting overlays and a callback to dismiss one by key.\n */\nexport function useItemExitAnimation( {\n\tcontainer,\n\tenabled,\n\tlayoutKeys,\n\tgetPositionsBeforeLastChange,\n\tchildrenCacheRef,\n}: UseItemExitAnimationOptions ): UseItemExitAnimationResult {\n\tconst [ exitingItems, setExitingItems ] = useState< ExitingGridItem[] >(\n\t\t[]\n\t);\n\tconst prevLayoutKeysRef = useRef< Set< string > >( new Set() );\n\tconst exitTimeoutsRef = useRef<\n\t\tMap< string, ReturnType< typeof setTimeout > >\n\t>( new Map() );\n\n\tconst clearExitingItem = useCallback(\n\t\t( key: string ) => {\n\t\t\tconst timeout = exitTimeoutsRef.current.get( key );\n\t\t\tif ( timeout ) {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t\texitTimeoutsRef.current.delete( key );\n\t\t\t}\n\t\t\tsetExitingItems( ( current ) =>\n\t\t\t\tcurrent.filter( ( item ) => item.key !== key )\n\t\t\t);\n\t\t\tchildrenCacheRef.current.delete( key );\n\t\t},\n\t\t[ childrenCacheRef ]\n\t);\n\n\tconst scheduleExitComplete = useCallback(\n\t\t( key: string ) => {\n\t\t\tif ( exitTimeoutsRef.current.has( key ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst timeout = setTimeout( () => {\n\t\t\t\texitTimeoutsRef.current.delete( key );\n\t\t\t\tclearExitingItem( key );\n\t\t\t}, EXIT_SAFETY_TIMEOUT_MS );\n\t\t\texitTimeoutsRef.current.set( key, timeout );\n\t\t},\n\t\t[ clearExitingItem ]\n\t);\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! enabled || ! container ) {\n\t\t\tprevLayoutKeysRef.current = new Set( layoutKeys );\n\t\t\tfor ( const timeout of exitTimeoutsRef.current.values() ) {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t}\n\t\t\texitTimeoutsRef.current.clear();\n\t\t\tsetExitingItems( [] );\n\t\t\treturn;\n\t\t}\n\n\t\tconst prevKeys = prevLayoutKeysRef.current;\n\t\tconst removed: string[] = [];\n\t\tfor ( const key of prevKeys ) {\n\t\t\tif ( ! layoutKeys.has( key ) ) {\n\t\t\t\tremoved.push( key );\n\t\t\t}\n\t\t}\n\t\tprevLayoutKeysRef.current = new Set( layoutKeys );\n\n\t\tif ( removed.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst lastPositions = getPositionsBeforeLastChange();\n\t\tif ( ! lastPositions ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextExiting: ExitingGridItem[] = [];\n\t\tfor ( const key of removed ) {\n\t\t\tconst position = lastPositions.get( key );\n\t\t\tconst child = childrenCacheRef.current.get( key );\n\t\t\tif ( ! position || ! child ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tnextExiting.push( {\n\t\t\t\tkey,\n\t\t\t\trect: position,\n\t\t\t\tchild,\n\t\t\t} );\n\t\t}\n\n\t\tif ( nextExiting.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( prefersReducedMotion() ) {\n\t\t\t// Siblings snap into place via the layout-shift hook; skip the\n\t\t\t// exit ghost (and its synchronous mount) entirely.\n\t\t\tfor ( const { key } of nextExiting ) {\n\t\t\t\tchildrenCacheRef.current.delete( key );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// A state update inside a layout effect is flushed before paint,\n\t\t// so the ghost mounts in the same frame the tile is removed.\n\t\tsetExitingItems( ( current ) => [ ...current, ...nextExiting ] );\n\n\t\tfor ( const { key } of nextExiting ) {\n\t\t\tscheduleExitComplete( key );\n\t\t}\n\t}, [\n\t\tcontainer,\n\t\tenabled,\n\t\tgetPositionsBeforeLastChange,\n\t\tlayoutKeys,\n\t\tchildrenCacheRef,\n\t\tscheduleExitComplete,\n\t] );\n\n\tuseLayoutEffect( () => {\n\t\tconst exitTimeouts = exitTimeoutsRef.current;\n\t\treturn () => {\n\t\t\tfor ( const timeout of exitTimeouts.values() ) {\n\t\t\t\tclearTimeout( timeout );\n\t\t\t}\n\t\t\texitTimeouts.clear();\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\texitingItems,\n\t\thasExitingItems: exitingItems.length > 0,\n\t\tclearExitingItem,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/shared/use-layout-shift-animation.cjs

@@ -0,0 +1,167 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/grid/src/shared/use-layout-shift-animation.ts
+var use_layout_shift_animation_exports = {};
+__export(use_layout_shift_animation_exports, {
+  getLayoutFingerprint: () => getLayoutFingerprint,
+  getPlacementFingerprint: () => getPlacementFingerprint,
+  useLayoutShiftAnimation: () => useLayoutShiftAnimation
+});
+module.exports = __toCommonJS(use_layout_shift_animation_exports);
+var import_element = require("@wordpress/element");
+var import_grid_item_key = require("./grid-item-key.cjs");
+function queryGridItems(container) {
+  return Array.from(
+    container.querySelectorAll(
+      `[${import_grid_item_key.GRID_ITEM_DATA_KEY}]:not([data-wp-grid-item-exiting])`
+    )
+  );
+}
+function readItemKey(element) {
+  return element.getAttribute(import_grid_item_key.GRID_ITEM_DATA_KEY);
+}
+function snapshotPositions(container) {
+  const base = container.getBoundingClientRect();
+  const positions = /* @__PURE__ */ new Map();
+  for (const element of queryGridItems(container)) {
+    const key = readItemKey(element);
+    if (!key) {
+      continue;
+    }
+    const { left, top, width, height } = element.getBoundingClientRect();
+    positions.set(key, {
+      left: left - base.left,
+      top: top - base.top,
+      width,
+      height
+    });
+  }
+  return positions;
+}
+function clearLayoutShiftStyles(element) {
+  element.style.removeProperty("transform");
+  element.style.removeProperty("transition");
+}
+function playLayoutShift(element, deltaX, deltaY) {
+  if (deltaX === 0 && deltaY === 0) {
+    return;
+  }
+  element.style.transition = "none";
+  element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+  void element.offsetHeight;
+  requestAnimationFrame(() => {
+    element.style.removeProperty("transition");
+    element.style.transform = "";
+    const onTransitionEnd = (event) => {
+      if (event.propertyName !== "transform") {
+        return;
+      }
+      element.removeEventListener("transitionend", onTransitionEnd);
+      clearLayoutShiftStyles(element);
+    };
+    element.addEventListener("transitionend", onTransitionEnd);
+  });
+}
+function useLayoutShiftAnimation({
+  container,
+  enabled,
+  layoutFingerprint,
+  excludeItemKey = null
+}) {
+  const snapshotBeforeChangeRef = (0, import_element.useRef)(null);
+  const lastRenderedPositionsRef = (0, import_element.useRef)(null);
+  const positionsBeforeLastChangeRef = (0, import_element.useRef)(null);
+  const captureLayoutSnapshot = (0, import_element.useCallback)(() => {
+    if (container) {
+      snapshotBeforeChangeRef.current = snapshotPositions(container);
+    }
+  }, [container]);
+  (0, import_element.useLayoutEffect)(() => {
+    if (!container || !enabled) {
+      snapshotBeforeChangeRef.current = null;
+      lastRenderedPositionsRef.current = null;
+      positionsBeforeLastChangeRef.current = null;
+      if (container) {
+        for (const element of queryGridItems(container)) {
+          clearLayoutShiftStyles(element);
+        }
+      }
+      return;
+    }
+    for (const element of queryGridItems(container)) {
+      clearLayoutShiftStyles(element);
+    }
+    const previous = snapshotBeforeChangeRef.current ?? lastRenderedPositionsRef.current;
+    snapshotBeforeChangeRef.current = null;
+    positionsBeforeLastChangeRef.current = previous ? new Map(previous) : null;
+    lastRenderedPositionsRef.current = snapshotPositions(container);
+    if (previous) {
+      const base = container.getBoundingClientRect();
+      for (const element of queryGridItems(container)) {
+        const key = readItemKey(element);
+        if (!key || key === excludeItemKey) {
+          continue;
+        }
+        const old = previous.get(key);
+        if (!old) {
+          continue;
+        }
+        const { left, top } = element.getBoundingClientRect();
+        const deltaX = old.left - (left - base.left);
+        const deltaY = old.top - (top - base.top);
+        playLayoutShift(element, deltaX, deltaY);
+      }
+    }
+  }, [container, enabled, layoutFingerprint, excludeItemKey]);
+  const getLastPositions = (0, import_element.useCallback)(() => {
+    return lastRenderedPositionsRef.current;
+  }, []);
+  const getPositionsBeforeLastChange = (0, import_element.useCallback)(() => {
+    return positionsBeforeLastChangeRef.current;
+  }, []);
+  return {
+    captureLayoutSnapshot,
+    getLastPositions,
+    getPositionsBeforeLastChange
+  };
+}
+function getLayoutFingerprint(layout) {
+  return layout.map(
+    (item) => `${item.key}:${String(item.width ?? "")}:${item.height ?? 1}:${item.order ?? ""}:${item.lane ?? ""}`
+  ).join("|");
+}
+function getPlacementFingerprint(itemStyles) {
+  return [...itemStyles.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, style]) => {
+    const column = style.gridColumn ?? "";
+    const columnStart = style.gridColumnStart ?? "";
+    const rowStart = style.gridRowStart ?? "";
+    const rowEnd = style.gridRowEnd ?? "";
+    return `${key}:${String(column)}:${String(
+      columnStart
+    )}:${String(rowStart)}:${String(rowEnd)}`;
+  }).join("|");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getLayoutFingerprint,
+  getPlacementFingerprint,
+  useLayoutShiftAnimation
+});
+//# sourceMappingURL=use-layout-shift-animation.cjs.map

package/build/shared/use-layout-shift-animation.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shared/use-layout-shift-animation.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { GRID_ITEM_DATA_KEY } from './grid-item-key';\n\n/* `left`/`top` are relative to the grid container, not the viewport. */\nexport type RectSnapshot = {\n\tleft: number;\n\ttop: number;\n\twidth: number;\n\theight: number;\n};\n\ntype UseLayoutShiftAnimationOptions = {\n\t/**\n\t * Surface root that contains grid tiles.\n\t */\n\tcontainer: HTMLElement | null;\n\n\t/**\n\t * When false, snapshots are cleared and no transforms run.\n\t */\n\tenabled: boolean;\n\n\t/**\n\t * Serialized layout/placement state. The hook runs FLIP when this\n\t * value changes while `enabled` is true.\n\t */\n\tlayoutFingerprint: string;\n\n\t/**\n\t * Item key to skip (the tile being dragged or resized).\n\t */\n\texcludeItemKey?: string | null;\n};\n\ntype UseLayoutShiftAnimationResult = {\n\t/**\n\t * Capture tile positions synchronously **before** a layout update\n\t * (call immediately before `setTemporaryLayout` / similar).\n\t */\n\tcaptureLayoutSnapshot: () => void;\n\n\t/**\n\t * Container-relative rects from the last committed paint (settled, no\n\t * FLIP invert transforms).\n\t */\n\tgetLastPositions: () => ReadonlyMap< string, RectSnapshot > | null;\n\n\t/**\n\t * Tile positions immediately before the latest layout commit. Used\n\t * by item-exit animation when keys drop out of `layout`.\n\t */\n\tgetPositionsBeforeLastChange: () => ReadonlyMap<\n\t\tstring,\n\t\tRectSnapshot\n\t> | null;\n};\n\nfunction queryGridItems( container: HTMLElement ): HTMLElement[] {\n\treturn Array.from(\n\t\tcontainer.querySelectorAll< HTMLElement >(\n\t\t\t`[${ GRID_ITEM_DATA_KEY }]:not([data-wp-grid-item-exiting])`\n\t\t)\n\t);\n}\n\nfunction readItemKey( element: HTMLElement ): string | null {\n\treturn element.getAttribute( GRID_ITEM_DATA_KEY );\n}\n\nfunction snapshotPositions(\n\tcontainer: HTMLElement\n): Map< string, RectSnapshot > {\n\t// Measure relative to the container so positions stay valid even if the\n\t// page scroll shifts between capture and use (e.g. the document reflowing\n\t// shorter after a tile is removed).\n\tconst base = container.getBoundingClientRect();\n\tconst positions = new Map< string, RectSnapshot >();\n\tfor ( const element of queryGridItems( container ) ) {\n\t\tconst key = readItemKey( element );\n\t\tif ( ! key ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst { left, top, width, height } = element.getBoundingClientRect();\n\t\tpositions.set( key, {\n\t\t\tleft: left - base.left,\n\t\t\ttop: top - base.top,\n\t\t\twidth,\n\t\t\theight,\n\t\t} );\n\t}\n\treturn positions;\n}\n\nfunction clearLayoutShiftStyles( element: HTMLElement ): void {\n\telement.style.removeProperty( 'transform' );\n\telement.style.removeProperty( 'transition' );\n}\n\nfunction playLayoutShift(\n\telement: HTMLElement,\n\tdeltaX: number,\n\tdeltaY: number\n): void {\n\tif ( deltaX === 0 && deltaY === 0 ) {\n\t\treturn;\n\t}\n\n\t// Invert: show the tile where it was before the layout change.\n\telement.style.transition = 'none';\n\telement.style.transform = `translate(${ deltaX }px, ${ deltaY }px)`;\n\tvoid element.offsetHeight;\n\n\t// Play on the next frame so the inverted transform paints before\n\t// the transition back to the committed grid position.\n\trequestAnimationFrame( () => {\n\t\telement.style.removeProperty( 'transition' );\n\t\telement.style.transform = '';\n\n\t\tconst onTransitionEnd = ( event: TransitionEvent ) => {\n\t\t\tif ( event.propertyName !== 'transform' ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\telement.removeEventListener( 'transitionend', onTransitionEnd );\n\t\t\tclearLayoutShiftStyles( element );\n\t\t};\n\t\telement.addEventListener( 'transitionend', onTransitionEnd );\n\t} );\n}\n\n/**\n * Animates sibling tiles when grid layout reflows during drag or resize\n * using a FLIP transform (see `layout-shift-animation.module.css`).\n *\n * @param root0                   Hook options.\n * @param root0.container         Surface root that contains grid tiles.\n * @param root0.enabled           When false, snapshots are cleared and no transforms run.\n * @param root0.layoutFingerprint Serialized layout/placement state.\n * @param root0.excludeItemKey    Item key to skip (the tile being dragged or resized).\n * @return Snapshot capture callback for use before layout updates.\n */\nexport function useLayoutShiftAnimation( {\n\tcontainer,\n\tenabled,\n\tlayoutFingerprint,\n\texcludeItemKey = null,\n}: UseLayoutShiftAnimationOptions ): UseLayoutShiftAnimationResult {\n\tconst snapshotBeforeChangeRef = useRef< Map<\n\t\tstring,\n\t\tRectSnapshot\n\t> | null >( null );\n\tconst lastRenderedPositionsRef = useRef< Map<\n\t\tstring,\n\t\tRectSnapshot\n\t> | null >( null );\n\tconst positionsBeforeLastChangeRef = useRef< Map<\n\t\tstring,\n\t\tRectSnapshot\n\t> | null >( null );\n\n\tconst captureLayoutSnapshot = useCallback( () => {\n\t\tif ( container ) {\n\t\t\tsnapshotBeforeChangeRef.current = snapshotPositions( container );\n\t\t}\n\t}, [ container ] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! container || ! enabled ) {\n\t\t\tsnapshotBeforeChangeRef.current = null;\n\t\t\tlastRenderedPositionsRef.current = null;\n\t\t\tpositionsBeforeLastChangeRef.current = null;\n\t\t\tif ( container ) {\n\t\t\t\tfor ( const element of queryGridItems( container ) ) {\n\t\t\t\t\tclearLayoutShiftStyles( element );\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tfor ( const element of queryGridItems( container ) ) {\n\t\t\tclearLayoutShiftStyles( element );\n\t\t}\n\n\t\tconst previous =\n\t\t\tsnapshotBeforeChangeRef.current ?? lastRenderedPositionsRef.current;\n\t\tsnapshotBeforeChangeRef.current = null;\n\n\t\tpositionsBeforeLastChangeRef.current = previous\n\t\t\t? new Map( previous )\n\t\t\t: null;\n\n\t\t// Record settled grid positions for the next FLIP. Must run before\n\t\t// invert transforms — measuring after `playLayoutShift` would bake\n\t\t// translate offsets into the baseline and skew the next animation.\n\t\tlastRenderedPositionsRef.current = snapshotPositions( container );\n\n\t\tif ( previous ) {\n\t\t\tconst base = container.getBoundingClientRect();\n\t\t\tfor ( const element of queryGridItems( container ) ) {\n\t\t\t\tconst key = readItemKey( element );\n\t\t\t\tif ( ! key || key === excludeItemKey ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst old = previous.get( key );\n\t\t\t\tif ( ! old ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst { left, top } = element.getBoundingClientRect();\n\t\t\t\tconst deltaX = old.left - ( left - base.left );\n\t\t\t\tconst deltaY = old.top - ( top - base.top );\n\t\t\t\tplayLayoutShift( element, deltaX, deltaY );\n\t\t\t}\n\t\t}\n\t}, [ container, enabled, layoutFingerprint, excludeItemKey ] );\n\n\tconst getLastPositions = useCallback( () => {\n\t\treturn lastRenderedPositionsRef.current;\n\t}, [] );\n\n\tconst getPositionsBeforeLastChange = useCallback( () => {\n\t\treturn positionsBeforeLastChangeRef.current;\n\t}, [] );\n\n\treturn {\n\t\tcaptureLayoutSnapshot,\n\t\tgetLastPositions,\n\t\tgetPositionsBeforeLastChange,\n\t};\n}\n\n/**\n * Stable fingerprint for {@link useLayoutShiftAnimation}. Width/height\n * values may be numbers or layout keywords (`'fill'`, `'full'`).\n *\n * @param layout Layout items to serialize.\n * @return Fingerprint string.\n */\nexport function getLayoutFingerprint(\n\tlayout: ReadonlyArray< {\n\t\tkey: string;\n\t\twidth?: number | string;\n\t\theight?: number;\n\t\torder?: number;\n\t\tlane?: number;\n\t} >\n): string {\n\treturn layout\n\t\t.map(\n\t\t\t( item ) =>\n\t\t\t\t`${ item.key }:${ String( item.width ?? '' ) }:${\n\t\t\t\t\titem.height ?? 1\n\t\t\t\t}:${ item.order ?? '' }:${ item.lane ?? '' }`\n\t\t)\n\t\t.join( '|' );\n}\n\n/**\n * Placement fingerprint for lanes polyfill / explicit grid positions.\n *\n * @param itemStyles Per-item inline placement styles.\n * @return Fingerprint string.\n */\nexport function getPlacementFingerprint(\n\titemStyles: Map< string, React.CSSProperties >\n): string {\n\treturn [ ...itemStyles.entries() ]\n\t\t.sort( ( [ a ], [ b ] ) => a.localeCompare( b ) )\n\t\t.map( ( [ key, style ] ) => {\n\t\t\tconst column = style.gridColumn ?? '';\n\t\t\tconst columnStart = style.gridColumnStart ?? '';\n\t\t\tconst rowStart = style.gridRowStart ?? '';\n\t\t\tconst rowEnd = style.gridRowEnd ?? '';\n\t\t\treturn `${ key }:${ String( column ) }:${ String(\n\t\t\t\tcolumnStart\n\t\t\t) }:${ String( rowStart ) }:${ String( rowEnd ) }`;\n\t\t} )\n\t\t.join( '|' );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/dashboard-grid/grid-item.mjs

@@ -0,0 +1,273 @@
+// packages/grid/src/dashboard-grid/grid-item.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import clsx from "clsx";
+import { useState, useRef } from "@wordpress/element";
+import { useMergeRefs } from "@wordpress/compose";
+
+// 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/actionable-area-slot.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("ac1094954c", "._1c54fe8165d3023e__actionable-area-slot{opacity:1}@media (prefers-reduced-motion:no-preference){._1c54fe8165d3023e__actionable-area-slot{transition:opacity var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1))}}[data-wp-grid-resizing] ._1c54fe8165d3023e__actionable-area-slot{opacity:0;pointer-events:none}");
+}
+var actionable_area_slot_default = { "actionable-area-slot": "_1c54fe8165d3023e__actionable-area-slot" };
+
+// packages/grid/src/dashboard-grid/grid-item.tsx
+import { GRID_ITEM_DATA_KEY } from "../shared/grid-item-key.mjs";
+import ResizeHandle from "../shared/resize-handle.mjs";
+import { clampResizeDelta } from "../shared/resize-snap.mjs";
+
+// packages/grid/src/dashboard-grid/grid-item.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("62860ded21", "._5d1abcb332a18701__item{position:relative}._54de57c12d3ce67e__item-content{height:100%;position:relative}._3e086aa073b9bbd9__is-resizing{overflow:visible;z-index:1}._3e086aa073b9bbd9__is-resizing ._54de57c12d3ce67e__item-content{overflow:visible;position:relative;z-index:2}._81d4e1a6c979f1e4__is-dragging{pointer-events:none}[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{border-radius:var(--wp-grid-placeholder-radius,0)}@media not (prefers-reduced-motion:reduce){[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{animation:_0447be8a7068a873__wp-grid-item-placeholder-in 0ms linear var(--wpds-motion-duration-sm,.1s) forwards;opacity:1;outline-color:transparent;outline-style:var(--wp-grid-placeholder-outline-style,dashed);outline-width:0}@keyframes _0447be8a7068a873__wp-grid-item-placeholder-in{to{opacity:var(--wp-grid-placeholder-opacity,.4);outline-color:var(--wp-grid-placeholder-outline-color,var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9)));outline-width:var(--wpds-border-width-sm,2px)}}}@media (prefers-reduced-motion:reduce){[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{opacity:var(--wp-grid-placeholder-opacity,.4);outline:var(--wpds-border-width-sm,2px) var(--wp-grid-placeholder-outline-style,dashed) var(--wp-grid-placeholder-outline-color,var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9)))}}@media (forced-colors:active){[data-wp-grid-dragging] ._81d4e1a6c979f1e4__is-dragging{--wp-grid-placeholder-outline-color:Highlight}}._2028fc095dbc5cb2__preview-overlay{background:transparent;border:var(--wpds-border-width-sm,2px) var(--wp-grid-resize-preview-outline-style,solid) var(--wp-grid-placeholder-outline-color,var(--wpds-color-stroke-interactive-brand,var(--wp-admin-theme-color,#3858e9)));border-radius:var(--wp-grid-placeholder-radius,0);box-sizing:border-box;inset-inline-start:0;pointer-events:none;position:absolute;top:0;z-index:0}@media (forced-colors:active){._2028fc095dbc5cb2__preview-overlay{border-color:Highlight}}");
+}
+var grid_item_default = { "item": "_5d1abcb332a18701__item", "item-content": "_54de57c12d3ce67e__item-content", "is-resizing": "_3e086aa073b9bbd9__is-resizing", "is-dragging": "_81d4e1a6c979f1e4__is-dragging", "wp-grid-item-placeholder-in": "_0447be8a7068a873__wp-grid-item-placeholder-in", "preview-overlay": "_2028fc095dbc5cb2__preview-overlay" };
+
+// packages/grid/src/dashboard-grid/grid-item.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function getItemCursor(disabled, interacting) {
+  if (disabled) {
+    return "default";
+  }
+  if (interacting) {
+    return void 0;
+  }
+  return "grab";
+}
+function GridItem({
+  item,
+  maxColumns,
+  disabled = false,
+  verticalResizable = true,
+  interacting = false,
+  dragging = false,
+  children,
+  actionableArea = null,
+  onResize,
+  onResizeEnd,
+  resizeSnapPreview = null,
+  minResizeWidthPx,
+  minResizeHeightPx,
+  renderResizeHandle
+}) {
+  const [resizeDelta, setResizeDelta] = useState(
+    null
+  );
+  const [initialContentSize, setInitialContentSize] = useState(null);
+  const itemRef = useRef(null);
+  const contentRef = useRef(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    isDragging
+  } = useSortable({
+    id: item.key,
+    disabled
+  });
+  const mergedRef = useMergeRefs([itemRef, setNodeRef]);
+  const contentMergedRef = useMergeRefs([contentRef]);
+  const style = {
+    gridColumnEnd: `span ${item.width === "full" ? maxColumns : Math.min(
+      typeof item.width === "number" ? item.width : 1,
+      maxColumns
+    )}`,
+    gridRowEnd: `span ${item.height || 1}`
+  };
+  const isResizing = resizeDelta !== null;
+  const itemClassName = clsx(
+    grid_item_default.item,
+    isDragging && grid_item_default["is-dragging"],
+    isResizing && grid_item_default["is-resizing"]
+  );
+  const handleResize = (delta) => {
+    const contentNode = contentRef.current;
+    let baselineSize = initialContentSize;
+    if (contentNode && !baselineSize) {
+      const { width, height } = contentNode.getBoundingClientRect();
+      baselineSize = { width, height };
+      setInitialContentSize(baselineSize);
+    }
+    let clamped = {
+      width: delta.width,
+      height: verticalResizable ? delta.height : 0
+    };
+    if (baselineSize) {
+      clamped = clampResizeDelta(clamped, baselineSize, {
+        width: minResizeWidthPx,
+        height: verticalResizable ? minResizeHeightPx : void 0
+      });
+    }
+    setResizeDelta(clamped);
+    onResize(item.key, clamped);
+  };
+  const handleResizeEnd = () => {
+    setResizeDelta(null);
+    setInitialContentSize(null);
+    onResizeEnd();
+  };
+  const continuousContentStyle = resizeDelta && initialContentSize ? {
+    width: initialContentSize.width + resizeDelta.width,
+    height: verticalResizable ? initialContentSize.height + resizeDelta.height : void 0
+  } : void 0;
+  const previewOverlay = resizeSnapPreview ? /* @__PURE__ */ jsx(SnapPreviewOverlay, { snap: resizeSnapPreview }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      className: itemClassName,
+      style,
+      ...{ [GRID_ITEM_DATA_KEY]: item.key },
+      "data-wp-grid-item-resizing": isResizing || void 0,
+      children: [
+        actionableArea ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: actionable_area_slot_default["actionable-area-slot"],
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "contents" },
+                ...dragging ? { inert: "" } : {},
+                children: actionableArea
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            ...attributes,
+            ...listeners,
+            style: {
+              height: "100%",
+              cursor: getItemCursor(disabled, interacting)
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: contentMergedRef,
+                  className: grid_item_default["item-content"],
+                  style: continuousContentStyle,
+                  children: [
+                    children,
+                    !disabled && /* @__PURE__ */ jsx(
+                      ResizeHandle,
+                      {
+                        itemId: item.key,
+                        verticalResizable,
+                        onResize: handleResize,
+                        onResizeEnd: handleResizeEnd,
+                        renderResizeHandle
+                      }
+                    )
+                  ]
+                }
+              ),
+              previewOverlay
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SnapPreviewOverlay({ snap }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: grid_item_default["preview-overlay"],
+      style: {
+        width: snap.widthPx,
+        height: snap.heightPx ?? "100%"
+      }
+    }
+  );
+}
+export {
+  GridItem
+};
+//# sourceMappingURL=grid-item.mjs.map