@cube-dev/ui-kit 0.173.0 → 0.175.0

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.173.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.175.0 | 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 } from "./board-context.js";
+import { BoardHostContext, useBoardHost } 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";
@@ -22,6 +23,60 @@ 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: {
@@ -83,37 +138,48 @@ const HandleElement = tasty({
 		fill: "#clear",
 		pointerEvents: "auto",
 		"--handle-size": "3x",
-		"--handle-overhang": {
+		"--handle-inset": "1x",
+		"--edge-overhang": "-8px",
+		"--corner-overhang": {
 			"": "-8px",
-			"placement=corner": `${-GRIP_SIZE / 2}px`
+			"placement=corner": "$corner-hit-overhang"
 		},
-		"--handle-inset": "1x",
-		width: {
+		"--corner-size": {
 			"": "$handle-size",
+			"placement=corner": "$corner-hit-size"
+		},
+		width: {
+			"": "$corner-size",
+			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$handle-size",
 			"[data-axis=\"n\"] | [data-axis=\"s\"]": "auto"
 		},
 		height: {
-			"": "$handle-size",
+			"": "$corner-size",
+			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$handle-size",
 			"[data-axis=\"e\"] | [data-axis=\"w\"]": "auto"
 		},
 		top: {
 			"": "auto",
-			"[data-axis=\"n\"] | [data-axis=\"ne\"] | [data-axis=\"nw\"]": "$handle-overhang",
+			"[data-axis=\"ne\"] | [data-axis=\"nw\"]": "$corner-overhang",
+			"[data-axis=\"n\"]": "$edge-overhang",
 			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$handle-inset"
 		},
 		bottom: {
 			"": "auto",
-			"[data-axis=\"s\"] | [data-axis=\"se\"] | [data-axis=\"sw\"]": "$handle-overhang",
+			"[data-axis=\"se\"] | [data-axis=\"sw\"]": "$corner-overhang",
+			"[data-axis=\"s\"]": "$edge-overhang",
 			"[data-axis=\"e\"] | [data-axis=\"w\"]": "$handle-inset"
 		},
 		left: {
 			"": "auto",
-			"[data-axis=\"w\"] | [data-axis=\"nw\"] | [data-axis=\"sw\"]": "$handle-overhang",
+			"[data-axis=\"nw\"] | [data-axis=\"sw\"]": "$corner-overhang",
+			"[data-axis=\"w\"]": "$edge-overhang",
 			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$handle-inset"
 		},
 		right: {
 			"": "auto",
-			"[data-axis=\"e\"] | [data-axis=\"ne\"] | [data-axis=\"se\"]": "$handle-overhang",
+			"[data-axis=\"ne\"] | [data-axis=\"se\"]": "$corner-overhang",
+			"[data-axis=\"e\"]": "$edge-overhang",
 			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$handle-inset"
 		},
 		cursor: {
@@ -187,6 +253,115 @@ 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
@@ -198,9 +373,17 @@ const GripElement = 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. 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.
+* 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.
 */
 const GripLayerElement = tasty({
 	qa: "BoardResizeGripLayer",
@@ -316,7 +499,89 @@ function isCornerAxis(axis) {
 function isEdgeAxis(axis) {
 	return axis.length === 1;
 }
-function ResizeHandle({ axis, placement, onResize }) {
+/** `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 }) {
 	const { moveProps } = useMove({
 		onMoveStart() {
 			onResize(axis, "start", 0, 0);
@@ -328,15 +593,50 @@ function ResizeHandle({ axis, placement, onResize }) {
 			onResize(axis, "end", 0, 0);
 		}
 	});
-	const stopProps = {
+	const handleProps = mergeProps$1({
 		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(HandleElement, {
+	return /* @__PURE__ */ jsx(placement === "outside" ? OutsideGripElement : HandleElement, {
 		"data-axis": axis,
-		mods: { placement },
-		...mergeProps$1(stopProps, moveProps),
+		"data-board-depth": boardDepth,
+		mods: {
+			placement,
+			revealed: isRevealed,
+			resizing: isResizing
+		},
+		...handleProps,
+		onPointerDown,
 		"aria-hidden": "true"
 	});
 }
@@ -347,7 +647,7 @@ function ResizeHandle({ axis, placement, onResize }) {
 * 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, 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, 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 { t } = useI18n();
 	const ariaLabel = registration?.["aria-label"];
 	const hostRef = useRef(null);
@@ -361,10 +661,26 @@ 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
-	}), [isAutoHeight, requestHeightDeficit]);
+		requestHeightDeficit,
+		registerNestedBoard,
+		setDescendantHovered
+	}), [
+		isAutoHeight,
+		requestHeightDeficit,
+		registerNestedBoard,
+		setDescendantHovered
+	]);
 	const useOverlay = isActiveDrag && dragState?.pointerType !== "keyboard";
 	const [isResizing, setIsResizing] = useState(false);
 	const [isFocusWithin, setIsFocusWithin] = useState(false);
@@ -372,7 +688,15 @@ function WidgetHost(props) {
 	const { hoverProps: layerHoverProps, isHovered: isLayerHovered } = useHover({ isDisabled: isActiveDrag });
 	const { focusProps, isFocusVisible } = useFocusRing();
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocusWithin });
-	const gripsRevealed = isResizable && !item.static && !isActiveDrag && (isHovered || isLayerHovered || isFocusWithin || isResizing);
+	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 { moveProps } = useMove({
 		onMoveStart(e) {
 			if (!isDraggable) return;
@@ -550,15 +874,22 @@ 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 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			(resizeGripPlacement === "corner" ? resizeHandles.filter((axis) => !isCornerAxis(axis)) : resizeHandles).map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
+		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, {
 				axis,
-				placement: resizeGripPlacement,
+				placement,
+				boardDepth,
+				yieldWarning: cornerYieldWarning,
 				onResize: handleResize
 			}, axis)),
-			resizeGripPlacement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
+			placement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis) => /* @__PURE__ */ jsx(GripElement, {
 				"data-axis": axis,
 				mods: {
 					revealed: gripsRevealed,
@@ -593,7 +924,20 @@ 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`,
@@ -637,12 +981,13 @@ function WidgetHost(props) {
 		"aria-hidden": "true",
 		children: content
 	}), overlayNode) : null;
-	const cornerAxes = isResizable && !item.static && resizeGripPlacement === "corner" ? resizeHandles.filter(isCornerAxis) : [];
+	const layerAxes = isResizable && !item.static ? placement === "outside" ? resizeHandles : placement === "corner" ? resizeHandles.filter(isCornerAxis) : [] : [];
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		host,
-		(cornerAxes.length || cornerChrome) && !floatInOverlay ? /* @__PURE__ */ jsxs(GripLayerElement, {
+		(layerAxes.length || cornerChrome) && !floatInOverlay ? /* @__PURE__ */ jsxs(GripLayerElement, {
 			...layerHoverProps,
 			style: {
+				...cornerHitVars,
 				left: `${pos.left}px`,
 				top: `${pos.top}px`,
 				width: `${pos.width}px`,
@@ -650,12 +995,16 @@ function WidgetHost(props) {
 			},
 			"aria-hidden": cornerChrome ? void 0 : "true",
 			children: [
-				cornerAxes.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
+				layerAxes.map((axis) => /* @__PURE__ */ jsx(ResizeHandle, {
 					axis,
-					placement: "corner",
+					placement,
+					boardDepth,
+					yieldWarning: cornerYieldWarning,
+					isRevealed: gripsRevealed,
+					isResizing,
 					onResize: handleResize
 				}, `handle-${axis}`)),
-				cornerAxes.map((axis) => /* @__PURE__ */ jsx(GripElement, {
+				placement === "outside" ? null : layerAxes.map((axis) => /* @__PURE__ */ jsx(GripElement, {
 					"data-axis": axis,
 					mods: {
 						revealed: gripsRevealed,