@cube-dev/ui-kit 0.0.0-canary-c325dcb → 0.0.0-canary-162cdb3

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

@@ -1,771 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c325dcb | 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";
-import { getCompactor } from "./grid-core/compactors.js";
-import { calcGridColWidth, calcGridItemPosition, calcWH } from "./grid-core/calculate.js";
-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 { c } from "react/compiler-runtime";
-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
-const BoardElement = tasty({
-	qa: "Board",
-	styles: {
-		position: "relative",
-		display: "block",
-		width: "100%",
-		flexGrow: 1,
-		height: "min 0",
-		fill: "#surface",
-		boxSizing: "border-box",
-		outline: 0,
-		userSelect: {
-			"": "auto",
-			marquee: "none"
-		}
-	}
-});
-const ContentLayer = tasty({ styles: {
-	position: "absolute",
-	inset: 0
-} });
-const PlaceholderElement = tasty({
-	qa: "BoardPlaceholder",
-	styles: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		fill: "#primary.10",
-		radius: "1cr",
-		border: "#primary.40",
-		zIndex: 2,
-		pointerEvents: "none",
-		transition: "inset linear, width linear, height 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: {
-		position: "absolute",
-		zIndex: 0,
-		pointerEvents: "none",
-		boxSizing: "border-box",
-		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]";
-/**
-* Row height when none is given, and the fallback a `rowHeight="stretch"` board
-* uses until it has both a bounded row count and a measured height to divide.
-*/
-const DEFAULT_ROW_HEIGHT = 100;
-/** Manhattan distance a pointer must travel before a press becomes a marquee. */
-const MARQUEE_THRESHOLD = 4;
-/** Shared empty set, so "no pre-selection" is a stable reference. */
-const NO_KEYS = /* @__PURE__ */ new Set();
-/**
-* 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, rows: fixedRows, rowHeight = DEFAULT_ROW_HEIGHT, margin = [8, 8], containerPadding, maxRows: maxRowsProp, extraRows = 0, compact = "vertical", allowOverlap = false, preventCollision = false, collisionMode = "revert", isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], resizeGripPlacement, dragCancel = BOARD_SELECTION_CANCEL, 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 maxRows = maxRowsProp ?? (fixedRows != null ? Math.max(1, fixedRows) : Infinity);
-	const registry = useBoardRegistry();
-	const parentMetrics = useBoardMetrics();
-	const host = useBoardHost();
-	const inheritedGridLines = useBoardGridLines();
-	const aligned = isAligned && !!parentMetrics;
-	const boardDepth = (parentMetrics?.depth ?? -1) + 1;
-	const widgetPropsStyles = useMemo(() => {
-		if (!widgetProps) return void 0;
-		const extracted = extractStyles(widgetProps, CONTAINER_STYLES);
-		return Object.keys(extracted).length > 0 ? extracted : void 0;
-	}, [widgetProps]);
-	const effectiveShowGridLines = showGridLines ?? inheritedGridLines;
-	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);
-	const [measuredHeight, setMeasuredHeight] = useState(0);
-	const width = providedWidth ?? measuredWidth;
-	const onResizeContainer = useEvent(() => {
-		const el = containerRef.current;
-		if (!el) return;
-		const nextWidth = el.offsetWidth;
-		const nextHeight = el.offsetHeight;
-		if (nextWidth > 0) setMeasuredWidth(nextWidth);
-		if (nextHeight > 0) setMeasuredHeight(nextHeight);
-	});
-	useResizeObserver({
-		ref: containerRef,
-		onResize: onResizeContainer
-	});
-	useEffect(() => {
-		if (providedWidth == null) onResizeContainer();
-	}, [providedWidth]);
-	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), ...placeholders.map((p) => p.y + p.h), 0);
-	const renderedRows = fixedRows != null ? Math.max(1, fixedRows) : Math.min(rows + Math.max(0, extraRows), maxRows);
-	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;
-	const effectiveContainerWidth = aligned ? parentColWidth * effectiveCols + effectiveMargin[0] * Math.max(0, effectiveCols - 1) + resolvedPadding[0] * 2 : width;
-	const isStretching = rowHeight === "stretch" && fixedRows != null;
-	const stretchedRowHeight = isStretching && measuredHeight > 0 ? Math.max(1, (measuredHeight - Math.max(0, renderedRows - 1) * effectiveMargin[1] - resolvedPadding[1] * 2) / renderedRows) : DEFAULT_ROW_HEIGHT;
-	const effectiveRowHeight = aligned ? parentMetrics.rowHeight : rowHeight === "stretch" ? stretchedRowHeight : rowHeight;
-	const positionParams = useMemo(() => ({
-		margin: effectiveMargin,
-		containerPadding: resolvedPadding,
-		containerWidth: effectiveContainerWidth,
-		cols: effectiveCols,
-		rowHeight: effectiveRowHeight,
-		maxRows
-	}), [
-		effectiveMargin[0],
-		effectiveMargin[1],
-		resolvedPadding[0],
-		resolvedPadding[1],
-		effectiveContainerWidth,
-		effectiveCols,
-		effectiveRowHeight,
-		maxRows
-	]);
-	const compactor = useMemo(() => getCompactor(compactTypeToCore(compact), allowOverlap, compact === "free" ? !allowOverlap : preventCollision), [
-		compact,
-		allowOverlap,
-		preventCollision
-	]);
-	const resolvedConstraints = constraints ?? defaultConstraints;
-	const computedHeight = renderedRows > 0 ? renderedRows * effectiveRowHeight + Math.max(0, renderedRows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : effectiveRowHeight;
-	const containerHeight = (aligned || isStretching) && measuredHeight > 0 ? measuredHeight : computedHeight;
-	const liveRef = useRef({
-		positionParams,
-		compactor,
-		collisionMode,
-		constraints: resolvedConstraints,
-		maxRows,
-		containerHeight,
-		isDroppable
-	});
-	liveRef.current = {
-		positionParams,
-		compactor,
-		collisionMode,
-		constraints: resolvedConstraints,
-		maxRows,
-		containerHeight,
-		isDroppable
-	};
-	const applyLayoutEvent = useEvent(applyLayout);
-	const setPlaceholdersEvent = useEvent(setPlaceholders);
-	const entryRef = useRef(null);
-	if (!entryRef.current) entryRef.current = {
-		id: boardId,
-		getContentRect: () => contentRef.current?.getBoundingClientRect() ?? null,
-		getContentNode: () => contentRef.current,
-		getPositionParams: () => liveRef.current.positionParams,
-		getConstraints: () => liveRef.current.constraints,
-		getCompactor: () => liveRef.current.compactor,
-		getCollisionMode: () => liveRef.current.collisionMode,
-		getMaxRows: () => liveRef.current.maxRows,
-		getContainerHeight: () => liveRef.current.containerHeight,
-		getLayout: () => layoutRef.current,
-		getSelectedKeys: () => selectedKeysRef.current.size > 0 ? selectedKeysRef.current : null,
-		applyLayout: (next, commit, reason) => applyLayoutEvent(next, commit, reason),
-		setPlaceholders: (items) => setPlaceholdersEvent(items),
-		isDroppable: () => liveRef.current.isDroppable
-	};
-	useEffect(() => {
-		const entry = entryRef.current;
-		entry.id = boardId;
-		return registry.registerBoard(entry);
-	}, [boardId]);
-	const recompactForCols = useEvent((nextCols) => {
-		const corrected = correctBounds(cloneLayout(layoutRef.current), { cols: nextCols });
-		applyLayoutEvent([...liveRef.current.compactor.compact(corrected, nextCols)], true, "normalize");
-	});
-	const prevAlignedColsRef = useRef(null);
-	useEffect(() => {
-		if (!aligned) {
-			prevAlignedColsRef.current = null;
-			return;
-		}
-		if (width <= 0) return;
-		if (prevAlignedColsRef.current === null) {
-			prevAlignedColsRef.current = effectiveCols;
-			return;
-		}
-		if (prevAlignedColsRef.current === effectiveCols) return;
-		prevAlignedColsRef.current = effectiveCols;
-		recompactForCols(effectiveCols);
-	}, [
-		aligned,
-		width,
-		effectiveCols,
-		recompactForCols
-	]);
-	const naturalHeight = renderedRows > 0 ? renderedRows * effectiveRowHeight + Math.max(0, renderedRows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : effectiveRowHeight;
-	const registerNestedBoard = host?.registerNestedBoard;
-	useEffect(() => registerNestedBoard?.(), [registerNestedBoard]);
-	const requestHeightDeficit = host?.requestHeightDeficit;
-	useEffect(() => {
-		if (!aligned || !host?.isAutoHeight || !requestHeightDeficit) return;
-		if (measuredHeight <= 0) return;
-		requestHeightDeficit(naturalHeight - measuredHeight);
-	}, [
-		aligned,
-		host?.isAutoHeight,
-		requestHeightDeficit,
-		naturalHeight,
-		measuredHeight
-	]);
-	const resizeStateRef = useRef(null);
-	const autoHeightMinRowsRef = useRef({});
-	const handleResize = useEvent((id, axis, phase, dx, dy) => {
-		const pp = liveRef.current.positionParams;
-		if (phase === "start") {
-			const rawItem = getLayoutItem(layoutRef.current, id);
-			if (!rawItem) return;
-			const reg = registry.store.get(id);
-			const item = {
-				...rawItem,
-				minW: rawItem.minW ?? reg?.minW ?? widgetProps?.minW,
-				maxW: rawItem.maxW ?? reg?.maxW ?? widgetProps?.maxW,
-				minH: rawItem.minH ?? reg?.minH ?? widgetProps?.minH,
-				maxH: rawItem.maxH ?? reg?.maxH ?? widgetProps?.maxH,
-				constraints: rawItem.constraints ?? reg?.constraints ?? widgetProps?.constraints
-			};
-			resizeStateRef.current = {
-				id,
-				axis,
-				item: { ...item },
-				origin: calcGridItemPosition(pp, item.x, item.y, item.w, item.h),
-				accX: 0,
-				accY: 0
-			};
-			setPlaceholders([{ ...item }]);
-			onResizeStart?.({
-				layout: layoutRef.current,
-				item: { ...item },
-				oldItem: { ...item },
-				placeholder: { ...item },
-				items: [{ ...item }],
-				oldItems: [{ ...item }],
-				placeholders: [{ ...item }]
-			});
-			return;
-		}
-		const rs = resizeStateRef.current;
-		if (!rs) return;
-		if (phase === "end") {
-			const finalLayout = [...layoutRef.current];
-			applyLayout(finalLayout, true, "resize");
-			setPlaceholders([]);
-			const resizedItem = getLayoutItem(finalLayout, id) ?? rs.item;
-			onResizeStop?.({
-				layout: finalLayout,
-				item: resizedItem,
-				oldItem: rs.item,
-				placeholder: null,
-				items: [resizedItem],
-				oldItems: [rs.item],
-				placeholders: []
-			});
-			resizeStateRef.current = null;
-			return;
-		}
-		rs.accX += dx;
-		rs.accY += dy;
-		const { origin, item, axis: handle } = rs;
-		let newW = origin.width;
-		let newH = origin.height;
-		if (handle.includes("e")) newW = origin.width + rs.accX;
-		if (handle.includes("w")) newW = origin.width - rs.accX;
-		if (handle.includes("s")) newH = origin.height + rs.accY;
-		if (handle.includes("n")) newH = origin.height - rs.accY;
-		newW = Math.max(newW, 8);
-		newH = Math.max(newH, 8);
-		const raw = calcWH(pp, newW, newH, item.x, item.y, handle);
-		const constrained = applySizeConstraints(liveRef.current.constraints, item, raw.w, raw.h, handle, {
-			cols: pp.cols,
-			maxRows: liveRef.current.maxRows,
-			containerWidth: pp.containerWidth,
-			containerHeight: liveRef.current.containerHeight,
-			rowHeight: pp.rowHeight,
-			margin: pp.margin,
-			layout: layoutRef.current
-		});
-		const floorRows = autoHeightMinRowsRef.current[id] ?? 0;
-		const finalW = constrained.w;
-		const finalH = Math.max(constrained.h, floorRows);
-		let x = item.x;
-		let y = item.y;
-		if (handle.includes("w")) x = item.x + item.w - finalW;
-		if (handle.includes("n")) y = item.y + item.h - finalH;
-		x = Math.max(0, x);
-		y = Math.max(0, y);
-		let newItem = {
-			...item,
-			x,
-			y,
-			w: finalW,
-			h: finalH
-		};
-		const compactor = liveRef.current.compactor;
-		if (compactor.preventCollision && !compactor.allowOverlap) {
-			if (getAllCollisions(layoutRef.current, newItem).some((other) => other.i !== id)) {
-				const lastValid = getLayoutItem(layoutRef.current, id);
-				if (lastValid) newItem = { ...lastValid };
-			}
-		}
-		const working = modifyLayout(layoutRef.current, newItem);
-		const compacted = [...compactor.compact(working, pp.cols)];
-		applyLayout(compacted, false);
-		const nextPlaceholder = getLayoutItem(compacted, id) ?? newItem;
-		setPlaceholders([nextPlaceholder]);
-		const resizedItem = getLayoutItem(compacted, id) ?? newItem;
-		onResizeProp?.({
-			layout: compacted,
-			item: resizedItem,
-			oldItem: rs.item,
-			placeholder: nextPlaceholder,
-			items: [resizedItem],
-			oldItems: [rs.item],
-			placeholders: [nextPlaceholder]
-		});
-	});
-	const handleAutoHeight = useEvent((id, neededRows) => {
-		autoHeightMinRowsRef.current[id] = neededRows;
-		const current = getLayoutItem(layoutRef.current, id);
-		if (!current || neededRows <= current.h) return;
-		if (registry.dragState || resizeStateRef.current) return;
-		const pp = liveRef.current.positionParams;
-		const working = modifyLayout(layoutRef.current, {
-			...current,
-			h: neededRows
-		});
-		applyLayout([...liveRef.current.compactor.compact(working, pp.cols)], true, "normalize");
-	});
-	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;
-			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,
-			oldItem,
-			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 [preSelectedKeys, setPreSelectedKeys] = useState(NO_KEYS);
-	const [isMarqueeActive, setIsMarqueeActive] = useState(false);
-	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;
-		if (target && !content.contains(target)) return;
-		event.preventDefault();
-		setIsMarqueeActive(true);
-		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 blockSelectStart = (e) => e.preventDefault();
-		const handleMove = (e) => {
-			if (!passedThreshold && Math.abs(e.clientX - startX) + Math.abs(e.clientY - startY) < MARQUEE_THRESHOLD) return;
-			if (!passedThreshold) {
-				const selection = window.getSelection();
-				const anchor = selection?.anchorNode;
-				if (anchor && containerRef.current?.contains(anchor)) selection?.removeAllRanges();
-			}
-			passedThreshold = true;
-			const { box, next } = hitTest(e.clientX, e.clientY);
-			setMarqueeRect(box);
-			setPreSelectedKeys(next);
-		};
-		const finish = (e) => {
-			window.removeEventListener("pointermove", handleMove);
-			window.removeEventListener("pointerup", finish);
-			window.removeEventListener("pointercancel", finish);
-			window.removeEventListener("selectstart", blockSelectStart);
-			setMarqueeRect(null);
-			setPreSelectedKeys(NO_KEYS);
-			setIsMarqueeActive(false);
-			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);
-		window.addEventListener("selectstart", blockSelectStart);
-	});
-	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);
-	const dragState = registry.dragState;
-	const ready = width > 0;
-	const [settled, setSettled] = useState(false);
-	useEffect(() => {
-		if (!ready) {
-			setSettled(false);
-			return;
-		}
-		let id1 = 0;
-		let id2 = 0;
-		id1 = requestAnimationFrame(() => {
-			id2 = requestAnimationFrame(() => setSettled(true));
-		});
-		return () => {
-			cancelAnimationFrame(id1);
-			if (id2) cancelAnimationFrame(id2);
-		};
-	}, [ready]);
-	const hostWidgetIsDragging = !!dragState && dragState.nestedBoardIds.has(boardId);
-	const placeholderStyles = useMemo(() => placeholders.map((p) => {
-		const pos = calcGridItemPosition(positionParams, p.x, p.y, p.w, p.h);
-		return {
-			i: p.i,
-			style: {
-				left: `${pos.left}px`,
-				top: `${pos.top}px`,
-				width: `${pos.width}px`,
-				height: `${pos.height}px`
-			}
-		};
-	}), [placeholders, positionParams]);
-	const ownsDrag = !!dragState && (dragState.sourceBoardId === boardId || dragState.currentBoardId === boardId);
-	const gridOverlayStyle = !hostWidgetIsDragging && (effectiveShowGridLines === true || effectiveShowGridLines === "drag" && (ownsDrag || !!placeholder) || effectiveShowGridLines === "any-drag" && (!!dragState || !!placeholder)) ? (() => {
-		const colWidth = calcGridColWidth(positionParams);
-		const rowHeightPx = positionParams.rowHeight;
-		const pitchX = colWidth + effectiveMargin[0];
-		const pitchY = rowHeightPx + effectiveMargin[1];
-		const padX = resolvedPadding[0];
-		const padY = resolvedPadding[1];
-		const gridWidth = Math.max(0, effectiveContainerWidth - padX * 2);
-		const gridHeight = renderedRows > 0 ? renderedRows * rowHeightPx + (renderedRows - 1) * effectiveMargin[1] : 0;
-		const fill = "var(--border-color)";
-		const columns = `repeating-linear-gradient(to right, ${fill} 0, ${fill} ${colWidth}px, transparent ${colWidth}px, transparent ${pitchX}px)`;
-		const rowsGrad = `repeating-linear-gradient(to bottom, #000 0, #000 ${rowHeightPx}px, transparent ${rowHeightPx}px, transparent ${pitchY}px)`;
-		return {
-			left: `${padX}px`,
-			top: `${padY}px`,
-			width: `${gridWidth}px`,
-			height: `${gridHeight}px`,
-			backgroundImage: columns,
-			backgroundPosition: "0 0",
-			backgroundRepeat: "repeat",
-			maskImage: rowsGrad,
-			WebkitMaskImage: rowsGrad,
-			maskPosition: "0 0",
-			WebkitMaskPosition: "0 0",
-			maskRepeat: "repeat",
-			WebkitMaskRepeat: "repeat"
-		};
-	})() : null;
-	const boardMetrics = useMemo(() => ({
-		colWidth: calcGridColWidth(positionParams),
-		rowHeight: positionParams.rowHeight,
-		margin: positionParams.margin,
-		containerPadding: positionParams.containerPadding,
-		depth: boardDepth
-	}), [positionParams, boardDepth]);
-	return /* @__PURE__ */ jsx(BoardMetricsContext.Provider, {
-		value: boardMetrics,
-		children: /* @__PURE__ */ jsx(BoardGridLinesContext.Provider, {
-			value: effectiveShowGridLines === "any-drag" ? "any-drag" : effectiveShowGridLines ? "drag" : false,
-			children: /* @__PURE__ */ jsxs(BoardElement, {
-				...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 : isStretching ? { height: "100%" } : { minHeight: `${containerHeight}px` },
-				mods: {
-					dragging: !!dragState,
-					"drop-target": dragState?.currentBoardId === boardId,
-					marquee: isMarqueeActive
-				},
-				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 gripPlacement = registration?.resizeGripPlacement ?? widgetProps?.resizeGripPlacement ?? resizeGripPlacement;
-								const widgetDragCancel = registration?.dragCancel ?? widgetProps?.dragCancel ?? dragCancel;
-								const widgetDragHandle = registration?.dragHandle ?? widgetProps?.dragHandle ?? dragHandle;
-								const widgetIsCard = registration?.isCard ?? widgetProps?.isCard ?? false;
-								const widgetHoverRing = registration?.hoverRing ?? widgetProps?.hoverRing ?? true;
-								const widgetMods = registration?.mods && widgetProps?.mods ? {
-									...widgetProps.mods,
-									...registration.mods
-								} : registration?.mods ?? widgetProps?.mods;
-								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;
-								const widgetStyles = registration?.styles && widgetPropsStyles ? mergeStyles(widgetPropsStyles, registration.styles) : registration?.styles ?? widgetPropsStyles;
-								return /* @__PURE__ */ jsx(WidgetHost, {
-									boardId,
-									item,
-									positionParams,
-									registration,
-									isCard: widgetIsCard,
-									hoverRing: widgetHoverRing,
-									cornerChrome: registration?.cornerChrome ?? widgetProps?.cornerChrome,
-									cornerChromePlacement: registration?.cornerChromePlacement ?? widgetProps?.cornerChromePlacement,
-									mods: widgetMods,
-									styles: widgetStyles,
-									isDraggable: widgetDraggable,
-									isResizable: widgetResizable,
-									resizeHandles: handles,
-									resizeGripPlacement: gripPlacement,
-									boardDepth,
-									isAutoHeight: widgetIsAutoHeight,
-									qa: widgetQa,
-									dragCancel: widgetDragCancel,
-									dragHandle: widgetDragHandle,
-									isSelectable: widgetSelectable,
-									isSelected: selectedKeySet.has(item.i),
-									isPreSelected: preSelectedKeys.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
-				]
-			})
-		})
-	});
-}
-const BoardInnerForwarded = forwardRef(BoardInner);
-/**
-* A draggable and resizable widget grid. Widgets are declared with
-* `Board.Widget` and positioned via a `layout`. Wrap multiple boards in a
-* `BoardProvider` to enable dragging widgets between them.
-*/
-const Board = forwardRef(function Board(props, ref) {
-	const $ = c(6);
-	if (useBoardRegistry()) {
-		let t0;
-		if ($[0] !== props || $[1] !== ref) {
-			t0 = /* @__PURE__ */ jsx(BoardInnerForwarded, {
-				...props,
-				ref
-			});
-			$[0] = props;
-			$[1] = ref;
-			$[2] = t0;
-		} else t0 = $[2];
-		return t0;
-	}
-	let t0;
-	if ($[3] !== props || $[4] !== ref) {
-		t0 = /* @__PURE__ */ jsx(BoardProvider, { children: /* @__PURE__ */ jsx(BoardInnerForwarded, {
-			...props,
-			ref
-		}) });
-		$[3] = props;
-		$[4] = ref;
-		$[5] = t0;
-	} else t0 = $[5];
-	return t0;
-});
-
-//#endregion
-export { BOARD_SELECTION_CANCEL, Board };
-//# sourceMappingURL=Board.js.map