@wordpress/grid 0.1.0

package/build-module/dashboard-lanes/lane-placement.mjs

@@ -0,0 +1,85 @@
+// packages/grid/src/dashboard-lanes/lane-placement.ts
+function clampSpan(span, lanes) {
+  if (!Number.isFinite(span)) {
+    return 1;
+  }
+  return Math.max(1, Math.min(Math.floor(span), lanes));
+}
+function clampLane(lane, span, lanes) {
+  if (!Number.isFinite(lane)) {
+    return 0;
+  }
+  return Math.max(0, Math.min(Math.floor(lane), lanes - span));
+}
+function maxBaselineAcross(laneBottoms, startLane, span) {
+  let maxBaseline = 0;
+  for (let i = startLane; i < startLane + span; i++) {
+    if (laneBottoms[i] > maxBaseline) {
+      maxBaseline = laneBottoms[i];
+    }
+  }
+  return maxBaseline;
+}
+function computeLanePlacements(input) {
+  const lanes = Math.max(1, Math.floor(input.lanes));
+  const gap = Math.max(0, input.gap);
+  const tolerance = Math.max(0, input.flowTolerance);
+  const laneBottoms = new Array(lanes).fill(0);
+  const placements = /* @__PURE__ */ new Map();
+  const explicitItems = [];
+  const autoItems = [];
+  for (const item of input.items) {
+    if (item.lane !== void 0) {
+      explicitItems.push(item);
+    } else {
+      autoItems.push(item);
+    }
+  }
+  for (const item of explicitItems) {
+    const span = clampSpan(item.span, lanes);
+    const lane = clampLane(item.lane, span, lanes);
+    const baseline = maxBaselineAcross(laneBottoms, lane, span);
+    const top = baseline === 0 ? 0 : baseline + gap;
+    const height = Math.max(0, item.height);
+    placements.set(item.key, { key: item.key, lane, top, span });
+    const newBottom = top + height;
+    for (let i = lane; i < lane + span; i++) {
+      laneBottoms[i] = newBottom;
+    }
+  }
+  for (const item of autoItems) {
+    const span = clampSpan(item.span, lanes);
+    let bestLane = 0;
+    let bestBaseline = Infinity;
+    for (let candidate = 0; candidate <= lanes - span; candidate++) {
+      const baseline = maxBaselineAcross(laneBottoms, candidate, span);
+      if (bestBaseline - baseline > tolerance) {
+        bestBaseline = baseline;
+        bestLane = candidate;
+      }
+    }
+    const top = bestBaseline === 0 ? 0 : bestBaseline + gap;
+    const height = Math.max(0, item.height);
+    placements.set(item.key, {
+      key: item.key,
+      lane: bestLane,
+      top,
+      span
+    });
+    const newBottom = top + height;
+    for (let i = bestLane; i < bestLane + span; i++) {
+      laneBottoms[i] = newBottom;
+    }
+  }
+  let totalHeight = 0;
+  for (const bottom of laneBottoms) {
+    if (bottom > totalHeight) {
+      totalHeight = bottom;
+    }
+  }
+  return { placements, totalHeight };
+}
+export {
+  computeLanePlacements
+};
+//# sourceMappingURL=lane-placement.mjs.map

package/build-module/dashboard-lanes/lane-placement.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dashboard-lanes/lane-placement.ts"],
+  "sourcesContent": ["/**\n * Lane placement algorithm for `display: grid-lanes` polyfill.\n *\n * Implements the source-ordered, shortest-lane placement described in\n * https://webkit.org/blog/17660/introducing-css-grid-lanes/.\n *\n * The skyline + tolerance core is adapted from the CSS Grid Lanes\n * Polyfill by Simon Willison (MIT,\n * https://tools.simonwillison.net/grid-lanes-polyfill.js). The rest\n * of this module is a pure function suitable for unit testing in\n * isolation from any DOM.\n *\n * Concepts:\n * - \"Lane\" is the cross-axis track: a column in waterfall mode, a row\n *   in brick mode. The algorithm is axis-agnostic; the renderer maps\n *   the chosen lane index plus offset to `grid-column-start` /\n *   `grid-row-start` (or vice versa).\n * - Items are placed in source order. Explicit-lane items are placed\n *   first so auto-placed items can flow around them.\n * - `flowTolerance` is a length: when two candidate lanes differ in\n *   baseline by no more than this, the earlier lane wins (preserves\n *   reading order).\n */\n\n/**\n * A single item to place. Heights are pre-measured by the caller.\n */\nexport type LanePlacementItem = {\n\t/**\n\t * Stable identity. Returned in the result map.\n\t */\n\tkey: string;\n\n\t/**\n\t * Number of contiguous lanes this item occupies. Clamped to\n\t * `[ 1, lanes ]` by the algorithm.\n\t */\n\tspan: number;\n\n\t/**\n\t * Measured cross-axis size (typically pixels). The algorithm only\n\t * adds and compares heights; the unit is whatever the caller uses,\n\t * as long as `gap` and `flowTolerance` use the same one.\n\t */\n\theight: number;\n\n\t/**\n\t * Explicit 0-indexed starting lane. When set, the item bypasses\n\t * the skyline lookup and is placed at this lane regardless of\n\t * source order. Out-of-range values are clamped.\n\t */\n\tlane?: number;\n};\n\n/**\n * Algorithm input.\n */\nexport type LanePlacementInput = {\n\t/**\n\t * Items in source order.\n\t */\n\titems: ReadonlyArray< LanePlacementItem >;\n\n\t/**\n\t * Total number of lanes. Clamped to `>= 1`.\n\t */\n\tlanes: number;\n\n\t/**\n\t * Gap between items in the same lane. Same unit as `height`.\n\t */\n\tgap: number;\n\n\t/**\n\t * Tolerance for source-order tiebreaking. When two candidate\n\t * lanes have baselines within this amount, the earlier lane wins.\n\t * Defaults to `0` if a negative value is passed.\n\t */\n\tflowTolerance: number;\n};\n\n/**\n * Resolved position for a single item.\n */\nexport type LanePlacement = {\n\t/**\n\t * Mirrors the input key.\n\t */\n\tkey: string;\n\n\t/**\n\t * 0-indexed starting lane. The renderer adds 1 for\n\t * `grid-column-start`.\n\t */\n\tlane: number;\n\n\t/**\n\t * Cross-axis offset from the container's start edge, in the same\n\t * unit as the input heights. Use as the item's start position\n\t * (e.g. `top`, or `grid-row-start` after dividing by a row unit).\n\t */\n\ttop: number;\n\n\t/**\n\t * Effective span after clamping. Useful for the renderer when the\n\t * input span exceeded the lane count.\n\t */\n\tspan: number;\n};\n\n/**\n * Algorithm output.\n */\nexport type LanePlacementResult = {\n\t/**\n\t * Per-key placement. Insertion-ordered: the first iteration yields\n\t * the explicit items in source order, then the auto items in\n\t * source order.\n\t */\n\tplacements: Map< string, LanePlacement >;\n\n\t/**\n\t * Sum of the tallest lane after all items are placed. The renderer\n\t * applies this as the container's intrinsic height.\n\t */\n\ttotalHeight: number;\n};\n\nfunction clampSpan( span: number, lanes: number ): number {\n\tif ( ! Number.isFinite( span ) ) {\n\t\treturn 1;\n\t}\n\treturn Math.max( 1, Math.min( Math.floor( span ), lanes ) );\n}\n\nfunction clampLane( lane: number, span: number, lanes: number ): number {\n\tif ( ! Number.isFinite( lane ) ) {\n\t\treturn 0;\n\t}\n\treturn Math.max( 0, Math.min( Math.floor( lane ), lanes - span ) );\n}\n\nfunction maxBaselineAcross(\n\tlaneBottoms: ReadonlyArray< number >,\n\tstartLane: number,\n\tspan: number\n): number {\n\tlet maxBaseline = 0;\n\tfor ( let i = startLane; i < startLane + span; i++ ) {\n\t\tif ( laneBottoms[ i ] > maxBaseline ) {\n\t\t\tmaxBaseline = laneBottoms[ i ];\n\t\t}\n\t}\n\treturn maxBaseline;\n}\n\n/**\n * Places all items into a fixed lane count using the grid-lanes\n * algorithm: explicit items first, then auto items chosen by the\n * shortest-lane skyline with a tolerance for source order.\n *\n * Pure: no DOM access, no mutation of inputs. Safe to call from a\n * worker or during SSR.\n *\n * @param input Items, lane count, gap, and tolerance.\n * @return Per-key placements plus the resulting total height.\n */\nexport function computeLanePlacements(\n\tinput: LanePlacementInput\n): LanePlacementResult {\n\tconst lanes = Math.max( 1, Math.floor( input.lanes ) );\n\tconst gap = Math.max( 0, input.gap );\n\tconst tolerance = Math.max( 0, input.flowTolerance );\n\n\tconst laneBottoms = new Array< number >( lanes ).fill( 0 );\n\tconst placements = new Map< string, LanePlacement >();\n\n\tconst explicitItems: LanePlacementItem[] = [];\n\tconst autoItems: LanePlacementItem[] = [];\n\tfor ( const item of input.items ) {\n\t\tif ( item.lane !== undefined ) {\n\t\t\texplicitItems.push( item );\n\t\t} else {\n\t\t\tautoItems.push( item );\n\t\t}\n\t}\n\n\tfor ( const item of explicitItems ) {\n\t\tconst span = clampSpan( item.span, lanes );\n\t\tconst lane = clampLane( item.lane as number, span, lanes );\n\t\tconst baseline = maxBaselineAcross( laneBottoms, lane, span );\n\t\tconst top = baseline === 0 ? 0 : baseline + gap;\n\t\tconst height = Math.max( 0, item.height );\n\n\t\tplacements.set( item.key, { key: item.key, lane, top, span } );\n\n\t\tconst newBottom = top + height;\n\t\tfor ( let i = lane; i < lane + span; i++ ) {\n\t\t\tlaneBottoms[ i ] = newBottom;\n\t\t}\n\t}\n\n\tfor ( const item of autoItems ) {\n\t\tconst span = clampSpan( item.span, lanes );\n\t\tlet bestLane = 0;\n\t\tlet bestBaseline = Infinity;\n\n\t\tfor ( let candidate = 0; candidate <= lanes - span; candidate++ ) {\n\t\t\tconst baseline = maxBaselineAcross( laneBottoms, candidate, span );\n\n\t\t\t// Only take a lane that is strictly shorter beyond\n\t\t\t// tolerance. Within-tolerance ties keep the earlier lane\n\t\t\t// because candidates iterate in lane order, so the first\n\t\t\t// acceptable baseline wins.\n\t\t\tif ( bestBaseline - baseline > tolerance ) {\n\t\t\t\tbestBaseline = baseline;\n\t\t\t\tbestLane = candidate;\n\t\t\t}\n\t\t}\n\n\t\tconst top = bestBaseline === 0 ? 0 : bestBaseline + gap;\n\t\tconst height = Math.max( 0, item.height );\n\n\t\tplacements.set( item.key, {\n\t\t\tkey: item.key,\n\t\t\tlane: bestLane,\n\t\t\ttop,\n\t\t\tspan,\n\t\t} );\n\n\t\tconst newBottom = top + height;\n\t\tfor ( let i = bestLane; i < bestLane + span; i++ ) {\n\t\t\tlaneBottoms[ i ] = newBottom;\n\t\t}\n\t}\n\n\tlet totalHeight = 0;\n\tfor ( const bottom of laneBottoms ) {\n\t\tif ( bottom > totalHeight ) {\n\t\t\ttotalHeight = bottom;\n\t\t}\n\t}\n\n\treturn { placements, totalHeight };\n}\n"],
+  "mappings": ";AAgIA,SAAS,UAAW,MAAc,OAAwB;AACzD,MAAK,CAAE,OAAO,SAAU,IAAK,GAAI;AAChC,WAAO;AAAA,EACR;AACA,SAAO,KAAK,IAAK,GAAG,KAAK,IAAK,KAAK,MAAO,IAAK,GAAG,KAAM,CAAE;AAC3D;AAEA,SAAS,UAAW,MAAc,MAAc,OAAwB;AACvE,MAAK,CAAE,OAAO,SAAU,IAAK,GAAI;AAChC,WAAO;AAAA,EACR;AACA,SAAO,KAAK,IAAK,GAAG,KAAK,IAAK,KAAK,MAAO,IAAK,GAAG,QAAQ,IAAK,CAAE;AAClE;AAEA,SAAS,kBACR,aACA,WACA,MACS;AACT,MAAI,cAAc;AAClB,WAAU,IAAI,WAAW,IAAI,YAAY,MAAM,KAAM;AACpD,QAAK,YAAa,CAAE,IAAI,aAAc;AACrC,oBAAc,YAAa,CAAE;AAAA,IAC9B;AAAA,EACD;AACA,SAAO;AACR;AAaO,SAAS,sBACf,OACsB;AACtB,QAAM,QAAQ,KAAK,IAAK,GAAG,KAAK,MAAO,MAAM,KAAM,CAAE;AACrD,QAAM,MAAM,KAAK,IAAK,GAAG,MAAM,GAAI;AACnC,QAAM,YAAY,KAAK,IAAK,GAAG,MAAM,aAAc;AAEnD,QAAM,cAAc,IAAI,MAAiB,KAAM,EAAE,KAAM,CAAE;AACzD,QAAM,aAAa,oBAAI,IAA6B;AAEpD,QAAM,gBAAqC,CAAC;AAC5C,QAAM,YAAiC,CAAC;AACxC,aAAY,QAAQ,MAAM,OAAQ;AACjC,QAAK,KAAK,SAAS,QAAY;AAC9B,oBAAc,KAAM,IAAK;AAAA,IAC1B,OAAO;AACN,gBAAU,KAAM,IAAK;AAAA,IACtB;AAAA,EACD;AAEA,aAAY,QAAQ,eAAgB;AACnC,UAAM,OAAO,UAAW,KAAK,MAAM,KAAM;AACzC,UAAM,OAAO,UAAW,KAAK,MAAgB,MAAM,KAAM;AACzD,UAAM,WAAW,kBAAmB,aAAa,MAAM,IAAK;AAC5D,UAAM,MAAM,aAAa,IAAI,IAAI,WAAW;AAC5C,UAAM,SAAS,KAAK,IAAK,GAAG,KAAK,MAAO;AAExC,eAAW,IAAK,KAAK,KAAK,EAAE,KAAK,KAAK,KAAK,MAAM,KAAK,KAAK,CAAE;AAE7D,UAAM,YAAY,MAAM;AACxB,aAAU,IAAI,MAAM,IAAI,OAAO,MAAM,KAAM;AAC1C,kBAAa,CAAE,IAAI;AAAA,IACpB;AAAA,EACD;AAEA,aAAY,QAAQ,WAAY;AAC/B,UAAM,OAAO,UAAW,KAAK,MAAM,KAAM;AACzC,QAAI,WAAW;AACf,QAAI,eAAe;AAEnB,aAAU,YAAY,GAAG,aAAa,QAAQ,MAAM,aAAc;AACjE,YAAM,WAAW,kBAAmB,aAAa,WAAW,IAAK;AAMjE,UAAK,eAAe,WAAW,WAAY;AAC1C,uBAAe;AACf,mBAAW;AAAA,MACZ;AAAA,IACD;AAEA,UAAM,MAAM,iBAAiB,IAAI,IAAI,eAAe;AACpD,UAAM,SAAS,KAAK,IAAK,GAAG,KAAK,MAAO;AAExC,eAAW,IAAK,KAAK,KAAK;AAAA,MACzB,KAAK,KAAK;AAAA,MACV,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACD,CAAE;AAEF,UAAM,YAAY,MAAM;AACxB,aAAU,IAAI,UAAU,IAAI,WAAW,MAAM,KAAM;AAClD,kBAAa,CAAE,IAAI;AAAA,IACpB;AAAA,EACD;AAEA,MAAI,cAAc;AAClB,aAAY,UAAU,aAAc;AACnC,QAAK,SAAS,aAAc;AAC3B,oBAAc;AAAA,IACf;AAAA,EACD;AAEA,SAAO,EAAE,YAAY,YAAY;AAClC;",
+  "names": []
+}

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

@@ -0,0 +1,260 @@
+// packages/grid/src/dashboard-lanes/lanes-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-lanes/lanes-item.tsx
+import ResizeHandle from "../shared/resize-handle.mjs";
+import { clampResizeDelta } from "../shared/resize-snap.mjs";
+import { GRID_ITEM_DATA_KEY } from "../shared/grid-item-key.mjs";
+
+// packages/grid/src/dashboard-lanes/lanes-item.module.css
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("97a2a51c0b", "._0a62d9f1dff8c7d8__item{position:relative}._20c43fcd930d828a__item-content{height:100%;position:relative}._11928ee35f1a9519__is-resizing{overflow:visible;z-index:1}._11928ee35f1a9519__is-resizing ._20c43fcd930d828a__item-content{overflow:visible;position:relative;z-index:2}.b7fc83c8b16e9ee5__is-dragging{pointer-events:none}[data-wp-grid-dragging] .b7fc83c8b16e9ee5__is-dragging{border-radius:var(--wp-grid-placeholder-radius,0)}@media not (prefers-reduced-motion:reduce){[data-wp-grid-dragging] .b7fc83c8b16e9ee5__is-dragging{animation:b026dda570d0eea0__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 b026dda570d0eea0__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] .b7fc83c8b16e9ee5__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] .b7fc83c8b16e9ee5__is-dragging{--wp-grid-placeholder-outline-color:Highlight}}.cd44faab32c27168__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)));box-sizing:border-box;inset-inline-start:0;pointer-events:none;position:absolute;top:0;z-index:0}@media (forced-colors:active){.cd44faab32c27168__preview-overlay{border-color:Highlight}}");
+}
+var lanes_item_default = { "item": "_0a62d9f1dff8c7d8__item", "item-content": "_20c43fcd930d828a__item-content", "is-resizing": "_11928ee35f1a9519__is-resizing", "is-dragging": "b7fc83c8b16e9ee5__is-dragging", "wp-grid-item-placeholder-in": "b026dda570d0eea0__wp-grid-item-placeholder-in", "preview-overlay": "cd44faab32c27168__preview-overlay" };
+
+// packages/grid/src/dashboard-lanes/lanes-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 LanesItem({
+  itemKey,
+  placementStyle,
+  disabled = false,
+  interacting = false,
+  children,
+  actionableArea = null,
+  onResize,
+  onResizeEnd,
+  resizeSnapPreview = null,
+  minResizeWidthPx,
+  renderResizeHandle,
+  dragging = false
+}) {
+  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: itemKey,
+    disabled
+  });
+  const mergedRef = useMergeRefs([itemRef, setNodeRef]);
+  const contentMergedRef = useMergeRefs([contentRef]);
+  const style = {
+    ...placementStyle,
+    alignSelf: "start"
+  };
+  const isResizing = resizeDelta !== null;
+  const itemClassName = clsx(
+    lanes_item_default.item,
+    isDragging && lanes_item_default["is-dragging"],
+    isResizing && lanes_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: 0 };
+    if (baselineSize) {
+      clamped = clampResizeDelta(clamped, baselineSize, {
+        width: minResizeWidthPx
+      });
+    }
+    setResizeDelta(clamped);
+    onResize(itemKey, clamped);
+  };
+  const handleResizeEnd = () => {
+    setResizeDelta(null);
+    setInitialContentSize(null);
+    onResizeEnd();
+  };
+  const continuousContentStyle = resizeDelta && initialContentSize ? {
+    width: initialContentSize.width + resizeDelta.width
+  } : void 0;
+  const previewOverlay = resizeSnapPreview ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: lanes_item_default["preview-overlay"],
+      style: {
+        width: resizeSnapPreview.widthPx,
+        height: resizeSnapPreview.heightPx ?? "100%"
+      }
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      className: itemClassName,
+      style,
+      ...{ [GRID_ITEM_DATA_KEY]: itemKey },
+      "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: lanes_item_default["item-content"],
+                  style: continuousContentStyle,
+                  children: [
+                    children,
+                    !disabled && /* @__PURE__ */ jsx(
+                      ResizeHandle,
+                      {
+                        itemId: itemKey,
+                        verticalResizable: false,
+                        onResize: handleResize,
+                        onResizeEnd: handleResizeEnd,
+                        renderResizeHandle
+                      }
+                    )
+                  ]
+                }
+              ),
+              previewOverlay
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LanesItem
+};
+//# sourceMappingURL=lanes-item.mjs.map

package/build-module/dashboard-lanes/lanes-item.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/dashboard-lanes/lanes-item.tsx", "../../../style-runtime/src/index.ts", "../../src/shared/actionable-area-slot.module.css", "../../src/dashboard-lanes/lanes-item.module.css"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport actionableAreaStyles from '../shared/actionable-area-slot.module.css';\nimport ResizeHandle from '../shared/resize-handle';\nimport { clampResizeDelta, type ResizeSnapSize } from '../shared/resize-snap';\nimport { GRID_ITEM_DATA_KEY } from '../shared/grid-item-key';\nimport type { ResizeDelta, ResizeHandleRenderProps } from '../shared/types';\nimport styles from './lanes-item.module.css';\n\nfunction getItemCursor(\n\tdisabled: boolean,\n\tinteracting: boolean\n): React.CSSProperties[ 'cursor' ] {\n\tif ( disabled ) {\n\t\treturn 'default';\n\t}\n\tif ( interacting ) {\n\t\treturn undefined;\n\t}\n\treturn 'grab';\n}\n\n/**\n * Props for the internal `<LanesItem />` wrapper.\n */\nexport type LanesItemProps = {\n\t/**\n\t * Item key. Forwarded to dnd-kit and emitted as the\n\t * `data-wp-grid-item-key` attribute the hook reads to map measured DOM\n\t * nodes back to logical items.\n\t */\n\titemKey: string;\n\n\t/**\n\t * Inline placement style produced by `useLanePlacement`. On native\n\t * (`display: grid-lanes`), only `gridColumn: span N`. While\n\t * polyfilling, also `gridColumnStart` / `gridRowStart` /\n\t * `gridRowEnd: span N`.\n\t */\n\tplacementStyle: React.CSSProperties;\n\n\t/**\n\t * Whether drag and resize interactions are disabled.\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Whether any tile in the surface is currently being dragged or\n\t * resized. Drives the drag activator cursor.\n\t */\n\tinteracting?: boolean;\n\n\t/**\n\t * Whether a tile drag is in progress. Mutes each tile's\n\t * `actionableArea` with `inert` so hovers on other tiles' controls\n\t * do not steal the gesture.\n\t *\n\t * @default false\n\t */\n\tdragging?: boolean;\n\n\tchildren: React.ReactNode;\n\n\tactionableArea?: React.ReactNode;\n\n\tonResize: ( id: string, delta: ResizeDelta ) => void;\n\n\t/**\n\t * Snapped column span in pixels for the resize-preview outline.\n\t */\n\tresizeSnapPreview?: ResizeSnapSize | null;\n\n\t/**\n\t * Minimum tile width while resizing, in pixels (one column track).\n\t */\n\tminResizeWidthPx: number;\n\n\tonResizeEnd: () => void;\n\n\trenderResizeHandle?: React.ComponentType< ResizeHandleRenderProps >;\n};\n\nexport function LanesItem( {\n\titemKey,\n\tplacementStyle,\n\tdisabled = false,\n\tinteracting = false,\n\tchildren,\n\tactionableArea = null,\n\tonResize,\n\tonResizeEnd,\n\tresizeSnapPreview = null,\n\tminResizeWidthPx,\n\trenderResizeHandle,\n\tdragging = false,\n}: LanesItemProps ) {\n\tconst [ resizeDelta, setResizeDelta ] = useState< ResizeDelta | null >(\n\t\tnull\n\t);\n\tconst [ initialContentSize, setInitialContentSize ] = useState< {\n\t\twidth: number;\n\t\theight: number;\n\t} | null >( null );\n\tconst itemRef = useRef< HTMLDivElement >( null );\n\tconst contentRef = useRef< HTMLDivElement >( null );\n\n\tconst {\n\t\tattributes,\n\t\tlisteners,\n\t\tsetNodeRef,\n\t\tsetActivatorNodeRef,\n\t\tisDragging,\n\t} = useSortable( {\n\t\tid: itemKey,\n\t\tdisabled,\n\t} );\n\tconst mergedRef = useMergeRefs( [ itemRef, setNodeRef ] );\n\tconst contentMergedRef = useMergeRefs( [ contentRef ] );\n\n\tconst style: React.CSSProperties = {\n\t\t...placementStyle,\n\t\talignSelf: 'start',\n\t};\n\n\tconst isResizing = resizeDelta !== null;\n\tconst itemClassName = clsx(\n\t\tstyles.item,\n\t\tisDragging && styles[ 'is-dragging' ],\n\t\tisResizing && styles[ 'is-resizing' ]\n\t);\n\n\tconst handleResize = ( delta: ResizeDelta ) => {\n\t\tconst contentNode = contentRef.current;\n\t\tlet baselineSize = initialContentSize;\n\t\tif ( contentNode && ! baselineSize ) {\n\t\t\tconst { width, height } = contentNode.getBoundingClientRect();\n\t\t\tbaselineSize = { width, height };\n\t\t\tsetInitialContentSize( baselineSize );\n\t\t}\n\t\tlet clamped: ResizeDelta = { width: delta.width, height: 0 };\n\t\tif ( baselineSize ) {\n\t\t\tclamped = clampResizeDelta( clamped, baselineSize, {\n\t\t\t\twidth: minResizeWidthPx,\n\t\t\t} );\n\t\t}\n\t\tsetResizeDelta( clamped );\n\t\tonResize( itemKey, clamped );\n\t};\n\n\tconst handleResizeEnd = () => {\n\t\tsetResizeDelta( null );\n\t\tsetInitialContentSize( null );\n\t\tonResizeEnd();\n\t};\n\n\tconst continuousContentStyle: React.CSSProperties | undefined =\n\t\tresizeDelta && initialContentSize\n\t\t\t? {\n\t\t\t\t\twidth: initialContentSize.width + resizeDelta.width,\n\t\t\t  }\n\t\t\t: undefined;\n\n\tconst previewOverlay = resizeSnapPreview ? (\n\t\t<div\n\t\t\tclassName={ styles[ 'preview-overlay' ] }\n\t\t\tstyle={ {\n\t\t\t\twidth: resizeSnapPreview.widthPx,\n\t\t\t\theight: resizeSnapPreview.heightPx ?? '100%',\n\t\t\t} }\n\t\t/>\n\t) : null;\n\n\treturn (\n\t\t<div\n\t\t\tref={ mergedRef }\n\t\t\tclassName={ itemClassName }\n\t\t\tstyle={ style }\n\t\t\t{ ...{ [ GRID_ITEM_DATA_KEY ]: itemKey } }\n\t\t\tdata-wp-grid-item-resizing={ isResizing || undefined }\n\t\t>\n\t\t\t{ actionableArea ? (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ actionableAreaStyles[ 'actionable-area-slot' ] }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={ { display: 'contents' } }\n\t\t\t\t\t\t{ ...( dragging ? { inert: '' } : {} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ actionableArea }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : null }\n\n\t\t\t<div\n\t\t\t\tref={ setActivatorNodeRef }\n\t\t\t\t{ ...attributes }\n\t\t\t\t{ ...listeners }\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tcursor: getItemCursor( disabled, interacting ),\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ contentMergedRef }\n\t\t\t\t\tclassName={ styles[ 'item-content' ] }\n\t\t\t\t\tstyle={ continuousContentStyle }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t\t{ ! disabled && (\n\t\t\t\t\t\t<ResizeHandle\n\t\t\t\t\t\t\titemId={ itemKey }\n\t\t\t\t\t\t\tverticalResizable={ false }\n\t\t\t\t\t\t\tonResize={ handleResize }\n\t\t\t\t\t\t\tonResizeEnd={ handleResizeEnd }\n\t\t\t\t\t\t\trenderResizeHandle={ renderResizeHandle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t{ previewOverlay }\n\t\t\t</div>\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(\"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}\");\n}\nexport default {\"actionable-area-slot\":\"_1c54fe8165d3023e__actionable-area-slot\"};\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"97a2a51c0b\", \"._0a62d9f1dff8c7d8__item{position:relative}._20c43fcd930d828a__item-content{height:100%;position:relative}._11928ee35f1a9519__is-resizing{overflow:visible;z-index:1}._11928ee35f1a9519__is-resizing ._20c43fcd930d828a__item-content{overflow:visible;position:relative;z-index:2}.b7fc83c8b16e9ee5__is-dragging{pointer-events:none}[data-wp-grid-dragging] .b7fc83c8b16e9ee5__is-dragging{border-radius:var(--wp-grid-placeholder-radius,0)}@media not (prefers-reduced-motion:reduce){[data-wp-grid-dragging] .b7fc83c8b16e9ee5__is-dragging{animation:b026dda570d0eea0__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 b026dda570d0eea0__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] .b7fc83c8b16e9ee5__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] .b7fc83c8b16e9ee5__is-dragging{--wp-grid-placeholder-outline-color:Highlight}}.cd44faab32c27168__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)));box-sizing:border-box;inset-inline-start:0;pointer-events:none;position:absolute;top:0;z-index:0}@media (forced-colors:active){.cd44faab32c27168__preview-overlay{border-color:Highlight}}\");\n}\nexport default {\"item\":\"_0a62d9f1dff8c7d8__item\",\"item-content\":\"_20c43fcd930d828a__item-content\",\"is-resizing\":\"_11928ee35f1a9519__is-resizing\",\"is-dragging\":\"b7fc83c8b16e9ee5__is-dragging\",\"wp-grid-item-placeholder-in\":\"b026dda570d0eea0__wp-grid-item-placeholder-in\",\"preview-overlay\":\"cd44faab32c27168__preview-overlay\"};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/dashboard-lanes/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/dashboard-lanes/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/dashboard-lanes/use-lane-placement.mjs

@@ -0,0 +1,181 @@
+// packages/grid/src/dashboard-lanes/use-lane-placement.ts
+import { useState, useLayoutEffect, useMemo } from "@wordpress/element";
+import { computeLanePlacements } from "./lane-placement.mjs";
+import { GRID_ITEM_DATA_KEY } from "../shared/grid-item-key.mjs";
+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] = useState(() => !supportsGridLanes());
+  const [itemStyles, setItemStyles] = useState(() => /* @__PURE__ */ new Map());
+  const nativeStyles = 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 = useMemo(() => {
+    return input.items.map(
+      (item) => `${item.key}/${item.span ?? 1}/${item.lane ?? ""}`
+    ).join("\0");
+  }, [input.items]);
+  const itemsForPlacement = useMemo(() => input.items, [itemsSignature]);
+  const { lanes, gap, flowTolerance, rowUnit } = input;
+  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 = 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(
+          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(
+        `[${GRID_ITEM_DATA_KEY}]`
+      );
+      for (const element of current) {
+        if (!observed.has(element)) {
+          observed.add(element);
+          resizeObserver.observe(element);
+          const key = element.getAttribute(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: [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 };
+}
+export {
+  useLanePlacement
+};
+//# sourceMappingURL=use-lane-placement.mjs.map

package/build-module/dashboard-lanes/use-lane-placement.mjs.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-module/index.mjs

@@ -0,0 +1,8 @@
+// packages/grid/src/index.ts
+import { DashboardGrid } from "./dashboard-grid/index.mjs";
+import { DashboardLanes } from "./dashboard-lanes/index.mjs";
+export {
+  DashboardGrid,
+  DashboardLanes
+};
+//# sourceMappingURL=index.mjs.map