@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/floating-panel/index.js

@@ -0,0 +1,1012 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { k as isHTMLElement, r as resizeObserverBorderBox, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { a as getEventStep, m as isLeftClick, r as getEventKey, s as getEventTarget, t as addDomEvent } from "../../event-bTItRgiw.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as trackPointerMove } from "../../pointer-move-Tijb8Ptk.js";
+import { F as toPx, H as match, l as clampValue, n as createSplitProps, o as pick } from "../../utils-Cht5XaHf.js";
+import { n as ensureProps, r as invariant } from "../../warning-CrzBpWT1.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { a as getElementRect, c as createRect, m as subtractPoints, o as addPoints, t as resizeRect } from "../../rect-utils-d_3gZVsc.js";
+import { a as isSizeEqual, c as clampSize, n as getWindowRect, o as constrainRect, r as isPointEqual, s as clampPoint } from "../../from-window-5ZhzSURC.js";
+import { a as subscribe, n as proxy } from "../../store-BLpJlMxz.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/floating-panel/anatomy.ts
+const anatomy = createAnatomy("floating-panel").parts("trigger", "positioner", "content", "header", "body", "title", "resizeTrigger", "dragTrigger", "stageTrigger", "closeTrigger", "control");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/floating-panel/dom.ts
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `floating-panel:${ctx.id}:trigger`;
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `floating-panel:${ctx.id}:positioner`;
+const getContentId = (ctx) => ctx.ids?.content ?? `floating-panel:${ctx.id}:content`;
+const getTitleId = (ctx) => ctx.ids?.title ?? `floating-panel:${ctx.id}:title`;
+const getHeaderId = (ctx) => ctx.ids?.header ?? `floating-panel:${ctx.id}:header`;
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getHeaderEl = (ctx) => ctx.getById(getHeaderId(ctx));
+const getBoundaryRect = (ctx, boundaryEl, allowOverflow) => {
+	let boundaryRect;
+	if (isHTMLElement(boundaryEl)) boundaryRect = getElementRect(boundaryEl);
+	else boundaryRect = getWindowRect(ctx.getWin());
+	if (allowOverflow) boundaryRect = createRect({
+		x: -boundaryRect.width,
+		y: boundaryRect.minY,
+		width: boundaryRect.width * 3,
+		height: boundaryRect.height * 2
+	});
+	return pick(boundaryRect, [
+		"x",
+		"y",
+		"width",
+		"height"
+	]);
+};
+//#endregion
+//#region src/machines/floating-panel/get-resize-axis-style.ts
+function getResizeAxisStyle(axis) {
+	switch (axis) {
+		case "n": return {
+			cursor: "n-resize",
+			width: "100%",
+			top: 0,
+			left: "50%",
+			translate: "-50%"
+		};
+		case "e": return {
+			cursor: "e-resize",
+			height: "100%",
+			right: 0,
+			top: "50%",
+			translate: "0 -50%"
+		};
+		case "s": return {
+			cursor: "s-resize",
+			width: "100%",
+			bottom: 0,
+			left: "50%",
+			translate: "-50%"
+		};
+		case "w": return {
+			cursor: "w-resize",
+			height: "100%",
+			left: 0,
+			top: "50%",
+			translate: "0 -50%"
+		};
+		case "se": return {
+			cursor: "se-resize",
+			bottom: 0,
+			right: 0
+		};
+		case "sw": return {
+			cursor: "sw-resize",
+			bottom: 0,
+			left: 0
+		};
+		case "ne": return {
+			cursor: "ne-resize",
+			top: 0,
+			right: 0
+		};
+		case "nw": return {
+			cursor: "nw-resize",
+			top: 0,
+			left: 0
+		};
+		default: throw new Error(`Invalid axis: ${axis}`);
+	}
+}
+//#endregion
+//#region src/machines/floating-panel/connect.ts
+const validStages = /* @__PURE__ */ new Set([
+	"minimized",
+	"maximized",
+	"default"
+]);
+function connect(service, normalize) {
+	const { state, send, scope, prop, computed, context } = service;
+	const open = state.hasTag("open");
+	const dragging = state.matches("open.dragging");
+	const resizing = state.matches("open.resizing");
+	const isTopmost = context.get("isTopmost");
+	const size = context.get("size");
+	const position = context.get("position");
+	const isMaximized = computed("isMaximized");
+	const isMinimized = computed("isMinimized");
+	const isStaged = computed("isStaged");
+	const canResize = computed("canResize");
+	const canDrag = computed("canDrag");
+	return {
+		open,
+		resizable: prop("resizable"),
+		draggable: prop("draggable"),
+		setOpen(nextOpen) {
+			if (state.hasTag("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		dragging,
+		resizing,
+		position,
+		size,
+		setPosition(position) {
+			send({
+				type: "SET_POSITION",
+				position
+			});
+		},
+		setSize(size) {
+			send({
+				type: "SET_SIZE",
+				size
+			});
+		},
+		minimize() {
+			send({ type: "MINIMIZE" });
+		},
+		maximize() {
+			send({ type: "MAXIMIZE" });
+		},
+		restore() {
+			send({ type: "RESTORE" });
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				disabled: prop("disabled"),
+				id: getTriggerId(scope),
+				"data-state": open ? "open" : "closed",
+				"data-dragging": dataAttr(dragging),
+				"aria-controls": getContentId(scope),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (prop("disabled")) return;
+					const open = state.hasTag("open");
+					send({
+						type: open ? "CLOSE" : "OPEN",
+						src: "trigger"
+					});
+				}
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: getPositionerId(scope),
+				style: {
+					"--width": toPx(size?.width),
+					"--height": toPx(size?.height),
+					"--x": toPx(position?.x),
+					"--y": toPx(position?.y),
+					position: prop("strategy"),
+					top: "var(--y)",
+					left: "var(--x)"
+				}
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				role: "dialog",
+				tabIndex: 0,
+				hidden: !open,
+				id: getContentId(scope),
+				"aria-labelledby": getTitleId(scope),
+				"data-state": open ? "open" : "closed",
+				"data-dragging": dataAttr(dragging),
+				"data-topmost": dataAttr(isTopmost),
+				"data-behind": dataAttr(!isTopmost),
+				"data-minimized": dataAttr(isMinimized),
+				"data-maximized": dataAttr(isMaximized),
+				"data-staged": dataAttr(isStaged),
+				style: {
+					width: "var(--width)",
+					height: "var(--height)",
+					overflow: isMinimized ? "hidden" : void 0
+				},
+				onFocus() {
+					send({ type: "CONTENT_FOCUS" });
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (event.key === "Escape" && isTopmost) {
+						send({ type: "ESCAPE" });
+						return;
+					}
+					if (event.currentTarget !== getEventTarget(event)) return;
+					const step = getEventStep(event) * prop("gridSize");
+					const handler = {
+						ArrowLeft() {
+							send({
+								type: "MOVE",
+								direction: "left",
+								step
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "MOVE",
+								direction: "right",
+								step
+							});
+						},
+						ArrowUp() {
+							send({
+								type: "MOVE",
+								direction: "up",
+								step
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "MOVE",
+								direction: "down",
+								step
+							});
+						}
+					}[getEventKey(event, { dir: prop("dir") })];
+					if (handler) {
+						event.preventDefault();
+						handler(event);
+					}
+				}
+			});
+		},
+		getCloseTriggerProps() {
+			return normalize.button({
+				...parts.closeTrigger.attrs,
+				dir: prop("dir"),
+				disabled: prop("disabled"),
+				"aria-label": "Close Window",
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: "CLOSE" });
+				}
+			});
+		},
+		getStageTriggerProps(props) {
+			if (!validStages.has(props.stage)) throw new Error(`[wirekyt] Invalid stage: ${props.stage}. Must be one of: ${Array.from(validStages).join(", ")}`);
+			const translations = prop("translations");
+			const actionProps = match(props.stage, {
+				minimized: () => ({
+					"aria-label": translations.minimize,
+					hidden: isStaged
+				}),
+				maximized: () => ({
+					"aria-label": translations.maximize,
+					hidden: isStaged
+				}),
+				default: () => ({
+					"aria-label": translations.restore,
+					hidden: !isStaged
+				})
+			});
+			return normalize.button({
+				...parts.stageTrigger.attrs,
+				dir: prop("dir"),
+				disabled: prop("disabled"),
+				"data-stage": props.stage,
+				...actionProps,
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!prop("resizable")) return;
+					const type = match(props.stage, {
+						minimized: () => "MINIMIZE",
+						maximized: () => "MAXIMIZE",
+						default: () => "RESTORE"
+					});
+					send({ type: type.toUpperCase() });
+				}
+			});
+		},
+		getResizeTriggerProps(props) {
+			return normalize.element({
+				...parts.resizeTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(!canResize),
+				"data-axis": props.axis,
+				onPointerDown(event) {
+					if (!canResize) return;
+					if (!isLeftClick(event)) return;
+					event.currentTarget.setPointerCapture(event.pointerId);
+					event.stopPropagation();
+					send({
+						type: "RESIZE_START",
+						axis: props.axis,
+						position: {
+							x: event.clientX,
+							y: event.clientY
+						}
+					});
+				},
+				onPointerUp(event) {
+					if (!canResize) return;
+					const node = event.currentTarget;
+					if (node.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId);
+				},
+				style: {
+					position: "absolute",
+					touchAction: "none",
+					...getResizeAxisStyle(props.axis)
+				}
+			});
+		},
+		getDragTriggerProps() {
+			return normalize.element({
+				...parts.dragTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(!canDrag),
+				onPointerDown(event) {
+					if (!canDrag) return;
+					if (!isLeftClick(event)) return;
+					const target = getEventTarget(event);
+					if (target?.closest("button") || target?.closest("[data-no-drag]")) return;
+					event.currentTarget.setPointerCapture(event.pointerId);
+					event.stopPropagation();
+					send({
+						type: "DRAG_START",
+						pointerId: event.pointerId,
+						position: {
+							x: event.clientX,
+							y: event.clientY
+						}
+					});
+				},
+				onPointerUp(event) {
+					if (!canDrag) return;
+					const node = event.currentTarget;
+					if (node.hasPointerCapture(event.pointerId)) node.releasePointerCapture(event.pointerId);
+				},
+				onDoubleClick(event) {
+					if (event.defaultPrevented) return;
+					if (!prop("resizable")) return;
+					send({ type: isStaged ? "RESTORE" : "MAXIMIZE" });
+				},
+				style: {
+					WebkitUserSelect: "none",
+					userSelect: "none",
+					touchAction: "none",
+					cursor: "move"
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(prop("disabled")),
+				"data-stage": context.get("stage"),
+				"data-minimized": dataAttr(isMinimized),
+				"data-maximized": dataAttr(isMaximized),
+				"data-staged": dataAttr(isStaged)
+			});
+		},
+		getTitleProps() {
+			return normalize.element({
+				...parts.title.attrs,
+				dir: prop("dir"),
+				id: getTitleId(scope)
+			});
+		},
+		getHeaderProps() {
+			return normalize.element({
+				...parts.header.attrs,
+				dir: prop("dir"),
+				id: getHeaderId(scope),
+				"data-dragging": dataAttr(dragging),
+				"data-topmost": dataAttr(isTopmost),
+				"data-behind": dataAttr(!isTopmost),
+				"data-minimized": dataAttr(isMinimized),
+				"data-maximized": dataAttr(isMaximized),
+				"data-staged": dataAttr(isStaged)
+			});
+		},
+		getBodyProps() {
+			return normalize.element({
+				...parts.body.attrs,
+				dir: prop("dir"),
+				"data-dragging": dataAttr(dragging),
+				"data-minimized": dataAttr(isMinimized),
+				"data-maximized": dataAttr(isMaximized),
+				"data-staged": dataAttr(isStaged),
+				hidden: isMinimized
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/floating-panel/store.ts
+const panelStack = proxy({
+	stack: [],
+	count() {
+		return this.stack.length;
+	},
+	add(panelId) {
+		if (this.stack.includes(panelId)) return;
+		this.stack.push(panelId);
+	},
+	remove(panelId) {
+		const index = this.stack.indexOf(panelId);
+		if (index < 0) return;
+		this.stack.splice(index, 1);
+	},
+	bringToFront(id) {
+		this.remove(id);
+		this.add(id);
+	},
+	isTopmost(id) {
+		return this.stack[this.stack.length - 1] === id;
+	},
+	indexOf(id) {
+		return this.stack.indexOf(id);
+	}
+});
+//#endregion
+//#region src/machines/floating-panel/machine.ts
+const { not, and } = createGuards();
+const defaultTranslations = {
+	minimize: "Minimize window",
+	maximize: "Maximize window",
+	restore: "Restore window"
+};
+const FALLBACK_SIZE = Object.freeze({
+	width: 320,
+	height: 240
+});
+const FALLBACK_POSITION = Object.freeze({
+	x: 300,
+	y: 100
+});
+const machine = createMachine({
+	props({ props }) {
+		ensureProps(props, ["id"], "floating-panel");
+		return {
+			strategy: "fixed",
+			gridSize: 1,
+			allowOverflow: true,
+			resizable: true,
+			draggable: true,
+			...props,
+			translations: {
+				...defaultTranslations,
+				...props.translations
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") ?? prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ prop, bindable }) {
+		return {
+			size: bindable(() => ({
+				defaultValue: prop("defaultSize") ?? FALLBACK_SIZE,
+				value: prop("size"),
+				isEqual: isSizeEqual,
+				hash(v) {
+					return `W:${v.width} H:${v.height}`;
+				},
+				onChange(value) {
+					prop("onSizeChange")?.({ size: value });
+				}
+			})),
+			position: bindable(() => ({
+				defaultValue: prop("defaultPosition") ?? FALLBACK_POSITION,
+				value: prop("position"),
+				isEqual: isPointEqual,
+				hash(v) {
+					return `X:${v.x} Y:${v.y}`;
+				},
+				onChange(value) {
+					prop("onPositionChange")?.({ position: value });
+				}
+			})),
+			stage: bindable(() => ({
+				defaultValue: "default",
+				onChange(value) {
+					prop("onStageChange")?.({ stage: value });
+				}
+			})),
+			lastEventPosition: bindable(() => ({ defaultValue: null })),
+			prevPosition: bindable(() => ({ defaultValue: null })),
+			prevSize: bindable(() => ({ defaultValue: null })),
+			isTopmost: bindable(() => ({ defaultValue: void 0 }))
+		};
+	},
+	computed: {
+		isMaximized: ({ context }) => context.get("stage") === "maximized",
+		isMinimized: ({ context }) => context.get("stage") === "minimized",
+		isStaged: ({ context }) => context.get("stage") !== "default",
+		hasSpecifiedPosition: ({ prop }) => prop("defaultPosition") != null || prop("position") != null,
+		canResize: ({ context, prop }) => prop("resizable") && !prop("disabled") && context.get("stage") === "default",
+		canDrag: ({ prop, computed }) => prop("draggable") && !prop("disabled") && !computed("isMaximized")
+	},
+	watch({ track, context, action, prop }) {
+		track([() => context.hash("position")], () => {
+			action(["setPositionStyle"]);
+		});
+		track([() => context.hash("size")], () => {
+			action(["setSizeStyle"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	effects: ["trackPanelStack"],
+	on: {
+		CONTENT_FOCUS: { actions: ["bringToFrontOfPanelStack"] },
+		SET_POSITION: { actions: ["setPosition"] },
+		SET_SIZE: { actions: ["setSize"] }
+	},
+	states: {
+		closed: {
+			tags: ["closed"],
+			on: {
+				"CONTROLLED.OPEN": {
+					target: "open",
+					actions: [
+						"setAnchorPosition",
+						"setPositionStyle",
+						"setSizeStyle",
+						"setInitialFocus"
+					]
+				},
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"invokeOnOpen",
+						"setAnchorPosition",
+						"setPositionStyle",
+						"setSizeStyle",
+						"setInitialFocus"
+					]
+				}]
+			}
+		},
+		open: {
+			tags: ["open"],
+			entry: ["bringToFrontOfPanelStack"],
+			initial: "idle",
+			on: {
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["resetRect", "setFinalFocus"]
+				},
+				CLOSE: [{
+					guard: "isOpenControlled",
+					target: "closed",
+					actions: ["invokeOnClose", "setFinalFocus"]
+				}, {
+					target: "closed",
+					actions: [
+						"invokeOnClose",
+						"resetRect",
+						"setFinalFocus"
+					]
+				}]
+			},
+			states: {
+				idle: {
+					effects: ["trackBoundaryRect"],
+					on: {
+						DRAG_START: {
+							guard: not("isMaximized"),
+							target: "dragging",
+							actions: ["setPrevPosition"]
+						},
+						RESIZE_START: {
+							guard: not("isMinimized"),
+							target: "resizing",
+							actions: ["setPrevSize"]
+						},
+						ESCAPE: [{
+							guard: and("isOpenControlled", "closeOnEsc"),
+							actions: ["invokeOnClose"]
+						}, {
+							guard: "closeOnEsc",
+							target: "closed",
+							actions: [
+								"invokeOnClose",
+								"resetRect",
+								"setFinalFocus"
+							]
+						}],
+						MINIMIZE: { actions: ["setMinimized"] },
+						MAXIMIZE: { actions: ["setMaximized"] },
+						RESTORE: { actions: ["setRestored"] },
+						MOVE: { actions: ["setPositionFromKeyboard"] }
+					}
+				},
+				dragging: {
+					effects: ["trackPointerMove"],
+					on: {
+						DRAG: { actions: ["setPositionFromDrag"] },
+						DRAG_END: {
+							target: "idle",
+							actions: ["invokeOnDragEnd", "clearPrevPosition"]
+						},
+						ESCAPE: {
+							target: "idle",
+							actions: ["restorePosition", "clearPrevPosition"]
+						}
+					}
+				},
+				resizing: {
+					effects: ["trackPointerMove"],
+					on: {
+						DRAG: { actions: ["setSizeFromDrag"] },
+						DRAG_END: {
+							target: "idle",
+							actions: ["invokeOnResizeEnd", "clearPrevSize"]
+						},
+						ESCAPE: {
+							target: "idle",
+							actions: ["restoreSize", "clearPrevSize"]
+						}
+					}
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			closeOnEsc: ({ prop }) => !!prop("closeOnEscape"),
+			isMaximized: ({ context }) => context.get("stage") === "maximized",
+			isMinimized: ({ context }) => context.get("stage") === "minimized",
+			isOpenControlled: ({ prop }) => prop("open") != void 0
+		},
+		effects: {
+			trackPointerMove({ scope, send, event: evt, prop }) {
+				const doc = scope.getDoc();
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				return trackPointerMove(doc, {
+					onPointerMove({ point, event }) {
+						const { altKey, shiftKey } = event;
+						send({
+							type: "DRAG",
+							position: {
+								x: clampValue(point.x, boundaryRect.x, boundaryRect.x + boundaryRect.width),
+								y: clampValue(point.y, boundaryRect.y, boundaryRect.y + boundaryRect.height)
+							},
+							axis: evt.axis,
+							altKey,
+							shiftKey
+						});
+					},
+					onPointerUp() {
+						send({ type: "DRAG_END" });
+					}
+				});
+			},
+			trackBoundaryRect({ context, scope, prop, computed }) {
+				const win = scope.getWin();
+				let skip = true;
+				const exec = () => {
+					if (skip) {
+						skip = false;
+						return;
+					}
+					const boundaryEl = prop("getBoundaryEl")?.();
+					let boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+					if (!computed("isMaximized")) boundaryRect = constrainRect({
+						...context.get("position"),
+						...context.get("size")
+					}, boundaryRect);
+					context.set("size", pick(boundaryRect, ["width", "height"]));
+					context.set("position", pick(boundaryRect, ["x", "y"]));
+				};
+				const boundaryEl = prop("getBoundaryEl")?.();
+				if (isHTMLElement(boundaryEl)) return resizeObserverBorderBox.observe(boundaryEl, exec);
+				return addDomEvent(win, "resize", exec);
+			},
+			trackPanelStack({ context, scope }) {
+				const unsub = subscribe(panelStack, () => {
+					context.set("isTopmost", panelStack.isTopmost(scope.id));
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const index = panelStack.indexOf(scope.id);
+					if (index === -1) return;
+					contentEl.style.setProperty("--z-index", `${index + 1}`);
+				});
+				return () => {
+					panelStack.remove(scope.id);
+					unsub();
+				};
+			}
+		},
+		actions: {
+			setPosition({ context, event, prop, scope }) {
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, prop("allowOverflow"));
+				const position = clampPoint(event.position, context.get("size"), boundaryRect);
+				context.set("position", position);
+			},
+			setSize({ context, event, scope, prop }) {
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				let nextSize = event.size;
+				nextSize = clampSize(nextSize, prop("minSize"), prop("maxSize"));
+				nextSize = clampSize(nextSize, prop("minSize"), boundaryRect);
+				const nextPosition = clampPoint(context.get("position"), nextSize, boundaryRect);
+				context.set("size", nextSize);
+				context.set("position", nextPosition);
+			},
+			setAnchorPosition({ context, computed, prop, scope }) {
+				if (computed("hasSpecifiedPosition")) return;
+				const hasPrevRect = context.get("prevPosition") || context.get("prevSize");
+				if (prop("persistRect") && hasPrevRect) return;
+				const triggerRect = getTriggerEl(scope);
+				const boundaryRect = getBoundaryRect(scope, prop("getBoundaryEl")?.(), false);
+				let anchorPosition = prop("getAnchorPosition")?.({
+					triggerRect: triggerRect ? DOMRect.fromRect(getElementRect(triggerRect)) : null,
+					boundaryRect: DOMRect.fromRect(boundaryRect)
+				});
+				if (!anchorPosition) {
+					const size = context.get("size");
+					anchorPosition = {
+						x: boundaryRect.x + (boundaryRect.width - size.width) / 2,
+						y: boundaryRect.y + (boundaryRect.height - size.height) / 2
+					};
+				}
+				if (!anchorPosition) return;
+				context.set("position", anchorPosition);
+			},
+			setPrevPosition({ context, event }) {
+				context.set("prevPosition", { ...context.get("position") });
+				context.set("lastEventPosition", event.position);
+			},
+			clearPrevPosition({ context, prop }) {
+				if (!prop("persistRect")) context.set("prevPosition", null);
+				context.set("lastEventPosition", null);
+			},
+			restorePosition({ context }) {
+				const prevPosition = context.get("prevPosition");
+				if (prevPosition) context.set("position", prevPosition);
+			},
+			setPositionFromDrag({ context, event, prop, scope }) {
+				let diff = subtractPoints(event.position, context.get("lastEventPosition"));
+				diff.x = Math.round(diff.x / prop("gridSize")) * prop("gridSize");
+				diff.y = Math.round(diff.y / prop("gridSize")) * prop("gridSize");
+				const prevPosition = context.get("prevPosition");
+				if (!prevPosition) return;
+				let position = addPoints(prevPosition, diff);
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, prop("allowOverflow"));
+				position = clampPoint(position, context.get("size"), boundaryRect);
+				context.set("position", position);
+			},
+			setPositionStyle({ scope, context }) {
+				const el = getPositionerEl(scope);
+				const position = context.get("position");
+				el?.style.setProperty("--x", `${position.x}px`);
+				el?.style.setProperty("--y", `${position.y}px`);
+			},
+			resetRect({ context, prop }) {
+				context.set("stage", "default");
+				if (!prop("persistRect")) {
+					context.set("position", context.initial("position"));
+					context.set("size", context.initial("size"));
+				}
+			},
+			setPrevSize({ context, event }) {
+				context.set("prevSize", { ...context.get("size") });
+				context.set("prevPosition", { ...context.get("position") });
+				context.set("lastEventPosition", event.position);
+			},
+			clearPrevSize({ context }) {
+				context.set("prevSize", null);
+				context.set("prevPosition", null);
+				context.set("lastEventPosition", null);
+			},
+			restoreSize({ context }) {
+				const prevSize = context.get("prevSize");
+				if (prevSize) context.set("size", prevSize);
+				const prevPosition = context.get("prevPosition");
+				if (prevPosition) context.set("position", prevPosition);
+			},
+			setSizeFromDrag({ context, event, scope, prop }) {
+				const prevSize = context.get("prevSize");
+				const prevPosition = context.get("prevPosition");
+				const lastEventPosition = context.get("lastEventPosition");
+				if (!prevSize || !prevPosition || !lastEventPosition) return;
+				const nextRect = resizeRect(createRect({
+					...prevPosition,
+					...prevSize
+				}), subtractPoints(event.position, lastEventPosition), event.axis, {
+					scalingOriginMode: event.altKey ? "center" : "extent",
+					lockAspectRatio: !!prop("lockAspectRatio") || event.shiftKey
+				});
+				let nextSize = pick(nextRect, ["width", "height"]);
+				let nextPosition = pick(nextRect, ["x", "y"]);
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				nextSize = clampSize(nextSize, prop("minSize"), prop("maxSize"));
+				nextSize = clampSize(nextSize, prop("minSize"), boundaryRect);
+				context.set("size", nextSize);
+				if (nextPosition) {
+					const point = clampPoint(nextPosition, nextSize, boundaryRect);
+					context.set("position", point);
+				}
+			},
+			setSizeStyle({ scope, context }) {
+				queueMicrotask(() => {
+					const el = getPositionerEl(scope);
+					const size = context.get("size");
+					el?.style.setProperty("--width", `${size.width}px`);
+					el?.style.setProperty("--height", `${size.height}px`);
+				});
+			},
+			setMaximized({ context, prop, scope }) {
+				if (context.get("stage") === "maximized") return;
+				const wasDefault = context.get("stage") === "default";
+				const currentSize = context.get("size");
+				const currentPosition = context.get("position");
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				const nextPosition = pick(boundaryRect, ["x", "y"]);
+				const nextSize = pick(boundaryRect, ["height", "width"]);
+				context.set("stage", "maximized");
+				if (wasDefault) {
+					context.set("prevSize", currentSize);
+					context.set("prevPosition", currentPosition);
+				}
+				context.set("position", nextPosition);
+				context.set("size", nextSize);
+			},
+			setMinimized({ context, scope }) {
+				if (context.get("stage") === "minimized") return;
+				const wasDefault = context.get("stage") === "default";
+				const currentSize = context.get("size");
+				const currentPosition = context.get("position");
+				context.set("stage", "minimized");
+				if (wasDefault) {
+					context.set("prevSize", currentSize);
+					context.set("prevPosition", currentPosition);
+				}
+				const headerEl = getHeaderEl(scope);
+				if (!headerEl) return;
+				const size = {
+					...currentSize,
+					height: headerEl?.offsetHeight
+				};
+				context.set("size", size);
+			},
+			setRestored({ context, prop, scope }) {
+				const boundaryRect = getBoundaryRect(scope, prop("getBoundaryEl")?.(), false);
+				context.set("stage", "default");
+				let restoredSize = context.get("size");
+				const prevSize = context.get("prevSize");
+				if (prevSize) {
+					restoredSize = clampSize(prevSize, prop("minSize"), prop("maxSize"));
+					restoredSize = clampSize(restoredSize, prop("minSize"), boundaryRect);
+				}
+				let restoredPosition = context.get("position");
+				const prevPosition = context.get("prevPosition");
+				if (prevPosition) restoredPosition = clampPoint(prevPosition, restoredSize, boundaryRect);
+				context.set("size", restoredSize);
+				context.set("position", restoredPosition);
+				context.set("prevSize", null);
+				context.set("prevPosition", null);
+			},
+			setPositionFromKeyboard({ context, event, prop, scope }) {
+				invariant(event.step == null, "step is required");
+				const position = context.get("position");
+				const step = event.step;
+				let nextPosition = match(event.direction, {
+					left: {
+						x: position.x - step,
+						y: position.y
+					},
+					right: {
+						x: position.x + step,
+						y: position.y
+					},
+					up: {
+						x: position.x,
+						y: position.y - step
+					},
+					down: {
+						x: position.x,
+						y: position.y + step
+					}
+				});
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				nextPosition = clampPoint(nextPosition, context.get("size"), boundaryRect);
+				context.set("position", nextPosition);
+			},
+			bringToFrontOfPanelStack({ prop }) {
+				panelStack.bringToFront(prop("id"));
+			},
+			invokeOnOpen({ prop }) {
+				prop("onOpenChange")?.({ open: true });
+			},
+			invokeOnClose({ prop }) {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnDragEnd({ context, prop }) {
+				prop("onPositionChangeEnd")?.({ position: context.get("position") });
+			},
+			invokeOnResizeEnd({ context, prop }) {
+				prop("onSizeChangeEnd")?.({ size: context.get("size") });
+			},
+			setFinalFocus({ scope, prop }) {
+				if (prop("restoreFocus") === false) return;
+				raf(() => {
+					(prop("finalFocusEl")?.() ?? getTriggerEl(scope))?.focus({ preventScroll: true });
+				});
+			},
+			setInitialFocus({ scope, prop }) {
+				raf(() => {
+					(prop("initialFocusEl")?.() ?? getContentEl(scope))?.focus({ preventScroll: true });
+				});
+			},
+			toggleVisibility({ send, prop, event }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/floating-panel/props.ts
+const props = createProps()([
+	"allowOverflow",
+	"closeOnEscape",
+	"defaultOpen",
+	"defaultPosition",
+	"defaultSize",
+	"dir",
+	"disabled",
+	"draggable",
+	"finalFocusEl",
+	"getAnchorPosition",
+	"getBoundaryEl",
+	"getRootNode",
+	"gridSize",
+	"id",
+	"initialFocusEl",
+	"ids",
+	"lockAspectRatio",
+	"maxSize",
+	"minSize",
+	"onOpenChange",
+	"onPositionChange",
+	"onPositionChangeEnd",
+	"onSizeChange",
+	"onSizeChangeEnd",
+	"onStageChange",
+	"open",
+	"persistRect",
+	"position",
+	"resizable",
+	"restoreFocus",
+	"size",
+	"strategy",
+	"translations"
+]);
+const splitProps = createSplitProps(props);
+const resizeTriggerProps = createProps()(["axis"]);
+const splitResizeTriggerProps = createSplitProps(resizeTriggerProps);
+const resizeTriggerAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"nw",
+	"se",
+	"sw"
+];
+//#endregion
+export { anatomy, connect, machine, props, resizeTriggerAxes, resizeTriggerProps, splitProps, splitResizeTriggerProps };