@cube-dev/ui-kit 0.0.0-canary-3cf647a → 0.0.0-canary-ea72271

package/dist/components/form/Form/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

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

@@ -37,6 +37,15 @@ interface CubeBoardProps extends Omit<AllBaseProps, 'children'>, Omit<ContainerS
   isDroppable?: boolean;
   /** Which resize handles to show. @default ['se'] */
   resizeHandles?: ResizeHandleAxis[];
+  /**
+   * Align this board's grid with an ancestor `Board`'s layout. Only takes
+   * effect when the board is nested inside another `Board`'s widget. When set,
+   * the board inherits the parent's column pitch (deriving its own column count
+   * from its measured width so cells stay parent-sized) and inherits the
+   * parent's row height as a target, shrinking rows slightly when needed to fit
+   * the height the container widget grants it. @default false
+   */
+  isAligned?: boolean;
   /** Grid/item layout constraints. */
   constraints?: LayoutConstraint[];
   /**

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

@@ -1,11 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { useBoardRegistry } from "./board-context.js";
-import { bottom, getLayoutItem, modifyLayout } from "./grid-core/layout.js";
+import { BoardMetricsContext, useBoardHost, useBoardMetrics, useBoardRegistry } from "./board-context.js";
+import { bottom, cloneLayout, correctBounds, getLayoutItem, modifyLayout } from "./grid-core/layout.js";
 import { getCompactor } from "./grid-core/compactors.js";
-import { calcGridItemPosition, calcWH } from "./grid-core/calculate.js";
+import { calcGridColWidth, calcGridItemPosition, calcWH, clamp } 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";
@@ -47,22 +47,34 @@ const PlaceholderElement = tasty({
 		boxSizing: "border-box"
 	}
 });
+/**
+* Lower bound for the reduced row height used by an aligned nested board, so a
+* very short container can never collapse its rows to zero.
+*/
+const MIN_ALIGNED_ROW_HEIGHT = 24;
 function compactTypeToCore(compact) {
 	if (compact === "free") return null;
 	return compact;
 }
 function BoardInner(props, ref) {
-	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, cols = 12, rowHeight = 100, margin = [8, 8], containerPadding, maxRows = Infinity, compact = "vertical", allowOverlap = false, preventCollision = false, isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], constraints, width: providedWidth, children, ...otherProps } = props;
+	const { id: providedId, layout: controlledLayout, defaultLayout, onLayoutChange, cols = 12, rowHeight = 100, margin = [8, 8], containerPadding, maxRows = Infinity, compact = "vertical", allowOverlap = false, preventCollision = false, isDraggable = true, isResizable = true, isDroppable = true, resizeHandles = ["se"], isAligned = false, constraints, width: providedWidth, children, ...otherProps } = props;
 	const registry = useBoardRegistry();
+	const parentMetrics = useBoardMetrics();
+	const host = useBoardHost();
+	const aligned = isAligned && !!parentMetrics;
 	const generatedId = useId();
 	const boardId = providedId ?? generatedId;
 	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) setMeasuredWidth(el.offsetWidth);
+		if (el) {
+			setMeasuredWidth(el.offsetWidth);
+			setMeasuredHeight(el.offsetHeight);
+		}
 	});
 	useResizeObserver({
 		ref: containerRef,
@@ -77,22 +89,30 @@ function BoardInner(props, ref) {
 		onLayoutChange
 	});
 	useSyncExternalStore(registry.store.subscribe, registry.store.getVersion);
-	const resolvedPadding = containerPadding ?? margin;
+	const effectiveMargin = aligned ? parentMetrics.margin : margin;
+	const resolvedPadding = containerPadding ?? effectiveMargin;
+	const rows = Math.max(bottom(layout), placeholder ? placeholder.y + placeholder.h : 0);
+	const parentColWidth = aligned ? parentMetrics.colWidth : 0;
+	const alignedCols = aligned && width > 0 ? Math.max(1, Math.floor((width - resolvedPadding[0] * 2 + effectiveMargin[0]) / (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 parentRowHeight = aligned ? parentMetrics.rowHeight : rowHeight;
+	const effectiveRowHeight = aligned && rows > 0 && measuredHeight > 0 ? clamp((measuredHeight - Math.max(0, rows - 1) * effectiveMargin[1] - resolvedPadding[1] * 2) / rows, MIN_ALIGNED_ROW_HEIGHT, parentRowHeight) : parentRowHeight;
 	const positionParams = useMemo(() => ({
-		margin,
+		margin: effectiveMargin,
 		containerPadding: resolvedPadding,
-		containerWidth: width,
-		cols,
-		rowHeight,
+		containerWidth: effectiveContainerWidth,
+		cols: effectiveCols,
+		rowHeight: effectiveRowHeight,
 		maxRows
 	}), [
-		margin[0],
-		margin[1],
+		effectiveMargin[0],
+		effectiveMargin[1],
 		resolvedPadding[0],
 		resolvedPadding[1],
-		width,
-		cols,
-		rowHeight,
+		effectiveContainerWidth,
+		effectiveCols,
+		effectiveRowHeight,
 		maxRows
 	]);
 	const compactor = useMemo(() => {
@@ -104,8 +124,8 @@ function BoardInner(props, ref) {
 		preventCollision
 	]);
 	const resolvedConstraints = constraints ?? defaultConstraints;
-	const rows = Math.max(bottom(layout), placeholder ? placeholder.y + placeholder.h : 0);
-	const containerHeight = rows > 0 ? rows * rowHeight + Math.max(0, rows - 1) * margin[1] + resolvedPadding[1] * 2 : rowHeight;
+	const computedHeight = rows > 0 ? rows * effectiveRowHeight + Math.max(0, rows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : effectiveRowHeight;
+	const containerHeight = aligned && measuredHeight > 0 ? measuredHeight : computedHeight;
 	const liveRef = useRef({
 		positionParams,
 		compactor,
@@ -144,7 +164,39 @@ function BoardInner(props, ref) {
 		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);
+	});
+	const prevAlignedColsRef = useRef(effectiveCols);
+	useEffect(() => {
+		if (!aligned) {
+			prevAlignedColsRef.current = effectiveCols;
+			return;
+		}
+		if (prevAlignedColsRef.current === effectiveCols) return;
+		prevAlignedColsRef.current = effectiveCols;
+		recompactForCols(effectiveCols);
+	}, [
+		aligned,
+		effectiveCols,
+		recompactForCols
+	]);
+	const naturalHeight = rows > 0 ? rows * parentRowHeight + Math.max(0, rows - 1) * effectiveMargin[1] + resolvedPadding[1] * 2 : parentRowHeight;
+	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") {
@@ -194,24 +246,38 @@ function BoardInner(props, ref) {
 			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 - constrained.w;
-		if (handle.includes("n")) y = item.y + item.h - constrained.h;
+		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);
 		const newItem = {
 			...item,
 			x,
 			y,
-			w: constrained.w,
-			h: constrained.h
+			w: finalW,
+			h: finalH
 		};
 		const working = modifyLayout(layoutRef.current, newItem);
 		const compacted = [...liveRef.current.compactor.compact(working, pp.cols)];
 		applyLayout(compacted, false);
 		setPlaceholder(getLayoutItem(compacted, id) ?? newItem);
 	});
+	const handleAutoHeight = useEvent((id, neededRows) => {
+		autoHeightMinRowsRef.current[id] = neededRows;
+		const current = getLayoutItem(layoutRef.current, id);
+		if (!current || neededRows <= current.h) return;
+		const pp = liveRef.current.positionParams;
+		const working = modifyLayout(layoutRef.current, {
+			...current,
+			h: neededRows
+		});
+		applyLayout([...liveRef.current.compactor.compact(working, pp.cols)], true);
+	});
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
 	const dragState = registry.dragState;
 	const ready = width > 0;
@@ -224,36 +290,46 @@ function BoardInner(props, ref) {
 		};
 	})() : null;
 	const showPlaceholder = placeholder && placeholderStyle;
-	return /* @__PURE__ */ jsxs(BoardElement, {
-		...filterBaseProps(otherProps, { eventProps: true }),
-		ref: containerRef,
-		styles,
-		style: { minHeight: `${containerHeight}px` },
-		mods: {
-			dragging: !!dragState,
-			"drop-target": dragState?.currentBoardId === boardId
-		},
-		children: [/* @__PURE__ */ jsxs(ContentLayer, {
-			ref: contentRef,
-			children: [ready ? layout.map((item) => {
-				const registration = registry.store.get(item.i);
-				return /* @__PURE__ */ jsx(WidgetHost, {
-					boardId,
-					item,
-					positionParams,
-					registration,
-					isDraggable: isDraggable && registration?.isDraggable !== false && item.isDraggable !== false && !item.static,
-					isResizable: isResizable && registration?.isResizable !== false && item.isResizable !== false && !item.static,
-					resizeHandles: item.resizeHandles ?? registration?.resizeHandles ?? resizeHandles,
-					registry,
-					dragState,
-					onResize: handleResize
-				}, item.i);
-			}) : null, showPlaceholder ? /* @__PURE__ */ jsx(PlaceholderElement, {
-				"aria-hidden": "true",
-				style: placeholderStyle
-			}) : null]
-		}), children]
+	const boardMetrics = useMemo(() => ({
+		colWidth: calcGridColWidth(positionParams),
+		rowHeight: positionParams.rowHeight,
+		margin: positionParams.margin,
+		containerPadding: positionParams.containerPadding
+	}), [positionParams]);
+	return /* @__PURE__ */ jsx(BoardMetricsContext.Provider, {
+		value: boardMetrics,
+		children: /* @__PURE__ */ jsxs(BoardElement, {
+			...filterBaseProps(otherProps, { eventProps: true }),
+			ref: containerRef,
+			styles,
+			style: aligned ? void 0 : { minHeight: `${containerHeight}px` },
+			mods: {
+				dragging: !!dragState,
+				"drop-target": dragState?.currentBoardId === boardId
+			},
+			children: [/* @__PURE__ */ jsxs(ContentLayer, {
+				ref: contentRef,
+				children: [ready ? layout.map((item) => {
+					const registration = registry.store.get(item.i);
+					return /* @__PURE__ */ jsx(WidgetHost, {
+						boardId,
+						item,
+						positionParams,
+						registration,
+						isDraggable: isDraggable && registration?.isDraggable !== false && item.isDraggable !== false && !item.static,
+						isResizable: isResizable && registration?.isResizable !== false && item.isResizable !== false && !item.static,
+						resizeHandles: item.resizeHandles ?? registration?.resizeHandles ?? resizeHandles,
+						registry,
+						dragState,
+						onResize: handleResize,
+						onAutoHeight: handleAutoHeight
+					}, item.i);
+				}) : null, showPlaceholder ? /* @__PURE__ */ jsx(PlaceholderElement, {
+					"aria-hidden": "true",
+					style: placeholderStyle
+				}) : null]
+			}), children]
+		})
 	});
 }
 const BoardInnerForwarded = forwardRef(BoardInner);

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

@@ -1 +1 @@
-{"version":3,"file":"Board.js","names":[],"sources":["../../../../src/components/layout/Board/Board.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { BoardEntry, useBoardRegistry } from './board-context';\nimport { BoardProvider } from './BoardProvider';\nimport {\n  applySizeConstraints,\n  bottom,\n  calcGridItemPosition,\n  calcWH,\n  Compactor,\n  CompactType,\n  defaultConstraints,\n  getCompactor,\n  getLayoutItem,\n  LayoutConstraint,\n  LayoutItem,\n  modifyLayout,\n  Position,\n  PositionParams,\n  ResizeHandleAxis,\n} from './grid-core';\nimport { useBoardLayout } from './use-board-layout';\nimport { ResizePhase, WidgetHost } from './WidgetHost';\n\nconst BoardElement = tasty({\n  qa: 'Board',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    width: '100%',\n    flexGrow: 1,\n    minHeight: '0',\n    fill: '#clear',\n    boxSizing: 'border-box',\n  },\n});\n\nconst ContentLayer = tasty({\n  styles: {\n    position: 'absolute',\n    inset: 0,\n  },\n});\n\nconst PlaceholderElement = tasty({\n  qa: 'BoardPlaceholder',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    fill: '#purple.10',\n    radius: '1cr',\n    border: '#purple.40',\n    zIndex: 2,\n    pointerEvents: 'none',\n    transition: 'transform 80ms linear, width 80ms linear, height 80ms linear',\n    boxSizing: 'border-box',\n  },\n});\n\nexport type BoardCompactType = 'vertical' | 'horizontal' | 'free' | null;\n\nexport interface CubeBoardProps\n  extends Omit<AllBaseProps, 'children'>,\n    Omit<ContainerStyleProps, 'margin'> {\n  /** Stable board id (used for cross-board drag). Auto-generated if omitted. */\n  id?: string;\n  /** Controlled layout. */\n  layout?: LayoutItem[];\n  /** Initial layout for uncontrolled usage. */\n  defaultLayout?: LayoutItem[];\n  onLayoutChange?: (layout: LayoutItem[]) => void;\n  /** Number of columns. @default 12 */\n  cols?: number;\n  /** Row height in pixels. @default 100 */\n  rowHeight?: number;\n  /** [horizontal, vertical] margin between widgets in pixels. @default [8, 8] */\n  margin?: [number, number];\n  /** [horizontal, vertical] padding inside the board. Defaults to `margin`. */\n  containerPadding?: [number, number];\n  /** Maximum number of rows. @default Infinity */\n  maxRows?: number;\n  /** Compaction behavior. @default 'vertical' */\n  compact?: BoardCompactType;\n  /** Allow widgets to overlap. @default false */\n  allowOverlap?: boolean;\n  /** Block movement into occupied cells instead of pushing. @default false */\n  preventCollision?: boolean;\n  /** Enable dragging for all widgets. @default true */\n  isDraggable?: boolean;\n  /** Enable resizing for all widgets. @default true */\n  isResizable?: boolean;\n  /** Whether this board accepts widgets dropped from other boards. @default true */\n  isDroppable?: boolean;\n  /** Which resize handles to show. @default ['se'] */\n  resizeHandles?: ResizeHandleAxis[];\n  /** Grid/item layout constraints. */\n  constraints?: LayoutConstraint[];\n  /**\n   * Explicit container width in pixels. When provided, disables automatic width\n   * measurement (useful for SSR and tests).\n   */\n  width?: number;\n  children?: ReactNode;\n}\n\nfunction compactTypeToCore(compact: BoardCompactType): CompactType {\n  if (compact === 'free') return null;\n  return compact;\n}\n\nfunction BoardInner(\n  props: CubeBoardProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    id: providedId,\n    layout: controlledLayout,\n    defaultLayout,\n    onLayoutChange,\n    cols = 12,\n    rowHeight = 100,\n    margin = [8, 8],\n    containerPadding,\n    maxRows = Infinity,\n    compact = 'vertical',\n    allowOverlap = false,\n    preventCollision = false,\n    isDraggable = true,\n    isResizable = true,\n    isDroppable = true,\n    resizeHandles = ['se'],\n    constraints,\n    width: providedWidth,\n    children,\n    ...otherProps\n  } = props;\n\n  const registry = useBoardRegistry()!;\n  const generatedId = useId();\n  const boardId = providedId ?? generatedId;\n\n  const containerRef = useCombinedRefs(ref);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = useState<number>(0);\n  const width = providedWidth ?? measuredWidth;\n\n  const onResizeContainer = useEvent(() => {\n    const el = containerRef.current;\n    if (el) {\n      setMeasuredWidth(el.offsetWidth);\n    }\n  });\n  useResizeObserver({ ref: containerRef, onResize: onResizeContainer });\n  useEffect(() => {\n    if (providedWidth == null) {\n      onResizeContainer();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [providedWidth]);\n\n  const { layout, layoutRef, placeholder, setPlaceholder, applyLayout } =\n    useBoardLayout({\n      layout: controlledLayout,\n      defaultLayout,\n      onLayoutChange,\n    });\n\n  // Re-render when any widget's registered content/config changes.\n  useSyncExternalStore(registry.store.subscribe, registry.store.getVersion);\n\n  const resolvedPadding = containerPadding ?? margin;\n\n  const positionParams = useMemo<PositionParams>(\n    () => ({\n      margin,\n      containerPadding: resolvedPadding,\n      containerWidth: width,\n      cols,\n      rowHeight,\n      maxRows,\n    }),\n    [\n      margin[0],\n      margin[1],\n      resolvedPadding[0],\n      resolvedPadding[1],\n      width,\n      cols,\n      rowHeight,\n      maxRows,\n    ],\n  );\n\n  const compactor = useMemo<Compactor>(() => {\n    // 'free' means true free positioning: widgets can overlap and nothing is\n    // pushed or recompacted. Force allowOverlap so `moveElement` short-circuits\n    // on collision and the (no-op) compactor leaves items exactly where dropped.\n    if (compact === 'free') {\n      return getCompactor(null, true, preventCollision);\n    }\n    return getCompactor(\n      compactTypeToCore(compact),\n      allowOverlap,\n      preventCollision,\n    );\n  }, [compact, allowOverlap, preventCollision]);\n\n  const resolvedConstraints = constraints ?? defaultConstraints;\n\n  const rows = Math.max(\n    bottom(layout),\n    placeholder ? placeholder.y + placeholder.h : 0,\n  );\n  const containerHeight =\n    rows > 0\n      ? rows * rowHeight +\n        Math.max(0, rows - 1) * margin[1] +\n        resolvedPadding[1] * 2\n      : rowHeight;\n\n  // Live refs so the stable registry entry always reads current values.\n  const liveRef = useRef({\n    positionParams,\n    compactor,\n    constraints: resolvedConstraints,\n    maxRows,\n    containerHeight,\n    isDroppable,\n  });\n  liveRef.current = {\n    positionParams,\n    compactor,\n    constraints: resolvedConstraints,\n    maxRows,\n    containerHeight,\n    isDroppable,\n  };\n\n  const applyLayoutEvent = useEvent(applyLayout);\n  const setPlaceholderEvent = useEvent(setPlaceholder);\n\n  const entryRef = useRef<BoardEntry | null>(null);\n  if (!entryRef.current) {\n    entryRef.current = {\n      id: boardId,\n      getContentRect: () => contentRef.current?.getBoundingClientRect() ?? null,\n      getContentNode: () => contentRef.current,\n      getPositionParams: () => liveRef.current.positionParams,\n      getConstraints: () => liveRef.current.constraints,\n      getCompactor: () => liveRef.current.compactor,\n      getMaxRows: () => liveRef.current.maxRows,\n      getContainerHeight: () => liveRef.current.containerHeight,\n      getLayout: () => layoutRef.current,\n      applyLayout: (next, commit) => applyLayoutEvent(next, commit),\n      setPlaceholder: (item) => setPlaceholderEvent(item),\n      isDroppable: () => liveRef.current.isDroppable,\n    };\n  }\n\n  useEffect(() => {\n    const entry = entryRef.current!;\n    // Keep the entry's id in sync with the (possibly changed) board id before\n    // registering. The previous effect's cleanup has already removed the old id,\n    // so registering here keys the entry under the current id.\n    entry.id = boardId;\n    return registry.registerBoard(entry);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [boardId]);\n\n  // In-board resize orchestration.\n  const resizeStateRef = useRef<{\n    id: string;\n    axis: ResizeHandleAxis;\n    item: LayoutItem;\n    origin: Position;\n    accX: number;\n    accY: number;\n  } | null>(null);\n\n  const handleResize = useEvent(\n    (\n      id: string,\n      axis: ResizeHandleAxis,\n      phase: ResizePhase,\n      dx: number,\n      dy: number,\n    ) => {\n      const pp = liveRef.current.positionParams;\n\n      if (phase === 'start') {\n        const rawItem = getLayoutItem(layoutRef.current, id);\n        if (!rawItem) return;\n        // Layout-item constraints win; otherwise fall back to the ones declared\n        // on the owning `Board.Widget` so `applySizeConstraints` picks them up.\n        const item: LayoutItem = {\n          ...rawItem,\n          constraints:\n            rawItem.constraints ?? registry.store.get(id)?.constraints,\n        };\n        resizeStateRef.current = {\n          id,\n          axis,\n          item: { ...item },\n          origin: calcGridItemPosition(pp, item.x, item.y, item.w, item.h),\n          accX: 0,\n          accY: 0,\n        };\n        setPlaceholder({ ...item });\n        return;\n      }\n\n      const rs = resizeStateRef.current;\n      if (!rs) return;\n\n      if (phase === 'end') {\n        applyLayout([...layoutRef.current], true);\n        setPlaceholder(null);\n        resizeStateRef.current = null;\n        return;\n      }\n\n      rs.accX += dx;\n      rs.accY += dy;\n\n      const { origin, item, axis: handle } = rs;\n      let newW = origin.width;\n      let newH = origin.height;\n      if (handle.includes('e')) newW = origin.width + rs.accX;\n      if (handle.includes('w')) newW = origin.width - rs.accX;\n      if (handle.includes('s')) newH = origin.height + rs.accY;\n      if (handle.includes('n')) newH = origin.height - rs.accY;\n      newW = Math.max(newW, 8);\n      newH = Math.max(newH, 8);\n\n      const raw = calcWH(pp, newW, newH, item.x, item.y, handle);\n      const constrained = applySizeConstraints(\n        liveRef.current.constraints,\n        item,\n        raw.w,\n        raw.h,\n        handle,\n        {\n          cols: pp.cols,\n          maxRows: liveRef.current.maxRows,\n          containerWidth: pp.containerWidth,\n          containerHeight: liveRef.current.containerHeight,\n          rowHeight: pp.rowHeight,\n          margin: pp.margin,\n          layout: layoutRef.current,\n        },\n      );\n\n      let x = item.x;\n      let y = item.y;\n      if (handle.includes('w')) x = item.x + item.w - constrained.w;\n      if (handle.includes('n')) y = item.y + item.h - constrained.h;\n      x = Math.max(0, x);\n      y = Math.max(0, y);\n\n      const newItem: LayoutItem = {\n        ...item,\n        x,\n        y,\n        w: constrained.w,\n        h: constrained.h,\n      };\n      const working = modifyLayout(layoutRef.current, newItem);\n      const compacted = [\n        ...liveRef.current.compactor.compact(working, pp.cols),\n      ];\n      applyLayout(compacted, false);\n      setPlaceholder(getLayoutItem(compacted, id) ?? newItem);\n    },\n  );\n\n  const styles: Styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const dragState = registry.dragState;\n  const ready = width > 0;\n\n  const placeholderStyle = placeholder\n    ? (() => {\n        const pos = calcGridItemPosition(\n          positionParams,\n          placeholder.x,\n          placeholder.y,\n          placeholder.w,\n          placeholder.h,\n        );\n        return {\n          transform: `translate(${pos.left}px, ${pos.top}px)`,\n          width: `${pos.width}px`,\n          height: `${pos.height}px`,\n        };\n      })()\n    : null;\n\n  const showPlaceholder = placeholder && placeholderStyle;\n\n  return (\n    <BoardElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={containerRef}\n      styles={styles}\n      // Use min-height (not a fixed height) so the board auto-sizes to its\n      // content by default but can still grow to fill a taller parent (e.g. a\n      // nested board stretched inside a container widget). Widgets are absolutely\n      // positioned, so growing never shifts them, and the content layer\n      // (inset: 0) always covers the full board -> the whole board is droppable.\n      style={{ minHeight: `${containerHeight}px` }}\n      mods={{\n        dragging: !!dragState,\n        'drop-target': dragState?.currentBoardId === boardId,\n      }}\n    >\n      <ContentLayer ref={contentRef}>\n        {ready\n          ? layout.map((item) => {\n              const registration = registry.store.get(item.i);\n              const widgetDraggable =\n                isDraggable &&\n                registration?.isDraggable !== false &&\n                item.isDraggable !== false &&\n                !item.static;\n              const widgetResizable =\n                isResizable &&\n                registration?.isResizable !== false &&\n                item.isResizable !== false &&\n                !item.static;\n              const handles =\n                item.resizeHandles ??\n                registration?.resizeHandles ??\n                resizeHandles;\n\n              return (\n                <WidgetHost\n                  key={item.i}\n                  boardId={boardId}\n                  item={item}\n                  positionParams={positionParams}\n                  registration={registration}\n                  isDraggable={widgetDraggable}\n                  isResizable={widgetResizable}\n                  resizeHandles={handles}\n                  registry={registry}\n                  dragState={dragState}\n                  onResize={handleResize}\n                />\n              );\n            })\n          : null}\n        {showPlaceholder ? (\n          <PlaceholderElement aria-hidden=\"true\" style={placeholderStyle!} />\n        ) : null}\n      </ContentLayer>\n      {children}\n    </BoardElement>\n  );\n}\n\nconst BoardInnerForwarded = forwardRef(BoardInner);\n\n/**\n * A draggable and resizable widget grid. Widgets are declared with\n * `Board.Widget` and positioned via a `layout`. Wrap multiple boards in a\n * `BoardProvider` to enable dragging widgets between them.\n */\nexport const Board = forwardRef(function Board(\n  props: CubeBoardProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const existingRegistry = useBoardRegistry();\n\n  if (existingRegistry) {\n    return <BoardInnerForwarded {...props} ref={ref} />;\n  }\n\n  return (\n    <BoardProvider>\n      <BoardInnerForwarded {...props} ref={ref} />\n    </BoardProvider>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,SAAS;EACT,OAAO;EACP,UAAU;EACV,WAAW;EACX,MAAM;EACN,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,UAAU;CACV,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,eAAe;EACf,YAAY;EACZ,WAAW;EACZ;CACF,CAAC;AAgDF,SAAS,kBAAkB,SAAwC;AACjE,KAAI,YAAY,OAAQ,QAAO;AAC/B,QAAO;;AAGT,SAAS,WACP,OACA,KACA;CACA,MAAM,EACJ,IAAI,YACJ,QAAQ,kBACR,eACA,gBACA,OAAO,IACP,YAAY,KACZ,SAAS,CAAC,GAAG,EAAE,EACf,kBACA,UAAU,UACV,UAAU,YACV,eAAe,OACf,mBAAmB,OACnB,cAAc,MACd,cAAc,MACd,cAAc,MACd,gBAAgB,CAAC,KAAK,EACtB,aACA,OAAO,eACP,UACA,GAAG,eACD;CAEJ,MAAM,WAAW,kBAAkB;CACnC,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,cAAc;CAE9B,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,aAAa,OAA8B,KAAK;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAAiB,EAAE;CAC7D,MAAM,QAAQ,iBAAiB;CAE/B,MAAM,oBAAoB,eAAe;EACvC,MAAM,KAAK,aAAa;AACxB,MAAI,GACF,kBAAiB,GAAG,YAAY;GAElC;AACF,mBAAkB;EAAE,KAAK;EAAc,UAAU;EAAmB,CAAC;AACrE,iBAAgB;AACd,MAAI,iBAAiB,KACnB,oBAAmB;IAGpB,CAAC,cAAc,CAAC;CAEnB,MAAM,EAAE,QAAQ,WAAW,aAAa,gBAAgB,gBACtD,eAAe;EACb,QAAQ;EACR;EACA;EACD,CAAC;AAGJ,sBAAqB,SAAS,MAAM,WAAW,SAAS,MAAM,WAAW;CAEzE,MAAM,kBAAkB,oBAAoB;CAE5C,MAAM,iBAAiB,eACd;EACL;EACA,kBAAkB;EAClB,gBAAgB;EAChB;EACA;EACA;EACD,GACD;EACE,OAAO;EACP,OAAO;EACP,gBAAgB;EAChB,gBAAgB;EAChB;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,YAAY,cAAyB;AAIzC,MAAI,YAAY,OACd,QAAO,aAAa,MAAM,MAAM,iBAAiB;AAEnD,SAAO,aACL,kBAAkB,QAAQ,EAC1B,cACA,iBACD;IACA;EAAC;EAAS;EAAc;EAAiB,CAAC;CAE7C,MAAM,sBAAsB,eAAe;CAE3C,MAAM,OAAO,KAAK,IAChB,OAAO,OAAO,EACd,cAAc,YAAY,IAAI,YAAY,IAAI,EAC/C;CACD,MAAM,kBACJ,OAAO,IACH,OAAO,YACP,KAAK,IAAI,GAAG,OAAO,EAAE,GAAG,OAAO,KAC/B,gBAAgB,KAAK,IACrB;CAGN,MAAM,UAAU,OAAO;EACrB;EACA;EACA,aAAa;EACb;EACA;EACA;EACD,CAAC;AACF,SAAQ,UAAU;EAChB;EACA;EACA,aAAa;EACb;EACA;EACA;EACD;CAED,MAAM,mBAAmB,SAAS,YAAY;CAC9C,MAAM,sBAAsB,SAAS,eAAe;CAEpD,MAAM,WAAW,OAA0B,KAAK;AAChD,KAAI,CAAC,SAAS,QACZ,UAAS,UAAU;EACjB,IAAI;EACJ,sBAAsB,WAAW,SAAS,uBAAuB,IAAI;EACrE,sBAAsB,WAAW;EACjC,yBAAyB,QAAQ,QAAQ;EACzC,sBAAsB,QAAQ,QAAQ;EACtC,oBAAoB,QAAQ,QAAQ;EACpC,kBAAkB,QAAQ,QAAQ;EAClC,0BAA0B,QAAQ,QAAQ;EAC1C,iBAAiB,UAAU;EAC3B,cAAc,MAAM,WAAW,iBAAiB,MAAM,OAAO;EAC7D,iBAAiB,SAAS,oBAAoB,KAAK;EACnD,mBAAmB,QAAQ,QAAQ;EACpC;AAGH,iBAAgB;EACd,MAAM,QAAQ,SAAS;AAIvB,QAAM,KAAK;AACX,SAAO,SAAS,cAAc,MAAM;IAEnC,CAAC,QAAQ,CAAC;CAGb,MAAM,iBAAiB,OAOb,KAAK;CAEf,MAAM,eAAe,UAEjB,IACA,MACA,OACA,IACA,OACG;EACH,MAAM,KAAK,QAAQ,QAAQ;AAE3B,MAAI,UAAU,SAAS;GACrB,MAAM,UAAU,cAAc,UAAU,SAAS,GAAG;AACpD,OAAI,CAAC,QAAS;GAGd,MAAM,OAAmB;IACvB,GAAG;IACH,aACE,QAAQ,eAAe,SAAS,MAAM,IAAI,GAAG,EAAE;IAClD;AACD,kBAAe,UAAU;IACvB;IACA;IACA,MAAM,EAAE,GAAG,MAAM;IACjB,QAAQ,qBAAqB,IAAI,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE;IAChE,MAAM;IACN,MAAM;IACP;AACD,kBAAe,EAAE,GAAG,MAAM,CAAC;AAC3B;;EAGF,MAAM,KAAK,eAAe;AAC1B,MAAI,CAAC,GAAI;AAET,MAAI,UAAU,OAAO;AACnB,eAAY,CAAC,GAAG,UAAU,QAAQ,EAAE,KAAK;AACzC,kBAAe,KAAK;AACpB,kBAAe,UAAU;AACzB;;AAGF,KAAG,QAAQ;AACX,KAAG,QAAQ;EAEX,MAAM,EAAE,QAAQ,MAAM,MAAM,WAAW;EACvC,IAAI,OAAO,OAAO;EAClB,IAAI,OAAO,OAAO;AAClB,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,QAAQ,GAAG;AACnD,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,QAAQ,GAAG;AACnD,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,SAAS,GAAG;AACpD,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,SAAS,GAAG;AACpD,SAAO,KAAK,IAAI,MAAM,EAAE;AACxB,SAAO,KAAK,IAAI,MAAM,EAAE;EAExB,MAAM,MAAM,OAAO,IAAI,MAAM,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO;EAC1D,MAAM,cAAc,qBAClB,QAAQ,QAAQ,aAChB,MACA,IAAI,GACJ,IAAI,GACJ,QACA;GACE,MAAM,GAAG;GACT,SAAS,QAAQ,QAAQ;GACzB,gBAAgB,GAAG;GACnB,iBAAiB,QAAQ,QAAQ;GACjC,WAAW,GAAG;GACd,QAAQ,GAAG;GACX,QAAQ,UAAU;GACnB,CACF;EAED,IAAI,IAAI,KAAK;EACb,IAAI,IAAI,KAAK;AACb,MAAI,OAAO,SAAS,IAAI,CAAE,KAAI,KAAK,IAAI,KAAK,IAAI,YAAY;AAC5D,MAAI,OAAO,SAAS,IAAI,CAAE,KAAI,KAAK,IAAI,KAAK,IAAI,YAAY;AAC5D,MAAI,KAAK,IAAI,GAAG,EAAE;AAClB,MAAI,KAAK,IAAI,GAAG,EAAE;EAElB,MAAM,UAAsB;GAC1B,GAAG;GACH;GACA;GACA,GAAG,YAAY;GACf,GAAG,YAAY;GAChB;EACD,MAAM,UAAU,aAAa,UAAU,SAAS,QAAQ;EACxD,MAAM,YAAY,CAChB,GAAG,QAAQ,QAAQ,UAAU,QAAQ,SAAS,GAAG,KAAK,CACvD;AACD,cAAY,WAAW,MAAM;AAC7B,iBAAe,cAAc,WAAW,GAAG,IAAI,QAAQ;GAE1D;CAED,MAAM,SAAiB,cAAc,YAAY,iBAAiB;CAElE,MAAM,YAAY,SAAS;CAC3B,MAAM,QAAQ,QAAQ;CAEtB,MAAM,mBAAmB,qBACd;EACL,MAAM,MAAM,qBACV,gBACA,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,EACb;AACD,SAAO;GACL,WAAW,aAAa,IAAI,KAAK,MAAM,IAAI,IAAI;GAC/C,OAAO,GAAG,IAAI,MAAM;GACpB,QAAQ,GAAG,IAAI,OAAO;GACvB;KACC,GACJ;CAEJ,MAAM,kBAAkB,eAAe;AAEvC,QACE,qBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EACrD,KAAK;EACG;EAMR,OAAO,EAAE,WAAW,GAAG,gBAAgB,KAAK;EAC5C,MAAM;GACJ,UAAU,CAAC,CAAC;GACZ,eAAe,WAAW,mBAAmB;GAC9C;aAED,qBAAC;GAAa,KAAK;cAChB,QACG,OAAO,KAAK,SAAS;IACnB,MAAM,eAAe,SAAS,MAAM,IAAI,KAAK,EAAE;AAgB/C,WACE,oBAAC;KAEU;KACH;KACU;KACF;KACd,aArBF,eACA,cAAc,gBAAgB,SAC9B,KAAK,gBAAgB,SACrB,CAAC,KAAK;KAmBJ,aAjBF,eACA,cAAc,gBAAgB,SAC9B,KAAK,gBAAgB,SACrB,CAAC,KAAK;KAeJ,eAbF,KAAK,iBACL,cAAc,iBACd;KAYY;KACC;KACX,UAAU;OAVL,KAAK,EAWV;KAEJ,GACF,MACH,kBACC,oBAAC;IAAmB,eAAY;IAAO,OAAO;KAAqB,GACjE;IACS,EACd;GACY;;AAInB,MAAM,sBAAsB,WAAW,WAAW;;;;;;AAOlD,MAAa,QAAQ,WAAW,SAAS,MACvC,OACA,KACA;AAGA,KAFyB,kBAAkB,CAGzC,QAAO,oBAAC;EAAoB,GAAI;EAAY;GAAO;AAGrD,QACE,oBAAC,2BACC,oBAAC;EAAoB,GAAI;EAAY;GAAO,GAC9B;EAElB"}
+{"version":3,"file":"Board.js","names":[],"sources":["../../../../src/components/layout/Board/Board.tsx"],"sourcesContent":["import { useResizeObserver } from '@react-aria/utils';\nimport {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\n\nimport { useEvent } from '../../../_internal/hooks';\nimport { useCombinedRefs } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\n\nimport {\n  BoardEntry,\n  BoardMetrics,\n  BoardMetricsContext,\n  useBoardHost,\n  useBoardMetrics,\n  useBoardRegistry,\n} from './board-context';\nimport { BoardProvider } from './BoardProvider';\nimport {\n  applySizeConstraints,\n  bottom,\n  calcGridColWidth,\n  calcGridItemPosition,\n  calcWH,\n  clamp,\n  cloneLayout,\n  Compactor,\n  CompactType,\n  correctBounds,\n  defaultConstraints,\n  getCompactor,\n  getLayoutItem,\n  LayoutConstraint,\n  LayoutItem,\n  modifyLayout,\n  Position,\n  PositionParams,\n  ResizeHandleAxis,\n} from './grid-core';\nimport { useBoardLayout } from './use-board-layout';\nimport { ResizePhase, WidgetHost } from './WidgetHost';\n\nconst BoardElement = tasty({\n  qa: 'Board',\n  styles: {\n    position: 'relative',\n    display: 'block',\n    width: '100%',\n    flexGrow: 1,\n    minHeight: '0',\n    fill: '#clear',\n    boxSizing: 'border-box',\n  },\n});\n\nconst ContentLayer = tasty({\n  styles: {\n    position: 'absolute',\n    inset: 0,\n  },\n});\n\nconst PlaceholderElement = tasty({\n  qa: 'BoardPlaceholder',\n  styles: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    fill: '#purple.10',\n    radius: '1cr',\n    border: '#purple.40',\n    zIndex: 2,\n    pointerEvents: 'none',\n    transition: 'transform 80ms linear, width 80ms linear, height 80ms linear',\n    boxSizing: 'border-box',\n  },\n});\n\n/**\n * Lower bound for the reduced row height used by an aligned nested board, so a\n * very short container can never collapse its rows to zero.\n */\nconst MIN_ALIGNED_ROW_HEIGHT = 24;\n\nexport type BoardCompactType = 'vertical' | 'horizontal' | 'free' | null;\n\nexport interface CubeBoardProps\n  extends Omit<AllBaseProps, 'children'>,\n    Omit<ContainerStyleProps, 'margin'> {\n  /** Stable board id (used for cross-board drag). Auto-generated if omitted. */\n  id?: string;\n  /** Controlled layout. */\n  layout?: LayoutItem[];\n  /** Initial layout for uncontrolled usage. */\n  defaultLayout?: LayoutItem[];\n  onLayoutChange?: (layout: LayoutItem[]) => void;\n  /** Number of columns. @default 12 */\n  cols?: number;\n  /** Row height in pixels. @default 100 */\n  rowHeight?: number;\n  /** [horizontal, vertical] margin between widgets in pixels. @default [8, 8] */\n  margin?: [number, number];\n  /** [horizontal, vertical] padding inside the board. Defaults to `margin`. */\n  containerPadding?: [number, number];\n  /** Maximum number of rows. @default Infinity */\n  maxRows?: number;\n  /** Compaction behavior. @default 'vertical' */\n  compact?: BoardCompactType;\n  /** Allow widgets to overlap. @default false */\n  allowOverlap?: boolean;\n  /** Block movement into occupied cells instead of pushing. @default false */\n  preventCollision?: boolean;\n  /** Enable dragging for all widgets. @default true */\n  isDraggable?: boolean;\n  /** Enable resizing for all widgets. @default true */\n  isResizable?: boolean;\n  /** Whether this board accepts widgets dropped from other boards. @default true */\n  isDroppable?: boolean;\n  /** Which resize handles to show. @default ['se'] */\n  resizeHandles?: ResizeHandleAxis[];\n  /**\n   * Align this board's grid with an ancestor `Board`'s layout. Only takes\n   * effect when the board is nested inside another `Board`'s widget. When set,\n   * the board inherits the parent's column pitch (deriving its own column count\n   * from its measured width so cells stay parent-sized) and inherits the\n   * parent's row height as a target, shrinking rows slightly when needed to fit\n   * the height the container widget grants it. @default false\n   */\n  isAligned?: boolean;\n  /** Grid/item layout constraints. */\n  constraints?: LayoutConstraint[];\n  /**\n   * Explicit container width in pixels. When provided, disables automatic width\n   * measurement (useful for SSR and tests).\n   */\n  width?: number;\n  children?: ReactNode;\n}\n\nfunction compactTypeToCore(compact: BoardCompactType): CompactType {\n  if (compact === 'free') return null;\n  return compact;\n}\n\nfunction BoardInner(\n  props: CubeBoardProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    id: providedId,\n    layout: controlledLayout,\n    defaultLayout,\n    onLayoutChange,\n    cols = 12,\n    rowHeight = 100,\n    margin = [8, 8],\n    containerPadding,\n    maxRows = Infinity,\n    compact = 'vertical',\n    allowOverlap = false,\n    preventCollision = false,\n    isDraggable = true,\n    isResizable = true,\n    isDroppable = true,\n    resizeHandles = ['se'],\n    isAligned = false,\n    constraints,\n    width: providedWidth,\n    children,\n    ...otherProps\n  } = props;\n\n  const registry = useBoardRegistry()!;\n  const parentMetrics = useBoardMetrics();\n  const host = useBoardHost();\n  const aligned = isAligned && !!parentMetrics;\n  const generatedId = useId();\n  const boardId = providedId ?? generatedId;\n\n  const containerRef = useCombinedRefs(ref);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = useState<number>(0);\n  // Rendered height is only needed for aligned nested boards (to fit rows into\n  // the space the container grants). It never drives the board's own height, so\n  // measuring it cannot create a feedback loop.\n  const [measuredHeight, setMeasuredHeight] = useState<number>(0);\n  const width = providedWidth ?? measuredWidth;\n\n  const onResizeContainer = useEvent(() => {\n    const el = containerRef.current;\n    if (el) {\n      setMeasuredWidth(el.offsetWidth);\n      setMeasuredHeight(el.offsetHeight);\n    }\n  });\n  useResizeObserver({ ref: containerRef, onResize: onResizeContainer });\n  useEffect(() => {\n    if (providedWidth == null) {\n      onResizeContainer();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [providedWidth]);\n\n  const { layout, layoutRef, placeholder, setPlaceholder, applyLayout } =\n    useBoardLayout({\n      layout: controlledLayout,\n      defaultLayout,\n      onLayoutChange,\n    });\n\n  // Re-render when any widget's registered content/config changes.\n  useSyncExternalStore(registry.store.subscribe, registry.store.getVersion);\n\n  // In aligned mode the board inherits the parent's gap so widget edges line up\n  // with the surrounding layout; otherwise it uses its own `margin`.\n  const effectiveMargin: readonly [number, number] = aligned\n    ? parentMetrics!.margin\n    : margin;\n  // The board keeps its own padding (it sits inside the container's chrome);\n  // when unspecified it defaults to the effective gap.\n  const resolvedPadding: readonly [number, number] =\n    containerPadding ?? effectiveMargin;\n\n  const rows = Math.max(\n    bottom(layout),\n    placeholder ? placeholder.y + placeholder.h : 0,\n  );\n\n  // Derive the aligned column count so each column keeps the parent's pixel\n  // pitch: as the container widget is resized, columns are added/removed rather\n  // than stretched. `containerWidth` is then back-solved so `calcGridColWidth`\n  // returns exactly the parent's column width.\n  const parentColWidth = aligned ? parentMetrics!.colWidth : 0;\n  const alignedCols =\n    aligned && width > 0\n      ? Math.max(\n          1,\n          Math.floor(\n            (width - resolvedPadding[0] * 2 + effectiveMargin[0]) /\n              (parentColWidth + effectiveMargin[0]),\n          ),\n        )\n      : cols;\n  const effectiveCols = aligned ? alignedCols : cols;\n  const effectiveContainerWidth = aligned\n    ? parentColWidth * effectiveCols +\n      effectiveMargin[0] * Math.max(0, effectiveCols - 1) +\n      resolvedPadding[0] * 2\n    : width;\n\n  // Row height inherits the parent's as the target, but shrinks (never grows\n  // beyond it) so the board's rows fit the height the container grants. When\n  // the height is unbounded/unmeasured, it stays at the parent's row height.\n  const parentRowHeight = aligned ? parentMetrics!.rowHeight : rowHeight;\n  const effectiveRowHeight =\n    aligned && rows > 0 && measuredHeight > 0\n      ? clamp(\n          (measuredHeight -\n            Math.max(0, rows - 1) * effectiveMargin[1] -\n            resolvedPadding[1] * 2) /\n            rows,\n          MIN_ALIGNED_ROW_HEIGHT,\n          parentRowHeight,\n        )\n      : parentRowHeight;\n\n  const positionParams = useMemo<PositionParams>(\n    () => ({\n      margin: effectiveMargin,\n      containerPadding: resolvedPadding,\n      containerWidth: effectiveContainerWidth,\n      cols: effectiveCols,\n      rowHeight: effectiveRowHeight,\n      maxRows,\n    }),\n    [\n      effectiveMargin[0],\n      effectiveMargin[1],\n      resolvedPadding[0],\n      resolvedPadding[1],\n      effectiveContainerWidth,\n      effectiveCols,\n      effectiveRowHeight,\n      maxRows,\n    ],\n  );\n\n  const compactor = useMemo<Compactor>(() => {\n    // 'free' means true free positioning: widgets can overlap and nothing is\n    // pushed or recompacted. Force allowOverlap so `moveElement` short-circuits\n    // on collision and the (no-op) compactor leaves items exactly where dropped.\n    if (compact === 'free') {\n      return getCompactor(null, true, preventCollision);\n    }\n    return getCompactor(\n      compactTypeToCore(compact),\n      allowOverlap,\n      preventCollision,\n    );\n  }, [compact, allowOverlap, preventCollision]);\n\n  const resolvedConstraints = constraints ?? defaultConstraints;\n\n  const computedHeight =\n    rows > 0\n      ? rows * effectiveRowHeight +\n        Math.max(0, rows - 1) * effectiveMargin[1] +\n        resolvedPadding[1] * 2\n      : effectiveRowHeight;\n  // An aligned board fills the height the container grants it, so it reports its\n  // measured height; otherwise it reports the height its content needs.\n  const containerHeight =\n    aligned && measuredHeight > 0 ? measuredHeight : computedHeight;\n\n  // Live refs so the stable registry entry always reads current values.\n  const liveRef = useRef({\n    positionParams,\n    compactor,\n    constraints: resolvedConstraints,\n    maxRows,\n    containerHeight,\n    isDroppable,\n  });\n  liveRef.current = {\n    positionParams,\n    compactor,\n    constraints: resolvedConstraints,\n    maxRows,\n    containerHeight,\n    isDroppable,\n  };\n\n  const applyLayoutEvent = useEvent(applyLayout);\n  const setPlaceholderEvent = useEvent(setPlaceholder);\n\n  const entryRef = useRef<BoardEntry | null>(null);\n  if (!entryRef.current) {\n    entryRef.current = {\n      id: boardId,\n      getContentRect: () => contentRef.current?.getBoundingClientRect() ?? null,\n      getContentNode: () => contentRef.current,\n      getPositionParams: () => liveRef.current.positionParams,\n      getConstraints: () => liveRef.current.constraints,\n      getCompactor: () => liveRef.current.compactor,\n      getMaxRows: () => liveRef.current.maxRows,\n      getContainerHeight: () => liveRef.current.containerHeight,\n      getLayout: () => layoutRef.current,\n      applyLayout: (next, commit) => applyLayoutEvent(next, commit),\n      setPlaceholder: (item) => setPlaceholderEvent(item),\n      isDroppable: () => liveRef.current.isDroppable,\n    };\n  }\n\n  useEffect(() => {\n    const entry = entryRef.current!;\n    // Keep the entry's id in sync with the (possibly changed) board id before\n    // registering. The previous effect's cleanup has already removed the old id,\n    // so registering here keys the entry under the current id.\n    entry.id = boardId;\n    return registry.registerBoard(entry);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [boardId]);\n\n  // When the aligned column count changes (the container was resized), reflow\n  // the layout to the new width: clamp items back into bounds and recompact so\n  // nothing overflows the narrower/wider grid.\n  const recompactForCols = useEvent((nextCols: number) => {\n    const corrected = correctBounds(cloneLayout(layoutRef.current), {\n      cols: nextCols,\n    });\n    const compacted = [\n      ...liveRef.current.compactor.compact(corrected, nextCols),\n    ];\n    applyLayoutEvent(compacted, true);\n  });\n  const prevAlignedColsRef = useRef(effectiveCols);\n  useEffect(() => {\n    if (!aligned) {\n      prevAlignedColsRef.current = effectiveCols;\n      return;\n    }\n    if (prevAlignedColsRef.current === effectiveCols) return;\n    prevAlignedColsRef.current = effectiveCols;\n    recompactForCols(effectiveCols);\n  }, [aligned, effectiveCols, recompactForCols]);\n\n  // Natural height this board wants: its rows at the (unshrunk) target row\n  // height. When aligned rows are shrunk to fit a short container, this exceeds\n  // the measured height by the amount the board was squeezed.\n  const naturalHeight =\n    rows > 0\n      ? rows * parentRowHeight +\n        Math.max(0, rows - 1) * effectiveMargin[1] +\n        resolvedPadding[1] * 2\n      : parentRowHeight;\n\n  // Report this aligned board's height deficit to an auto-sizing host so the\n  // host can both grow to fit and pin its resize floor. The value is signed:\n  // positive when the board is squeezed (needs more height), negative when the\n  // container is taller than needed (so the floor can be lowered). The host\n  // never shrinks the widget on its own - it only grows and clamps resizing.\n  const requestHeightDeficit = host?.requestHeightDeficit;\n  useEffect(() => {\n    if (!aligned || !host?.isAutoHeight || !requestHeightDeficit) return;\n    if (measuredHeight <= 0) return;\n    requestHeightDeficit(naturalHeight - measuredHeight);\n  }, [\n    aligned,\n    host?.isAutoHeight,\n    requestHeightDeficit,\n    naturalHeight,\n    measuredHeight,\n  ]);\n\n  // In-board resize orchestration.\n  const resizeStateRef = useRef<{\n    id: string;\n    axis: ResizeHandleAxis;\n    item: LayoutItem;\n    origin: Position;\n    accX: number;\n    accY: number;\n  } | null>(null);\n\n  // Minimum rows each auto-height widget currently needs to fit its content.\n  // Read during resize so a widget can never be dragged shorter than its\n  // content, and used to grow the item when the content needs more room.\n  const autoHeightMinRowsRef = useRef<Record<string, number>>({});\n\n  const handleResize = useEvent(\n    (\n      id: string,\n      axis: ResizeHandleAxis,\n      phase: ResizePhase,\n      dx: number,\n      dy: number,\n    ) => {\n      const pp = liveRef.current.positionParams;\n\n      if (phase === 'start') {\n        const rawItem = getLayoutItem(layoutRef.current, id);\n        if (!rawItem) return;\n        // Layout-item constraints win; otherwise fall back to the ones declared\n        // on the owning `Board.Widget` so `applySizeConstraints` picks them up.\n        const item: LayoutItem = {\n          ...rawItem,\n          constraints:\n            rawItem.constraints ?? registry.store.get(id)?.constraints,\n        };\n        resizeStateRef.current = {\n          id,\n          axis,\n          item: { ...item },\n          origin: calcGridItemPosition(pp, item.x, item.y, item.w, item.h),\n          accX: 0,\n          accY: 0,\n        };\n        setPlaceholder({ ...item });\n        return;\n      }\n\n      const rs = resizeStateRef.current;\n      if (!rs) return;\n\n      if (phase === 'end') {\n        applyLayout([...layoutRef.current], true);\n        setPlaceholder(null);\n        resizeStateRef.current = null;\n        return;\n      }\n\n      rs.accX += dx;\n      rs.accY += dy;\n\n      const { origin, item, axis: handle } = rs;\n      let newW = origin.width;\n      let newH = origin.height;\n      if (handle.includes('e')) newW = origin.width + rs.accX;\n      if (handle.includes('w')) newW = origin.width - rs.accX;\n      if (handle.includes('s')) newH = origin.height + rs.accY;\n      if (handle.includes('n')) newH = origin.height - rs.accY;\n      newW = Math.max(newW, 8);\n      newH = Math.max(newH, 8);\n\n      const raw = calcWH(pp, newW, newH, item.x, item.y, handle);\n      const constrained = applySizeConstraints(\n        liveRef.current.constraints,\n        item,\n        raw.w,\n        raw.h,\n        handle,\n        {\n          cols: pp.cols,\n          maxRows: liveRef.current.maxRows,\n          containerWidth: pp.containerWidth,\n          containerHeight: liveRef.current.containerHeight,\n          rowHeight: pp.rowHeight,\n          margin: pp.margin,\n          layout: layoutRef.current,\n        },\n      );\n\n      // An auto-height widget cannot be resized shorter than the content it\n      // hosts (a nested board) currently needs, so pin its height to the floor.\n      const floorRows = autoHeightMinRowsRef.current[id] ?? 0;\n      const finalW = constrained.w;\n      const finalH = Math.max(constrained.h, floorRows);\n\n      let x = item.x;\n      let y = item.y;\n      if (handle.includes('w')) x = item.x + item.w - finalW;\n      if (handle.includes('n')) y = item.y + item.h - finalH;\n      x = Math.max(0, x);\n      y = Math.max(0, y);\n\n      const newItem: LayoutItem = {\n        ...item,\n        x,\n        y,\n        w: finalW,\n        h: finalH,\n      };\n      const working = modifyLayout(layoutRef.current, newItem);\n      const compacted = [\n        ...liveRef.current.compactor.compact(working, pp.cols),\n      ];\n      applyLayout(compacted, false);\n      setPlaceholder(getLayoutItem(compacted, id) ?? newItem);\n    },\n  );\n\n  // Record an auto-height widget's needed rows. Grow the item when its content\n  // needs more height (only ever increases); the stored value is also the\n  // resize floor enforced in `handleResize`.\n  const handleAutoHeight = useEvent((id: string, neededRows: number) => {\n    autoHeightMinRowsRef.current[id] = neededRows;\n    const current = getLayoutItem(layoutRef.current, id);\n    if (!current || neededRows <= current.h) return;\n    const pp = liveRef.current.positionParams;\n    const working = modifyLayout(layoutRef.current, {\n      ...current,\n      h: neededRows,\n    });\n    const compacted = [...liveRef.current.compactor.compact(working, pp.cols)];\n    applyLayout(compacted, true);\n  });\n\n  const styles: Styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const dragState = registry.dragState;\n  const ready = width > 0;\n\n  const placeholderStyle = placeholder\n    ? (() => {\n        const pos = calcGridItemPosition(\n          positionParams,\n          placeholder.x,\n          placeholder.y,\n          placeholder.w,\n          placeholder.h,\n        );\n        return {\n          transform: `translate(${pos.left}px, ${pos.top}px)`,\n          width: `${pos.width}px`,\n          height: `${pos.height}px`,\n        };\n      })()\n    : null;\n\n  const showPlaceholder = placeholder && placeholderStyle;\n\n  // Metrics this board exposes to any aligned boards nested inside its widgets.\n  const boardMetrics = useMemo<BoardMetrics>(\n    () => ({\n      colWidth: calcGridColWidth(positionParams),\n      rowHeight: positionParams.rowHeight,\n      margin: positionParams.margin,\n      containerPadding: positionParams.containerPadding,\n    }),\n    [positionParams],\n  );\n\n  return (\n    <BoardMetricsContext.Provider value={boardMetrics}>\n      <BoardElement\n        {...filterBaseProps(otherProps, { eventProps: true })}\n        ref={containerRef}\n        styles={styles}\n        // Non-aligned: use min-height (not a fixed height) so the board\n        // auto-sizes to its content by default but can still grow to fill a\n        // taller parent. Widgets are absolutely positioned, so growing never\n        // shifts them, and the content layer (inset: 0) always covers the full\n        // board -> the whole board is droppable. Aligned: omit the inline height\n        // so the board fills (and is bounded by) the space the container grants,\n        // which is what drives the reduced row height.\n        style={aligned ? undefined : { minHeight: `${containerHeight}px` }}\n        mods={{\n          dragging: !!dragState,\n          'drop-target': dragState?.currentBoardId === boardId,\n        }}\n      >\n        <ContentLayer ref={contentRef}>\n          {ready\n            ? layout.map((item) => {\n                const registration = registry.store.get(item.i);\n                const widgetDraggable =\n                  isDraggable &&\n                  registration?.isDraggable !== false &&\n                  item.isDraggable !== false &&\n                  !item.static;\n                const widgetResizable =\n                  isResizable &&\n                  registration?.isResizable !== false &&\n                  item.isResizable !== false &&\n                  !item.static;\n                const handles =\n                  item.resizeHandles ??\n                  registration?.resizeHandles ??\n                  resizeHandles;\n\n                return (\n                  <WidgetHost\n                    key={item.i}\n                    boardId={boardId}\n                    item={item}\n                    positionParams={positionParams}\n                    registration={registration}\n                    isDraggable={widgetDraggable}\n                    isResizable={widgetResizable}\n                    resizeHandles={handles}\n                    registry={registry}\n                    dragState={dragState}\n                    onResize={handleResize}\n                    onAutoHeight={handleAutoHeight}\n                  />\n                );\n              })\n            : null}\n          {showPlaceholder ? (\n            <PlaceholderElement aria-hidden=\"true\" style={placeholderStyle!} />\n          ) : null}\n        </ContentLayer>\n        {children}\n      </BoardElement>\n    </BoardMetricsContext.Provider>\n  );\n}\n\nconst BoardInnerForwarded = forwardRef(BoardInner);\n\n/**\n * A draggable and resizable widget grid. Widgets are declared with\n * `Board.Widget` and positioned via a `layout`. Wrap multiple boards in a\n * `BoardProvider` to enable dragging widgets between them.\n */\nexport const Board = forwardRef(function Board(\n  props: CubeBoardProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const existingRegistry = useBoardRegistry();\n\n  if (existingRegistry) {\n    return <BoardInnerForwarded {...props} ref={ref} />;\n  }\n\n  return (\n    <BoardProvider>\n      <BoardInnerForwarded {...props} ref={ref} />\n    </BoardProvider>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyDA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,SAAS;EACT,OAAO;EACP,UAAU;EACV,WAAW;EACX,MAAM;EACN,WAAW;EACZ;CACF,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,UAAU;CACV,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,UAAU;EACV,KAAK;EACL,MAAM;EACN,MAAM;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,eAAe;EACf,YAAY;EACZ,WAAW;EACZ;CACF,CAAC;;;;;AAMF,MAAM,yBAAyB;AAyD/B,SAAS,kBAAkB,SAAwC;AACjE,KAAI,YAAY,OAAQ,QAAO;AAC/B,QAAO;;AAGT,SAAS,WACP,OACA,KACA;CACA,MAAM,EACJ,IAAI,YACJ,QAAQ,kBACR,eACA,gBACA,OAAO,IACP,YAAY,KACZ,SAAS,CAAC,GAAG,EAAE,EACf,kBACA,UAAU,UACV,UAAU,YACV,eAAe,OACf,mBAAmB,OACnB,cAAc,MACd,cAAc,MACd,cAAc,MACd,gBAAgB,CAAC,KAAK,EACtB,YAAY,OACZ,aACA,OAAO,eACP,UACA,GAAG,eACD;CAEJ,MAAM,WAAW,kBAAkB;CACnC,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,OAAO,cAAc;CAC3B,MAAM,UAAU,aAAa,CAAC,CAAC;CAC/B,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,cAAc;CAE9B,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,aAAa,OAA8B,KAAK;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAAiB,EAAE;CAI7D,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB,EAAE;CAC/D,MAAM,QAAQ,iBAAiB;CAE/B,MAAM,oBAAoB,eAAe;EACvC,MAAM,KAAK,aAAa;AACxB,MAAI,IAAI;AACN,oBAAiB,GAAG,YAAY;AAChC,qBAAkB,GAAG,aAAa;;GAEpC;AACF,mBAAkB;EAAE,KAAK;EAAc,UAAU;EAAmB,CAAC;AACrE,iBAAgB;AACd,MAAI,iBAAiB,KACnB,oBAAmB;IAGpB,CAAC,cAAc,CAAC;CAEnB,MAAM,EAAE,QAAQ,WAAW,aAAa,gBAAgB,gBACtD,eAAe;EACb,QAAQ;EACR;EACA;EACD,CAAC;AAGJ,sBAAqB,SAAS,MAAM,WAAW,SAAS,MAAM,WAAW;CAIzE,MAAM,kBAA6C,UAC/C,cAAe,SACf;CAGJ,MAAM,kBACJ,oBAAoB;CAEtB,MAAM,OAAO,KAAK,IAChB,OAAO,OAAO,EACd,cAAc,YAAY,IAAI,YAAY,IAAI,EAC/C;CAMD,MAAM,iBAAiB,UAAU,cAAe,WAAW;CAC3D,MAAM,cACJ,WAAW,QAAQ,IACf,KAAK,IACH,GACA,KAAK,OACF,QAAQ,gBAAgB,KAAK,IAAI,gBAAgB,OAC/C,iBAAiB,gBAAgB,IACrC,CACF,GACD;CACN,MAAM,gBAAgB,UAAU,cAAc;CAC9C,MAAM,0BAA0B,UAC5B,iBAAiB,gBACjB,gBAAgB,KAAK,KAAK,IAAI,GAAG,gBAAgB,EAAE,GACnD,gBAAgB,KAAK,IACrB;CAKJ,MAAM,kBAAkB,UAAU,cAAe,YAAY;CAC7D,MAAM,qBACJ,WAAW,OAAO,KAAK,iBAAiB,IACpC,OACG,iBACC,KAAK,IAAI,GAAG,OAAO,EAAE,GAAG,gBAAgB,KACxC,gBAAgB,KAAK,KACrB,MACF,wBACA,gBACD,GACD;CAEN,MAAM,iBAAiB,eACd;EACL,QAAQ;EACR,kBAAkB;EAClB,gBAAgB;EAChB,MAAM;EACN,WAAW;EACX;EACD,GACD;EACE,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB,gBAAgB;EAChB;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,YAAY,cAAyB;AAIzC,MAAI,YAAY,OACd,QAAO,aAAa,MAAM,MAAM,iBAAiB;AAEnD,SAAO,aACL,kBAAkB,QAAQ,EAC1B,cACA,iBACD;IACA;EAAC;EAAS;EAAc;EAAiB,CAAC;CAE7C,MAAM,sBAAsB,eAAe;CAE3C,MAAM,iBACJ,OAAO,IACH,OAAO,qBACP,KAAK,IAAI,GAAG,OAAO,EAAE,GAAG,gBAAgB,KACxC,gBAAgB,KAAK,IACrB;CAGN,MAAM,kBACJ,WAAW,iBAAiB,IAAI,iBAAiB;CAGnD,MAAM,UAAU,OAAO;EACrB;EACA;EACA,aAAa;EACb;EACA;EACA;EACD,CAAC;AACF,SAAQ,UAAU;EAChB;EACA;EACA,aAAa;EACb;EACA;EACA;EACD;CAED,MAAM,mBAAmB,SAAS,YAAY;CAC9C,MAAM,sBAAsB,SAAS,eAAe;CAEpD,MAAM,WAAW,OAA0B,KAAK;AAChD,KAAI,CAAC,SAAS,QACZ,UAAS,UAAU;EACjB,IAAI;EACJ,sBAAsB,WAAW,SAAS,uBAAuB,IAAI;EACrE,sBAAsB,WAAW;EACjC,yBAAyB,QAAQ,QAAQ;EACzC,sBAAsB,QAAQ,QAAQ;EACtC,oBAAoB,QAAQ,QAAQ;EACpC,kBAAkB,QAAQ,QAAQ;EAClC,0BAA0B,QAAQ,QAAQ;EAC1C,iBAAiB,UAAU;EAC3B,cAAc,MAAM,WAAW,iBAAiB,MAAM,OAAO;EAC7D,iBAAiB,SAAS,oBAAoB,KAAK;EACnD,mBAAmB,QAAQ,QAAQ;EACpC;AAGH,iBAAgB;EACd,MAAM,QAAQ,SAAS;AAIvB,QAAM,KAAK;AACX,SAAO,SAAS,cAAc,MAAM;IAEnC,CAAC,QAAQ,CAAC;CAKb,MAAM,mBAAmB,UAAU,aAAqB;EACtD,MAAM,YAAY,cAAc,YAAY,UAAU,QAAQ,EAAE,EAC9D,MAAM,UACP,CAAC;AAIF,mBAHkB,CAChB,GAAG,QAAQ,QAAQ,UAAU,QAAQ,WAAW,SAAS,CAC1D,EAC2B,KAAK;GACjC;CACF,MAAM,qBAAqB,OAAO,cAAc;AAChD,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,sBAAmB,UAAU;AAC7B;;AAEF,MAAI,mBAAmB,YAAY,cAAe;AAClD,qBAAmB,UAAU;AAC7B,mBAAiB,cAAc;IAC9B;EAAC;EAAS;EAAe;EAAiB,CAAC;CAK9C,MAAM,gBACJ,OAAO,IACH,OAAO,kBACP,KAAK,IAAI,GAAG,OAAO,EAAE,GAAG,gBAAgB,KACxC,gBAAgB,KAAK,IACrB;CAON,MAAM,uBAAuB,MAAM;AACnC,iBAAgB;AACd,MAAI,CAAC,WAAW,CAAC,MAAM,gBAAgB,CAAC,qBAAsB;AAC9D,MAAI,kBAAkB,EAAG;AACzB,uBAAqB,gBAAgB,eAAe;IACnD;EACD;EACA,MAAM;EACN;EACA;EACA;EACD,CAAC;CAGF,MAAM,iBAAiB,OAOb,KAAK;CAKf,MAAM,uBAAuB,OAA+B,EAAE,CAAC;CAE/D,MAAM,eAAe,UAEjB,IACA,MACA,OACA,IACA,OACG;EACH,MAAM,KAAK,QAAQ,QAAQ;AAE3B,MAAI,UAAU,SAAS;GACrB,MAAM,UAAU,cAAc,UAAU,SAAS,GAAG;AACpD,OAAI,CAAC,QAAS;GAGd,MAAM,OAAmB;IACvB,GAAG;IACH,aACE,QAAQ,eAAe,SAAS,MAAM,IAAI,GAAG,EAAE;IAClD;AACD,kBAAe,UAAU;IACvB;IACA;IACA,MAAM,EAAE,GAAG,MAAM;IACjB,QAAQ,qBAAqB,IAAI,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE;IAChE,MAAM;IACN,MAAM;IACP;AACD,kBAAe,EAAE,GAAG,MAAM,CAAC;AAC3B;;EAGF,MAAM,KAAK,eAAe;AAC1B,MAAI,CAAC,GAAI;AAET,MAAI,UAAU,OAAO;AACnB,eAAY,CAAC,GAAG,UAAU,QAAQ,EAAE,KAAK;AACzC,kBAAe,KAAK;AACpB,kBAAe,UAAU;AACzB;;AAGF,KAAG,QAAQ;AACX,KAAG,QAAQ;EAEX,MAAM,EAAE,QAAQ,MAAM,MAAM,WAAW;EACvC,IAAI,OAAO,OAAO;EAClB,IAAI,OAAO,OAAO;AAClB,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,QAAQ,GAAG;AACnD,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,QAAQ,GAAG;AACnD,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,SAAS,GAAG;AACpD,MAAI,OAAO,SAAS,IAAI,CAAE,QAAO,OAAO,SAAS,GAAG;AACpD,SAAO,KAAK,IAAI,MAAM,EAAE;AACxB,SAAO,KAAK,IAAI,MAAM,EAAE;EAExB,MAAM,MAAM,OAAO,IAAI,MAAM,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO;EAC1D,MAAM,cAAc,qBAClB,QAAQ,QAAQ,aAChB,MACA,IAAI,GACJ,IAAI,GACJ,QACA;GACE,MAAM,GAAG;GACT,SAAS,QAAQ,QAAQ;GACzB,gBAAgB,GAAG;GACnB,iBAAiB,QAAQ,QAAQ;GACjC,WAAW,GAAG;GACd,QAAQ,GAAG;GACX,QAAQ,UAAU;GACnB,CACF;EAID,MAAM,YAAY,qBAAqB,QAAQ,OAAO;EACtD,MAAM,SAAS,YAAY;EAC3B,MAAM,SAAS,KAAK,IAAI,YAAY,GAAG,UAAU;EAEjD,IAAI,IAAI,KAAK;EACb,IAAI,IAAI,KAAK;AACb,MAAI,OAAO,SAAS,IAAI,CAAE,KAAI,KAAK,IAAI,KAAK,IAAI;AAChD,MAAI,OAAO,SAAS,IAAI,CAAE,KAAI,KAAK,IAAI,KAAK,IAAI;AAChD,MAAI,KAAK,IAAI,GAAG,EAAE;AAClB,MAAI,KAAK,IAAI,GAAG,EAAE;EAElB,MAAM,UAAsB;GAC1B,GAAG;GACH;GACA;GACA,GAAG;GACH,GAAG;GACJ;EACD,MAAM,UAAU,aAAa,UAAU,SAAS,QAAQ;EACxD,MAAM,YAAY,CAChB,GAAG,QAAQ,QAAQ,UAAU,QAAQ,SAAS,GAAG,KAAK,CACvD;AACD,cAAY,WAAW,MAAM;AAC7B,iBAAe,cAAc,WAAW,GAAG,IAAI,QAAQ;GAE1D;CAKD,MAAM,mBAAmB,UAAU,IAAY,eAAuB;AACpE,uBAAqB,QAAQ,MAAM;EACnC,MAAM,UAAU,cAAc,UAAU,SAAS,GAAG;AACpD,MAAI,CAAC,WAAW,cAAc,QAAQ,EAAG;EACzC,MAAM,KAAK,QAAQ,QAAQ;EAC3B,MAAM,UAAU,aAAa,UAAU,SAAS;GAC9C,GAAG;GACH,GAAG;GACJ,CAAC;AAEF,cADkB,CAAC,GAAG,QAAQ,QAAQ,UAAU,QAAQ,SAAS,GAAG,KAAK,CAAC,EACnD,KAAK;GAC5B;CAEF,MAAM,SAAiB,cAAc,YAAY,iBAAiB;CAElE,MAAM,YAAY,SAAS;CAC3B,MAAM,QAAQ,QAAQ;CAEtB,MAAM,mBAAmB,qBACd;EACL,MAAM,MAAM,qBACV,gBACA,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,EACb;AACD,SAAO;GACL,WAAW,aAAa,IAAI,KAAK,MAAM,IAAI,IAAI;GAC/C,OAAO,GAAG,IAAI,MAAM;GACpB,QAAQ,GAAG,IAAI,OAAO;GACvB;KACC,GACJ;CAEJ,MAAM,kBAAkB,eAAe;CAGvC,MAAM,eAAe,eACZ;EACL,UAAU,iBAAiB,eAAe;EAC1C,WAAW,eAAe;EAC1B,QAAQ,eAAe;EACvB,kBAAkB,eAAe;EAClC,GACD,CAAC,eAAe,CACjB;AAED,QACE,oBAAC,oBAAoB;EAAS,OAAO;YACnC,qBAAC;GACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;GACrD,KAAK;GACG;GAQR,OAAO,UAAU,SAAY,EAAE,WAAW,GAAG,gBAAgB,KAAK;GAClE,MAAM;IACJ,UAAU,CAAC,CAAC;IACZ,eAAe,WAAW,mBAAmB;IAC9C;cAED,qBAAC;IAAa,KAAK;eAChB,QACG,OAAO,KAAK,SAAS;KACnB,MAAM,eAAe,SAAS,MAAM,IAAI,KAAK,EAAE;AAgB/C,YACE,oBAAC;MAEU;MACH;MACU;MACF;MACd,aArBF,eACA,cAAc,gBAAgB,SAC9B,KAAK,gBAAgB,SACrB,CAAC,KAAK;MAmBJ,aAjBF,eACA,cAAc,gBAAgB,SAC9B,KAAK,gBAAgB,SACrB,CAAC,KAAK;MAeJ,eAbF,KAAK,iBACL,cAAc,iBACd;MAYY;MACC;MACX,UAAU;MACV,cAAc;QAXT,KAAK,EAYV;MAEJ,GACF,MACH,kBACC,oBAAC;KAAmB,eAAY;KAAO,OAAO;MAAqB,GACjE;KACS,EACd;IACY;GACc;;AAInC,MAAM,sBAAsB,WAAW,WAAW;;;;;;AAOlD,MAAa,QAAQ,WAAW,SAAS,MACvC,OACA,KACA;AAGA,KAFyB,kBAAkB,CAGzC,QAAO,oBAAC;EAAoB,GAAI;EAAY;GAAO;AAGrD,QACE,oBAAC,2BACC,oBAAC;EAAoB,GAAI;EAAY;GAAO,GAC9B;EAElB"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { BoardRegistryContext } from "./board-context.js";
 import { useBoardRegistry } from "./use-board-registry.js";
 import { tasty } from "@tenphi/tasty";

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

@@ -21,6 +21,12 @@ interface CubeBoardWidgetProps {
   qa?: string;
   /** Style overrides applied to the rendered widget element. */
   styles?: Styles;
+  /**
+   * Grow this widget's height in its board to fit its content (only ever
+   * increases). Pair with a nested `Board isAligned` to make the container
+   * expand until the inner board's rows fit at the parent's row height.
+   */
+  isAutoHeight?: boolean;
 }
 /**
  * Declares a widget's content and per-widget options. Rendering and positioning

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useBoardRegistry } from "./board-context.js";
 import { useEffect, useRef } from "react";
@@ -10,7 +10,7 @@ import { useEffect, useRef } from "react";
 * which is what allows a widget to be transferred between boards.
 */
 function Widget(props) {
-	const { id, children, isDraggable, isResizable, resizeHandles, constraints, qa, styles } = props;
+	const { id, children, isDraggable, isResizable, resizeHandles, constraints, qa, styles, isAutoHeight } = props;
 	const registry = useBoardRegistry();
 	const ownerRef = useRef({});
 	useLayoutEffect$1(() => {
@@ -22,7 +22,8 @@ function Widget(props) {
 			resizeHandles,
 			constraints,
 			qa,
-			styles
+			styles,
+			isAutoHeight
 		}, ownerRef.current);
 	});
 	useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":[],"sources":["../../../../src/components/layout/Board/Widget.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\nexport interface CubeBoardWidgetProps {\n  /** Unique id, must match the `i` of a layout item in a `Board`. */\n  id: string;\n  /** Widget content. */\n  children?: ReactNode;\n  /** Disable dragging for this widget. */\n  isDraggable?: boolean;\n  /** Disable resizing for this widget. */\n  isResizable?: boolean;\n  /** Which resize handles to show (overrides the board default). */\n  resizeHandles?: ResizeHandleAxis[];\n  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /** Style overrides applied to the rendered widget element. */\n  styles?: Styles;\n}\n\n/**\n * Declares a widget's content and per-widget options. Rendering and positioning\n * are performed by the owning `Board` (the component itself renders nothing),\n * which is what allows a widget to be transferred between boards.\n */\nexport function Widget(props: CubeBoardWidgetProps) {\n  const {\n    id,\n    children,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    constraints,\n    qa,\n    styles,\n  } = props;\n  const registry = useBoardRegistry();\n\n  // Stable per-instance token so a stale unregister (from an unmounting copy of\n  // this widget) can't wipe out a newer instance's registration.\n  const ownerRef = useRef({});\n\n  // Register/update content on every render so content stays fresh in the store.\n  useLayoutEffect(() => {\n    registry?.store.register(\n      {\n        id,\n        content: children,\n        isDraggable,\n        isResizable,\n        resizeHandles,\n        constraints,\n        qa,\n        styles,\n      },\n      ownerRef.current,\n    );\n  });\n\n  // Remove from the store on unmount.\n  useEffect(() => {\n    const owner = ownerRef.current;\n    return () => {\n      registry?.store.unregister(id, owner);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;AAgCA,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,aACA,IACA,WACE;CACJ,MAAM,WAAW,kBAAkB;CAInC,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACD,EACD,SAAS,QACV;GACD;AAGF,iBAAgB;EACd,MAAM,QAAQ,SAAS;AACvB,eAAa;AACX,aAAU,MAAM,WAAW,IAAI,MAAM;;IAGtC,CAAC,GAAG,CAAC;AAER,QAAO"}
+{"version":3,"file":"Widget.js","names":[],"sources":["../../../../src/components/layout/Board/Widget.tsx"],"sourcesContent":["import { Styles } from '@tenphi/tasty';\nimport { ReactNode, useEffect, useRef } from 'react';\n\nimport { useLayoutEffect } from '../../../utils/react';\n\nimport { useBoardRegistry } from './board-context';\nimport { LayoutConstraint, ResizeHandleAxis } from './grid-core';\n\nexport interface CubeBoardWidgetProps {\n  /** Unique id, must match the `i` of a layout item in a `Board`. */\n  id: string;\n  /** Widget content. */\n  children?: ReactNode;\n  /** Disable dragging for this widget. */\n  isDraggable?: boolean;\n  /** Disable resizing for this widget. */\n  isResizable?: boolean;\n  /** Which resize handles to show (overrides the board default). */\n  resizeHandles?: ResizeHandleAxis[];\n  /** Per-widget layout constraints. */\n  constraints?: LayoutConstraint[];\n  /** Test id applied to the rendered widget element. */\n  qa?: string;\n  /** Style overrides applied to the rendered widget element. */\n  styles?: Styles;\n  /**\n   * Grow this widget's height in its board to fit its content (only ever\n   * increases). Pair with a nested `Board isAligned` to make the container\n   * expand until the inner board's rows fit at the parent's row height.\n   */\n  isAutoHeight?: boolean;\n}\n\n/**\n * Declares a widget's content and per-widget options. Rendering and positioning\n * are performed by the owning `Board` (the component itself renders nothing),\n * which is what allows a widget to be transferred between boards.\n */\nexport function Widget(props: CubeBoardWidgetProps) {\n  const {\n    id,\n    children,\n    isDraggable,\n    isResizable,\n    resizeHandles,\n    constraints,\n    qa,\n    styles,\n    isAutoHeight,\n  } = props;\n  const registry = useBoardRegistry();\n\n  // Stable per-instance token so a stale unregister (from an unmounting copy of\n  // this widget) can't wipe out a newer instance's registration.\n  const ownerRef = useRef({});\n\n  // Register/update content on every render so content stays fresh in the store.\n  useLayoutEffect(() => {\n    registry?.store.register(\n      {\n        id,\n        content: children,\n        isDraggable,\n        isResizable,\n        resizeHandles,\n        constraints,\n        qa,\n        styles,\n        isAutoHeight,\n      },\n      ownerRef.current,\n    );\n  });\n\n  // Remove from the store on unmount.\n  useEffect(() => {\n    const owner = ownerRef.current;\n    return () => {\n      registry?.store.unregister(id, owner);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;AAsCA,SAAgB,OAAO,OAA6B;CAClD,MAAM,EACJ,IACA,UACA,aACA,aACA,eACA,aACA,IACA,QACA,iBACE;CACJ,MAAM,WAAW,kBAAkB;CAInC,MAAM,WAAW,OAAO,EAAE,CAAC;AAG3B,yBAAsB;AACpB,YAAU,MAAM,SACd;GACE;GACA,SAAS;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACD,SAAS,QACV;GACD;AAGF,iBAAgB;EACd,MAAM,QAAQ,SAAS;AACvB,eAAa;AACX,aAAU,MAAM,WAAW,IAAI,MAAM;;IAGtC,CAAC,GAAG,CAAC;AAER,QAAO"}

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

@@ -1,13 +1,20 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-3cf647a | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ea72271 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { BoardHostContext } from "./board-context.js";
 import { calcGridColWidth, calcGridItemPosition } from "./grid-core/calculate.js";
 import { tasty } from "@tenphi/tasty";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFocusWithin, useHover, useMove } from "react-aria";
 import { createPortal } from "react-dom";
 
 //#region src/components/layout/Board/WidgetHost.tsx
+/**
+* Slack (px) absorbed when converting an auto-height widget's content height to
+* whole rows, so sub-pixel measurement/rounding noise never bumps an extra row.
+*/
+const AUTO_HEIGHT_TOLERANCE = 4;
 const WidgetElement = tasty({
 	qa: "BoardWidget",
 	styles: {
@@ -19,7 +26,7 @@ const WidgetElement = tasty({
 		border: true,
 		shadow: {
 			"": false,
-			"drag | resizing": "0 2x 4x #dark.20"
+			"drag | resizing": "$dialog-shadow"
 		},
 		zIndex: {
 			"": 1,
@@ -175,9 +182,22 @@ function ResizeHandle({ axis, onResize }) {
 * renders into the shared overlay portal so it can float outside its board.
 */
 function WidgetHost(props) {
-	const { boardId, item, positionParams, registration, isDraggable, isResizable, resizeHandles, registry, dragState, onResize } = props;
+	const { boardId, item, positionParams, registration, isDraggable, isResizable, resizeHandles, registry, dragState, onResize, onAutoHeight } = props;
 	const hostRef = useRef(null);
 	const isActiveDrag = dragState?.itemId === item.i;
+	const isAutoHeight = registration?.isAutoHeight === true;
+	const requestHeightDeficit = useEvent((deficitPx) => {
+		if (!isAutoHeight || isActiveDrag) return;
+		const step = positionParams.rowHeight + positionParams.margin[1];
+		if (step <= 0) return;
+		const neededPx = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h).height + deficitPx;
+		const neededRows = Math.max(1, Math.ceil((neededPx + positionParams.margin[1] - AUTO_HEIGHT_TOLERANCE) / step));
+		onAutoHeight(item.i, neededRows);
+	});
+	const hostValue = useMemo(() => ({
+		isAutoHeight,
+		requestHeightDeficit
+	}), [isAutoHeight, requestHeightDeficit]);
 	const useOverlay = isActiveDrag && dragState?.pointerType !== "keyboard";
 	const [isResizing, setIsResizing] = useState(false);
 	const [isFocusWithin, setIsFocusWithin] = useState(false);
@@ -200,7 +220,7 @@ function WidgetHost(props) {
 				width: pos.width,
 				height: pos.height
 			};
-			registry.onDragStart(boardId, item.i, vr, e.pointerType);
+			registry.onDragStart(boardId, item.i, vr, e.pointerType, hostRef.current);
 		},
 		onMove(e) {
 			if (!isDraggable) return;
@@ -233,14 +253,17 @@ function WidgetHost(props) {
 		static: !!item.static,
 		resizing: isResizing
 	};
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [registration?.content, isResizable && !item.static ? /* @__PURE__ */ jsxs(Fragment$1, { children: [resizeHandles.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
-		axis,
-		onResize: handleResize
-	}, axis)), resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
-		"data-axis": axis,
-		mods: { revealed: gripsRevealed },
-		"aria-hidden": "true"
-	}, `grip-${axis}`))] }) : null] });
+	const content = /* @__PURE__ */ jsxs(BoardHostContext.Provider, {
+		value: hostValue,
+		children: [registration?.content, isResizable && !item.static ? /* @__PURE__ */ jsxs(Fragment$1, { children: [resizeHandles.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
+			axis,
+			onResize: handleResize
+		}, axis)), resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
+			"data-axis": axis,
+			mods: { revealed: gripsRevealed },
+			"aria-hidden": "true"
+		}, `grip-${axis}`))] }) : null]
+	});
 	const pos = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h);
 	const overlayNode = registry.overlayRef.current;
 	const floatInOverlay = useOverlay && !!overlayNode && !!dragState;