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

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

@@ -1,1065 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-c325dcb | Cube Dev Team */
-import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { isDevEnv } from "../../../utils/is-dev-env.js";
-import { useI18n } from "../../../i18n/useI18n.js";
-import { BoardHostContext, useBoardHost } from "./board-context.js";
-import { calcGridColWidth, calcGridItemPosition } from "./grid-core/calculate.js";
-import { c } from "react/compiler-runtime";
-import { tasty } from "@tenphi/tasty";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useFocusRing, 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;
-/**
-* Corner grip size in px, and therefore how far a `corner`-placed grip hangs
-* outside the widget: exactly half of it, since it is centred on the corner. The
-* 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: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		fill: "#surface-2",
-		radius: "1cr",
-		border: {
-			"": false,
-			card: true,
-			"pre-selected": "#primary-border",
-			selected: "#primary-border"
-		},
-		shadow: {
-			"": false,
-			"hovered & !card & !no-hover-ring & (draggable | resizing)": "0 0 0 1bw #border",
-			"pre-selected": "0 0 0 1bw #primary.40",
-			selected: "0 0 0 1bw #primary",
-			"drag | resizing": "$dialog-shadow"
-		},
-		outline: {
-			"": "1bw #primary-text.0",
-			"focus-visible": "1bw #primary-text"
-		},
-		outlineOffset: "1bw",
-		zIndex: {
-			"": 1,
-			"drag | resizing": 10
-		},
-		opacity: {
-			"": 1,
-			floating: .8
-		},
-		transition: {
-			"": "theme, shadow, opacity",
-			settled: "theme, shadow, opacity, inset, width, height",
-			"drag | floating | resizing": "theme, shadow, opacity"
-		},
-		boxSizing: "border-box",
-		userSelect: {
-			"": "auto",
-			"drag | resizing": "none"
-		},
-		cursor: {
-			"": "auto",
-			draggable: "grab",
-			drag: "grabbing"
-		},
-		touchAction: "none",
-		overflow: "hidden"
-	}
-});
-const HandleElement = tasty({
-	qa: "BoardResizeHandle",
-	styles: {
-		position: "absolute",
-		zIndex: 20,
-		fill: "#clear",
-		pointerEvents: "auto",
-		"--handle-size": "3x",
-		"--handle-inset": "1x",
-		"--edge-overhang": "-8px",
-		"--corner-overhang": {
-			"": "-8px",
-			"placement=corner": "$corner-hit-overhang"
-		},
-		"--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: {
-			"": "$corner-size",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "$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=\"e\"] | [data-axis=\"w\"]": "$handle-inset"
-		},
-		bottom: {
-			"": "auto",
-			"[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=\"nw\"] | [data-axis=\"sw\"]": "$corner-overhang",
-			"[data-axis=\"w\"]": "$edge-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=\"n\"] | [data-axis=\"s\"]": "$handle-inset"
-		},
-		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"
-		},
-		touchAction: "none"
-	}
-});
-const GripElement = tasty({
-	qa: "BoardResizeGrip",
-	styles: {
-		position: "absolute",
-		"--grip-size": `${GRIP_SIZE}px`,
-		"--grip-inset": "4px",
-		"--grip-offset": {
-			"": "$grip-inset",
-			"placement=corner": "($grip-size / -2)"
-		},
-		width: "$grip-size",
-		height: "$grip-size",
-		boxSizing: "border-box",
-		pointerEvents: "none",
-		opacity: {
-			"": 0,
-			revealed: 1
-		},
-		transition: "opacity $disclosure-transition ease-in-out",
-		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: {
-			"": "0",
-			"[data-axis=\"se\"]": "4px bottom-right",
-			"[data-axis=\"sw\"]": "4px bottom-left",
-			"[data-axis=\"ne\"]": "4px top-right",
-			"[data-axis=\"nw\"]": "4px top-left"
-		},
-		top: {
-			"": "auto",
-			"[data-axis=\"ne\"] | [data-axis=\"nw\"]": "$grip-offset"
-		},
-		bottom: {
-			"": "auto",
-			"[data-axis=\"se\"] | [data-axis=\"sw\"]": "$grip-offset"
-		},
-		left: {
-			"": "auto",
-			"[data-axis=\"nw\"] | [data-axis=\"sw\"]": "$grip-offset"
-		},
-		right: {
-			"": "auto",
-			"[data-axis=\"ne\"] | [data-axis=\"se\"]": "$grip-offset"
-		}
-	}
-});
-/**
-* 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 $disclosure-transition 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
-* load-bearing - see its own note), so a grip centred on the widget's corner
-* would be cut in half if it stayed inside. This layer mirrors the widget's grid
-* rect as a *sibling* of it, clips nothing, and never takes pointer events: the
-* transparent `HandleElement` inside the widget still owns the gesture, so
-* escaping the clip costs no hit-testing behaviour.
-*
-* 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.
-*/
-const GripLayerElement = tasty({
-	qa: "BoardResizeGripLayer",
-	styles: {
-		position: "absolute",
-		overflow: "visible",
-		pointerEvents: "none",
-		zIndex: 5
-	}
-});
-/**
-* A control anchored to one corner of a widget, centred on it.
-*
-* Lives in the same layer as the corner resize grips, which is the layer that
-* exists precisely because a widget clips its own content: a control an app
-* hangs off the corner itself is cropped in half by that clip, or by an
-* ancestor's scroll container when the widget sits in the first row. Here it is
-* a sibling of the widget rather than a descendant, so neither can reach it.
-*
-* Being outside the widget host also means `useMove` is not attached, so a press
-* on the chrome cannot start a drag — no `dragCancel` entry required.
-*/
-const CornerChromeElement = tasty({
-	qa: "BoardWidgetCornerChrome",
-	styles: {
-		position: "absolute",
-		pointerEvents: "auto",
-		zIndex: 1,
-		top: {
-			"": "auto",
-			"corner=ne | corner=nw": 0
-		},
-		bottom: {
-			"": "auto",
-			"corner=se | corner=sw": 0
-		},
-		left: {
-			"": "auto",
-			"corner=nw | corner=sw": 0
-		},
-		right: {
-			"": "auto",
-			"corner=ne | corner=se": 0
-		},
-		transform: {
-			"": "translate(50%, -50%)",
-			"corner=nw": "translate(-50%, -50%)",
-			"corner=se": "translate(50%, 50%)",
-			"corner=sw": "translate(-50%, 50%)"
-		}
-	}
-});
-const EdgeGripElement = tasty({
-	qa: "BoardResizeEdgeGrip",
-	styles: {
-		position: "absolute",
-		display: "grid",
-		gap: "2bw",
-		boxSizing: "border-box",
-		pointerEvents: "none",
-		opacity: {
-			"": 0,
-			revealed: 1
-		},
-		transition: "opacity $disclosure-transition ease-in-out",
-		gridColumns: {
-			"": "3px",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "3px 3px 3px 3px 3px"
-		},
-		gridRows: {
-			"": "3px 3px 3px 3px 3px",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "3px"
-		},
-		top: {
-			"": "50%",
-			"[data-axis=\"n\"]": "3px",
-			"[data-axis=\"s\"]": "auto"
-		},
-		bottom: {
-			"": "auto",
-			"[data-axis=\"s\"]": "3px"
-		},
-		left: {
-			"": "auto",
-			"[data-axis=\"w\"]": "3px",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "50%"
-		},
-		right: {
-			"": "auto",
-			"[data-axis=\"e\"]": "3px"
-		},
-		transform: {
-			"": "translate(0, 0)",
-			"[data-axis=\"e\"] | [data-axis=\"w\"]": "translate(0, -50%)",
-			"[data-axis=\"n\"] | [data-axis=\"s\"]": "translate(-50%, 0)"
-		},
-		Dot: {
-			width: "3px",
-			height: "3px",
-			radius: "round",
-			fill: {
-				"": "#dark-03",
-				resizing: "#dark-02"
-			}
-		}
-	}
-});
-/** Corner axes get a visible grip affordance on hover/focus/resize. */
-function isCornerAxis(axis) {
-	return axis.length === 2;
-}
-/** Edge axes (n/s/e/w) get a dotted grip affordance. */
-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(t0) {
-	const $ = c(20);
-	const { axis, placement, boardDepth, yieldWarning, isRevealed, isResizing, onResize } = t0;
-	let t1;
-	if ($[0] !== axis || $[1] !== onResize) {
-		t1 = {
-			onMoveStart() {
-				onResize(axis, "start", 0, 0);
-			},
-			onMove(e) {
-				onResize(axis, "move", e.deltaX, e.deltaY);
-			},
-			onMoveEnd() {
-				onResize(axis, "end", 0, 0);
-			}
-		};
-		$[0] = axis;
-		$[1] = onResize;
-		$[2] = t1;
-	} else t1 = $[2];
-	const { moveProps } = useMove(t1);
-	let t2;
-	if ($[3] !== moveProps) {
-		t2 = mergeProps$1({
-			onPointerDown: _temp,
-			onMouseDown: _temp2,
-			onTouchStart: _temp3
-		}, moveProps);
-		$[3] = moveProps;
-		$[4] = t2;
-	} else t2 = $[4];
-	const handleProps = t2;
-	let t3;
-	if ($[5] !== boardDepth || $[6] !== handleProps || $[7] !== yieldWarning) {
-		t3 = (e_3) => {
-			const deeper = findDeeperHandle({
-				x: e_3.clientX,
-				y: e_3.clientY
-			}, boardDepth);
-			if (deeper) {
-				e_3.stopPropagation();
-				e_3.preventDefault();
-				warnOnce(yieldWarning);
-				forwardPointerDown(e_3, deeper);
-				return;
-			}
-			handleProps.onPointerDown?.(e_3);
-		};
-		$[5] = boardDepth;
-		$[6] = handleProps;
-		$[7] = yieldWarning;
-		$[8] = t3;
-	} else t3 = $[8];
-	const onPointerDown = t3;
-	const Element = placement === "outside" ? OutsideGripElement : HandleElement;
-	let t4;
-	if ($[9] !== isResizing || $[10] !== isRevealed || $[11] !== placement) {
-		t4 = {
-			placement,
-			revealed: isRevealed,
-			resizing: isResizing
-		};
-		$[9] = isResizing;
-		$[10] = isRevealed;
-		$[11] = placement;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== Element || $[14] !== axis || $[15] !== boardDepth || $[16] !== handleProps || $[17] !== onPointerDown || $[18] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Element, {
-			"data-axis": axis,
-			"data-board-depth": boardDepth,
-			mods: t4,
-			...handleProps,
-			onPointerDown,
-			"aria-hidden": "true"
-		});
-		$[13] = Element;
-		$[14] = axis;
-		$[15] = boardDepth;
-		$[16] = handleProps;
-		$[17] = onPointerDown;
-		$[18] = t4;
-		$[19] = t5;
-	} else t5 = $[19];
-	return t5;
-}
-function _temp3(e_2) {
-	return e_2.stopPropagation();
-}
-function _temp2(e_1) {
-	return e_1.stopPropagation();
-}
-function _temp(e_0) {
-	return e_0.stopPropagation();
-}
-/**
-* The positioned, interactive wrapper a board renders for each layout item it
-* owns. Content is pulled from the shared store (by id), so any board can host
-* any widget. Dragging uses React Aria `useMove`; during a drag the widget
-* 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 { t } = useI18n();
-	const ariaLabel = registration?.["aria-label"];
-	const hostRef = useRef(null);
-	const isActiveDrag = dragState?.itemId === item.i;
-	const isDragMember = !!dragState?.itemIds.includes(item.i);
-	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 [nestedBoardCount, setNestedBoardCount] = useState(0);
-	const registerNestedBoard = useEvent(() => {
-		setNestedBoardCount((count) => count + 1);
-		return () => setNestedBoardCount((count_0) => Math.max(0, count_0 - 1));
-	});
-	const [descendantHoverCount, setDescendantHoverCount] = useState(0);
-	const setDescendantHovered = useEvent((hovered) => {
-		setDescendantHoverCount((count_1) => Math.max(0, count_1 + (hovered ? 1 : -1)));
-	});
-	const hostValue = useMemo(() => ({
-		isAutoHeight,
-		requestHeightDeficit,
-		registerNestedBoard,
-		setDescendantHovered
-	}), [
-		isAutoHeight,
-		requestHeightDeficit,
-		registerNestedBoard,
-		setDescendantHovered
-	]);
-	const useOverlay = isActiveDrag && dragState?.pointerType !== "keyboard";
-	const [isResizing, setIsResizing] = useState(false);
-	const [isFocusWithin, setIsFocusWithin] = useState(false);
-	const { hoverProps, isHovered } = useHover({ isDisabled: isActiveDrag });
-	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 { moveProps } = useMove({
-		onMoveStart(e) {
-			if (!isDraggable) return;
-			const rect = hostRef.current?.getBoundingClientRect();
-			const pos = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h);
-			const vr = rect ? {
-				left: rect.left,
-				top: rect.top,
-				width: rect.width,
-				height: rect.height
-			} : {
-				left: pos.left,
-				top: pos.top,
-				width: pos.width,
-				height: pos.height
-			};
-			registry.onDragStart(boardId, item.i, vr, e.pointerType, hostRef.current);
-			onDragLifecycle?.(item.i, "start");
-		},
-		onMove(e_0) {
-			if (!isDraggable) return;
-			if (e_0.pointerType === "keyboard") {
-				const stepX = calcGridColWidth(positionParams) + positionParams.margin[0];
-				const stepY = positionParams.rowHeight + positionParams.margin[1];
-				registry.onDragMove(Math.sign(e_0.deltaX) * stepX, Math.sign(e_0.deltaY) * stepY, e_0.pointerType);
-				onDragLifecycle?.(item.i, "move");
-				return;
-			}
-			registry.onDragMove(e_0.deltaX, e_0.deltaY, e_0.pointerType);
-			onDragLifecycle?.(item.i, "move");
-		},
-		onMoveEnd() {
-			if (!isDraggable) return;
-			registry.onDragEnd();
-			onDragLifecycle?.(item.i, "end");
-		}
-	});
-	const a11yProps = {
-		role: "group",
-		tabIndex: isDraggable || isSelectable ? 0 : void 0,
-		"aria-roledescription": isDraggable ? t("board.draggableWidget", "Draggable widget") : t("board.widget", "Widget"),
-		"aria-label": ariaLabel ?? qa ?? item.i,
-		"aria-describedby": isSelected ? selectedHintId : void 0,
-		"aria-keyshortcuts": isSelectable ? "Space" : void 0
-	};
-	const isInteractiveTarget = (target) => {
-		return !!(selectionCancel && target?.closest?.(selectionCancel));
-	};
-	/**
-	* Pressing something interactive means the user has moved on from the
-	* selection, so the selection is dropped — always, whatever the control is and
-	* whatever it does with the event.
-	*
-	* That "always" is why this is a *capture*-phase handler and not part of
-	* `handleSelectPointerDown` below. A bubble-phase handler only sees the
-	* presses that reach the host, and a control is free to call
-	* `stopPropagation()` before that happens — React Aria's `usePress` does it by
-	* default, which is why some in-widget buttons dropped the selection and
-	* others silently did not. Capture runs top-down, so it lands before any
-	* descendant can speak. Portaled controls (a menu opened from a widget's
-	* toolbar) are covered too: React propagates events along the React tree, so a
-	* portal declared inside this widget still passes through here.
-	*
-	* Nothing is stopped or prevented here — the handler only reads the target, so
-	* the control keeps its press, its focus and its default behaviour intact.
-	*/
-	const handleSelectPointerDownCapture = (e_1) => {
-		if (!isSelectable || e_1.button !== 0) return;
-		if (isInteractiveTarget(e_1.target)) onSelectionReset?.();
-	};
-	useEffect(() => {
-		const node = hostRef.current;
-		if (!node || !isSelectable || !selectionCancel || !onSelectionReset) return;
-		const handleCapture = (event) => {
-			if (event.button !== 0) return;
-			if (event.target?.closest?.(selectionCancel)) onSelectionReset();
-		};
-		node.addEventListener("pointerdown", handleCapture, true);
-		return () => node.removeEventListener("pointerdown", handleCapture, true);
-	}, [
-		isSelectable,
-		selectionCancel,
-		onSelectionReset
-	]);
-	/**
-	* Selecting and starting a drag are the *same* gesture: you grab the thing you
-	* are about to move. So the press selects immediately and the drag arms behind
-	* it — move and it drags, stay still and it was only a selection. This is what
-	* every canvas tool does, and it is why there is no ambiguity to resolve with a
-	* modifier.
-	*
-	*  - a press on an interactive descendant belongs to that control, so the
-	*    press is left alone (the selection was already dropped in the capture
-	*    phase above);
-	*  - <kbd>Shift</kbd> or the platform modifier toggles membership;
-	*  - a press on an unselected widget makes it the selection, so the drag that
-	*    follows moves exactly what was grabbed;
-	*  - a press on an already-selected widget changes nothing, so the drag moves
-	*    the whole group.
-	*
-	* Runs before the drag handler (see the `mergeProps` order below), so the
-	* registry resolves the group against the selection this press just made.
-	*/
-	const handleSelectPointerDown = (e_2) => {
-		if (!isSelectable || !onSelect || e_2.button !== 0) return;
-		if (isInteractiveTarget(e_2.target)) return;
-		e_2.stopPropagation();
-		if (e_2.shiftKey || e_2[selectModifierKey]) {
-			onSelect(item.i, true);
-			return;
-		}
-		if (!isSelected) onSelect(item.i, false);
-	};
-	const handleSelectKeyDown = (e_3) => {
-		if (e_3.target !== e_3.currentTarget) return;
-		if (!isSelectable || !onSelect) return;
-		if (e_3.key !== " " && e_3.key !== "Spacebar") return;
-		e_3.preventDefault();
-		e_3.stopPropagation();
-		onSelect(item.i, true);
-	};
-	const stopBubbleProps = isDraggable ? {
-		onPointerDown: (e_4) => e_4.stopPropagation(),
-		onMouseDown: (e_5) => e_5.stopPropagation(),
-		onTouchStart: (e_6) => e_6.stopPropagation()
-	} : {};
-	const shouldGateDrag = (target_1) => {
-		if (!(target_1 instanceof Element)) return false;
-		if (dragHandle && !target_1.closest(dragHandle)) return true;
-		if (dragCancel && target_1.closest(dragCancel)) return true;
-		return !!(isSelectable && selectionCancel && target_1.closest(selectionCancel));
-	};
-	const gatedMoveProps = !isDraggable ? {} : {
-		...moveProps,
-		...moveProps.onPointerDown && { onPointerDown: (e_7) => {
-			if (shouldGateDrag(e_7.target)) return;
-			hostRef.current?.focus({ preventScroll: true });
-			moveProps.onPointerDown(e_7);
-		} },
-		...moveProps.onMouseDown && { onMouseDown: (e_8) => {
-			if (shouldGateDrag(e_8.target)) return;
-			hostRef.current?.focus({ preventScroll: true });
-			moveProps.onMouseDown(e_8);
-		} },
-		...moveProps.onTouchStart && { onTouchStart: (e_9) => {
-			if (shouldGateDrag(e_9.target)) return;
-			moveProps.onTouchStart(e_9);
-		} },
-		...moveProps.onKeyDown && { onKeyDown: (e_10) => {
-			if (e_10.target !== e_10.currentTarget) return;
-			handleSelectKeyDown(e_10);
-			if (e_10.defaultPrevented) return;
-			moveProps.onKeyDown(e_10);
-		} }
-	};
-	const selectionProps = isSelectable ? {
-		onPointerDownCapture: handleSelectPointerDownCapture,
-		onPointerDown: handleSelectPointerDown,
-		...isDraggable ? {} : { onKeyDown: handleSelectKeyDown }
-	} : {};
-	const handleResize = (axis, phase, dx, dy) => {
-		if (phase === "start") setIsResizing(true);
-		else if (phase === "end") setIsResizing(false);
-		onResize(item.i, axis, phase, dx, dy);
-	};
-	const mods = {
-		drag: isActiveDrag,
-		draggable: isDraggable && !isActiveDrag,
-		static: !!item.static,
-		resizing: isResizing,
-		card: isCard,
-		"no-hover-ring": !hoverRing,
-		hovered: isHovered,
-		"focus-visible": isFocusVisible,
-		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_0) => !isCornerAxis(axis_0)) : resizeHandles).map((axis_1) => /* @__PURE__ */ jsx(ResizeHandle, {
-				axis: axis_1,
-				placement,
-				boardDepth,
-				yieldWarning: cornerYieldWarning,
-				onResize: handleResize
-			}, axis_1)),
-			placement === "corner" ? null : resizeHandles.filter(isCornerAxis).map((axis_2) => /* @__PURE__ */ jsx(GripElement, {
-				"data-axis": axis_2,
-				mods: {
-					revealed: gripsRevealed,
-					placement: "inside"
-				},
-				"aria-hidden": "true"
-			}, `grip-${axis_2}`)),
-			resizeHandles.filter(isEdgeAxis).map((axis_3) => /* @__PURE__ */ jsxs(EdgeGripElement, {
-				"data-axis": axis_3,
-				mods: {
-					revealed: gripsRevealed,
-					resizing: isResizing
-				},
-				"aria-hidden": "true",
-				children: [
-					/* @__PURE__ */ jsx("div", { "data-element": "Dot" }),
-					/* @__PURE__ */ jsx("div", { "data-element": "Dot" }),
-					/* @__PURE__ */ jsx("div", { "data-element": "Dot" }),
-					/* @__PURE__ */ jsx("div", { "data-element": "Dot" }),
-					/* @__PURE__ */ jsx("div", { "data-element": "Dot" })
-				]
-			}, `edge-grip-${axis_3}`))
-		] }) : null]
-	});
-	const pos_0 = calcGridItemPosition(positionParams, item.x, item.y, item.w, item.h);
-	const overlayNode = registry.overlayRef.current;
-	const memberRect = isDragMember ? dragState.memberRects.get(item.i) : void 0;
-	const floatInOverlay = !!overlayNode && !!dragState && dragState.pointerType !== "keyboard" && (useOverlay || isDragMember && !!memberRect);
-	const floatRect = floatInOverlay && dragState ? isActiveDrag || !memberRect ? dragState.rect : {
-		left: memberRect.left + (dragState.rect.left - dragState.startRect.left),
-		top: memberRect.top + (dragState.rect.top - dragState.startRect.top),
-		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_0.left}px`,
-		top: `${pos_0.top}px`,
-		width: `${pos_0.width}px`,
-		height: `${pos_0.height}px`,
-		...floatInOverlay ? {
-			opacity: 0,
-			pointerEvents: "none"
-		} : null
-	};
-	const hostMods = {
-		...customMods,
-		...mods,
-		drag: isActiveDrag && !floatInOverlay,
-		settled
-	};
-	const host = /* @__PURE__ */ jsx(WidgetElement, {
-		ref: hostRef,
-		"data-board-widget-host": "",
-		"data-board-widget-id": item.i,
-		...mergeProps$1(selectionProps, gatedMoveProps, stopBubbleProps, hoverProps, focusProps, focusWithinProps, a11yProps, { style: hostStyle }),
-		qa,
-		mods: hostMods,
-		styles: widgetStyles,
-		children: floatInOverlay ? null : content
-	});
-	const overlayClone = floatInOverlay ? createPortal(/* @__PURE__ */ jsx(WidgetElement, {
-		style: {
-			position: "absolute",
-			left: `${floatRect.left}px`,
-			top: `${floatRect.top}px`,
-			width: `${floatRect.width}px`,
-			height: `${floatRect.height}px`,
-			pointerEvents: "none"
-		},
-		mods: {
-			...hostMods,
-			drag: true,
-			floating: true
-		},
-		styles: widgetStyles,
-		"aria-hidden": "true",
-		children: content
-	}), overlayNode) : null;
-	const layerAxes = isResizable && !item.static ? placement === "outside" ? resizeHandles : placement === "corner" ? resizeHandles.filter(isCornerAxis) : [] : [];
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		host,
-		(layerAxes.length || cornerChrome) && !floatInOverlay ? /* @__PURE__ */ jsxs(GripLayerElement, {
-			...layerHoverProps,
-			style: {
-				...cornerHitVars,
-				left: `${pos_0.left}px`,
-				top: `${pos_0.top}px`,
-				width: `${pos_0.width}px`,
-				height: `${pos_0.height}px`
-			},
-			"aria-hidden": cornerChrome ? void 0 : "true",
-			children: [
-				layerAxes.map((axis_4) => /* @__PURE__ */ jsx(ResizeHandle, {
-					axis: axis_4,
-					placement,
-					boardDepth,
-					yieldWarning: cornerYieldWarning,
-					isRevealed: gripsRevealed,
-					isResizing,
-					onResize: handleResize
-				}, `handle-${axis_4}`)),
-				placement === "outside" ? null : layerAxes.map((axis_5) => /* @__PURE__ */ jsx(GripElement, {
-					"data-axis": axis_5,
-					mods: {
-						revealed: gripsRevealed,
-						placement: "corner"
-					},
-					"aria-hidden": "true"
-				}, `grip-${axis_5}`)),
-				cornerChrome ? /* @__PURE__ */ jsx(CornerChromeElement, {
-					mods: { corner: cornerChromePlacement },
-					children: cornerChrome
-				}) : null
-			]
-		}) : null,
-		overlayClone
-	] });
-}
-
-//#endregion
-export { WidgetHost };
-//# sourceMappingURL=WidgetHost.js.map