@cube-dev/ui-kit 0.154.1 → 0.156.0

package/dist/components/layout/Board/Board.d.ts

@@ -1,5 +1,6 @@
 
 import { LayoutConstraint, LayoutItem, ResizeHandleAxis } from "./grid-core/types.js";
+import { BoardSelectionMode } from "./use-board-selection.js";
 import { CubeBoardWidgetProps } from "./Widget.js";
 import { AllBaseProps, ContainerStyleProps } from "@tenphi/tasty";
 import { ReactNode } from "react";
@@ -12,12 +13,23 @@ type BoardCompactType = 'vertical' | 'horizontal' | 'free' | null;
  * (falls back to `oldItem` if the item just left this board via a cross-board
  * transfer), `oldItem` is that item as it was when the gesture started, and
  * `placeholder` is the current drop-slot preview (if any).
+ *
+ * The plural fields describe the whole gesture: a group drag moves every
+ * selected widget at once, so `items`/`oldItems`/`placeholders` list them all,
+ * grabbed widget first. An ordinary drag or a resize produces exactly one entry,
+ * so `items[0] === item` and `placeholders[0] === placeholder` always hold.
  */
 interface BoardInteractionInfo {
   layout: LayoutItem[];
   item: LayoutItem;
   oldItem: LayoutItem;
   placeholder: LayoutItem | null;
+  /** Every item in this gesture, grabbed first. */
+  items: LayoutItem[];
+  /** Those items as they were when the gesture started, same order. */
+  oldItems: LayoutItem[];
+  /** Every drop-slot preview. Empty exactly when `placeholder` is `null`. */
+  placeholders: LayoutItem[];
 }
 /** Visibility of the internal grid-line overlay. */
 type BoardGridLines = boolean | 'drag';
@@ -109,6 +121,41 @@ interface CubeBoardProps extends Omit<AllBaseProps, 'children' | 'onDragStart' |
    * rows at that height. @default false
    */
   isAligned?: boolean;
+  /**
+   * Whether widgets can be selected, and how many at a time. `'multiple'` also
+   * enables the marquee and rigid group movement: dragging any selected widget
+   * moves the whole selection. @default 'none'
+   */
+  selectionMode?: BoardSelectionMode;
+  /** Controlled selection. Keys are layout item ids (`LayoutItem.i`). */
+  selectedKeys?: string[];
+  /** Initial selection for uncontrolled usage. */
+  defaultSelectedKeys?: string[];
+  /**
+   * Called when the selection changes. Keys are deduped and returned in the
+   * board's layout order, never in click order.
+   */
+  onSelectionChange?: (keys: string[]) => void;
+  /**
+   * CSS selector for descendants whose clicks must never change the selection
+   * (form controls, buttons, links). Mirrors `dragCancel`; can be overridden per
+   * widget. Pass `''` to disable the guard entirely.
+   * @default BOARD_SELECTION_CANCEL
+   */
+  selectionCancel?: string;
+  /**
+   * Draw a rubber-band (marquee) selection when a drag starts on empty board
+   * space. Only meaningful with `selectionMode="multiple"`.
+   * @default selectionMode === 'multiple'
+   */
+  allowMarqueeSelection?: boolean;
+  /**
+   * Called when the user presses <kbd>Delete</kbd>/<kbd>Backspace</kbd> with a
+   * non-empty selection, and focus is inside the board but not in an editable
+   * field. Board never mutates the layout itself — removing the widgets is the
+   * consumer's job. Board only handles these keys when this handler is set.
+   */
+  onWidgetsDelete?: (keys: string[]) => void;
   /** Grid/item layout constraints. */
   constraints?: LayoutConstraint[];
   /**
@@ -125,6 +172,13 @@ interface CubeBoardProps extends Omit<AllBaseProps, 'children' | 'onDragStart' |
   widgetProps?: Partial<CubeBoardWidgetDefaults>;
   children?: ReactNode;
 }
+/**
+ * Descendants whose clicks never change the selection. A widget is a large
+ * surface the user also clicks to *work with*, so anything interactive inside it
+ * must keep its click. `[data-no-select]` is the escape hatch for an app's own
+ * custom controls.
+ */
+declare const BOARD_SELECTION_CANCEL: string;
 //#endregion
-export { BoardCompactType, BoardGridLines, BoardInteractionInfo, CubeBoardProps };
+export { BOARD_SELECTION_CANCEL, BoardCompactType, BoardGridLines, BoardInteractionInfo, CubeBoardProps };
 //# sourceMappingURL=Board.d.ts.map

package/dist/components/layout/Board/Board.js

@@ -1,7 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.154.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { BoardGridLinesContext, BoardMetricsContext, useBoardGridLines, useBoardHost, useBoardMetrics, useBoardRegistry } from "./board-context.js";
 import { getAllCollisions } from "./grid-core/collision.js";
 import { bottom, cloneLayout, correctBounds, getLayoutItem, modifyLayout } from "./grid-core/layout.js";
@@ -10,10 +12,13 @@ import { calcGridColWidth, calcGridItemPosition, calcWH } from "./grid-core/calc
 import { applySizeConstraints, defaultConstraints } from "./grid-core/constraints.js";
 import { BoardProvider } from "./BoardProvider.js";
 import { useBoardLayout } from "./use-board-layout.js";
+import { useBoardSelectModifierKey } from "./use-board-select-modifier-key.js";
+import { useBoardSelection } from "./use-board-selection.js";
 import { WidgetHost } from "./WidgetHost.js";
 import { CONTAINER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useFocusWithin } from "react-aria";
 import { useResizeObserver } from "@react-aria/utils";
 
 //#region src/components/layout/Board/Board.tsx
@@ -26,7 +31,8 @@ const BoardElement = tasty({
 		flexGrow: 1,
 		height: "min 0",
 		fill: "#surface",
-		boxSizing: "border-box"
+		boxSizing: "border-box",
+		outline: 0
 	}
 });
 const ContentLayer = tasty({ styles: {
@@ -39,15 +45,40 @@ const PlaceholderElement = tasty({
 		position: "absolute",
 		top: 0,
 		left: 0,
-		fill: "#purple.10",
+		fill: "#primary.10",
 		radius: "1cr",
-		border: "#purple.40",
+		border: "#primary.40",
 		zIndex: 2,
 		pointerEvents: "none",
 		transition: "inset 80ms linear, width 80ms linear, height 80ms linear",
 		boxSizing: "border-box"
 	}
 });
+const MarqueeElement = tasty({
+	qa: "BoardMarquee",
+	styles: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		fill: "#primary-accent-surface.06",
+		border: "1bw dashed #primary-border",
+		radius: "1cr",
+		zIndex: 3,
+		pointerEvents: "none",
+		boxSizing: "border-box"
+	}
+});
+const A11yLayer = tasty({ styles: {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: 0,
+	margin: "-1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+} });
 const GridOverlayElement = tasty({
 	qa: "BoardGridOverlay",
 	styles: {
@@ -58,12 +89,32 @@ const GridOverlayElement = tasty({
 		opacity: ".5"
 	}
 });
+/**
+* Descendants whose clicks never change the selection. A widget is a large
+* surface the user also clicks to *work with*, so anything interactive inside it
+* must keep its click. `[data-no-select]` is the escape hatch for an app's own
+* custom controls.
+*/
+const BOARD_SELECTION_CANCEL = "input,textarea,select,button,a,[role=\"button\"],[role=\"menuitem\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"tab\"],[contenteditable=\"true\"],[data-no-select]";
+/** Manhattan distance a pointer must travel before a press becomes a marquee. */
+const MARQUEE_THRESHOLD = 4;
+/**
+* Whether an event landed in a text-editing context. Checking the *event target*
+* beats `document.activeElement`: it stays correct for content rendered through
+* a portal, and it cannot be fooled by focus that moved between the keystroke
+* and the handler.
+*/
+function isEditableTarget(target) {
+	const el = target;
+	if (!el || typeof el.closest !== "function") return false;
+	return !!el.closest("input,textarea,select,[contenteditable=\"true\"]");
+}
 function compactTypeToCore(compact) {
 	if (compact === "free") return null;
 	return compact;
 }
 function BoardInner(props, ref) {
-	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, onDragStart, onDrag, onDragStop, onResizeStart, onResize: onResizeProp, onResizeStop, cols = 12, rowHeight = 100, margin = [8, 8], containerPadding, maxRows = Infinity, compact = "vertical", allowOverlap = false, preventCollision = false, isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], dragCancel, dragHandle, showGridLines, isAligned = false, constraints, width: providedWidth, widgetProps, children, ...otherProps } = props;
+	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, onDragStart, onDrag, onDragStop, onResizeStart, onResize: onResizeProp, onResizeStop, cols = 12, rowHeight = 100, margin = [8, 8], containerPadding, maxRows = Infinity, compact = "vertical", allowOverlap = false, preventCollision = false, isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], dragCancel, dragHandle, showGridLines, isAligned = false, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, selectionCancel = BOARD_SELECTION_CANCEL, allowMarqueeSelection = selectionMode === "multiple", onWidgetsDelete, constraints, width: providedWidth, widgetProps, children, ...otherProps } = props;
 	const registry = useBoardRegistry();
 	const parentMetrics = useBoardMetrics();
 	const host = useBoardHost();
@@ -77,6 +128,8 @@ function BoardInner(props, ref) {
 	const effectiveShowGridLines = showGridLines ?? (inheritedGridLines ? "drag" : false);
 	const generatedId = useId();
 	const boardId = providedId ?? generatedId;
+	const selectedHintId = `${generatedId}-selected`;
+	const { t } = useI18n();
 	const containerRef = useCombinedRefs(ref);
 	const contentRef = useRef(null);
 	const [measuredWidth, setMeasuredWidth] = useState(0);
@@ -97,15 +150,29 @@ function BoardInner(props, ref) {
 	useEffect(() => {
 		if (providedWidth == null) onResizeContainer();
 	}, [providedWidth]);
-	const { layout, layoutRef, placeholder, placeholderRef, setPlaceholder, applyLayout } = useBoardLayout({
+	const { layout, layoutRef, placeholders, placeholder, placeholdersRef, placeholderRef, setPlaceholders, applyLayout } = useBoardLayout({
 		layout: controlledLayout,
 		defaultLayout,
 		onLayoutChange
 	});
+	const getWidgetLabel = useEvent((key) => {
+		const registration = registry.store.get(key);
+		return registration?.["aria-label"] ?? registration?.qa ?? key;
+	});
+	const isWidgetSelectable = (key) => (registry.store.get(key)?.isSelectable ?? widgetProps?.isSelectable) !== false;
+	const { selectedKeySet, selectedKeysRef, setSelection, select, clearSelection, announcement } = useBoardSelection({
+		selectionMode,
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange,
+		layout,
+		getLabel: getWidgetLabel
+	});
+	const selectModifierKey = useBoardSelectModifierKey();
 	useSyncExternalStore(registry.store.subscribe, registry.store.getVersion);
 	const effectiveMargin = aligned ? parentMetrics.margin : margin;
 	const resolvedPadding = containerPadding ?? (aligned ? [0, 0] : effectiveMargin);
-	const rows = Math.max(bottom(layout), placeholder ? placeholder.y + placeholder.h : 0);
+	const rows = Math.max(bottom(layout), ...placeholders.map((p) => p.y + p.h), 0);
 	const parentColWidth = aligned ? parentMetrics.colWidth : 0;
 	const alignedCols = aligned && width > 0 ? Math.max(1, Math.floor((width - resolvedPadding[0] * 2 + effectiveMargin[0] + 2) / (parentColWidth + effectiveMargin[0]))) : cols;
 	const effectiveCols = aligned ? alignedCols : cols;
@@ -153,7 +220,7 @@ function BoardInner(props, ref) {
 		isDroppable
 	};
 	const applyLayoutEvent = useEvent(applyLayout);
-	const setPlaceholderEvent = useEvent(setPlaceholder);
+	const setPlaceholdersEvent = useEvent(setPlaceholders);
 	const entryRef = useRef(null);
 	if (!entryRef.current) entryRef.current = {
 		id: boardId,
@@ -165,8 +232,9 @@ function BoardInner(props, ref) {
 		getMaxRows: () => liveRef.current.maxRows,
 		getContainerHeight: () => liveRef.current.containerHeight,
 		getLayout: () => layoutRef.current,
+		getSelectedKeys: () => selectedKeysRef.current.size > 0 ? selectedKeysRef.current : null,
 		applyLayout: (next, commit) => applyLayoutEvent(next, commit),
-		setPlaceholder: (item) => setPlaceholderEvent(item),
+		setPlaceholders: (items) => setPlaceholdersEvent(items),
 		isDroppable: () => liveRef.current.isDroppable
 	};
 	useEffect(() => {
@@ -235,12 +303,15 @@ function BoardInner(props, ref) {
 				accX: 0,
 				accY: 0
 			};
-			setPlaceholder({ ...item });
+			setPlaceholders([{ ...item }]);
 			onResizeStart?.({
 				layout: layoutRef.current,
 				item: { ...item },
 				oldItem: { ...item },
-				placeholder: { ...item }
+				placeholder: { ...item },
+				items: [{ ...item }],
+				oldItems: [{ ...item }],
+				placeholders: [{ ...item }]
 			});
 			return;
 		}
@@ -249,12 +320,16 @@ function BoardInner(props, ref) {
 		if (phase === "end") {
 			const finalLayout = [...layoutRef.current];
 			applyLayout(finalLayout, true);
-			setPlaceholder(null);
+			setPlaceholders([]);
+			const resizedItem = getLayoutItem(finalLayout, id) ?? rs.item;
 			onResizeStop?.({
 				layout: finalLayout,
-				item: getLayoutItem(finalLayout, id) ?? rs.item,
+				item: resizedItem,
 				oldItem: rs.item,
-				placeholder: null
+				placeholder: null,
+				items: [resizedItem],
+				oldItems: [rs.item],
+				placeholders: []
 			});
 			resizeStateRef.current = null;
 			return;
@@ -307,12 +382,16 @@ function BoardInner(props, ref) {
 		const compacted = [...compactor.compact(working, pp.cols)];
 		applyLayout(compacted, false);
 		const nextPlaceholder = getLayoutItem(compacted, id) ?? newItem;
-		setPlaceholder(nextPlaceholder);
+		setPlaceholders([nextPlaceholder]);
+		const resizedItem = getLayoutItem(compacted, id) ?? newItem;
 		onResizeProp?.({
 			layout: compacted,
-			item: getLayoutItem(compacted, id) ?? newItem,
+			item: resizedItem,
 			oldItem: rs.item,
-			placeholder: nextPlaceholder
+			placeholder: nextPlaceholder,
+			items: [resizedItem],
+			oldItems: [rs.item],
+			placeholders: [nextPlaceholder]
 		});
 	});
 	const handleAutoHeight = useEvent((id, neededRows) => {
@@ -328,23 +407,117 @@ function BoardInner(props, ref) {
 		applyLayout([...liveRef.current.compactor.compact(working, pp.cols)], true);
 	});
 	const dragOldItemRef = useRef(null);
+	const dragOldItemsRef = useRef([]);
 	const handleDragLifecycle = useEvent((id, phase) => {
 		const currentLayout = layoutRef.current;
 		const liveItem = getLayoutItem(currentLayout, id);
-		if (phase === "start") dragOldItemRef.current = liveItem ? { ...liveItem } : null;
+		if (phase === "start") {
+			dragOldItemRef.current = liveItem ? { ...liveItem } : null;
+			const ds = registry.getDragState();
+			dragOldItemsRef.current = ds && ds.itemId === id ? ds.items.map((it) => ({ ...it })) : [];
+		}
 		const oldItem = dragOldItemRef.current ?? liveItem;
 		if (!oldItem) return;
+		const item = liveItem ?? oldItem;
+		const oldItems = dragOldItemsRef.current.length ? dragOldItemsRef.current : [oldItem];
+		const items = oldItems.map((old) => getLayoutItem(currentLayout, old.i) ?? old);
 		const info = {
 			layout: currentLayout,
-			item: liveItem ?? oldItem,
+			item,
 			oldItem,
-			placeholder: placeholderRef.current
+			placeholder: placeholderRef.current,
+			items,
+			oldItems,
+			placeholders: placeholdersRef.current
 		};
 		if (phase === "start") onDragStart?.(info);
 		else if (phase === "move") onDrag?.(info);
 		else {
 			onDragStop?.(info);
 			dragOldItemRef.current = null;
+			dragOldItemsRef.current = [];
+		}
+	});
+	const [marqueeRect, setMarqueeRect] = useState(null);
+	const handleContentPointerDown = useEvent((event) => {
+		if (selectionMode !== "multiple" || !allowMarqueeSelection || event.button !== 0 || registry.dragState) return;
+		const target = event.target;
+		if (target?.closest("[data-board-widget-host]")) return;
+		if (selectionCancel && target?.closest(selectionCancel)) return;
+		const content = contentRef.current;
+		if (!content) return;
+		const origin = content.getBoundingClientRect();
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const additive = event[selectModifierKey] || event.shiftKey;
+		const base = additive ? [...selectedKeysRef.current] : [];
+		let passedThreshold = false;
+		const hitTest = (clientX, clientY) => {
+			const left = Math.min(startX, clientX) - origin.left;
+			const right = Math.max(startX, clientX) - origin.left;
+			const top = Math.min(startY, clientY) - origin.top;
+			const bottom = Math.max(startY, clientY) - origin.top;
+			const next = new Set(base);
+			for (const it of layoutRef.current) {
+				if (!isWidgetSelectable(it.i)) continue;
+				const pos = calcGridItemPosition(liveRef.current.positionParams, it.x, it.y, it.w, it.h);
+				if (pos.left < right && pos.left + pos.width > left && pos.top < bottom && pos.top + pos.height > top) next.add(it.i);
+			}
+			return {
+				next,
+				box: {
+					left,
+					top,
+					width: right - left,
+					height: bottom - top
+				}
+			};
+		};
+		const handleMove = (e) => {
+			if (!passedThreshold && Math.abs(e.clientX - startX) + Math.abs(e.clientY - startY) < MARQUEE_THRESHOLD) return;
+			passedThreshold = true;
+			setMarqueeRect(hitTest(e.clientX, e.clientY).box);
+		};
+		const finish = (e) => {
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", finish);
+			window.removeEventListener("pointercancel", finish);
+			setMarqueeRect(null);
+			if (passedThreshold) setSelection(hitTest(e.clientX, e.clientY).next);
+			else if (!additive) clearSelection();
+			containerRef.current?.focus({ preventScroll: true });
+		};
+		window.addEventListener("pointermove", handleMove);
+		window.addEventListener("pointerup", finish);
+		window.addEventListener("pointercancel", finish);
+	});
+	const marqueeStyle = marqueeRect ? {
+		left: `${marqueeRect.left}px`,
+		top: `${marqueeRect.top}px`,
+		width: `${marqueeRect.width}px`,
+		height: `${marqueeRect.height}px`
+	} : null;
+	const { focusWithinProps: boardFocusWithinProps } = useFocusWithin({
+		isDisabled: selectionMode === "none",
+		onBlurWithin: () => clearSelection()
+	});
+	const handleBoardKeyDown = useEvent((event) => {
+		if (selectionMode === "none") return;
+		const selected = selectedKeysRef.current;
+		if (selected.size === 0) return;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			clearSelection();
+			return;
+		}
+		if ((event.key === "Delete" || event.key === "Backspace") && onWidgetsDelete && !isEditableTarget(event.target)) {
+			event.preventDefault();
+			event.stopPropagation();
+			const keys = [...selected];
+			clearSelection();
+			onWidgetsDelete(keys);
+			containerRef.current?.focus({ preventScroll: true });
 		}
 	});
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
@@ -367,16 +540,18 @@ function BoardInner(props, ref) {
 		};
 	}, [ready]);
 	const hostWidgetIsDragging = !!dragState && dragState.nestedBoardIds.has(boardId);
-	const placeholderStyle = placeholder ? (() => {
-		const pos = calcGridItemPosition(positionParams, placeholder.x, placeholder.y, placeholder.w, placeholder.h);
+	const placeholderStyles = useMemo(() => placeholders.map((p) => {
+		const pos = calcGridItemPosition(positionParams, p.x, p.y, p.w, p.h);
 		return {
-			left: `${pos.left}px`,
-			top: `${pos.top}px`,
-			width: `${pos.width}px`,
-			height: `${pos.height}px`
+			i: p.i,
+			style: {
+				left: `${pos.left}px`,
+				top: `${pos.top}px`,
+				width: `${pos.width}px`,
+				height: `${pos.height}px`
+			}
 		};
-	})() : null;
-	const showPlaceholder = placeholder && placeholderStyle;
+	}), [placeholders, positionParams]);
 	const gridOverlayStyle = !hostWidgetIsDragging && (effectiveShowGridLines === true || effectiveShowGridLines === "drag" && (!!dragState || !!placeholder)) ? (() => {
 		const colWidth = calcGridColWidth(positionParams);
 		const rowHeightPx = positionParams.rowHeight;
@@ -416,59 +591,87 @@ function BoardInner(props, ref) {
 		children: /* @__PURE__ */ jsx(BoardGridLinesContext.Provider, {
 			value: effectiveShowGridLines === true || effectiveShowGridLines === "drag",
 			children: /* @__PURE__ */ jsxs(BoardElement, {
-				...filterBaseProps(otherProps, { eventProps: true }),
+				...mergeProps$1(filterBaseProps(otherProps, { eventProps: true }), boardFocusWithinProps, { onKeyDown: handleBoardKeyDown }),
 				ref: containerRef,
 				styles,
+				tabIndex: selectionMode !== "none" ? -1 : void 0,
+				"data-board-id": boardId,
 				style: aligned ? void 0 : { minHeight: `${containerHeight}px` },
 				mods: {
 					dragging: !!dragState,
 					"drop-target": dragState?.currentBoardId === boardId
 				},
-				children: [/* @__PURE__ */ jsxs(ContentLayer, {
-					ref: contentRef,
-					children: [
-						ready && gridOverlayStyle ? /* @__PURE__ */ jsx(GridOverlayElement, {
-							"aria-hidden": "true",
-							style: gridOverlayStyle
-						}) : null,
-						ready ? layout.map((item) => {
-							const registration = registry.store.get(item.i);
-							const widgetDraggable = isDraggable && (registration?.isDraggable ?? widgetProps?.isDraggable) !== false && item.isDraggable !== false && !item.static;
-							const widgetResizable = isResizable && (registration?.isResizable ?? widgetProps?.isResizable) !== false && item.isResizable !== false && !item.static;
-							const handles = item.resizeHandles ?? registration?.resizeHandles ?? widgetProps?.resizeHandles ?? resizeHandles;
-							const widgetDragCancel = registration?.dragCancel ?? widgetProps?.dragCancel ?? dragCancel;
-							const widgetDragHandle = registration?.dragHandle ?? widgetProps?.dragHandle ?? dragHandle;
-							const widgetIsCard = registration?.isCard ?? widgetProps?.isCard ?? false;
-							const widgetIsAutoHeight = registration?.isAutoHeight ?? widgetProps?.isAutoHeight ?? false;
-							const widgetQa = registration?.qa ?? widgetProps?.qa;
-							return /* @__PURE__ */ jsx(WidgetHost, {
-								boardId,
-								item,
-								positionParams,
-								registration,
-								isCard: widgetIsCard,
-								styles: registration?.styles && widgetPropsStyles ? mergeStyles(widgetPropsStyles, registration.styles) : registration?.styles ?? widgetPropsStyles,
-								isDraggable: widgetDraggable,
-								isResizable: widgetResizable,
-								resizeHandles: handles,
-								isAutoHeight: widgetIsAutoHeight,
-								qa: widgetQa,
-								dragCancel: widgetDragCancel,
-								dragHandle: widgetDragHandle,
-								registry,
-								dragState,
-								settled,
-								onResize: handleResize,
-								onAutoHeight: handleAutoHeight,
-								onDragLifecycle: handleDragLifecycle
-							}, item.i);
-						}) : null,
-						showPlaceholder ? /* @__PURE__ */ jsx(PlaceholderElement, {
-							"aria-hidden": "true",
-							style: placeholderStyle
-						}) : null
-					]
-				}), children]
+				children: [
+					/* @__PURE__ */ jsxs(ContentLayer, {
+						ref: contentRef,
+						onPointerDown: handleContentPointerDown,
+						children: [
+							ready && gridOverlayStyle ? /* @__PURE__ */ jsx(GridOverlayElement, {
+								"aria-hidden": "true",
+								style: gridOverlayStyle
+							}) : null,
+							ready ? layout.map((item) => {
+								const registration = registry.store.get(item.i);
+								const widgetDraggable = isDraggable && (registration?.isDraggable ?? widgetProps?.isDraggable) !== false && item.isDraggable !== false && !item.static;
+								const widgetResizable = isResizable && (registration?.isResizable ?? widgetProps?.isResizable) !== false && item.isResizable !== false && !item.static;
+								const handles = item.resizeHandles ?? registration?.resizeHandles ?? widgetProps?.resizeHandles ?? resizeHandles;
+								const widgetDragCancel = registration?.dragCancel ?? widgetProps?.dragCancel ?? dragCancel;
+								const widgetDragHandle = registration?.dragHandle ?? widgetProps?.dragHandle ?? dragHandle;
+								const widgetIsCard = registration?.isCard ?? widgetProps?.isCard ?? false;
+								const widgetIsAutoHeight = registration?.isAutoHeight ?? widgetProps?.isAutoHeight ?? false;
+								const widgetQa = registration?.qa ?? widgetProps?.qa;
+								const widgetSelectable = selectionMode !== "none" && isWidgetSelectable(item.i);
+								const widgetSelectionCancel = registration?.selectionCancel ?? widgetProps?.selectionCancel ?? selectionCancel;
+								return /* @__PURE__ */ jsx(WidgetHost, {
+									boardId,
+									item,
+									positionParams,
+									registration,
+									isCard: widgetIsCard,
+									styles: registration?.styles && widgetPropsStyles ? mergeStyles(widgetPropsStyles, registration.styles) : registration?.styles ?? widgetPropsStyles,
+									isDraggable: widgetDraggable,
+									isResizable: widgetResizable,
+									resizeHandles: handles,
+									isAutoHeight: widgetIsAutoHeight,
+									qa: widgetQa,
+									dragCancel: widgetDragCancel,
+									dragHandle: widgetDragHandle,
+									isSelectable: widgetSelectable,
+									isSelected: selectedKeySet.has(item.i),
+									selectionCancel: widgetSelectionCancel,
+									selectedHintId,
+									onSelect: select,
+									onSelectionReset: clearSelection,
+									selectModifierKey,
+									registry,
+									dragState,
+									settled,
+									onResize: handleResize,
+									onAutoHeight: handleAutoHeight,
+									onDragLifecycle: handleDragLifecycle
+								}, item.i);
+							}) : null,
+							placeholderStyles.map(({ i, style }) => /* @__PURE__ */ jsx(PlaceholderElement, {
+								"aria-hidden": "true",
+								style
+							}, i)),
+							marqueeStyle ? /* @__PURE__ */ jsx(MarqueeElement, {
+								"aria-hidden": "true",
+								style: marqueeStyle
+							}) : null
+						]
+					}),
+					selectionMode !== "none" ? /* @__PURE__ */ jsxs(A11yLayer, { children: [/* @__PURE__ */ jsx("span", {
+						id: selectedHintId,
+						children: t("board.selected", "Selected")
+					}), /* @__PURE__ */ jsx("span", {
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: announcement
+					})] }) : null,
+					children
+				]
 			})
 		})
 	});
@@ -491,5 +694,5 @@ const Board = forwardRef(function Board(props, ref) {
 });
 
 //#endregion
-export { Board };
+export { BOARD_SELECTION_CANCEL, Board };
 //# sourceMappingURL=Board.js.map