@wordpress/grid 0.1.0

package/build/dashboard-lanes/use-lane-placement.cjs

@@ -0,0 +1,206 @@
+"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/dashboard-lanes/use-lane-placement.ts
+var use_lane_placement_exports = {};
+__export(use_lane_placement_exports, {
+  useLanePlacement: () => useLanePlacement
+});
+module.exports = __toCommonJS(use_lane_placement_exports);
+var import_element = require("@wordpress/element");
+var import_lane_placement = require("./lane-placement.cjs");
+var import_grid_item_key = require("../shared/grid-item-key.cjs");
+var DEFAULT_ROW_UNIT = 4;
+function supportsGridLanes() {
+  if (typeof CSS === "undefined" || !CSS.supports) {
+    return false;
+  }
+  return CSS.supports("display", "grid-lanes");
+}
+function clampSpan(span) {
+  if (typeof span !== "number" || !Number.isFinite(span)) {
+    return 1;
+  }
+  return Math.max(1, Math.floor(span));
+}
+function useLanePlacement(container, input) {
+  const [isPolyfilled] = (0, import_element.useState)(() => !supportsGridLanes());
+  const [itemStyles, setItemStyles] = (0, import_element.useState)(() => /* @__PURE__ */ new Map());
+  const nativeStyles = (0, import_element.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of input.items) {
+      map.set(item.key, {
+        gridColumn: `span ${clampSpan(item.span)}`
+      });
+    }
+    return map;
+  }, [input.items]);
+  const itemsSignature = (0, import_element.useMemo)(() => {
+    return input.items.map(
+      (item) => `${item.key}/${item.span ?? 1}/${item.lane ?? ""}`
+    ).join("\0");
+  }, [input.items]);
+  const itemsForPlacement = (0, import_element.useMemo)(() => input.items, [itemsSignature]);
+  const { lanes, gap, flowTolerance, rowUnit } = input;
+  (0, import_element.useLayoutEffect)(() => {
+    if (!isPolyfilled || !container) {
+      return;
+    }
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const heights = /* @__PURE__ */ new Map();
+    const observed = /* @__PURE__ */ new Set();
+    let cancelled = false;
+    let rafId = null;
+    const recompute = () => {
+      if (rafId !== null || cancelled) {
+        return;
+      }
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (cancelled) {
+          return;
+        }
+        const itemsWithHeight = itemsForPlacement.map((item) => ({
+          key: item.key,
+          span: clampSpan(item.span),
+          lane: item.lane,
+          height: heights.get(item.key) ?? 0
+        }));
+        const result = (0, import_lane_placement.computeLanePlacements)({
+          items: itemsWithHeight,
+          lanes,
+          gap,
+          flowTolerance
+        });
+        const effectiveRowUnit = Math.max(
+          1,
+          rowUnit ?? DEFAULT_ROW_UNIT
+        );
+        const next = /* @__PURE__ */ new Map();
+        for (const item of itemsForPlacement) {
+          const placement = result.placements.get(item.key);
+          if (!placement) {
+            continue;
+          }
+          const height = heights.get(item.key) ?? 0;
+          const rowStart = Math.floor(placement.top / effectiveRowUnit) + 1;
+          const rowSpan = Math.max(
+            1,
+            Math.ceil(height / effectiveRowUnit)
+          );
+          next.set(item.key, {
+            gridColumnStart: placement.lane + 1,
+            gridColumnEnd: `span ${placement.span}`,
+            gridRowStart: rowStart,
+            gridRowEnd: `span ${rowSpan}`
+          });
+        }
+        setItemStyles(next);
+      });
+    };
+    const resizeObserver = new ResizeObserver((entries) => {
+      let changed = false;
+      for (const entry of entries) {
+        const key = entry.target.getAttribute(
+          import_grid_item_key.GRID_ITEM_DATA_KEY
+        );
+        if (!key) {
+          continue;
+        }
+        const newHeight = entry.contentRect.height;
+        if (heights.get(key) !== newHeight) {
+          heights.set(key, newHeight);
+          changed = true;
+        }
+      }
+      if (changed) {
+        recompute();
+      }
+    });
+    const refreshObserved = () => {
+      const current = container.querySelectorAll(
+        `[${import_grid_item_key.GRID_ITEM_DATA_KEY}]`
+      );
+      for (const element of current) {
+        if (!observed.has(element)) {
+          observed.add(element);
+          resizeObserver.observe(element);
+          const key = element.getAttribute(import_grid_item_key.GRID_ITEM_DATA_KEY);
+          if (key) {
+            const rect = element.getBoundingClientRect();
+            heights.set(key, rect.height);
+          }
+        }
+      }
+      for (const element of observed) {
+        if (!container.contains(element)) {
+          resizeObserver.unobserve(element);
+          observed.delete(element);
+        }
+      }
+    };
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      refreshObserved();
+      recompute();
+    }) : null;
+    if (mutationObserver) {
+      mutationObserver.observe(container, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: [import_grid_item_key.GRID_ITEM_DATA_KEY]
+      });
+    }
+    refreshObserved();
+    recompute();
+    return () => {
+      cancelled = true;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+      resizeObserver.disconnect();
+      mutationObserver?.disconnect();
+    };
+  }, [
+    container,
+    isPolyfilled,
+    lanes,
+    gap,
+    flowTolerance,
+    rowUnit,
+    itemsForPlacement
+  ]);
+  if (!isPolyfilled) {
+    return { itemStyles: nativeStyles, isPolyfilled: false };
+  }
+  if (itemStyles.size === 0) {
+    return {
+      itemStyles: nativeStyles,
+      isPolyfilled: true
+    };
+  }
+  return { itemStyles, isPolyfilled: true };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useLanePlacement
+});
+//# sourceMappingURL=use-lane-placement.cjs.map

package/build/dashboard-lanes/use-lane-placement.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dashboard-lanes/use-lane-placement.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { computeLanePlacements } from './lane-placement';\nimport { GRID_ITEM_DATA_KEY } from '../shared/grid-item-key';\n\nconst DEFAULT_ROW_UNIT = 4;\n\nfunction supportsGridLanes(): boolean {\n\tif ( typeof CSS === 'undefined' || ! CSS.supports ) {\n\t\treturn false;\n\t}\n\treturn CSS.supports( 'display', 'grid-lanes' );\n}\n\nfunction clampSpan( span: number | undefined ): number {\n\tif ( typeof span !== 'number' || ! Number.isFinite( span ) ) {\n\t\treturn 1;\n\t}\n\treturn Math.max( 1, Math.floor( span ) );\n}\n\n/**\n * Logical item passed to the hook. The renderer is responsible for\n * mounting a DOM node with `data-wp-grid-item-key={ item.key }` for each\n * entry; the hook will measure that node and produce inline styles.\n */\nexport type LaneItemInput = {\n\tkey: string;\n\tspan?: number;\n\tlane?: number;\n};\n\nexport type UseLanePlacementInput = {\n\titems: ReadonlyArray< LaneItemInput >;\n\tlanes: number;\n\tgap: number;\n\tflowTolerance: number;\n\t/**\n\t * Snap unit for `grid-row-start` / `grid-row-end: span N` math.\n\t * Smaller values produce sharper placement at the cost of more\n\t * implicit rows. Defaults to 4 (px).\n\t */\n\trowUnit?: number;\n};\n\nexport type UseLanePlacementResult = {\n\t/**\n\t * Inline styles to apply to each item, keyed by item key. On\n\t * native (`display: grid-lanes`), entries carry only\n\t * `gridColumn: span N`; the browser handles row placement. While\n\t * polyfilling, entries also carry explicit `grid-column-start` /\n\t * `grid-row-*` values.\n\t */\n\titemStyles: Map< string, React.CSSProperties >;\n\n\t/**\n\t * `false` when the host browser supports `display: grid-lanes`\n\t * natively. The hook avoids mounting any observers in that case.\n\t */\n\tisPolyfilled: boolean;\n};\n\n/**\n * Hook that measures item heights and resolves their placement when\n * `display: grid-lanes` is unavailable, falling through to a no-op\n * pass when the host browser supports the feature natively.\n *\n * Usage from the renderer:\n *\n * ```tsx\n * const [ container, setContainer ] = useState< HTMLDivElement | null >( null );\n * const { itemStyles } = useLanePlacement( container, {\n *     items: layout,\n *     lanes: columns,\n *     gap: gapPx,\n *     flowTolerance: 16,\n * } );\n *\n * return (\n *     <div ref={ setContainer } style={ { display: 'grid-lanes', ... } }>\n *         { items.map( ( item ) => (\n *             <div\n *                 key={ item.key }\n *                 data-wp-grid-item-key={ item.key }\n *                 style={ itemStyles.get( item.key ) }\n *             >\n *                 { ... }\n *             </div>\n *         ) ) }\n *     </div>\n * );\n * ```\n *\n * @param container HTMLElement (or null pre-mount) hosting the items.\n * @param input     Logical items, lane count, gap, and tuning.\n * @return Per-item styles plus the `isPolyfilled` flag.\n */\nexport function useLanePlacement(\n\tcontainer: HTMLElement | null,\n\tinput: UseLanePlacementInput\n): UseLanePlacementResult {\n\t// Detect once at mount. SSR returns `true` (CSS undefined); the\n\t// client-first render returns the real value. Either path produces\n\t// the same DOM until the polyfill effect runs (both emit\n\t// span-only styles), so there is no hydration mismatch.\n\tconst [ isPolyfilled ] = useState( () => ! supportsGridLanes() );\n\n\tconst [ itemStyles, setItemStyles ] = useState<\n\t\tMap< string, React.CSSProperties >\n\t>( () => new Map() );\n\n\t// Native pass-through: items only need their column span; the\n\t// browser handles row placement. Memoized so a stable items\n\t// array yields a stable Map identity.\n\tconst nativeStyles = useMemo( () => {\n\t\tconst map = new Map< string, React.CSSProperties >();\n\t\tfor ( const item of input.items ) {\n\t\t\tmap.set( item.key, {\n\t\t\t\tgridColumn: `span ${ clampSpan( item.span ) }`,\n\t\t\t} );\n\t\t}\n\t\treturn map;\n\t}, [ input.items ] );\n\n\t// Stable signature of items for deps. Keys, spans, and explicit\n\t// lanes are the only fields that influence observer wiring or\n\t// placement, so we hash exactly those.\n\tconst itemsSignature = useMemo( () => {\n\t\treturn input.items\n\t\t\t.map(\n\t\t\t\t( item ) =>\n\t\t\t\t\t`${ item.key }/${ item.span ?? 1 }/${ item.lane ?? '' }`\n\t\t\t)\n\t\t\t.join( '\\0' );\n\t}, [ input.items ] );\n\n\t// Stable array identity while placement-relevant fields match\n\t// `itemsSignature`, so the layout effect is not torn down on every\n\t// parent re-render that passes a fresh `items` reference.\n\t// eslint-disable-next-line react-hooks/exhaustive-deps -- `itemsSignature` encodes keys/spans/lanes; `input.items` reference often changes without placement changes.\n\tconst itemsForPlacement = useMemo( () => input.items, [ itemsSignature ] );\n\n\tconst { lanes, gap, flowTolerance, rowUnit } = input;\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! isPolyfilled || ! container ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof ResizeObserver === 'undefined' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst heights = new Map< string, number >();\n\t\tconst observed = new Set< Element >();\n\t\tlet cancelled = false;\n\t\tlet rafId: number | null = null;\n\n\t\tconst recompute = () => {\n\t\t\tif ( rafId !== null || cancelled ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// One layout per frame even when ResizeObserver and\n\t\t\t// MutationObserver fire in the same tick.\n\t\t\trafId = requestAnimationFrame( () => {\n\t\t\t\trafId = null;\n\t\t\t\tif ( cancelled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst itemsWithHeight = itemsForPlacement.map( ( item ) => ( {\n\t\t\t\t\tkey: item.key,\n\t\t\t\t\tspan: clampSpan( item.span ),\n\t\t\t\t\tlane: item.lane,\n\t\t\t\t\theight: heights.get( item.key ) ?? 0,\n\t\t\t\t} ) );\n\t\t\t\tconst result = computeLanePlacements( {\n\t\t\t\t\titems: itemsWithHeight,\n\t\t\t\t\tlanes,\n\t\t\t\t\tgap,\n\t\t\t\t\tflowTolerance,\n\t\t\t\t} );\n\t\t\t\tconst effectiveRowUnit = Math.max(\n\t\t\t\t\t1,\n\t\t\t\t\trowUnit ?? DEFAULT_ROW_UNIT\n\t\t\t\t);\n\t\t\t\tconst next = new Map< string, React.CSSProperties >();\n\t\t\t\tfor ( const item of itemsForPlacement ) {\n\t\t\t\t\tconst placement = result.placements.get( item.key );\n\t\t\t\t\tif ( ! placement ) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tconst height = heights.get( item.key ) ?? 0;\n\t\t\t\t\tconst rowStart =\n\t\t\t\t\t\tMath.floor( placement.top / effectiveRowUnit ) + 1;\n\t\t\t\t\tconst rowSpan = Math.max(\n\t\t\t\t\t\t1,\n\t\t\t\t\t\tMath.ceil( height / effectiveRowUnit )\n\t\t\t\t\t);\n\t\t\t\t\tnext.set( item.key, {\n\t\t\t\t\t\tgridColumnStart: placement.lane + 1,\n\t\t\t\t\t\tgridColumnEnd: `span ${ placement.span }`,\n\t\t\t\t\t\tgridRowStart: rowStart,\n\t\t\t\t\t\tgridRowEnd: `span ${ rowSpan }`,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tsetItemStyles( next );\n\t\t\t} );\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver( ( entries ) => {\n\t\t\tlet changed = false;\n\t\t\tfor ( const entry of entries ) {\n\t\t\t\tconst key = ( entry.target as HTMLElement ).getAttribute(\n\t\t\t\t\tGRID_ITEM_DATA_KEY\n\t\t\t\t);\n\t\t\t\tif ( ! key ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst newHeight = entry.contentRect.height;\n\t\t\t\tif ( heights.get( key ) !== newHeight ) {\n\t\t\t\t\theights.set( key, newHeight );\n\t\t\t\t\tchanged = true;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif ( changed ) {\n\t\t\t\trecompute();\n\t\t\t}\n\t\t} );\n\n\t\tconst refreshObserved = () => {\n\t\t\tconst current = container.querySelectorAll(\n\t\t\t\t`[${ GRID_ITEM_DATA_KEY }]`\n\t\t\t);\n\t\t\tfor ( const element of current ) {\n\t\t\t\tif ( ! observed.has( element ) ) {\n\t\t\t\t\tobserved.add( element );\n\t\t\t\t\tresizeObserver.observe( element );\n\t\t\t\t\tconst key = element.getAttribute( GRID_ITEM_DATA_KEY );\n\t\t\t\t\tif ( key ) {\n\t\t\t\t\t\tconst rect = (\n\t\t\t\t\t\t\telement as HTMLElement\n\t\t\t\t\t\t ).getBoundingClientRect();\n\t\t\t\t\t\theights.set( key, rect.height );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tfor ( const element of observed ) {\n\t\t\t\tif ( ! container.contains( element ) ) {\n\t\t\t\t\tresizeObserver.unobserve( element );\n\t\t\t\t\tobserved.delete( element );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\t// Children may mount, unmount, or change `data-wp-grid-item-key`\n\t\t// after the container exists (drag reorders, additions). The\n\t\t// mutation observer keeps the observed set in sync.\n\t\tconst mutationObserver =\n\t\t\ttypeof MutationObserver !== 'undefined'\n\t\t\t\t? new MutationObserver( () => {\n\t\t\t\t\t\trefreshObserved();\n\t\t\t\t\t\trecompute();\n\t\t\t\t  } )\n\t\t\t\t: null;\n\t\tif ( mutationObserver ) {\n\t\t\tmutationObserver.observe( container, {\n\t\t\t\tchildList: true,\n\t\t\t\tsubtree: true,\n\t\t\t\tattributes: true,\n\t\t\t\tattributeFilter: [ GRID_ITEM_DATA_KEY ],\n\t\t\t} );\n\t\t}\n\n\t\trefreshObserved();\n\t\trecompute();\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t\tif ( rafId !== null ) {\n\t\t\t\tcancelAnimationFrame( rafId );\n\t\t\t}\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver?.disconnect();\n\t\t};\n\t}, [\n\t\tcontainer,\n\t\tisPolyfilled,\n\t\tlanes,\n\t\tgap,\n\t\tflowTolerance,\n\t\trowUnit,\n\t\titemsForPlacement,\n\t] );\n\n\tif ( ! isPolyfilled ) {\n\t\treturn { itemStyles: nativeStyles, isPolyfilled: false };\n\t}\n\tif ( itemStyles.size === 0 ) {\n\t\t// Pre-measurement frame: emit native-shape styles so items\n\t\t// appear in their default span rather than collapsing to 1\n\t\t// column at the top-left.\n\t\treturn {\n\t\t\titemStyles: nativeStyles as Map< string, React.CSSProperties >,\n\t\t\tisPolyfilled: true,\n\t\t};\n\t}\n\treturn { itemStyles, isPolyfilled: true };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/index.cjs

@@ -0,0 +1,34 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DashboardGrid: () => import_dashboard_grid.DashboardGrid,
+  DashboardLanes: () => import_dashboard_lanes.DashboardLanes
+});
+module.exports = __toCommonJS(index_exports);
+var import_dashboard_grid = require("./dashboard-grid/index.cjs");
+var import_dashboard_lanes = require("./dashboard-lanes/index.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DashboardGrid,
+  DashboardLanes
+});
+//# sourceMappingURL=index.cjs.map

package/build/index.cjs.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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA8B;AAC9B,6BAA+B;",
+  "names": []
+}

package/build/shared/drag-overlay-drop-animation.cjs

@@ -0,0 +1,70 @@
+"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/drag-overlay-drop-animation.ts
+var drag_overlay_drop_animation_exports = {};
+__export(drag_overlay_drop_animation_exports, {
+  DROP_ANIMATION_DURATION_MS: () => DROP_ANIMATION_DURATION_MS,
+  createDashboardDragDropAnimation: () => createDashboardDragDropAnimation
+});
+module.exports = __toCommonJS(drag_overlay_drop_animation_exports);
+var import_core = require("@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 {
+    ...import_core.defaultDropAnimation,
+    duration: DROP_ANIMATION_DURATION_MS,
+    easing: DROP_ANIMATION_EASING,
+    sideEffects(args) {
+      const cleanupDefault = (0, import_core.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);
+        }
+      };
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DROP_ANIMATION_DURATION_MS,
+  createDashboardDragDropAnimation
+});
+//# sourceMappingURL=drag-overlay-drop-animation.cjs.map

package/build/shared/drag-overlay-drop-animation.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAGO;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,qBAAiB,6CAAiC;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/shared/grid-item-key.cjs

@@ -0,0 +1,31 @@
+"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/grid-item-key.ts
+var grid_item_key_exports = {};
+__export(grid_item_key_exports, {
+  GRID_ITEM_DATA_KEY: () => GRID_ITEM_DATA_KEY
+});
+module.exports = __toCommonJS(grid_item_key_exports);
+var GRID_ITEM_DATA_KEY = "data-wp-grid-item-key";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GRID_ITEM_DATA_KEY
+});
+//# sourceMappingURL=grid-item-key.cjs.map

package/build/shared/grid-item-key.cjs.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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,IAAM,qBAAqB;",
+  "names": []
+}

package/build/shared/grid-overlay.cjs

@@ -0,0 +1,187 @@
+"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/shared/grid-overlay.tsx
+var grid_overlay_exports = {};
+__export(grid_overlay_exports, {
+  GridOverlay: () => GridOverlay
+});
+module.exports = __toCommonJS(grid_overlay_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@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
+var import_jsx_runtime = require("react/jsx-runtime");
+function GridOverlay({
+  columns,
+  rowHeight,
+  rows,
+  isActive
+}) {
+  const showRows = typeof rowHeight === "number" && typeof rows === "number" && rows > 0;
+  const [waveKey, setWaveKey] = (0, import_element.useState)(0);
+  (0, import_element.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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: (0, import_clsx.default)(
+        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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: grid_overlay_default.row,
+              style: {
+                "--wp-grid-overlay-row-index": rowIndex
+              }
+            },
+            rowIndex
+          ))
+        },
+        columnIndex
+      ))
+    },
+    waveKey
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridOverlay
+});
+//# sourceMappingURL=grid-overlay.cjs.map

package/build/shared/grid-overlay.cjs.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": ["clsx"]
+}