@sprawlify/primitives 0.0.1

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

@@ -0,0 +1,995 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_rect_utils = require('../../rect-utils-DKLRhP8G.cjs');
+const require_store = require('../../store-BZcXv49B.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/floating-panel/floating-panel.anatomy.ts
+const anatomy = require_create_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/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 (require_dom_query.isHTMLElement(boundaryEl)) boundaryRect = require_rect_utils.getElementRect(boundaryEl);
+	else boundaryRect = require_rect_utils.getWindowRect(ctx.getWin());
+	if (allowOverflow) boundaryRect = require_rect_utils.createRect({
+		x: -boundaryRect.width,
+		y: boundaryRect.minY,
+		width: boundaryRect.width * 3,
+		height: boundaryRect.height * 2
+	});
+	return require_utils.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/floating-panel.connect.ts
+const validStages = 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$1) {
+			send({
+				type: "SET_POSITION",
+				position: position$1
+			});
+		},
+		setSize(size$1) {
+			send({
+				type: "SET_SIZE",
+				size: size$1
+			});
+		},
+		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": require_dom_query.dataAttr(dragging),
+				"aria-controls": getContentId(scope),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (prop("disabled")) return;
+					send({
+						type: state.hasTag("open") ? "CLOSE" : "OPEN",
+						src: "trigger"
+					});
+				}
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: getPositionerId(scope),
+				style: {
+					"--width": require_utils.toPx(size?.width),
+					"--height": require_utils.toPx(size?.height),
+					"--x": require_utils.toPx(position?.x),
+					"--y": require_utils.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": require_dom_query.dataAttr(dragging),
+				"data-topmost": require_dom_query.dataAttr(isTopmost),
+				"data-behind": require_dom_query.dataAttr(!isTopmost),
+				"data-minimized": require_dom_query.dataAttr(isMinimized),
+				"data-maximized": require_dom_query.dataAttr(isMaximized),
+				"data-staged": require_dom_query.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.currentTarget !== require_dom_query.getEventTarget(event)) return;
+					const step = require_dom_query.getEventStep(event) * prop("gridSize");
+					const handler = {
+						Escape() {
+							if (!isTopmost) return;
+							send({ type: "ESCAPE" });
+						},
+						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
+							});
+						}
+					}[require_dom_query.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$1) {
+			if (!validStages.has(props$1.stage)) throw new Error(`[sprawlify-js] Invalid stage: ${props$1.stage}. Must be one of: ${Array.from(validStages).join(", ")}`);
+			const translations = prop("translations");
+			const actionProps = require_utils.match(props$1.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"),
+				...actionProps,
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!prop("resizable")) return;
+					send({ type: require_utils.match(props$1.stage, {
+						minimized: () => "MINIMIZE",
+						maximized: () => "MAXIMIZE",
+						default: () => "RESTORE"
+					}).toUpperCase() });
+				}
+			});
+		},
+		getResizeTriggerProps(props$1) {
+			return normalize.element({
+				...parts.resizeTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(!canResize),
+				"data-axis": props$1.axis,
+				onPointerDown(event) {
+					if (!canResize) return;
+					if (!require_dom_query.isLeftClick(event)) return;
+					event.currentTarget.setPointerCapture(event.pointerId);
+					event.stopPropagation();
+					send({
+						type: "RESIZE_START",
+						axis: props$1.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$1.axis)
+				}
+			});
+		},
+		getDragTriggerProps() {
+			return normalize.element({
+				...parts.dragTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(!canDrag),
+				onPointerDown(event) {
+					if (!canDrag) return;
+					if (!require_dom_query.isLeftClick(event)) return;
+					const target = require_dom_query.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: isMaximized ? "RESTORE" : "MAXIMIZE" });
+				},
+				style: {
+					WebkitUserSelect: "none",
+					userSelect: "none",
+					touchAction: "none",
+					cursor: "move"
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(prop("disabled")),
+				"data-stage": context.get("stage"),
+				"data-minimized": require_dom_query.dataAttr(isMinimized),
+				"data-maximized": require_dom_query.dataAttr(isMaximized),
+				"data-staged": require_dom_query.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": require_dom_query.dataAttr(dragging),
+				"data-topmost": require_dom_query.dataAttr(isTopmost),
+				"data-behind": require_dom_query.dataAttr(!isTopmost),
+				"data-minimized": require_dom_query.dataAttr(isMinimized),
+				"data-maximized": require_dom_query.dataAttr(isMaximized),
+				"data-staged": require_dom_query.dataAttr(isStaged)
+			});
+		},
+		getBodyProps() {
+			return normalize.element({
+				...parts.body.attrs,
+				dir: prop("dir"),
+				"data-dragging": require_dom_query.dataAttr(dragging),
+				"data-minimized": require_dom_query.dataAttr(isMinimized),
+				"data-maximized": require_dom_query.dataAttr(isMaximized),
+				"data-staged": require_dom_query.dataAttr(isStaged),
+				hidden: isMinimized
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/floating-panel/floating-panel.store.ts
+const panelStack = require_store.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/floating-panel.machine.ts
+const { not, and } = require_core.createGuards();
+const defaultTranslations = {
+	minimize: "Minimize window",
+	maximize: "Maximize window",
+	restore: "Restore window"
+};
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		require_utils.ensureProps(props$1, ["id"], "floating-panel");
+		return {
+			strategy: "fixed",
+			gridSize: 1,
+			defaultSize: {
+				width: 320,
+				height: 240
+			},
+			defaultPosition: {
+				x: 300,
+				y: 100
+			},
+			allowOverflow: true,
+			resizable: true,
+			draggable: true,
+			...props$1,
+			hasSpecifiedPosition: !!props$1.defaultPosition || !!props$1.position,
+			translations: {
+				...defaultTranslations,
+				...props$1.translations
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ prop, bindable }) {
+		return {
+			size: bindable(() => ({
+				defaultValue: prop("defaultSize"),
+				value: prop("size"),
+				isEqual: require_rect_utils.isSizeEqual,
+				sync: true,
+				hash(v) {
+					return `W:${v.width} H:${v.height}`;
+				},
+				onChange(value) {
+					prop("onSizeChange")?.({ size: value });
+				}
+			})),
+			position: bindable(() => ({
+				defaultValue: prop("defaultPosition"),
+				value: prop("position"),
+				isEqual: require_rect_utils.isPointEqual,
+				sync: true,
+				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",
+		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",
+						"focusContentEl"
+					]
+				},
+				OPEN: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"invokeOnOpen",
+						"setAnchorPosition",
+						"setPositionStyle",
+						"setSizeStyle",
+						"focusContentEl"
+					]
+				}]
+			}
+		},
+		open: {
+			tags: ["open"],
+			entry: ["bringToFrontOfPanelStack"],
+			effects: ["trackBoundaryRect"],
+			on: {
+				DRAG_START: {
+					guard: not("isMaximized"),
+					target: "open.dragging",
+					actions: ["setPrevPosition"]
+				},
+				RESIZE_START: {
+					guard: not("isMinimized"),
+					target: "open.resizing",
+					actions: ["setPrevSize"]
+				},
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["resetRect", "focusTriggerEl"]
+				},
+				CLOSE: [{
+					guard: "isOpenControlled",
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: [
+						"invokeOnClose",
+						"resetRect",
+						"focusTriggerEl"
+					]
+				}],
+				ESCAPE: [{
+					guard: and("isOpenControlled", "closeOnEsc"),
+					actions: ["invokeOnClose"]
+				}, {
+					guard: "closeOnEsc",
+					target: "closed",
+					actions: [
+						"invokeOnClose",
+						"resetRect",
+						"focusTriggerEl"
+					]
+				}],
+				MINIMIZE: { actions: ["setMinimized"] },
+				MAXIMIZE: { actions: ["setMaximized"] },
+				RESTORE: { actions: ["setRestored"] },
+				MOVE: { actions: ["setPositionFromKeyboard"] }
+			}
+		},
+		"open.dragging": {
+			tags: ["open"],
+			effects: ["trackPointerMove"],
+			exit: ["clearPrevPosition"],
+			on: {
+				DRAG: { actions: ["setPosition"] },
+				DRAG_END: {
+					target: "open",
+					actions: ["invokeOnDragEnd"]
+				},
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["resetRect"]
+				},
+				CLOSE: [{
+					guard: "isOpenControlled",
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose", "resetRect"]
+				}],
+				ESCAPE: { target: "open" }
+			}
+		},
+		"open.resizing": {
+			tags: ["open"],
+			effects: ["trackPointerMove"],
+			exit: ["clearPrevSize"],
+			on: {
+				DRAG: { actions: ["setSize"] },
+				DRAG_END: {
+					target: "open",
+					actions: ["invokeOnResizeEnd"]
+				},
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["resetRect"]
+				},
+				CLOSE: [{
+					guard: "isOpenControlled",
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose", "resetRect"]
+				}],
+				ESCAPE: { target: "open" }
+			}
+		}
+	},
+	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 require_dom_query.trackPointerMove(doc, {
+					onPointerMove({ point, event }) {
+						const { altKey, shiftKey } = event;
+						send({
+							type: "DRAG",
+							position: {
+								x: require_utils.clampValue(point.x, boundaryRect.x, boundaryRect.x + boundaryRect.width),
+								y: require_utils.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$1 = prop("getBoundaryEl")?.();
+					let boundaryRect = getBoundaryRect(scope, boundaryEl$1, false);
+					if (!computed("isMaximized")) boundaryRect = require_rect_utils.constrainRect({
+						...context.get("position"),
+						...context.get("size")
+					}, boundaryRect);
+					context.set("size", require_utils.pick(boundaryRect, ["width", "height"]));
+					context.set("position", require_utils.pick(boundaryRect, ["x", "y"]));
+				};
+				const boundaryEl = prop("getBoundaryEl")?.();
+				if (require_dom_query.isHTMLElement(boundaryEl)) return require_dom_query.resizeObserverBorderBox.observe(boundaryEl, exec);
+				return require_dom_query.addDomEvent(win, "resize", exec);
+			},
+			trackPanelStack({ context, scope }) {
+				const unsub = require_store.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: {
+			setAnchorPosition({ context, prop, scope }) {
+				if (prop("hasSpecifiedPosition")) return;
+				const hasPrevRect = context.get("prevPosition") || context.get("prevSize");
+				if (prop("persistRect") && hasPrevRect) return;
+				require_dom_query.raf(() => {
+					const triggerRect = getTriggerEl(scope);
+					const boundaryRect = getBoundaryRect(scope, prop("getBoundaryEl")?.(), false);
+					let anchorPosition = prop("getAnchorPosition")?.({
+						triggerRect: triggerRect ? DOMRect.fromRect(require_rect_utils.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);
+			},
+			setPosition({ context, event, prop, scope }) {
+				let diff = require_rect_utils.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 = require_rect_utils.addPoints(prevPosition, diff);
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, prop("allowOverflow"));
+				position = require_rect_utils.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);
+			},
+			setSize({ 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 = require_rect_utils.resizeRect(require_rect_utils.createRect({
+					...prevPosition,
+					...prevSize
+				}), require_rect_utils.subtractPoints(event.position, lastEventPosition), event.axis, {
+					scalingOriginMode: event.altKey ? "center" : "extent",
+					lockAspectRatio: !!prop("lockAspectRatio") || event.shiftKey
+				});
+				let nextSize = require_utils.pick(nextRect, ["width", "height"]);
+				let nextPosition = require_utils.pick(nextRect, ["x", "y"]);
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				nextSize = require_rect_utils.clampSize(nextSize, prop("minSize"), prop("maxSize"));
+				nextSize = require_rect_utils.clampSize(nextSize, prop("minSize"), boundaryRect);
+				context.set("size", nextSize);
+				if (nextPosition) {
+					const point = require_rect_utils.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 }) {
+				context.set("stage", "maximized");
+				context.set("prevSize", context.get("size"));
+				context.set("prevPosition", context.get("position"));
+				const boundaryEl = prop("getBoundaryEl")?.();
+				const boundaryRect = getBoundaryRect(scope, boundaryEl, false);
+				context.set("position", require_utils.pick(boundaryRect, ["x", "y"]));
+				context.set("size", require_utils.pick(boundaryRect, ["height", "width"]));
+			},
+			setMinimized({ context, scope }) {
+				context.set("stage", "minimized");
+				context.set("prevSize", context.get("size"));
+				context.set("prevPosition", context.get("position"));
+				const headerEl = getHeaderEl(scope);
+				if (!headerEl) return;
+				const size = {
+					...context.get("size"),
+					height: headerEl?.offsetHeight
+				};
+				context.set("size", size);
+			},
+			setRestored({ context, prop, scope }) {
+				const boundaryRect = getBoundaryRect(scope, prop("getBoundaryEl")?.(), false);
+				context.set("stage", "default");
+				const prevSize = context.get("prevSize");
+				if (prevSize) {
+					let nextSize = prevSize;
+					nextSize = require_rect_utils.clampSize(nextSize, prop("minSize"), prop("maxSize"));
+					nextSize = require_rect_utils.clampSize(nextSize, prop("minSize"), boundaryRect);
+					context.set("size", nextSize);
+					context.set("prevSize", null);
+				}
+				if (context.get("prevPosition")) {
+					let nextPosition = context.get("prevPosition");
+					nextPosition = require_rect_utils.clampPoint(nextPosition, context.get("size"), boundaryRect);
+					context.set("position", nextPosition);
+					context.set("prevPosition", null);
+				}
+			},
+			setPositionFromKeyboard({ context, event, prop, scope }) {
+				require_utils.invariant(event.step == null, "step is required");
+				const position = context.get("position");
+				const step = event.step;
+				let nextPosition = require_utils.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 = require_rect_utils.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") });
+			},
+			focusTriggerEl({ scope }) {
+				require_dom_query.raf(() => {
+					getTriggerEl(scope)?.focus();
+				});
+			},
+			focusContentEl({ scope }) {
+				require_dom_query.raf(() => {
+					getContentEl(scope)?.focus();
+				});
+			},
+			toggleVisibility({ send, prop, event }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/floating-panel/floating-panel.props.ts
+const props = require_create_props.createProps()([
+	"allowOverflow",
+	"closeOnEscape",
+	"defaultOpen",
+	"defaultPosition",
+	"defaultSize",
+	"dir",
+	"disabled",
+	"draggable",
+	"getAnchorPosition",
+	"getBoundaryEl",
+	"getRootNode",
+	"gridSize",
+	"id",
+	"ids",
+	"lockAspectRatio",
+	"maxSize",
+	"minSize",
+	"onOpenChange",
+	"onPositionChange",
+	"onPositionChangeEnd",
+	"onSizeChange",
+	"onSizeChangeEnd",
+	"onStageChange",
+	"open",
+	"persistRect",
+	"position",
+	"resizable",
+	"size",
+	"strategy",
+	"translations"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const resizeTriggerProps = require_create_props.createProps()(["axis"]);
+const splitResizeTriggerProps = require_utils.createSplitProps(resizeTriggerProps);
+const resizeTriggerAxes = [
+	"n",
+	"e",
+	"s",
+	"w",
+	"ne",
+	"nw",
+	"se",
+	"sw"
+];
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.resizeTriggerAxes = resizeTriggerAxes;
+exports.resizeTriggerProps = resizeTriggerProps;
+exports.splitProps = splitProps;
+exports.splitResizeTriggerProps = splitResizeTriggerProps;