@cube-dev/ui-kit 0.0.0-canary-d326767 → 0.0.0-canary-2cd855f

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

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-d326767 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-2cd855f | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { BoardHostContext, useBoardHost } from "./board-context.js";
+import { BoardHostContext } from "./board-context.js";
 import { calcGridColWidth, calcGridItemPosition } from "./grid-core/calculate.js";
-import { isDevEnv } from "../../../utils/is-dev-env.js";
 import { tasty } from "@tenphi/tasty";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -23,60 +22,6 @@ const AUTO_HEIGHT_TOLERANCE = 4;
 * hit-zone reads the same number so what you see is what you can grab.
 */
 const GRIP_SIZE = 10;
-/**
-* How far a `corner`-placed hit-zone may reach *inward*: exactly the half of the
-* dot that is painted inside the widget, and no further. Reaching deeper would
-* park an invisible resize target over the widget's own content — and when that
-* content is a nested `Board`, the child in the bottom-right cell loses its own
-* corner handle to it and cannot be resized at all (CUB-4166).
-*/
-const CORNER_HIT_INWARD = GRIP_SIZE / 2;
-/**
-* Ceiling on how far the same hit-zone reaches *outward*, where there is only
-* grid gutter to cover. Past a whole grip size the target stops reading as "that
-* dot" and starts reading as "somewhere near the corner".
-*/
-const CORNER_HIT_OUTWARD_MAX = GRIP_SIZE;
-/**
-* Thickness of an `outside` grip: the band, measured out from the widget's edge,
-* that the affordance owns. It is the grid gutter where the gutter is big enough
-* to hold it, and this floor where it is not — an affordance thinner than this
-* stops being reliably clickable, so it overhangs the neighbour instead and the
-* board says so in development.
-*/
-const OUTSIDE_GRIP_MIN_BAND = 8;
-/** Length of an `outside` edge grip along the edge it belongs to. */
-const OUTSIDE_GRIP_LENGTH = 24;
-/**
-* Painted thickness of an `outside` edge grip, which is deliberately less than
-* the band it sits in: the rest becomes a gap, so the control reads as a thing
-* lying in the gutter rather than as an extension of the widget's own edge.
-*
-* Only the PAINT is inset. The element keeps the whole band, so the target does
-* not shrink with the visual and the two still cannot drift apart.
-*/
-const OUTSIDE_GRIP_THICKNESS = 4;
-/** Gap between a widget's corner and its `outside` corner grip. */
-const OUTSIDE_CORNER_GAP = 2;
-/**
-* How far an `outside` corner angle reaches out from the widget, given the gutter
-* it has to reach into: the full `GRIP_SIZE` where the gutter can take it, and
-* whatever is left over where it cannot.
-*
-* A corner grip sits in the square where the two gutters cross, which is empty —
-* but only as far as the gutters go. At `GRIP_SIZE` stepped `OUTSIDE_CORNER_GAP`
-* off the corner it reached 12px out, past the 8px gutter the defaults give it
-* and onto the diagonal neighbour, swallowing that widget's own corner. Shrinking
-* rather than warning because the angle still reads at 6px, and a grip that is a
-* little small is not the same order of problem as one covering someone else's
-* widget.
-*
-* `band` arrives floored at `OUTSIDE_GRIP_MIN_BAND`, so the result is never below
-* `OUTSIDE_GRIP_MIN_BAND - OUTSIDE_CORNER_GAP`.
-*/
-function cornerGripExtent(band) {
-	return Math.min(GRIP_SIZE, band - OUTSIDE_CORNER_GAP);
-}
 const WidgetElement = tasty({
 	qa: "BoardWidget",
 	styles: {
@@ -138,48 +83,37 @@ const HandleElement = tasty({
 		fill: "#clear",
 		pointerEvents: "auto",
 		"--handle-size": "3x",
-		"--handle-inset": "1x",
-		"--edge-overhang": "-8px",
-		"--corner-overhang": {
+		"--handle-overhang": {
 			"": "-8px",
-			"placement=corner": "$corner-hit-overhang"
-		},
-		"--corner-size": {
-			"": "$handle-size",
-			"placement=corner": "$corner-hit-size"
+			"placement=corner": `${-GRIP_SIZE / 2}px`
 		},
+		"--handle-inset": "1x",
 		width: {
-			"": "$corner-size",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$handle-size",
+			"": "$handle-size",
 			"[data-axis=\"n\"] | [data-axis=\"s\"]": "auto"
 		},
 		height: {
-			"": "$corner-size",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$handle-size",
+			"": "$handle-size",
 			"[data-axis=\"e\"] | [data-axis=\"w\"]": "auto"
 		},
 		top: {
 			"": "auto",
-			"[data-axis=\"ne\"] | [data-axis=\"nw\"]": "$corner-overhang",
-			"[data-axis=\"n\"]": "$edge-overhang",
+			"[data-axis=\"n\"] | [data-axis=\"ne\"] | [data-axis=\"nw\"]": "$handle-overhang",
 			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$handle-inset"
 		},
 		bottom: {
 			"": "auto",
-			"[data-axis=\"se\"] | [data-axis=\"sw\"]": "$corner-overhang",
-			"[data-axis=\"s\"]": "$edge-overhang",
+			"[data-axis=\"s\"] | [data-axis=\"se\"] | [data-axis=\"sw\"]": "$handle-overhang",
 			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$handle-inset"
 		},
 		left: {
 			"": "auto",
-			"[data-axis=\"nw\"] | [data-axis=\"sw\"]": "$corner-overhang",
-			"[data-axis=\"w\"]": "$edge-overhang",
+			"[data-axis=\"w\"] | [data-axis=\"nw\"] | [data-axis=\"sw\"]": "$handle-overhang",
 			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$handle-inset"
 		},
 		right: {
 			"": "auto",
-			"[data-axis=\"ne\"] | [data-axis=\"se\"]": "$corner-overhang",
-			"[data-axis=\"e\"]": "$edge-overhang",
+			"[data-axis=\"e\"] | [data-axis=\"ne\"] | [data-axis=\"se\"]": "$handle-overhang",
 			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$handle-inset"
 		},
 		cursor: {
@@ -253,115 +187,6 @@ const GripElement = tasty({
 	}
 });
 /**
-* An `outside` grip: the visible control and the hit-zone in one element.
-*
-* The two used to be separate boxes of different sizes, aligned by hand, which is
-* how a 10px dot came to stand for a 24px target reaching back over the widget's
-* own content (CUB-4166). Here they cannot drift apart, because there is only one
-* box: what is painted is exactly what is grabbed.
-*
-* It lives in the grid gutter, beyond the widget's edge — never over the widget's
-* content, so a nested board's children keep every pixel of their own. The band
-* it occupies (`--grip-band-x` / `--grip-band-y`) is the gutter, floored at
-* `OUTSIDE_GRIP_MIN_BAND`. Rendered in `GripLayerElement`, which nothing clips.
-*
-* Always hit-testable, painted only once revealed: you have to be able to hover
-* it to reveal it, and `opacity` leaves hit-testing alone.
-*/
-const OutsideGripElement = tasty({
-	qa: "BoardResizeHandle",
-	styles: {
-		position: "absolute",
-		boxSizing: "border-box",
-		pointerEvents: "auto",
-		touchAction: "none",
-		zIndex: 20,
-		opacity: {
-			"": 0,
-			revealed: 1
-		},
-		transition: "opacity 120ms ease-in-out, theme",
-		left: {
-			"": "auto",
-			"[data-axis=\"e\"] | [data-axis=\"ne\"] | [data-axis=\"se\"]": "100%",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "50%"
-		},
-		right: {
-			"": "auto",
-			"[data-axis=\"w\"] | [data-axis=\"nw\"] | [data-axis=\"sw\"]": "100%"
-		},
-		top: {
-			"": "auto",
-			"[data-axis=\"s\"] | [data-axis=\"se\"] | [data-axis=\"sw\"]": "100%",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "50%"
-		},
-		bottom: {
-			"": "auto",
-			"[data-axis=\"n\"] | [data-axis=\"ne\"] | [data-axis=\"nw\"]": "100%"
-		},
-		transform: {
-			"": "translate(0, 0)",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "translate(0, -50%)",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "translate(-50%, 0)",
-			"[data-axis=\"se\"]": `translate(${OUTSIDE_CORNER_GAP}px, ${OUTSIDE_CORNER_GAP}px)`,
-			"[data-axis=\"sw\"]": `translate(${-OUTSIDE_CORNER_GAP}px, ${OUTSIDE_CORNER_GAP}px)`,
-			"[data-axis=\"ne\"]": `translate(${OUTSIDE_CORNER_GAP}px, ${-OUTSIDE_CORNER_GAP}px)`,
-			"[data-axis=\"nw\"]": `translate(${-OUTSIDE_CORNER_GAP}px, ${-OUTSIDE_CORNER_GAP}px)`
-		},
-		width: {
-			"": "$outside-corner-w",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$grip-band-x",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": `${OUTSIDE_GRIP_LENGTH}px`
-		},
-		height: {
-			"": "$outside-corner-h",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$grip-band-y",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": `${OUTSIDE_GRIP_LENGTH}px`
-		},
-		padding: {
-			"": 0,
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "0 $grip-pad-x",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$grip-pad-y 0"
-		},
-		backgroundClip: "content-box",
-		fill: {
-			"": "#clear",
-			"[data-axis=\"n\"] | [data-axis=\"s\"] | [data-axis=\"e\"] | [data-axis=\"w\"]": "#dark.30",
-			"([data-axis=\"n\"] | [data-axis=\"s\"] | [data-axis=\"e\"] | [data-axis=\"w\"]) & resizing": "#dark.50"
-		},
-		borderTop: {
-			"": "0",
-			"[data-axis=\"ne\"] | [data-axis=\"nw\"]": "2px solid #dark.40"
-		},
-		borderBottom: {
-			"": "0",
-			"[data-axis=\"se\"] | [data-axis=\"sw\"]": "2px solid #dark.40"
-		},
-		borderLeft: {
-			"": "0",
-			"[data-axis=\"nw\"] | [data-axis=\"sw\"]": "2px solid #dark.40"
-		},
-		borderRight: {
-			"": "0",
-			"[data-axis=\"ne\"] | [data-axis=\"se\"]": "2px solid #dark.40"
-		},
-		radius: {
-			"": "round",
-			"[data-axis=\"se\"]": "4px bottom-right",
-			"[data-axis=\"sw\"]": "4px bottom-left",
-			"[data-axis=\"ne\"]": "4px top-right",
-			"[data-axis=\"nw\"]": "4px top-left"
-		},
-		cursor: {
-			"": "default",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "ns-resize",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "ew-resize",
-			"[data-axis=\"ne\"] | [data-axis=\"sw\"]": "nesw-resize",
-			"[data-axis=\"nw\"] | [data-axis=\"se\"]": "nwse-resize"
-		}
-	}
-});
-/**
 * Where the corner grips are drawn when `resizeGripPlacement` is `'corner'`.
 *
 * `WidgetElement` clips its children (`overflow: hidden`, and that clipping is
@@ -373,17 +198,9 @@ const OutsideGripElement = tasty({
 *
 * It sits above a resting widget (`zIndex: 1`) so a grip is never hidden by the
 * neighbour it overhangs, and below a dragged or resized one (`zIndex: 10`) so a
-* lifted widget still paints over its neighbours' grips.
-*
-* Nothing clips this layer — `BoardElement` sets no `overflow` — so a grip on a
-* widget flush against its board's edge (`containerPadding: [0, 0]`, which
-* `isAligned` sets) is painted *outside* the board's content box rather than
-* cropped to fit inside it. Inside a nested board that puts it exactly on the
-* host widget's own corner: the two corners are the same point, so the two hit
-* zones cannot be separated by geometry, and `z-index` cannot arbitrate either
-* (this layer is a sibling of the host, so it outranks the whole nested subtree
-* whatever the inner handle asks for). `ResizeHandle` settles it by depth
-* instead.
+* lifted widget still paints over its neighbours' grips. The board's own content
+* box still clips it, so a grip on a widget flush against the board edge needs
+* `containerPadding` >= half the grip size to show in full.
 */
 const GripLayerElement = tasty({
 	qa: "BoardResizeGripLayer",
@@ -499,89 +316,7 @@ function isCornerAxis(axis) {
 function isEdgeAxis(axis) {
 	return axis.length === 1;
 }
-/** `data-qa` of a resize hit-zone, as published by `HandleElement`. */
-const HANDLE_QA = "BoardResizeHandle";
-/**
-* The deepest resize hit-zone under `point` belonging to a board nested deeper
-* than `depth`, or `null` when the caller is already the innermost one there.
-*
-* Asked of the document rather than of a registry, deliberately: the two handles
-* belong to different boards, which share no owner below the app root, and "what
-* is under this pixel" is the browser's own question to answer.
-* `elementsFromPoint` skips `pointer-events: none` nodes, so everything it hands
-* back is something the pointer could genuinely have landed on.
-*/
-function findDeeperHandle(point, depth) {
-	let stack;
-	try {
-		if (typeof document.elementsFromPoint !== "function") return null;
-		stack = document.elementsFromPoint(point.x, point.y);
-	} catch {
-		return null;
-	}
-	let deepest = null;
-	let deepestDepth = depth;
-	for (const node of stack) {
-		if (!(node instanceof HTMLElement)) continue;
-		if (node.dataset.qa !== HANDLE_QA) continue;
-		const nodeDepth = Number(node.dataset.boardDepth);
-		if (!Number.isFinite(nodeDepth) || nodeDepth <= deepestDepth) continue;
-		deepest = node;
-		deepestDepth = nodeDepth;
-	}
-	return deepest;
-}
-/**
-* Hand a press to `target` unchanged.
-*
-* Safe because of how `useMove` (which owns the resize gesture) tracks a
-* pointer: through `window` listeners matched on `pointerId`, never through
-* `setPointerCapture`. So only the opening `pointerdown` is re-dispatched — every
-* real `pointermove`/`pointerup` that follows drives the forwarded gesture just
-* as it would drive a direct one.
-*/
-function forwardPointerDown(e, target) {
-	const forwarded = new PointerEvent("pointerdown", {
-		bubbles: true,
-		cancelable: true,
-		composed: true,
-		pointerId: e.pointerId,
-		pointerType: e.pointerType,
-		isPrimary: e.isPrimary,
-		button: e.button,
-		buttons: e.buttons,
-		clientX: e.clientX,
-		clientY: e.clientY,
-		screenX: e.screenX,
-		screenY: e.screenY,
-		shiftKey: e.shiftKey,
-		ctrlKey: e.ctrlKey,
-		altKey: e.altKey,
-		metaKey: e.metaKey
-	});
-	Object.defineProperty(forwarded, "pageX", {
-		value: e.pageX,
-		configurable: true
-	});
-	Object.defineProperty(forwarded, "pageY", {
-		value: e.pageY,
-		configurable: true
-	});
-	target.dispatchEvent(forwarded);
-}
-/**
-* Warnings already emitted, keyed by their own text. A widget that yields its
-* only resize affordance is a layout mistake, not an event: it is the same
-* mistake every single time the user reaches for that corner, so it is worth
-* saying exactly once.
-*/
-const yieldWarnings = /* @__PURE__ */ new Set();
-function warnOnce(message) {
-	if (!message || yieldWarnings.has(message)) return;
-	yieldWarnings.add(message);
-	console.warn(message);
-}
-function ResizeHandle({ axis, placement, boardDepth, yieldWarning, isRevealed, isResizing, onResize }) {
+function ResizeHandle({ axis, placement, onResize }) {
 	const { moveProps } = useMove({
 		onMoveStart() {
 			onResize(axis, "start", 0, 0);
@@ -593,50 +328,15 @@ function ResizeHandle({ axis, placement, boardDepth, yieldWarning, isRevealed, i
 			onResize(axis, "end", 0, 0);
 		}
 	});
-	const handleProps = mergeProps$1({
+	const stopProps = {
 		onPointerDown: (e) => e.stopPropagation(),
 		onMouseDown: (e) => e.stopPropagation(),
 		onTouchStart: (e) => e.stopPropagation()
-	}, moveProps);
-	/**
-	* Two resize hit-zones can want the same pixel. A `corner`-placed zone
-	* straddles its widget's corner, and in a nested board that sits flush — which
-	* `isAligned` guarantees, since it pins `containerPadding` to `[0, 0]` — the
-	* host widget's corner and its bottom-right child's corner ARE one point.
-	* Geometry has nothing left to separate them with, and `z-index` cannot
-	* arbitrate either (see `GripLayerElement`), so the tie is broken here: the
-	* innermost handle takes the press. It is the more specific target, and the
-	* outer widget can still be resized from its edges — where it has any, which is
-	* what `yieldWarning` is about.
-	*
-	* Decided on the press rather than on hover so that touch, which has no hover
-	* to decide on, is covered by the same code. Nothing is lost by deciding this
-	* late: both handles ask for the same resize cursor anyway.
-	*/
-	const onPointerDown = (e) => {
-		const deeper = findDeeperHandle({
-			x: e.clientX,
-			y: e.clientY
-		}, boardDepth);
-		if (deeper) {
-			e.stopPropagation();
-			e.preventDefault();
-			warnOnce(yieldWarning);
-			forwardPointerDown(e, deeper);
-			return;
-		}
-		handleProps.onPointerDown?.(e);
 	};
-	return /* @__PURE__ */ jsx(placement === "outside" ? OutsideGripElement : HandleElement, {
+	return /* @__PURE__ */ jsx(HandleElement, {
 		"data-axis": axis,
-		"data-board-depth": boardDepth,
-		mods: {
-			placement,
-			revealed: isRevealed,
-			resizing: isResizing
-		},
-		...handleProps,
-		onPointerDown,
+		mods: { placement },
+		...mergeProps$1(stopProps, moveProps),
 		"aria-hidden": "true"
 	});
 }
@@ -647,7 +347,7 @@ function ResizeHandle({ axis, placement, boardDepth, yieldWarning, isRevealed, i
 * renders into the shared overlay portal so it can float outside its board.
 */
 function WidgetHost(props) {
-	const { boardId, item, positionParams, registration, isCard, hoverRing, cornerChrome, cornerChromePlacement = "ne", mods: customMods, styles: widgetStyles, isDraggable, isResizable, resizeHandles, resizeGripPlacement, boardDepth, isAutoHeight, qa, dragCancel, dragHandle, registry, dragState, settled, onResize, onAutoHeight, onDragLifecycle, isSelectable = false, isSelected = false, isPreSelected = false, selectionCancel, selectedHintId, onSelect, onSelectionReset, selectModifierKey = "metaKey" } = props;
+	const { boardId, item, positionParams, registration, isCard, hoverRing, cornerChrome, cornerChromePlacement = "ne", mods: customMods, styles: widgetStyles, isDraggable, isResizable, resizeHandles, resizeGripPlacement, isAutoHeight, qa, dragCancel, dragHandle, registry, dragState, settled, onResize, onAutoHeight, onDragLifecycle, isSelectable = false, isSelected = false, isPreSelected = false, selectionCancel, selectedHintId, onSelect, onSelectionReset, selectModifierKey = "metaKey" } = props;
 	const { t } = useI18n();
 	const ariaLabel = registration?.["aria-label"];
 	const hostRef = useRef(null);
@@ -661,26 +361,10 @@ function WidgetHost(props) {
 		const neededRows = Math.max(1, Math.ceil((neededPx + positionParams.margin[1] - AUTO_HEIGHT_TOLERANCE) / step));
 		onAutoHeight(item.i, neededRows);
 	});
-	const [nestedBoardCount, setNestedBoardCount] = useState(0);
-	const registerNestedBoard = useEvent(() => {
-		setNestedBoardCount((count) => count + 1);
-		return () => setNestedBoardCount((count) => Math.max(0, count - 1));
-	});
-	const [descendantHoverCount, setDescendantHoverCount] = useState(0);
-	const setDescendantHovered = useEvent((hovered) => {
-		setDescendantHoverCount((count) => Math.max(0, count + (hovered ? 1 : -1)));
-	});
 	const hostValue = useMemo(() => ({
 		isAutoHeight,
-		requestHeightDeficit,
-		registerNestedBoard,
-		setDescendantHovered
-	}), [
-		isAutoHeight,
-		requestHeightDeficit,
-		registerNestedBoard,
-		setDescendantHovered
-	]);
+		requestHeightDeficit
+	}), [isAutoHeight, requestHeightDeficit]);
 	const useOverlay = isActiveDrag && dragState?.pointerType !== "keyboard";
 	const [isResizing, setIsResizing] = useState(false);
 	const [isFocusWithin, setIsFocusWithin] = useState(false);
@@ -688,15 +372,7 @@ function WidgetHost(props) {
 	const { hoverProps: layerHoverProps, isHovered: isLayerHovered } = useHover({ isDisabled: isActiveDrag });
 	const { focusProps, isFocusVisible } = useFocusRing();
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
-	const placement = resizeGripPlacement ?? (nestedBoardCount > 0 ? "outside" : "inside");
-	const reportHoverToHost = useBoardHost()?.setDescendantHovered;
-	const isSelfHovered = isHovered || isLayerHovered;
-	useEffect(() => {
-		if (!reportHoverToHost || !isSelfHovered) return;
-		reportHoverToHost(true);
-		return () => reportHoverToHost(false);
-	}, [reportHoverToHost, isSelfHovered]);
-	const gripsRevealed = isResizable && !item.static && !isActiveDrag && !descendantHoverCount && (isSelfHovered || isFocusWithin || isResizing);
+	const gripsRevealed = isResizable && !item.static && !isActiveDrag && (isHovered || isLayerHovered || isFocusWithin || isResizing);
 	const { moveProps } = useMove({
 		onMoveStart(e) {
 			if (!isDraggable) return;
@@ -874,22 +550,15 @@ function WidgetHost(props) {
 		selected: isSelected,
 		"pre-selected": isPreSelected && !isSelected
 	};
-	const cornerYieldWarning = isDevEnv() && !resizeHandles.some(isEdgeAxis) ? `Board: widget "${item.i}" yielded a resize press to a handle of a board nested inside it, because their handles sit on the same point (a nested board with no \`containerPadding\` puts its last child's corner exactly on its host's). The innermost handle wins, and this widget has only corner \`resizeHandles\`, so it can no longer be resized there. Give it an edge axis to fall back on (e.g. \`resizeHandles={['se', 'e', 's']}\`), or give the nested board some \`containerPadding\` so the two corners stop coinciding.` : void 0;
-	if (isDevEnv() && placement === "outside") {
-		const [marginX, marginY] = positionParams.margin;
-		if (marginX < OUTSIDE_GRIP_MIN_BAND || marginY < OUTSIDE_GRIP_MIN_BAND) warnOnce(`Board: widget "${item.i}" holds a nested board, so its resize grips are drawn outside its box - but this board's \`margin\` is [${marginX}, ${marginY}] and a grip needs ${OUTSIDE_GRIP_MIN_BAND}px of gutter to sit in. The grips keep their size and overhang the neighbouring widgets. Raise \`margin\` to at least ${OUTSIDE_GRIP_MIN_BAND}px on both axes, or set \`resizeGripPlacement\` explicitly to put them back inside.`);
-	}
 	const content = /* @__PURE__ */ jsxs(BoardHostContext.Provider, {
 		value: hostValue,
-		children: [registration?.content, isResizable && !item.static && placement !== "outside" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			(placement === "corner" ? resizeHandles.filter((axis) => !isCornerAxis(axis)) : resizeHandles).map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
+		children: [registration?.content, isResizable && !item.static ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			(resizeGripPlacement === "corner" ? resizeHandles.filter((axis) => !isCornerAxis(axis)) : resizeHandles).map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
 				axis,
-				placement,
-				boardDepth,
-				yieldWarning: cornerYieldWarning,
+				placement: resizeGripPlacement,
 				onResize: handleResize
 			}, axis)),
-			placement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
+			resizeGripPlacement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
 				"data-axis": axis,
 				mods: {
 					revealed: gripsRevealed,
@@ -924,20 +593,7 @@ function WidgetHost(props) {
 		width: memberRect.width,
 		height: memberRect.height
 	} : null;
-	const cornerHitOutward = Math.min(CORNER_HIT_OUTWARD_MAX, Math.max(CORNER_HIT_INWARD, Math.min(positionParams.margin[0], positionParams.margin[1]) / 2));
-	const gripBand = [Math.max(OUTSIDE_GRIP_MIN_BAND, positionParams.margin[0]), Math.max(OUTSIDE_GRIP_MIN_BAND, positionParams.margin[1])];
-	const cornerHitVars = {
-		"--corner-hit-size": `${CORNER_HIT_INWARD + cornerHitOutward}px`,
-		"--corner-hit-overhang": `${-cornerHitOutward}px`,
-		"--grip-band-x": `${gripBand[0]}px`,
-		"--grip-band-y": `${gripBand[1]}px`,
-		"--grip-pad-x": `${Math.max(0, (gripBand[0] - OUTSIDE_GRIP_THICKNESS) / 2)}px`,
-		"--grip-pad-y": `${Math.max(0, (gripBand[1] - OUTSIDE_GRIP_THICKNESS) / 2)}px`,
-		"--outside-corner-w": `${cornerGripExtent(gripBand[0])}px`,
-		"--outside-corner-h": `${cornerGripExtent(gripBand[1])}px`
-	};
 	const hostStyle = {
-		...cornerHitVars,
 		left: `${pos.left}px`,
 		top: `${pos.top}px`,
 		width: `${pos.width}px`,
@@ -981,13 +637,12 @@ function WidgetHost(props) {
 		"aria-hidden": "true",
 		children: content
 	}), overlayNode) : null;
-	const layerAxes = isResizable && !item.static ? placement === "outside" ? resizeHandles : placement === "corner" ? resizeHandles.filter(isCornerAxis) : [] : [];
+	const cornerAxes = isResizable && !item.static && resizeGripPlacement === "corner" ? resizeHandles.filter(isCornerAxis) : [];
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		host,
-		(layerAxes.length || cornerChrome) && !floatInOverlay ? /* @__PURE__ */ jsxs(GripLayerElement, {
+		(cornerAxes.length || cornerChrome) && !floatInOverlay ? /* @__PURE__ */ jsxs(GripLayerElement, {
 			...layerHoverProps,
 			style: {
-				...cornerHitVars,
 				left: `${pos.left}px`,
 				top: `${pos.top}px`,
 				width: `${pos.width}px`,
@@ -995,16 +650,12 @@ function WidgetHost(props) {
 			},
 			"aria-hidden": cornerChrome ? void 0 : "true",
 			children: [
-				layerAxes.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
+				cornerAxes.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
 					axis,
-					placement,
-					boardDepth,
-					yieldWarning: cornerYieldWarning,
-					isRevealed: gripsRevealed,
-					isResizing,
+					placement: "corner",
 					onResize: handleResize
 				}, `handle-${axis}`)),
-				placement === "outside" ? null : layerAxes.map((axis) => /* @__PURE__ */ jsx(GripElement, {
+				cornerAxes.map((axis) => /* @__PURE__ */ jsx(GripElement, {
 					"data-axis": axis,
 					mods: {
 						revealed: gripsRevealed,