@wordpress/grid 0.1.0

package/build-module/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { DashboardGrid } from './dashboard-grid';\nexport { DashboardLanes } from './dashboard-lanes';\n\nexport type {\n\tDashboardGridLayoutItem,\n\tDashboardGridProps,\n} from './dashboard-grid/types';\nexport type {\n\tDashboardLanesLayoutItem,\n\tDashboardLanesProps,\n} from './dashboard-lanes/types';\nexport type {\n\tDragPreviewRenderProps,\n\tGridOverlayRenderProps,\n\tResizeDelta,\n\tResizeHandleRenderProps,\n} from './shared/types';\n"],
+  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;",
+  "names": []
+}

package/build-module/shared/drag-overlay-drop-animation.mjs

@@ -0,0 +1,47 @@
+// packages/grid/src/shared/drag-overlay-drop-animation.ts
+import {
+  defaultDropAnimation,
+  defaultDropAnimationSideEffects
+} from "@dnd-kit/core";
+var DROP_ANIMATION_DURATION_MS = 200;
+var DROP_ANIMATION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+function createDashboardDragDropAnimation(dragPreviewFrameClassName, exitingFrameClassName) {
+  return {
+    ...defaultDropAnimation,
+    duration: DROP_ANIMATION_DURATION_MS,
+    easing: DROP_ANIMATION_EASING,
+    sideEffects(args) {
+      const cleanupDefault = defaultDropAnimationSideEffects({
+        styles: {
+          active: {
+            opacity: "0"
+          }
+        }
+      })(args);
+      const frame = args.dragOverlay.node.getElementsByClassName(
+        dragPreviewFrameClassName
+      )[0];
+      if (frame) {
+        frame.getAnimations().forEach((animation) => animation.cancel());
+        const lift = frame.firstElementChild;
+        if (lift instanceof HTMLElement) {
+          lift.getAnimations().forEach(
+            (animation) => animation.cancel()
+          );
+        }
+        frame.classList.add(exitingFrameClassName);
+      }
+      return () => {
+        cleanupDefault?.();
+        if (frame) {
+          frame.classList.remove(exitingFrameClassName);
+        }
+      };
+    }
+  };
+}
+export {
+  DROP_ANIMATION_DURATION_MS,
+  createDashboardDragDropAnimation
+};
+//# sourceMappingURL=drag-overlay-drop-animation.mjs.map

package/build-module/shared/drag-overlay-drop-animation.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shared/drag-overlay-drop-animation.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tdefaultDropAnimation,\n\tdefaultDropAnimationSideEffects,\n} from '@dnd-kit/core';\nimport type { DropAnimation } from '@dnd-kit/core';\n\n/** Matches `--wpds-motion-duration-md` on the drag preview frame exit. */\nexport const DROP_ANIMATION_DURATION_MS = 200;\n\n/** Matches `--wpds-motion-easing-balanced` on the drag preview frame exit. */\nconst DROP_ANIMATION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/**\n * Composes @dnd-kit/core’s default overlay drop translation with preview\n * exit keyframes (via side effects). When the pointer never moves, @dnd-kit\n * skips the drop animation and these side effects do not run.\n *\n * @param dragPreviewFrameClassName Hashed class for `.drag-preview-frame`.\n * @param exitingFrameClassName     Hashed class for the exit state.\n */\nexport function createDashboardDragDropAnimation(\n\tdragPreviewFrameClassName: string,\n\texitingFrameClassName: string\n): DropAnimation {\n\treturn {\n\t\t...defaultDropAnimation,\n\t\tduration: DROP_ANIMATION_DURATION_MS,\n\t\teasing: DROP_ANIMATION_EASING,\n\t\tsideEffects( args ) {\n\t\t\tconst cleanupDefault = defaultDropAnimationSideEffects( {\n\t\t\t\tstyles: {\n\t\t\t\t\tactive: {\n\t\t\t\t\t\topacity: '0',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} )( args );\n\n\t\t\tconst frame = args.dragOverlay.node.getElementsByClassName(\n\t\t\t\tdragPreviewFrameClassName\n\t\t\t)[ 0 ] as HTMLElement | undefined;\n\n\t\t\tif ( frame ) {\n\t\t\t\tframe\n\t\t\t\t\t.getAnimations()\n\t\t\t\t\t.forEach( ( animation ) => animation.cancel() );\n\t\t\t\tconst lift = frame.firstElementChild;\n\t\t\t\tif ( lift instanceof HTMLElement ) {\n\t\t\t\t\tlift.getAnimations().forEach( ( animation ) =>\n\t\t\t\t\t\tanimation.cancel()\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tframe.classList.add( exitingFrameClassName );\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tcleanupDefault?.();\n\t\t\t\tif ( frame ) {\n\t\t\t\t\tframe.classList.remove( exitingFrameClassName );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t};\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAIA,IAAM,6BAA6B;AAG1C,IAAM,wBAAwB;AAUvB,SAAS,iCACf,2BACA,uBACgB;AAChB,SAAO;AAAA,IACN,GAAG;AAAA,IACH,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAa,MAAO;AACnB,YAAM,iBAAiB,gCAAiC;AAAA,QACvD,QAAQ;AAAA,UACP,QAAQ;AAAA,YACP,SAAS;AAAA,UACV;AAAA,QACD;AAAA,MACD,CAAE,EAAG,IAAK;AAEV,YAAM,QAAQ,KAAK,YAAY,KAAK;AAAA,QACnC;AAAA,MACD,EAAG,CAAE;AAEL,UAAK,OAAQ;AACZ,cACE,cAAc,EACd,QAAS,CAAE,cAAe,UAAU,OAAO,CAAE;AAC/C,cAAM,OAAO,MAAM;AACnB,YAAK,gBAAgB,aAAc;AAClC,eAAK,cAAc,EAAE;AAAA,YAAS,CAAE,cAC/B,UAAU,OAAO;AAAA,UAClB;AAAA,QACD;AACA,cAAM,UAAU,IAAK,qBAAsB;AAAA,MAC5C;AAEA,aAAO,MAAM;AACZ,yBAAiB;AACjB,YAAK,OAAQ;AACZ,gBAAM,UAAU,OAAQ,qBAAsB;AAAA,QAC/C;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;",
+  "names": []
+}

package/build-module/shared/grid-item-key.mjs

@@ -0,0 +1,6 @@
+// packages/grid/src/shared/grid-item-key.ts
+var GRID_ITEM_DATA_KEY = "data-wp-grid-item-key";
+export {
+  GRID_ITEM_DATA_KEY
+};
+//# sourceMappingURL=grid-item-key.mjs.map

package/build-module/shared/grid-item-key.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shared/grid-item-key.ts"],
+  "sourcesContent": ["/**\n * Data attribute grid tiles declare so layout-shift animation can map\n * measured DOM nodes back to logical item keys.\n */\nexport const GRID_ITEM_DATA_KEY = 'data-wp-grid-item-key';\n"],
+  "mappings": ";AAIO,IAAM,qBAAqB;",
+  "names": []
+}

package/build-module/shared/grid-overlay.mjs

@@ -0,0 +1,152 @@
+// packages/grid/src/shared/grid-overlay.tsx
+import clsx from "clsx";
+import { useEffect, useState } from "@wordpress/element";
+
+// 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/grid-overlay.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("63c265b9f4", "._9d372b1b567c1c15__overlay{display:grid;gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));inset:0;opacity:0;pointer-events:none;position:absolute;visibility:hidden}._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active{opacity:1;visibility:visible}@media not (prefers-reduced-motion){._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active .d8e6ee9623aadacf__row,._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active:not(._1cee1202cb622c6b__has-rows) ._04ff499ab60b4891__column{animation:_2d68e980e4534716__grid-overlay-tile-in var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)) both;animation-delay:calc(var(--wp-grid-overlay-wave-delay-step, 28ms)*(var(--wp-grid-overlay-column-index, 0) + var(--wp-grid-overlay-row-index, 0)));opacity:0;transform:scale(.64)}@keyframes _2d68e980e4534716__grid-overlay-tile-in{to{opacity:1;transform:scale(1)}}._9d372b1b567c1c15__overlay:not(.acb42ab28bd5e371__is-active){transition:opacity var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)),visibility 0s linear var(--wpds-motion-duration-sm,.1s)}._9d372b1b567c1c15__overlay:not(.acb42ab28bd5e371__is-active) ._04ff499ab60b4891__column,._9d372b1b567c1c15__overlay:not(.acb42ab28bd5e371__is-active) .d8e6ee9623aadacf__row{animation:none;transform:none}}@media (prefers-reduced-motion:reduce){._9d372b1b567c1c15__overlay{transition:opacity var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)),visibility 0s linear var(--wpds-motion-duration-sm,.1s)}._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active{transition:opacity var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)),visibility 0s linear 0s}}._04ff499ab60b4891__column{display:flex;flex-direction:column;gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));min-width:0}.d8e6ee9623aadacf__row{background-color:var(--wp-grid-overlay-tile-bg,var(--wpds-color-background-surface-neutral-weak,#f4f4f4));border-radius:var(--wpds-border-radius-lg,8px);box-sizing:border-box;flex:0 0 var(--wp-grid-overlay-row-height);height:var(--wp-grid-overlay-row-height)}");
+}
+var grid_overlay_default = { "overlay": "_9d372b1b567c1c15__overlay", "is-active": "acb42ab28bd5e371__is-active", "row": "d8e6ee9623aadacf__row", "has-rows": "_1cee1202cb622c6b__has-rows", "column": "_04ff499ab60b4891__column", "grid-overlay-tile-in": "_2d68e980e4534716__grid-overlay-tile-in" };
+
+// packages/grid/src/shared/grid-overlay.tsx
+import { jsx } from "react/jsx-runtime";
+function GridOverlay({
+  columns,
+  rowHeight,
+  rows,
+  isActive
+}) {
+  const showRows = typeof rowHeight === "number" && typeof rows === "number" && rows > 0;
+  const [waveKey, setWaveKey] = useState(0);
+  useEffect(() => {
+    if (isActive) {
+      setWaveKey((key) => key + 1);
+    }
+  }, [isActive]);
+  const style = {
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    ...showRows ? {
+      "--wp-grid-overlay-row-height": `${rowHeight}px`
+    } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: clsx(
+        grid_overlay_default.overlay,
+        isActive && grid_overlay_default["is-active"],
+        showRows && grid_overlay_default["has-rows"]
+      ),
+      style,
+      children: Array.from({ length: columns }, (_column, columnIndex) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: grid_overlay_default.column,
+          style: {
+            "--wp-grid-overlay-column-index": columnIndex,
+            "--wp-grid-overlay-row-index": 0
+          },
+          children: showRows && Array.from({ length: rows }, (_row, rowIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: grid_overlay_default.row,
+              style: {
+                "--wp-grid-overlay-row-index": rowIndex
+              }
+            },
+            rowIndex
+          ))
+        },
+        columnIndex
+      ))
+    },
+    waveKey
+  );
+}
+export {
+  GridOverlay
+};
+//# sourceMappingURL=grid-overlay.mjs.map

package/build-module/shared/grid-overlay.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shared/grid-overlay.tsx", "../../../style-runtime/src/index.ts", "../../src/shared/grid-overlay.module.css"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { GridOverlayRenderProps } from './types';\nimport styles from './grid-overlay.module.css';\n\n/**\n * Default edit-mode overlay: one column per track, each holding `rows`\n * row-marker tiles when `rowHeight` is uniform. Used by both surfaces\n * and replaceable via `renderGridOverlay`. Reveals with a diagonal\n * wave on activate and releases paint cost while inactive.\n *\n * @param props           Render props supplied by the surface.\n * @param props.columns   Column tracks to mirror.\n * @param props.rowHeight Uniform row height in pixels; omitted for\n *                        content-sized rows, which skip row markers.\n * @param props.rows      Row tracks per column; omitted when unknown.\n * @param props.isActive  When `false`, the overlay fades out.\n */\nexport function GridOverlay( {\n\tcolumns,\n\trowHeight,\n\trows,\n\tisActive,\n}: GridOverlayRenderProps ) {\n\tconst showRows =\n\t\ttypeof rowHeight === 'number' && typeof rows === 'number' && rows > 0;\n\t// Bump the key when edit mode activates so CSS animations restart on\n\t// each enter (the overlay stays mounted across toggles).\n\tconst [ waveKey, setWaveKey ] = useState( 0 );\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tsetWaveKey( ( key ) => key + 1 );\n\t\t}\n\t}, [ isActive ] );\n\tconst style: React.CSSProperties = {\n\t\tgridTemplateColumns: `repeat(${ columns }, minmax(0, 1fr))`,\n\t\t...( showRows\n\t\t\t? ( {\n\t\t\t\t\t'--wp-grid-overlay-row-height': `${ rowHeight }px`,\n\t\t\t  } as React.CSSProperties )\n\t\t\t: {} ),\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tkey={ waveKey }\n\t\t\taria-hidden\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles.overlay,\n\t\t\t\tisActive && styles[ 'is-active' ],\n\t\t\t\tshowRows && styles[ 'has-rows' ]\n\t\t\t) }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t{ Array.from( { length: columns }, ( _column, columnIndex ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ columnIndex }\n\t\t\t\t\tclassName={ styles.column }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'--wp-grid-overlay-column-index': columnIndex,\n\t\t\t\t\t\t\t'--wp-grid-overlay-row-index': 0,\n\t\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ showRows &&\n\t\t\t\t\t\tArray.from( { length: rows }, ( _row, rowIndex ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ rowIndex }\n\t\t\t\t\t\t\t\tclassName={ styles.row }\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'--wp-grid-overlay-row-index': rowIndex,\n\t\t\t\t\t\t\t\t\t} as React.CSSProperties\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\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(\"63c265b9f4\", \"._9d372b1b567c1c15__overlay{display:grid;gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));inset:0;opacity:0;pointer-events:none;position:absolute;visibility:hidden}._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active{opacity:1;visibility:visible}@media not (prefers-reduced-motion){._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active .d8e6ee9623aadacf__row,._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active:not(._1cee1202cb622c6b__has-rows) ._04ff499ab60b4891__column{animation:_2d68e980e4534716__grid-overlay-tile-in var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)) both;animation-delay:calc(var(--wp-grid-overlay-wave-delay-step, 28ms)*(var(--wp-grid-overlay-column-index, 0) + var(--wp-grid-overlay-row-index, 0)));opacity:0;transform:scale(.64)}@keyframes _2d68e980e4534716__grid-overlay-tile-in{to{opacity:1;transform:scale(1)}}._9d372b1b567c1c15__overlay:not(.acb42ab28bd5e371__is-active){transition:opacity var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)),visibility 0s linear var(--wpds-motion-duration-sm,.1s)}._9d372b1b567c1c15__overlay:not(.acb42ab28bd5e371__is-active) ._04ff499ab60b4891__column,._9d372b1b567c1c15__overlay:not(.acb42ab28bd5e371__is-active) .d8e6ee9623aadacf__row{animation:none;transform:none}}@media (prefers-reduced-motion:reduce){._9d372b1b567c1c15__overlay{transition:opacity var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)),visibility 0s linear var(--wpds-motion-duration-sm,.1s)}._9d372b1b567c1c15__overlay.acb42ab28bd5e371__is-active{transition:opacity var(--wpds-motion-duration-sm,.1s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)),visibility 0s linear 0s}}._04ff499ab60b4891__column{display:flex;flex-direction:column;gap:var(--wp-grid-gap,var(--wpds-dimension-gap-xl,24px));min-width:0}.d8e6ee9623aadacf__row{background-color:var(--wp-grid-overlay-tile-bg,var(--wpds-color-background-surface-neutral-weak,#f4f4f4));border-radius:var(--wpds-border-radius-lg,8px);box-sizing:border-box;flex:0 0 var(--wp-grid-overlay-row-height);height:var(--wp-grid-overlay-row-height)}\");\n}\nexport default {\"overlay\":\"_9d372b1b567c1c15__overlay\",\"is-active\":\"acb42ab28bd5e371__is-active\",\"row\":\"d8e6ee9623aadacf__row\",\"has-rows\":\"_1cee1202cb622c6b__has-rows\",\"column\":\"_04ff499ab60b4891__column\",\"grid-overlay-tile-in\":\"_2d68e980e4534716__grid-overlay-tile-in\"};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/shared/item-exit-overlay.mjs

@@ -0,0 +1,125 @@
+// packages/grid/src/shared/item-exit-overlay.tsx
+import { GRID_ITEM_DATA_KEY } from "./grid-item-key.mjs";
+
+// 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/item-exit-animation.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("1e0c56b346", ".f5f31b390af63a56__exit-overlay{opacity:1;overflow:hidden;pointer-events:none;position:absolute;transform:scale(1);transform-origin:center center;z-index:2}@media not (prefers-reduced-motion:reduce){.f5f31b390af63a56__exit-overlay{animation:_5e96d3d4062490e6__wp-grid-item-exit-opacity var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)) forwards,a74da0751a183719__wp-grid-item-exit-scale var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}}@keyframes _5e96d3d4062490e6__wp-grid-item-exit-opacity{0%{opacity:1}to{opacity:0}}@keyframes a74da0751a183719__wp-grid-item-exit-scale{0%{transform:scale(1)}to{transform:scale(.88)}}@media (prefers-reduced-motion:reduce){.f5f31b390af63a56__exit-overlay{display:none}}");
+}
+var item_exit_animation_default = { "exit-overlay": "f5f31b390af63a56__exit-overlay", "wp-grid-item-exit-opacity": "_5e96d3d4062490e6__wp-grid-item-exit-opacity", "wp-grid-item-exit-scale": "a74da0751a183719__wp-grid-item-exit-scale" };
+
+// packages/grid/src/shared/item-exit-overlay.tsx
+import { jsx } from "react/jsx-runtime";
+function ItemExitOverlay({
+  itemKey,
+  rect,
+  children,
+  onAnimationEnd
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: item_exit_animation_default["exit-overlay"],
+      style: {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height
+      },
+      ...{ [GRID_ITEM_DATA_KEY]: itemKey },
+      "data-wp-grid-item-exiting": "",
+      onAnimationEnd: (event) => {
+        if (event.target !== event.currentTarget) {
+          return;
+        }
+        onAnimationEnd();
+      },
+      children
+    }
+  );
+}
+export {
+  ItemExitOverlay
+};
+//# sourceMappingURL=item-exit-overlay.mjs.map

package/build-module/shared/item-exit-overlay.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shared/item-exit-overlay.tsx", "../../../style-runtime/src/index.ts", "../../src/shared/item-exit-animation.module.css"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { GRID_ITEM_DATA_KEY } from './grid-item-key';\nimport exitStyles from './item-exit-animation.module.css';\nimport type { RectSnapshot } from './use-layout-shift-animation';\n\nexport type ItemExitOverlayRect = Pick<\n\tRectSnapshot,\n\t'left' | 'top' | 'width' | 'height'\n>;\n\nexport type ItemExitOverlayProps = {\n\titemKey: string;\n\trect: ItemExitOverlayRect;\n\tchildren: React.ReactNode;\n\tonAnimationEnd: () => void;\n};\n\n/**\n * Ghost tile shown at the removed item's last position while siblings\n * reflow. Not a sortable grid cell — only visual exit feedback.\n *\n * @param root0                Component props.\n * @param root0.itemKey        Layout key of the removed tile.\n * @param root0.rect           Last bounds relative to the grid surface.\n * @param root0.children       Cached tile content to render in the ghost.\n * @param root0.onAnimationEnd Called when the exit animation finishes.\n */\nexport function ItemExitOverlay( {\n\titemKey,\n\trect,\n\tchildren,\n\tonAnimationEnd,\n}: ItemExitOverlayProps ) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ exitStyles[ 'exit-overlay' ] }\n\t\t\tstyle={ {\n\t\t\t\tleft: rect.left,\n\t\t\t\ttop: rect.top,\n\t\t\t\twidth: rect.width,\n\t\t\t\theight: rect.height,\n\t\t\t} }\n\t\t\t{ ...{ [ GRID_ITEM_DATA_KEY ]: itemKey } }\n\t\t\tdata-wp-grid-item-exiting=\"\"\n\t\t\tonAnimationEnd={ ( event ) => {\n\t\t\t\tif ( event.target !== event.currentTarget ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonAnimationEnd();\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\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(\"1e0c56b346\", \".f5f31b390af63a56__exit-overlay{opacity:1;overflow:hidden;pointer-events:none;position:absolute;transform:scale(1);transform-origin:center center;z-index:2}@media not (prefers-reduced-motion:reduce){.f5f31b390af63a56__exit-overlay{animation:_5e96d3d4062490e6__wp-grid-item-exit-opacity var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1)) forwards,a74da0751a183719__wp-grid-item-exit-scale var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-balanced,cubic-bezier(.4,0,.2,1)) forwards}}@keyframes _5e96d3d4062490e6__wp-grid-item-exit-opacity{0%{opacity:1}to{opacity:0}}@keyframes a74da0751a183719__wp-grid-item-exit-scale{0%{transform:scale(1)}to{transform:scale(.88)}}@media (prefers-reduced-motion:reduce){.f5f31b390af63a56__exit-overlay{display:none}}\");\n}\nexport default {\"exit-overlay\":\"f5f31b390af63a56__exit-overlay\",\"wp-grid-item-exit-opacity\":\"_5e96d3d4062490e6__wp-grid-item-exit-opacity\",\"wp-grid-item-exit-scale\":\"a74da0751a183719__wp-grid-item-exit-scale\"};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/shared/resize-handle.mjs

@@ -0,0 +1,193 @@
+// packages/grid/src/shared/resize-handle.tsx
+import { DndContext, useDraggable } from "@dnd-kit/core";
+import clsx from "clsx";
+import { useCallback, useEffect, useRef } from "@wordpress/element";
+import { useMergeRefs, useThrottle } 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/resize-handle.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("13645360b3", '._91523dc3a37aecb8__resize-handle-slot{opacity:1}@media (prefers-reduced-motion:no-preference){._91523dc3a37aecb8__resize-handle-slot{transition:opacity var(--wpds-motion-duration-md,.2s) var(--wpds-motion-easing-subtle,cubic-bezier(.15,0,.15,1))}}[data-wp-grid-dragging] ._91523dc3a37aecb8__resize-handle-slot,[data-wp-grid-resizing] ._91523dc3a37aecb8__resize-handle-slot{opacity:0;pointer-events:none}[data-wp-grid-resizing]\n[data-wp-grid-item-resizing]\n._91523dc3a37aecb8__resize-handle-slot{opacity:1;pointer-events:auto}._4da787f72dc00d8b__resize-handle{border-block-end:12px solid var(--wpds-color-foreground-interactive-brand,var(--wp-admin-theme-color,#3858e9));border-inline-start:12px solid transparent;bottom:0;cursor:nwse-resize;height:0;inset-inline-end:0;position:absolute;width:0;z-index:1}._885412b44a137da0__is-horizontal-only{align-items:center;background:transparent;border-style:none;bottom:auto;cursor:ew-resize;display:flex;height:40px;justify-content:center;top:50%;transform:translateY(-50%);width:16px}._885412b44a137da0__is-horizontal-only:before{background-color:var(--wpds-color-foreground-interactive-brand,var(--wp-admin-theme-color,#3858e9));border-radius:2px;content:"";height:24px;width:4px}@media (forced-colors:active){._885412b44a137da0__is-horizontal-only:before{background-color:Highlight}}');
+}
+var resize_handle_default = { "resize-handle-slot": "_91523dc3a37aecb8__resize-handle-slot", "resize-handle": "_4da787f72dc00d8b__resize-handle", "is-horizontal-only": "_885412b44a137da0__is-horizontal-only" };
+
+// packages/grid/src/shared/resize-handle.tsx
+import { jsx } from "react/jsx-runtime";
+function lockDocumentCursorWhileActive(getDocument, cursor) {
+  const root = getDocument().documentElement;
+  const previous = root.style.cursor;
+  root.style.cursor = cursor;
+  return () => {
+    root.style.cursor = previous;
+  };
+}
+function ResizeHandle({
+  itemId,
+  verticalResizable = true,
+  renderResizeHandle
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: "draggable",
+    data: { itemId }
+  });
+  const ownerDocumentRef = useRef(null);
+  const setOwnerDocumentRef = useCallback((node) => {
+    ownerDocumentRef.current = node?.ownerDocument ?? null;
+  }, []);
+  const mergedRef = useMergeRefs([setOwnerDocumentRef, setNodeRef]);
+  useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+    const cursor = verticalResizable ? "nwse-resize" : "ew-resize";
+    return lockDocumentCursorWhileActive(
+      () => ownerDocumentRef.current ?? document,
+      cursor
+    );
+  }, [isDragging, verticalResizable]);
+  if (renderResizeHandle) {
+    const RenderResizeHandle = renderResizeHandle;
+    return /* @__PURE__ */ jsx(
+      RenderResizeHandle,
+      {
+        ref: mergedRef,
+        listeners,
+        attributes,
+        verticalResizable,
+        isResizing: isDragging,
+        itemId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergedRef,
+      className: clsx(
+        resize_handle_default["resize-handle"],
+        !verticalResizable && resize_handle_default["is-horizontal-only"]
+      ),
+      ...listeners,
+      ...attributes
+    }
+  );
+}
+function ResizeHandleWrapper(props) {
+  const throttleDelay = 16;
+  const throttledResize = useThrottle((delta) => {
+    if (props.onResize) {
+      props.onResize(delta);
+    }
+  }, throttleDelay);
+  const handleDragMove = (event) => {
+    if (event.active.id !== "draggable") {
+      return;
+    }
+    throttledResize({
+      width: event.delta.x,
+      height: event.delta.y
+    });
+  };
+  const handleDragEnd = () => {
+    if (props.onResizeEnd) {
+      props.onResizeEnd();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      autoScroll: {
+        threshold: { x: 5e-3, y: 5e-3 },
+        acceleration: 1
+      },
+      onDragMove: handleDragMove,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ jsx("div", { className: resize_handle_default["resize-handle-slot"], children: /* @__PURE__ */ jsx(ResizeHandle, { ...props }) })
+    }
+  );
+}
+export {
+  ResizeHandleWrapper as default
+};
+//# sourceMappingURL=resize-handle.mjs.map