@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

package/dist/views/HierarchyList/HierarchyCards/index.css

@@ -0,0 +1,115 @@
+@layer payload-default {
+  /*
+   * The plane stacks one band per group (folders, then documents) but owns the selection gestures
+   * itself, so a marquee or a Shift-click range can run across bands. It is also the containing
+   * block for the marquee, which is why the bands can't be the positioned elements.
+   */
+  .hierarchy-card-grid {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hierarchy-card-grid__band {
+    display: grid;
+    /*
+     * Holds the layout until the plane has been measured, which can only happen on the client: the
+     * measured count (2/4/5/8) then lands as an inline style - see `useColumnCount` in index.tsx.
+     * `auto-fill` is used rather than a fixed count because it resolves to the same ~200px card
+     * target the tiers aim for, so the first paint already matches the measured result closely and
+     * the grid doesn't visibly reflow on hydration.
+     */
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacer-3);
+    /*
+     * Matches the horizontal gutter the tables get from their own cells, so cards line up with
+     * the header above them instead of sitting flush against the panel edge.
+     */
+    padding-inline: var(--gutter-h);
+    padding-block-start: var(--spacer-4);
+    padding-block-end: var(--spacer-2);
+    margin: 0;
+    list-style: none;
+  }
+
+  /*
+   * Folders sit on the same grid as the documents - same columns, same gap - so the two bands read as
+   * one surface. Only the end padding differs, since the documents band below supplies that gap.
+   */
+  .hierarchy-card-grid__band--folders {
+    padding-block-end: var(--spacer-0);
+  }
+
+  /*
+   * Distinguishes documents that aren't grouped under any folder, e.g. "Documents not in a Folder"
+   * at the root of a hierarchy. Only some bands get one, so the band below tightens its own top
+   * padding rather than doubling up on the label's own spacing.
+   */
+  .hierarchy-card-grid__band-label {
+    margin: 0;
+    padding-inline: var(--gutter-h);
+    padding-block-start: var(--spacer-4);
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .hierarchy-card-grid__band--labeled {
+    padding-block-start: var(--spacer-3);
+  }
+
+  /*
+   * Claims the container's leftover height so click-away and drag selection work over the empty
+   * space below the cards, not just the gaps between them. Only the last band grows, and its
+   * `align-content` has to be pinned to the start because a grid's default would otherwise stretch
+   * the auto-sized rows into that space.
+   */
+  .hierarchy-card-grid--fill-height {
+    flex-grow: 1;
+  }
+
+  .hierarchy-card-grid--fill-height .hierarchy-card-grid__band:last-child {
+    flex-grow: 1;
+    align-content: start;
+  }
+
+  /* Lets each card stretch to fill its grid cell rather than collapsing to content height. */
+  .hierarchy-card-grid__item {
+    display: flex;
+    min-width: 0;
+    /*
+     * A card is selected on click and opened on double click, so text selection would only ever be
+     * an accidental by-product of either gesture.
+     */
+    user-select: none;
+  }
+
+  .hierarchy-card-grid__item > * {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /*
+   * Cards stay in place while they are being dragged and fade instead, so the row keeps its shape and
+   * the stack under the cursor is the thing that reads as moving.
+   */
+  .hierarchy-card-grid__item--dragging {
+    opacity: 0.5;
+  }
+
+  /*
+   * Drag-selection marquee: an accent hairline over a translucent accent fill, mirroring the
+   * file-browser treatment. Absolutely positioned, so it stays out of the bands' flow, and inert
+   * so it never intercepts the pointer mid-drag.
+   */
+  .hierarchy-card-grid__marquee {
+    position: absolute;
+    z-index: 1;
+    border: var(--stroke-width-small) solid var(--color-border-selected);
+    background: color-mix(in srgb, var(--color-border-selected) 20%, transparent);
+    pointer-events: none;
+  }
+}

package/dist/views/HierarchyList/HierarchyCards/index.d.ts

@@ -0,0 +1,80 @@
+import type { User } from 'payload';
+import React from 'react';
+import type { TableRow } from '../HierarchyTable/types.js';
+import './index.css';
+/**
+ * Rows are drawn from several collections whose ids can collide, so identity is the pair.
+ */
+export declare const getRowKey: (row: TableRow) => string;
+/**
+ * One horizontal group of cards. Bands stack vertically and share a single selection scope, so a
+ * range selection or a marquee can run from a folder straight through the documents below it.
+ */
+export type PlaneBand = {
+    /**
+     * Hierarchy rows render as folder cards, related documents render as document cards.
+     */
+    isHierarchyGroup: boolean;
+    key: string;
+    /**
+     * Accessible name for this band, so each list is distinguishable when several render.
+     */
+    label?: string;
+    rows: TableRow[];
+    /**
+     * Heading rendered above the band, e.g. distinguishing documents with no folder from the ones
+     * inside a folder. Separate from `label` because that one is read on every band as an accessible
+     * name, while this is opt-in and only some bands need it.
+     */
+    visibleLabel?: string;
+};
+export type HierarchyCardGridProps = {
+    /**
+     * Ids of the folders between the root and the folder currently open, so a folder can't be dropped
+     * into its own subtree.
+     */
+    ancestorIds?: (number | string)[];
+    /**
+     * Fallback accessible name for bands that don't carry their own label.
+     */
+    ariaLabel?: string;
+    bands: PlaneBand[];
+    /**
+     * Grows the plane to fill the remaining height of its container, so click-away and drag selection
+     * reach the empty space below the cards rather than only the gaps between them. Requires the
+     * container to be a flex column.
+     */
+    fillHeight?: boolean;
+    /**
+     * Returns the user currently editing a row, mirroring the table's lock affordance. Locked rows
+     * cannot be selected, so their cards render a lock indicator.
+     */
+    getRowLockedUser?: (row: TableRow) => undefined | User;
+    /**
+     * Slug of the collection that owns the folder tree, used to address drop destinations.
+     */
+    hierarchySlug?: string;
+    /**
+     * Renders the cards as plain selectable tiles, with no drag activation and no dragging treatment.
+     * For planes with nowhere to drop, such as the flat collection grid outside the hierarchy view.
+     */
+    isDragDisabled?: boolean;
+    /**
+     * Clears the selection once a drop has moved it, since those documents are no longer on this page.
+     */
+    onMoveSuccess?: () => void;
+    /**
+     * Toggles a single row's selected state. Multi-card intents (replace, range) are resolved into
+     * the minimum set of per-row toggles by the plane, so consumers only implement one operation.
+     */
+    onSelectionChange: (row: TableRow) => void;
+    selectedKeys: Set<string>;
+    /**
+     * Renders each document card's collection label as a pill over its thumbnail. Defaults to showing
+     * the pill only when the documents span more than one collection - a grid of a single document
+     * type labels itself, so the pill would repeat the same word on every card.
+     */
+    showCollectionType?: boolean;
+};
+export declare function HierarchyCardGrid({ ancestorIds, ariaLabel, bands, fillHeight, getRowLockedUser, hierarchySlug, isDragDisabled, onMoveSuccess, onSelectionChange, selectedKeys, showCollectionType, }: HierarchyCardGridProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/HierarchyList/HierarchyCards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/HierarchyList/HierarchyCards/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAGnC,OAAO,KAA4D,MAAM,OAAO,CAAA;AAGhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAM1D,OAAO,aAAa,CAAA;AAIpB;;GAEG;AACH,eAAO,MAAM,SAAS,QAAS,QAAQ,KAAG,MAA4C,CAAA;AAoHtF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAA;IACzB,GAAG,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,GAAG,IAAI,CAAA;IACtD;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B;;;OAGG;IACH,iBAAiB,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,EAChC,WAAgB,EAChB,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,cAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,qBA+ZxB"}

package/dist/views/HierarchyList/HierarchyCards/index.js

@@ -0,0 +1,457 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useRouter } from '../../../providers/RouterAdapter/index.js';
+import { DragPreviewItem } from './DragPreviewItem/index.js';
+import { PlaneItem } from './PlaneItem/index.js';
+import './index.css';
+const baseClass = 'hierarchy-card-grid';
+/**
+ * Rows are drawn from several collections whose ids can collide, so identity is the pair.
+ */
+export const getRowKey = row => `${row._collectionSlug}:${row.id}`;
+const getRowTitle = ({
+  row,
+  useAsTitle
+}) => {
+  const rawTitle = row[useAsTitle];
+  if (typeof rawTitle === 'string' || typeof rawTitle === 'number') {
+    return String(rawTitle);
+  }
+  return String(row.id);
+};
+/**
+ * Discrete column tiers, richest-first. Each `minWidth` is the container width at which that
+ * many ~200px cards (plus the grid gap) still fit, so cards never drop meaningfully below the
+ * 200px target as the container grows.
+ */
+const COLUMN_TIERS = [{
+  columns: 8,
+  minWidth: 1712
+}, {
+  columns: 5,
+  minWidth: 1064
+}, {
+  columns: 4,
+  minWidth: 848
+}, {
+  columns: 2,
+  minWidth: 0
+}];
+const getColumnCount = containerWidth => COLUMN_TIERS.find(tier => containerWidth >= tier.minWidth)?.columns ?? 2;
+/**
+ * Measures the plane's own width via `ResizeObserver` rather than CSS container queries, so the
+ * column count is driven by explicit, easily-debuggable state instead of container-query support
+ * or self-referencing-container edge cases. Every band shares the count, so folder cards and
+ * document cards line up in the same columns.
+ *
+ * Starts `null` - not at a guessed tier - because the width can only be known on the client. Until
+ * it is measured the bands leave `grid-template-columns` to CSS, which auto-fills to the same ~200px
+ * target; seeding a guess instead would paint that many full-width-share cards on the server and
+ * then visibly snap to the measured count on hydration.
+ */
+const useColumnCount = () => {
+  const $ = _c(4);
+  const ref = useRef(null);
+  const [columns, setColumns] = useState(null);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      const node = ref.current;
+      if (!node) {
+        return;
+      }
+      const observer = new ResizeObserver(t2 => {
+        const [entry] = t2;
+        if (entry) {
+          setColumns(getColumnCount(entry.contentRect.width));
+        }
+      });
+      observer.observe(node);
+      return () => observer.disconnect();
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[2] !== columns) {
+    t2 = [ref, columns];
+    $[2] = columns;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  return t2;
+};
+/**
+ * A press only becomes a marquee once the pointer travels this far, so a slightly imprecise click
+ * on empty space still reads as a click-away rather than a zero-area drag.
+ */
+const DRAG_THRESHOLD = 4;
+/** Matches the overlay's own cap, so no preview card is built that the overlay would discard. */
+const MAX_DRAG_PREVIEW_CARDS = 3;
+const getSelectionIntent = event => {
+  if (event.shiftKey) {
+    return 'range';
+  }
+  if (event.metaKey || event.ctrlKey) {
+    return 'toggle';
+  }
+  return 'replace';
+};
+export function HierarchyCardGrid({
+  ancestorIds = [],
+  ariaLabel,
+  bands,
+  fillHeight = false,
+  getRowLockedUser,
+  hierarchySlug,
+  isDragDisabled = false,
+  onMoveSuccess,
+  onSelectionChange,
+  selectedKeys,
+  showCollectionType
+}) {
+  const {
+    config: {
+      routes: {
+        admin: adminRoute
+      }
+    },
+    getEntityConfig
+  } = useConfig();
+  const router = useRouter();
+  const [planeRef, columns] = useColumnCount();
+  /**
+  * Selection, range anchoring, and the marquee all operate over one flat index space, which is
+  * what puts folders and documents on the same plane rather than in sibling scopes.
+  */
+  const flatRows = useMemo(() => bands.flatMap(band => band.rows), [bands]);
+  /**
+  * Everything needed to render one card, flattened into the same index space as `flatRows`. Built
+  * once so the render and the drag overlay agree on titles and hrefs without recomputing them.
+  */
+  const descriptors = useMemo(() => bands.flatMap(band_0 => band_0.rows.map(row => {
+    const collectionConfig = getEntityConfig({
+      collectionSlug: row._collectionSlug
+    });
+    const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id';
+    const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+    const parentFieldName = hierarchyConfig?.parentFieldName || 'parent';
+    // Folders drill in via `_browseHref` so the click stays in the collection being browsed;
+    // the fallback covers rows built outside the hierarchy view.
+    const href = band_0.isHierarchyGroup ? row._browseHref ?? formatAdminURL({
+      adminRoute,
+      path: `/collections/${row._collectionSlug}?${parentFieldName}=${row.id}`
+    }) : formatAdminURL({
+      adminRoute,
+      path: `/collections/${row._collectionSlug}/${row.id}`
+    });
+    return {
+      href,
+      isHierarchyGroup: band_0.isHierarchyGroup,
+      key: getRowKey(row),
+      parentFieldName,
+      row,
+      title: getRowTitle({
+        row,
+        useAsTitle
+      })
+    };
+  })), [adminRoute, bands, getEntityConfig]);
+  const showTypePill = useMemo(() => {
+    if (showCollectionType !== undefined) {
+      return showCollectionType;
+    }
+    const documentSlugs = new Set(bands.filter(band_1 => !band_1.isHierarchyGroup).flatMap(band_2 => band_2.rows).map(row_0 => row_0._collectionSlug));
+    return documentSlugs.size > 1;
+  }, [bands, showCollectionType]);
+  /**
+  * Payload for dragging the current selection, shared by every selected card so it is built once
+  * per render rather than once per card. The preview is capped because the overlay only fans a few
+  * cards before collapsing the remainder into a count.
+  */
+  const selectionDragData = useMemo(() => {
+    const selected = descriptors.filter(descriptor => selectedKeys.has(descriptor.key));
+    return {
+      type: 'hierarchy-items',
+      items: selected.map(descriptor_0 => ({
+        id: descriptor_0.row.id,
+        collectionSlug: descriptor_0.row._collectionSlug,
+        title: descriptor_0.title
+      })),
+      onMoveSuccess,
+      preview: selected.slice(0, MAX_DRAG_PREVIEW_CARDS).map(descriptor_1 => /*#__PURE__*/_jsx(DragPreviewItem, {
+        isHierarchyGroup: descriptor_1.isHierarchyGroup,
+        row: descriptor_1.row
+      }, descriptor_1.key))
+    };
+  }, [descriptors, onMoveSuccess, selectedKeys]);
+  const [marquee, setMarquee] = useState(null);
+  // Origin of the next Shift+Click range, set by every plain or Cmd/Ctrl click.
+  const anchorIndexRef = useRef(null);
+  /**
+  * Flat index → card element. The cards live across several lists now, so the marquee can no
+  * longer hit-test by walking one element's children.
+  */
+  const itemRefs = useRef(new Map());
+  const setItemRef = useCallback((flatIndex, node) => {
+    if (node) {
+      itemRefs.current.set(flatIndex, node);
+    } else {
+      itemRefs.current.delete(flatIndex);
+    }
+  }, []);
+  /**
+  * A drag binds its handlers to `window` for its whole lifetime, so those handlers have to read
+  * the live rows and selection rather than the values captured when the press began - the
+  * selection changes on every pointer move.
+  */
+  const latestRef = useRef({
+    flatRows,
+    getRowLockedUser,
+    onSelectionChange,
+    selectedKeys
+  });
+  useEffect(() => {
+    latestRef.current = {
+      flatRows,
+      getRowLockedUser,
+      onSelectionChange,
+      selectedKeys
+    };
+  });
+  // Unmounting mid-drag would otherwise leave the window listeners bound.
+  const dragCleanupRef = useRef(null);
+  useEffect(() => () => dragCleanupRef.current?.(), []);
+  const isRowSelectable = row_1 => !latestRef.current.getRowLockedUser?.(row_1);
+  /**
+  * Reduces a desired selection to the minimum set of per-row toggles the consumer understands.
+  */
+  const commitSelection = nextSelectedKeys => {
+    const {
+      flatRows: latestRows,
+      onSelectionChange: onChange,
+      selectedKeys: currentKeys
+    } = latestRef.current;
+    latestRows.forEach(row_2 => {
+      const key = getRowKey(row_2);
+      if (isRowSelectable(row_2) && currentKeys.has(key) !== nextSelectedKeys.has(key)) {
+        onChange(row_2);
+      }
+    });
+  };
+  const applySelectionIntent = ({
+    index,
+    intent
+  }) => {
+    const row_3 = flatRows[index];
+    if (!row_3 || !isRowSelectable(row_3)) {
+      return;
+    }
+    const nextSelectedKeys_0 = new Set();
+    if (intent === 'range') {
+      const anchorIndex = anchorIndexRef.current ?? index;
+      const start = Math.min(anchorIndex, index);
+      const end = Math.max(anchorIndex, index);
+      flatRows.slice(start, end + 1).forEach(rangeRow => {
+        if (isRowSelectable(rangeRow)) {
+          nextSelectedKeys_0.add(getRowKey(rangeRow));
+        }
+      });
+    } else if (intent === 'toggle') {
+      selectedKeys.forEach(key_0 => nextSelectedKeys_0.add(key_0));
+      const key_1 = getRowKey(row_3);
+      if (nextSelectedKeys_0.has(key_1)) {
+        nextSelectedKeys_0.delete(key_1);
+      } else {
+        nextSelectedKeys_0.add(key_1);
+      }
+      anchorIndexRef.current = index;
+    } else {
+      nextSelectedKeys_0.add(getRowKey(row_3));
+      anchorIndexRef.current = index;
+    }
+    commitSelection(nextSelectedKeys_0);
+  };
+  /**
+  * Cards have no checkbox, so the card surface itself drives selection: click selects, Cmd/Ctrl
+  * click toggles, Shift click extends. Navigation moves to double click instead.
+  *
+  * This runs in the capture phase and stops propagation because the card's `Link` navigates from
+  * its own `onClick` - a bubbling handler here would fire after the route change had already
+  * started. Keyboard-triggered clicks (`detail === 0`, i.e. Enter on the focused link) are let
+  * through to the link, since there is no double-press equivalent.
+  */
+  const handleCardClickCapture = (event, index_0) => {
+    if (event.detail === 0) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    applySelectionIntent({
+      index: index_0,
+      intent: getSelectionIntent(event)
+    });
+  };
+  // Space is the keyboard counterpart of a selecting click, mirroring what the checkbox used to
+  // offer; Enter stays with the focused link so it still opens the document.
+  const handleCardKeyDown = (event_0, index_1) => {
+    if (event_0.key !== ' ') {
+      return;
+    }
+    // Space would otherwise scroll the page.
+    event_0.preventDefault();
+    applySelectionIntent({
+      index: index_1,
+      intent: getSelectionIntent(event_0)
+    });
+  };
+  // Pressing an unselected card collapses the selection onto it, so a drag that starts from it moves
+  // only that card. The pointer sensor's own distance threshold means this lands before any drag.
+  const handlePointerDownUnselected = index_2 => {
+    applySelectionIntent({
+      index: index_2,
+      intent: 'replace'
+    });
+  };
+  const handleCardDoubleClick = (event_1, href_0) => {
+    event_1.preventDefault();
+    router.push(href_0);
+  };
+  /**
+  * A press on the plane's empty space either clears the selection (click-away) or draws a marquee
+  * that selects every card it touches, matching a file browser. Holding a modifier keeps the
+  * existing selection and adds to it.
+  *
+  * All coordinates are kept relative to the plane so the marquee stays anchored to the cards if
+  * the page scrolls mid-drag.
+  */
+  const handlePlaneMouseDown = event_2 => {
+    const planeNode = planeRef.current;
+    // Presses that land on a card belong to the click handlers above.
+    if (event_2.button !== 0 || !planeNode || event_2.target.closest(`.${baseClass}__item`)) {
+      return;
+    }
+    // Suppresses the native text-selection drag that would otherwise fight the marquee.
+    event_2.preventDefault();
+    const isAdditive = event_2.shiftKey || event_2.metaKey || event_2.ctrlKey;
+    const baseSelectedKeys = new Set(selectedKeys);
+    const startBounds = planeNode.getBoundingClientRect();
+    const startX = event_2.clientX - startBounds.left;
+    const startY = event_2.clientY - startBounds.top;
+    let hasMoved = false;
+    const handleMouseMove = moveEvent => {
+      const planeBounds = planeNode.getBoundingClientRect();
+      const currentX = moveEvent.clientX - planeBounds.left;
+      const currentY = moveEvent.clientY - planeBounds.top;
+      if (!hasMoved && Math.abs(currentX - startX) < DRAG_THRESHOLD && Math.abs(currentY - startY) < DRAG_THRESHOLD) {
+        return;
+      }
+      hasMoved = true;
+      const bottom = Math.max(startY, currentY);
+      const left = Math.min(startX, currentX);
+      const right = Math.max(startX, currentX);
+      const top = Math.min(startY, currentY);
+      setMarquee({
+        height: bottom - top,
+        left,
+        top,
+        width: right - left
+      });
+      const nextSelectedKeys_1 = isAdditive ? new Set(baseSelectedKeys) : new Set();
+      latestRef.current.flatRows.forEach((row_4, index_3) => {
+        const itemNode = itemRefs.current.get(index_3);
+        if (!itemNode || !isRowSelectable(row_4)) {
+          return;
+        }
+        const itemBounds = itemNode.getBoundingClientRect();
+        const intersects = itemBounds.left - planeBounds.left < right && itemBounds.right - planeBounds.left > left && itemBounds.top - planeBounds.top < bottom && itemBounds.bottom - planeBounds.top > top;
+        if (intersects) {
+          nextSelectedKeys_1.add(getRowKey(row_4));
+        }
+      });
+      commitSelection(nextSelectedKeys_1);
+    };
+    const endDrag = () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', endDrag);
+      dragCleanupRef.current = null;
+      setMarquee(null);
+      // A press that never became a drag is a click-away: it clears the selection.
+      if (!hasMoved && !isAdditive) {
+        commitSelection(new Set());
+        anchorIndexRef.current = null;
+      }
+    };
+    dragCleanupRef.current = endDrag;
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', endDrag);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, fillHeight && `${baseClass}--fill-height`].filter(Boolean).join(' '),
+    onMouseDown: handlePlaneMouseDown,
+    ref: planeRef,
+    children: [bands.map((band_3, bandIndex) => {
+      // Bands render in order, so each band's rows start after every earlier band's rows.
+      const bandOffset = bands.slice(0, bandIndex).reduce((total, earlier) => total + earlier.rows.length, 0);
+      return /*#__PURE__*/_jsxs("div", {
+        children: [band_3.visibleLabel && /*#__PURE__*/_jsx("h2", {
+          className: `${baseClass}__band-label`,
+          children: band_3.visibleLabel
+        }), /*#__PURE__*/_jsx("ul", {
+          "aria-label": band_3.label ?? ariaLabel,
+          className: [`${baseClass}__band`, band_3.isHierarchyGroup && `${baseClass}__band--folders`, band_3.visibleLabel && `${baseClass}__band--labeled`].filter(Boolean).join(' '),
+          style: columns ? {
+            gridTemplateColumns: `repeat(${columns}, 1fr)`
+          } : undefined,
+          children: band_3.rows.map((_row, rowIndex) => {
+            const flatIndex_0 = bandOffset + rowIndex;
+            const descriptor_2 = descriptors[flatIndex_0];
+            return /*#__PURE__*/_jsx(PlaneItem, {
+              ancestorIds: ancestorIds,
+              baseClass: baseClass,
+              flatIndex: flatIndex_0,
+              hierarchySlug: hierarchySlug ?? descriptor_2.row._collectionSlug,
+              href: descriptor_2.href,
+              isDragDisabled: isDragDisabled,
+              isHierarchyGroup: descriptor_2.isHierarchyGroup,
+              isSelected: selectedKeys.has(descriptor_2.key),
+              lockedUser: getRowLockedUser?.(descriptor_2.row),
+              onClickCapture: handleCardClickCapture,
+              onDoubleClick: handleCardDoubleClick,
+              onKeyDown: handleCardKeyDown,
+              onPointerDownUnselected: handlePointerDownUnselected,
+              parentFieldName: descriptor_2.parentFieldName,
+              registerNode: setItemRef,
+              row: descriptor_2.row,
+              selectionDragData: selectionDragData,
+              showTypePill: showTypePill,
+              title: descriptor_2.title
+            }, descriptor_2.key);
+          })
+        })]
+      }, band_3.key);
+    }), marquee && /*#__PURE__*/_jsx("div", {
+      "aria-hidden": "true",
+      className: `${baseClass}__marquee`,
+      style: {
+        height: marquee.height,
+        left: marquee.left,
+        top: marquee.top,
+        width: marquee.width
+      }
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map