grab 0.1.35 → 0.1.36

package/dist/renderer-CD-Ju8A3.js

@@ -0,0 +1,3205 @@
+/**
+ * @license MIT
+ *
+ * Copyright (c) 2025 Aiden Bai
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { A as createMemo, B as onMount, E as Show, L as mergeProps, O as createComponent, P as createSignal, R as on, T as Index, _ as setAttribute, a as clampToRange, b as template, c as isKeyboardEventTriggeredByInput, d as classList, f as className, h as memo, i as isMac, j as createRenderEffect, k as createEffect, l as isElementConnected, m as insert, n as saveToolbarState, p as delegateEvents, r as isEventFromOverlay, t as loadToolbarState, u as addEventListener, v as setStyleProperty, w as For, x as use, y as spread, z as onCleanup } from "./state-CFntkBxv.js";
+import { G as DROPDOWN_OFFSCREEN_POSITION, H as DRAG_LERP_FACTOR, J as LERP_CONVERGENCE_THRESHOLD_PX, K as FEEDBACK_DURATION_MS, M as nativeRequestAnimationFrame, R as ARROW_MAX_LABEL_WIDTH_RATIO, V as DEFAULT_ACTION_ID, W as DROPDOWN_EDGE_TRANSFORM_ORIGIN, at as OVERLAY_FILL_COLOR_DRAG, c as unfreezeGlobalAnimations, dt as TOOLBAR_DEFAULT_POSITION_RATIO, gt as supportsDisplayP3, ht as Z_INDEX_OVERLAY_CANVAS, i as unfreezePseudoStates, it as OVERLAY_FILL_COLOR_DEFAULT, j as nativeCancelAnimationFrame, l as openFile, lt as SELECTION_LABEL_OFFSCREEN_PX, mt as Z_INDEX_OVERLAY, nt as OVERLAY_BORDER_COLOR_DEFAULT, ot as PANEL_BACKGROUND, q as FROZEN_GLOW_COLOR, r as freezePseudoStates, rt as OVERLAY_BORDER_COLOR_DRAG, s as freezeGlobalAnimations, st as PANEL_SHADOW, t as freezeUpdates, tt as OPACITY_CONVERGENCE_THRESHOLD, ut as SELECTION_LERP_FACTOR, z as BASELINE_FRAME_DURATION_MS } from "./freeze-updates-D_ae-e4T.js";
+
+//#region src/utils/lerp.ts
+const lerp = (start, end, factor) => {
+	return start + (end - start) * factor;
+};
+
+//#endregion
+//#region src/utils/adjust-lerp-for-frame-duration.ts
+const adjustLerpForFrameDuration = (baselineLerpFactor, frameDurationMs) => {
+	const clampedFrameDurationMs = Math.max(frameDurationMs, 1);
+	return 1 - (1 - baselineLerpFactor) ** (clampedFrameDurationMs / BASELINE_FRAME_DURATION_MS);
+};
+
+//#endregion
+//#region src/components/overlay-canvas.tsx
+var _tmpl$$23 = /* @__PURE__ */ template(`<canvas data-react-grab-overlay-canvas style=position:fixed;top:0;left:0;pointer-events:none>`);
+const DEFAULT_LAYER_STYLE = {
+	borderColor: OVERLAY_BORDER_COLOR_DEFAULT,
+	fillColor: OVERLAY_FILL_COLOR_DEFAULT,
+	lerpFactor: SELECTION_LERP_FACTOR
+};
+const LAYER_STYLES = {
+	drag: {
+		borderColor: OVERLAY_BORDER_COLOR_DRAG,
+		fillColor: OVERLAY_FILL_COLOR_DRAG,
+		lerpFactor: DRAG_LERP_FACTOR
+	},
+	selection: DEFAULT_LAYER_STYLE,
+	grabbed: DEFAULT_LAYER_STYLE
+};
+const OverlayCanvas = (props) => {
+	let canvasRef;
+	let mainContext = null;
+	let canvasWidth = 0;
+	let canvasHeight = 0;
+	let devicePixelRatio = 1;
+	let animationFrameId = null;
+	let previousFrameTimestamp = null;
+	const layers = {
+		drag: {
+			canvas: null,
+			context: null
+		},
+		selection: {
+			canvas: null,
+			context: null
+		},
+		grabbed: {
+			canvas: null,
+			context: null
+		}
+	};
+	let selectionAnimations = [];
+	let dragAnimation = null;
+	let grabbedAnimations = [];
+	const canvasColorSpace = supportsDisplayP3() ? "display-p3" : "srgb";
+	const createOffscreenLayer = (layerWidth, layerHeight, scaleFactor) => {
+		const canvas = new OffscreenCanvas(layerWidth * scaleFactor, layerHeight * scaleFactor);
+		const context = canvas.getContext("2d", { colorSpace: canvasColorSpace });
+		if (context) context.scale(scaleFactor, scaleFactor);
+		return {
+			canvas,
+			context
+		};
+	};
+	const initializeCanvas = () => {
+		if (!canvasRef) return;
+		devicePixelRatio = Math.max(window.devicePixelRatio || 1, 2);
+		canvasWidth = window.innerWidth;
+		canvasHeight = window.innerHeight;
+		canvasRef.width = canvasWidth * devicePixelRatio;
+		canvasRef.height = canvasHeight * devicePixelRatio;
+		canvasRef.style.width = `${canvasWidth}px`;
+		canvasRef.style.height = `${canvasHeight}px`;
+		mainContext = canvasRef.getContext("2d", { colorSpace: canvasColorSpace });
+		if (mainContext) mainContext.scale(devicePixelRatio, devicePixelRatio);
+		for (const layerName of Object.keys(layers)) layers[layerName] = createOffscreenLayer(canvasWidth, canvasHeight, devicePixelRatio);
+	};
+	const parseBorderRadiusValue = (borderRadius) => {
+		if (!borderRadius) return 0;
+		const match = borderRadius.match(/^(\d+(?:\.\d+)?)/);
+		return match ? parseFloat(match[1]) : 0;
+	};
+	const createAnimatedBounds = (id, bounds, options) => ({
+		id,
+		current: {
+			x: bounds.x,
+			y: bounds.y,
+			width: bounds.width,
+			height: bounds.height
+		},
+		target: {
+			x: bounds.x,
+			y: bounds.y,
+			width: bounds.width,
+			height: bounds.height
+		},
+		borderRadius: parseBorderRadiusValue(bounds.borderRadius),
+		opacity: options?.opacity ?? 1,
+		targetOpacity: options?.targetOpacity ?? options?.opacity ?? 1,
+		createdAt: options?.createdAt,
+		fadeStartTimestamp: null,
+		isInitialized: true
+	});
+	const updateAnimationTarget = (animation, bounds, targetOpacity) => {
+		animation.target = {
+			x: bounds.x,
+			y: bounds.y,
+			width: bounds.width,
+			height: bounds.height
+		};
+		animation.borderRadius = parseBorderRadiusValue(bounds.borderRadius);
+		if (targetOpacity !== void 0) animation.targetOpacity = targetOpacity;
+	};
+	const resolveBoundsArray = (instance) => instance.boundsMultiple ?? [instance.bounds];
+	const drawRoundedRectangle = (context, rectX, rectY, rectWidth, rectHeight, cornerRadius, fillColor, strokeColor, opacity = 1) => {
+		if (rectWidth <= 0 || rectHeight <= 0) return;
+		const maxCornerRadius = Math.min(rectWidth / 2, rectHeight / 2);
+		const clampedCornerRadius = Math.min(cornerRadius, maxCornerRadius);
+		context.globalAlpha = opacity;
+		context.beginPath();
+		if (clampedCornerRadius > 0) context.roundRect(rectX, rectY, rectWidth, rectHeight, clampedCornerRadius);
+		else context.rect(rectX, rectY, rectWidth, rectHeight);
+		context.fillStyle = fillColor;
+		context.fill();
+		context.strokeStyle = strokeColor;
+		context.lineWidth = 1;
+		context.stroke();
+		context.globalAlpha = 1;
+	};
+	const renderDragLayer = () => {
+		const layer = layers.drag;
+		if (!layer.context) return;
+		const context = layer.context;
+		context.clearRect(0, 0, canvasWidth, canvasHeight);
+		if (!props.dragVisible || !dragAnimation) return;
+		const style = LAYER_STYLES.drag;
+		drawRoundedRectangle(context, dragAnimation.current.x, dragAnimation.current.y, dragAnimation.current.width, dragAnimation.current.height, dragAnimation.borderRadius, style.fillColor, style.borderColor);
+	};
+	const renderSelectionLayer = () => {
+		const layer = layers.selection;
+		if (!layer.context) return;
+		const context = layer.context;
+		context.clearRect(0, 0, canvasWidth, canvasHeight);
+		if (!props.selectionVisible) return;
+		const style = LAYER_STYLES.selection;
+		for (const animation of selectionAnimations) drawRoundedRectangle(context, animation.current.x, animation.current.y, animation.current.width, animation.current.height, animation.borderRadius, style.fillColor, style.borderColor, animation.opacity);
+	};
+	const renderBoundsLayer = (layerName, animations) => {
+		const layer = layers[layerName];
+		if (!layer.context) return;
+		const context = layer.context;
+		context.clearRect(0, 0, canvasWidth, canvasHeight);
+		const style = LAYER_STYLES[layerName];
+		for (const animation of animations) drawRoundedRectangle(context, animation.current.x, animation.current.y, animation.current.width, animation.current.height, animation.borderRadius, style.fillColor, style.borderColor, animation.opacity);
+	};
+	const compositeAllLayers = () => {
+		if (!mainContext || !canvasRef) return;
+		mainContext.setTransform(1, 0, 0, 1, 0, 0);
+		mainContext.clearRect(0, 0, canvasRef.width, canvasRef.height);
+		mainContext.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+		renderDragLayer();
+		renderSelectionLayer();
+		renderBoundsLayer("grabbed", grabbedAnimations);
+		for (const layerName of [
+			"drag",
+			"selection",
+			"grabbed"
+		]) {
+			const layer = layers[layerName];
+			if (layer.canvas) mainContext.drawImage(layer.canvas, 0, 0, canvasWidth, canvasHeight);
+		}
+	};
+	const interpolateBounds = (animation, lerpFactor, options) => {
+		const lerpedX = lerp(animation.current.x, animation.target.x, lerpFactor);
+		const lerpedY = lerp(animation.current.y, animation.target.y, lerpFactor);
+		const lerpedWidth = lerp(animation.current.width, animation.target.width, lerpFactor);
+		const lerpedHeight = lerp(animation.current.height, animation.target.height, lerpFactor);
+		const hasBoundsConverged = Math.abs(lerpedX - animation.target.x) < .5 && Math.abs(lerpedY - animation.target.y) < .5 && Math.abs(lerpedWidth - animation.target.width) < .5 && Math.abs(lerpedHeight - animation.target.height) < .5;
+		animation.current.x = hasBoundsConverged ? animation.target.x : lerpedX;
+		animation.current.y = hasBoundsConverged ? animation.target.y : lerpedY;
+		animation.current.width = hasBoundsConverged ? animation.target.width : lerpedWidth;
+		animation.current.height = hasBoundsConverged ? animation.target.height : lerpedHeight;
+		let hasOpacityConverged = true;
+		if (options?.interpolateOpacity) {
+			const lerpedOpacity = lerp(animation.opacity, animation.targetOpacity, lerpFactor);
+			hasOpacityConverged = Math.abs(lerpedOpacity - animation.targetOpacity) < OPACITY_CONVERGENCE_THRESHOLD;
+			animation.opacity = hasOpacityConverged ? animation.targetOpacity : lerpedOpacity;
+		}
+		return !hasBoundsConverged || !hasOpacityConverged;
+	};
+	const runAnimationFrame = () => {
+		const currentFrameTimestamp = performance.now();
+		const frameDurationMs = previousFrameTimestamp !== null ? currentFrameTimestamp - previousFrameTimestamp : BASELINE_FRAME_DURATION_MS;
+		previousFrameTimestamp = currentFrameTimestamp;
+		const dragLerpForFrame = adjustLerpForFrameDuration(LAYER_STYLES.drag.lerpFactor, frameDurationMs);
+		const selectionLerpForFrame = adjustLerpForFrameDuration(LAYER_STYLES.selection.lerpFactor, frameDurationMs);
+		const grabbedLerpForFrame = adjustLerpForFrameDuration(LAYER_STYLES.grabbed.lerpFactor, frameDurationMs);
+		let shouldContinueAnimating = false;
+		if (dragAnimation?.isInitialized) {
+			if (interpolateBounds(dragAnimation, dragLerpForFrame)) shouldContinueAnimating = true;
+		}
+		for (const animation of selectionAnimations) if (animation.isInitialized) {
+			if (interpolateBounds(animation, selectionLerpForFrame)) shouldContinueAnimating = true;
+		}
+		const currentTimestamp = Date.now();
+		grabbedAnimations = grabbedAnimations.filter((animation) => {
+			const isLabelAnimation = animation.id.startsWith("label-");
+			if (animation.isInitialized) {
+				if (interpolateBounds(animation, grabbedLerpForFrame)) shouldContinueAnimating = true;
+			}
+			if (isLabelAnimation && animation.targetOpacity === 0) {
+				if (animation.fadeStartTimestamp === null) animation.fadeStartTimestamp = currentFrameTimestamp;
+				const labelElapsed = currentFrameTimestamp - animation.fadeStartTimestamp;
+				const labelProgress = Math.min(1, labelElapsed / 150);
+				const labelEaseOut = 1 - (1 - labelProgress) * (1 - labelProgress);
+				animation.opacity = Math.max(0, 1 - labelEaseOut);
+				if (labelProgress >= 1) return false;
+				shouldContinueAnimating = true;
+				return true;
+			} else if (isLabelAnimation) animation.fadeStartTimestamp = null;
+			if (animation.createdAt) {
+				const elapsed = currentTimestamp - animation.createdAt;
+				if (elapsed >= 1500 + 150) return false;
+				if (elapsed > 1500) {
+					const fadeProgress = Math.min(1, (elapsed - FEEDBACK_DURATION_MS) / 150);
+					animation.opacity = 1 - (1 - (1 - fadeProgress) * (1 - fadeProgress));
+					shouldContinueAnimating = true;
+				}
+				return true;
+			}
+			if (isLabelAnimation) return true;
+			return animation.opacity > 0;
+		});
+		compositeAllLayers();
+		if (shouldContinueAnimating) animationFrameId = nativeRequestAnimationFrame(runAnimationFrame);
+		else {
+			animationFrameId = null;
+			previousFrameTimestamp = null;
+		}
+	};
+	const scheduleAnimationFrame = () => {
+		if (animationFrameId !== null) return;
+		animationFrameId = nativeRequestAnimationFrame(runAnimationFrame);
+	};
+	const handleWindowResize = () => {
+		initializeCanvas();
+		scheduleAnimationFrame();
+	};
+	createEffect(on(() => [
+		props.selectionVisible,
+		props.selectionBounds,
+		props.selectionBoundsMultiple,
+		props.selectionShouldSnap
+	], ([isVisible, singleBounds, multipleBounds, shouldSnap]) => {
+		if (!isVisible || !singleBounds && (!multipleBounds || multipleBounds.length === 0)) {
+			selectionAnimations = [];
+			scheduleAnimationFrame();
+			return;
+		}
+		let boundsToRender;
+		if (multipleBounds && multipleBounds.length > 0) boundsToRender = multipleBounds;
+		else if (singleBounds) boundsToRender = [singleBounds];
+		else boundsToRender = [];
+		selectionAnimations = boundsToRender.map((bounds, index) => {
+			const animationId = `selection-${index}`;
+			const existingAnimation = selectionAnimations.find((animation) => animation.id === animationId);
+			if (existingAnimation) {
+				updateAnimationTarget(existingAnimation, bounds);
+				if (shouldSnap) existingAnimation.current = { ...existingAnimation.target };
+				return existingAnimation;
+			}
+			return createAnimatedBounds(animationId, bounds);
+		});
+		scheduleAnimationFrame();
+	}));
+	createEffect(on(() => [props.dragVisible, props.dragBounds], ([isVisible, bounds]) => {
+		if (!isVisible || !bounds) {
+			dragAnimation = null;
+			scheduleAnimationFrame();
+			return;
+		}
+		if (dragAnimation) updateAnimationTarget(dragAnimation, bounds);
+		else dragAnimation = createAnimatedBounds("drag", bounds);
+		scheduleAnimationFrame();
+	}));
+	createEffect(on(() => [props.grabbedBoxes, props.labelInstances], ([grabbedBoxes, labelInstances]) => {
+		const boxesToProcess = grabbedBoxes ?? [];
+		const activeBoxIds = new Set(boxesToProcess.map((box) => box.id));
+		const existingAnimationIds = new Set(grabbedAnimations.map((animation) => animation.id));
+		for (const box of boxesToProcess) if (!existingAnimationIds.has(box.id)) grabbedAnimations.push(createAnimatedBounds(box.id, box.bounds, { createdAt: box.createdAt }));
+		for (const animation of grabbedAnimations) {
+			const matchingBox = boxesToProcess.find((box) => box.id === animation.id);
+			if (matchingBox) updateAnimationTarget(animation, matchingBox.bounds);
+		}
+		const instancesToProcess = labelInstances ?? [];
+		for (const instance of instancesToProcess) {
+			const boundsToRender = resolveBoundsArray(instance);
+			const targetOpacity = instance.status === "fading" ? 0 : 1;
+			for (let index = 0; index < boundsToRender.length; index++) {
+				const bounds = boundsToRender[index];
+				const animationId = `label-${instance.id}-${index}`;
+				const existingAnimation = grabbedAnimations.find((animation) => animation.id === animationId);
+				if (existingAnimation) updateAnimationTarget(existingAnimation, bounds, targetOpacity);
+				else grabbedAnimations.push(createAnimatedBounds(animationId, bounds, {
+					opacity: 1,
+					targetOpacity
+				}));
+			}
+		}
+		const activeLabelIds = /* @__PURE__ */ new Set();
+		for (const instance of instancesToProcess) {
+			const boundsToRender = resolveBoundsArray(instance);
+			for (let index = 0; index < boundsToRender.length; index++) activeLabelIds.add(`label-${instance.id}-${index}`);
+		}
+		grabbedAnimations = grabbedAnimations.filter((animation) => {
+			if (animation.id.startsWith("label-")) return activeLabelIds.has(animation.id);
+			if (activeBoxIds.has(animation.id)) return true;
+			if (animation.createdAt && animation.opacity > 0) return true;
+			return false;
+		});
+		scheduleAnimationFrame();
+	}));
+	onMount(() => {
+		initializeCanvas();
+		scheduleAnimationFrame();
+		window.addEventListener("resize", handleWindowResize);
+		let currentDprMediaQuery = null;
+		const handleDevicePixelRatioChange = () => {
+			if (Math.max(window.devicePixelRatio || 1, 2) !== devicePixelRatio) {
+				handleWindowResize();
+				setupDprMediaQuery();
+			}
+		};
+		const setupDprMediaQuery = () => {
+			if (currentDprMediaQuery) currentDprMediaQuery.removeEventListener("change", handleDevicePixelRatioChange);
+			currentDprMediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+			currentDprMediaQuery.addEventListener("change", handleDevicePixelRatioChange);
+		};
+		setupDprMediaQuery();
+		onCleanup(() => {
+			window.removeEventListener("resize", handleWindowResize);
+			if (currentDprMediaQuery) currentDprMediaQuery.removeEventListener("change", handleDevicePixelRatioChange);
+			if (animationFrameId !== null) nativeCancelAnimationFrame(animationFrameId);
+		});
+	});
+	return (() => {
+		var _el$ = _tmpl$$23();
+		var _ref$ = canvasRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
+		createRenderEffect((_$p) => setStyleProperty(_el$, "z-index", String(Z_INDEX_OVERLAY_CANVAS)));
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/utils/auto-resize-textarea.ts
+const autoResizeTextarea = (textarea, maxHeight) => {
+	textarea.style.height = "auto";
+	textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+};
+
+//#endregion
+//#region src/utils/get-arrow-size.ts
+const getArrowSize = (labelWidth) => {
+	if (labelWidth <= 0) return 8;
+	const scaledSize = labelWidth * ARROW_MAX_LABEL_WIDTH_RATIO;
+	return Math.max(4, Math.min(8, scaledSize));
+};
+
+//#endregion
+//#region src/utils/cn.ts
+const resolveValue = (input) => {
+	if (typeof input === "string" || typeof input === "number") return String(input);
+	if (!input || typeof input !== "object") return "";
+	if (Array.isArray(input)) {
+		let result = "";
+		for (const item of input) {
+			if (!item) continue;
+			const resolved = resolveValue(item);
+			if (resolved) result = result ? `${result} ${resolved}` : resolved;
+		}
+		return result;
+	}
+	let result = "";
+	for (const key in input) if (input[key]) result = result ? `${result} ${key}` : key;
+	return result;
+};
+const cn = (...inputs) => {
+	let result = "";
+	for (const input of inputs) {
+		if (!input) continue;
+		const resolved = resolveValue(input);
+		if (resolved) result = result ? `${result} ${resolved}` : resolved;
+	}
+	return result;
+};
+
+//#endregion
+//#region src/utils/get-tag-display.ts
+const getTagDisplay = (input) => {
+	if (input.elementsCount && input.elementsCount > 1) return {
+		tagName: `${input.elementsCount} elements`,
+		componentName: void 0
+	};
+	return {
+		tagName: input.tagName || input.componentName || "element",
+		componentName: input.tagName ? input.componentName : void 0
+	};
+};
+
+//#endregion
+//#region src/components/icons/icon-submit.tsx
+var _tmpl$$22 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M19.2929 12.7071C19.6834 13.0976 20.3166 13.0976 20.7071 12.7071C21.0976 12.3166 21.0976 11.6834 20.7071 11.2929L12.7071 3.29289C12.5196 3.10536 12.2652 3 12 3C11.7348 3 11.4804 3.10536 11.2929 3.29289L3.29289 11.2929C2.90237 11.6834 2.90237 12.3166 3.29289 12.7071C3.68342 13.0976 4.31658 13.0976 4.70711 12.7071L11 6.41421L11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20L13 6.41422L19.2929 12.7071Z">`);
+const IconSubmit = (props) => {
+	const size = () => props.size ?? 10;
+	return (() => {
+		var _el$ = _tmpl$$22();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/icons/icon-loader.tsx
+var _tmpl$$21 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path class=icon-loader-bar d="M12 2v4"style=animation-delay:0ms></path><path class=icon-loader-bar d="M15 6.8l2-3.5"style=animation-delay:-42ms></path><path class=icon-loader-bar d="M17.2 9l3.5-2"style=animation-delay:-83ms></path><path class=icon-loader-bar d="M18 12h4"style=animation-delay:-125ms></path><path class=icon-loader-bar d="M17.2 15l3.5 2"style=animation-delay:-167ms></path><path class=icon-loader-bar d="M15 17.2l2 3.5"style=animation-delay:-208ms></path><path class=icon-loader-bar d="M12 18v4"style=animation-delay:-250ms></path><path class=icon-loader-bar d="M9 17.2l-2 3.5"style=animation-delay:-292ms></path><path class=icon-loader-bar d="M6.8 15l-3.5 2"style=animation-delay:-333ms></path><path class=icon-loader-bar d="M2 12h4"style=animation-delay:-375ms></path><path class=icon-loader-bar d="M6.8 9l-3.5-2"style=animation-delay:-417ms></path><path class=icon-loader-bar d="M9 6.8l-2-3.5"style=animation-delay:-458ms>`);
+const IconLoader = (props) => {
+	const size = () => props.size ?? 16;
+	return (() => {
+		var _el$ = _tmpl$$21();
+		_el$.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling;
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/selection-label/arrow.tsx
+var _tmpl$$20 = /* @__PURE__ */ template(`<div data-react-grab-arrow class="absolute w-0 h-0 z-10">`);
+const Arrow = (props) => {
+	const arrowColor = () => props.color ?? "var(--rg-panel-bg)";
+	const isBottom = () => props.position === "bottom";
+	const arrowSize = () => getArrowSize(props.labelWidth ?? 0);
+	return (() => {
+		var _el$ = _tmpl$$20();
+		createRenderEffect((_p$) => {
+			var _v$ = `calc(${props.leftPercent}% + ${props.leftOffsetPx}px)`, _v$2 = isBottom() ? "0" : void 0, _v$3 = isBottom() ? void 0 : "0", _v$4 = isBottom() ? "translateX(-50%) translateY(-100%)" : "translateX(-50%) translateY(100%)", _v$5 = `${arrowSize()}px solid transparent`, _v$6 = `${arrowSize()}px solid transparent`, _v$7 = isBottom() ? `${arrowSize()}px solid ${arrowColor()}` : void 0, _v$8 = isBottom() ? void 0 : `${arrowSize()}px solid ${arrowColor()}`;
+			_v$ !== _p$.e && setStyleProperty(_el$, "left", _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$, "bottom", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$, "transform", _p$.o = _v$4);
+			_v$5 !== _p$.i && setStyleProperty(_el$, "border-left", _p$.i = _v$5);
+			_v$6 !== _p$.n && setStyleProperty(_el$, "border-right", _p$.n = _v$6);
+			_v$7 !== _p$.s && setStyleProperty(_el$, "border-bottom", _p$.s = _v$7);
+			_v$8 !== _p$.h && setStyleProperty(_el$, "border-top", _p$.h = _v$8);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0,
+			s: void 0,
+			h: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/selection-label/tag-badge.tsx
+var _tmpl$$19 = /* @__PURE__ */ template(`<span class=text-[var(--rg-text-primary)]>`), _tmpl$2$10 = /* @__PURE__ */ template(`<span class=text-[var(--rg-text-secondary)]>.`), _tmpl$3$5 = /* @__PURE__ */ template(`<div><span class="text-[13px] leading-4 h-fit font-medium overflow-hidden text-ellipsis whitespace-nowrap min-w-0">`);
+const TagBadge = (props) => {
+	const handleMouseEnter = () => {
+		props.onHoverChange?.(true);
+	};
+	const handleMouseLeave = () => {
+		props.onHoverChange?.(false);
+	};
+	return (() => {
+		var _el$ = _tmpl$3$5(), _el$2 = _el$.firstChild;
+		addEventListener(_el$, "click", props.onClick, true);
+		_el$.addEventListener("mouseleave", handleMouseLeave);
+		_el$.addEventListener("mouseenter", handleMouseEnter);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return props.componentName;
+			},
+			get children() {
+				return [(() => {
+					var _el$3 = _tmpl$$19();
+					insert(_el$3, () => props.componentName);
+					return _el$3;
+				})(), (() => {
+					var _el$4 = _tmpl$2$10();
+					_el$4.firstChild;
+					insert(_el$4, () => props.tagName, null);
+					return _el$4;
+				})()];
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return !props.componentName;
+			},
+			get children() {
+				var _el$6 = _tmpl$$19();
+				insert(_el$6, () => props.tagName);
+				return _el$6;
+			}
+		}), null);
+		createRenderEffect(() => className(_el$, cn("contain-layout flex items-center gap-1 max-w-[280px] overflow-hidden", props.shrink && "shrink-0", props.isClickable && "cursor-pointer")));
+		return _el$;
+	})();
+};
+delegateEvents(["click"]);
+
+//#endregion
+//#region src/components/selection-label/bottom-section.tsx
+var _tmpl$$18 = /* @__PURE__ */ template(`<div class="[font-synthesis:none] contain-layout shrink-0 flex flex-col items-start px-2 py-1.5 w-auto h-fit self-stretch [border-top-width:0.5px] border-t-solid border-t-[var(--rg-border-subtle)] antialiased rounded-t-none rounded-b-[6px]">`);
+const BottomSection = (props) => (() => {
+	var _el$ = _tmpl$$18();
+	insert(_el$, () => props.children);
+	return _el$;
+})();
+
+//#endregion
+//#region src/utils/confirmation-focus-manager.ts
+let activeConfirmationId = null;
+const confirmationFocusManager = {
+	claim: (id) => {
+		activeConfirmationId = id;
+	},
+	release: (id) => {
+		if (activeConfirmationId === id) activeConfirmationId = null;
+	},
+	isActive: (id) => activeConfirmationId === id
+};
+
+//#endregion
+//#region src/components/icons/icon-return.tsx
+var _tmpl$$17 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M10.7071 21.2071C10.3166 21.5976 9.68342 21.5976 9.29289 21.2071L3.29289 15.2071C2.90237 14.8166 2.90237 14.1834 3.29289 13.7929L9.29289 7.79289C9.68342 7.40237 10.3166 7.40237 10.7071 7.79289C11.0976 8.18342 11.0976 8.81658 10.7071 9.20711L6.41421 13.5H16C16.5523 13.5 17 13.0523 17 12.5V3.5C17 2.94772 17.4477 2.5 18 2.5C18.5523 2.5 19 2.94772 19 3.5V12.5C19 14.1569 17.6569 15.5 16 15.5H6.41421L10.7071 19.7929C11.0976 20.1834 11.0976 20.8166 10.7071 21.2071Z">`);
+const IconReturn = (props) => {
+	const size = () => props.size ?? 10;
+	return (() => {
+		var _el$ = _tmpl$$17();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/selection-label/discard-prompt.tsx
+var _tmpl$$16 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center justify-end gap-[5px] w-full h-fit"><button data-react-grab-discard-no class="contain-layout shrink-0 flex items-center justify-center px-[3px] py-px rounded-sm bg-[var(--rg-surface-hover)] [border-width:0.5px] border-solid border-[var(--rg-border-button)] cursor-pointer transition-all hover:bg-[var(--rg-surface-active)] press-scale h-[17px]"><span class="text-[var(--rg-text-primary)] text-[13px] leading-3.5 font-sans font-medium">No</span></button><button data-react-grab-discard-yes class="contain-layout shrink-0 flex items-center justify-center gap-0.5 px-[3px] py-px rounded-sm bg-[var(--rg-error-bg)] cursor-pointer transition-all hover:bg-[var(--rg-error-bg-hover)] press-scale h-[17px]"><span class="text-[var(--rg-error-text)] text-[13px] leading-3.5 font-sans font-medium">Yes`), _tmpl$2$9 = /* @__PURE__ */ template(`<div data-react-grab-discard-prompt class="contain-layout shrink-0 flex flex-col justify-center items-end w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1.5 pb-1 px-2 w-full h-fit"><span class="text-[var(--rg-text-primary)] text-[13px] leading-4 shrink-0 font-sans font-medium w-fit h-fit">`);
+const DiscardPrompt = (props) => {
+	const instanceId = Symbol();
+	const handleKeyDown = (event) => {
+		if (!confirmationFocusManager.isActive(instanceId)) return;
+		if (isKeyboardEventTriggeredByInput(event)) return;
+		const isEnter = event.code === "Enter";
+		const isEscape = event.code === "Escape";
+		if (isEnter || isEscape) {
+			event.preventDefault();
+			event.stopPropagation();
+			if (isEscape && props.cancelOnEscape) props.onCancel?.();
+			else props.onConfirm?.();
+		}
+	};
+	const handleFocus = () => {
+		confirmationFocusManager.claim(instanceId);
+	};
+	onMount(() => {
+		confirmationFocusManager.claim(instanceId);
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+	});
+	onCleanup(() => {
+		confirmationFocusManager.release(instanceId);
+		window.removeEventListener("keydown", handleKeyDown, { capture: true });
+	});
+	return (() => {
+		var _el$ = _tmpl$2$9(), _el$3 = _el$.firstChild.firstChild;
+		_el$.$$click = handleFocus;
+		_el$.$$pointerdown = handleFocus;
+		insert(_el$3, () => props.label ?? "Discard?");
+		insert(_el$, createComponent(BottomSection, { get children() {
+			var _el$4 = _tmpl$$16(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+			_el$6.firstChild;
+			addEventListener(_el$5, "click", props.onCancel, true);
+			addEventListener(_el$6, "click", props.onConfirm, true);
+			insert(_el$6, createComponent(IconReturn, {
+				size: 10,
+				"class": "text-[var(--rg-error-text)] opacity-50"
+			}), null);
+			return _el$4;
+		} }), null);
+		return _el$;
+	})();
+};
+delegateEvents(["pointerdown", "click"]);
+
+//#endregion
+//#region src/components/icons/icon-retry.tsx
+var _tmpl$$15 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M7 2C4.23858 2 2 4.23858 2 7V15C2 17.7614 4.23858 20 7 20H8C8.55228 20 9 19.5523 9 19C9 18.4477 8.55228 18 8 18H7C5.34315 18 4 16.6569 4 15V7C4 5.34315 5.34315 4 7 4H17C18.6569 4 20 5.34315 20 7V15C20 16.6569 18.6569 18 17 18H14.4142L16.2071 16.2071C16.5976 15.8166 16.5976 15.1834 16.2071 14.7929C15.8166 14.4024 15.1834 14.4024 14.7929 14.7929L11.2929 18.2929C11.197 18.3888 11.1247 18.4993 11.0759 18.6172C11.027 18.7351 11 18.8644 11 19C11 19.2728 11.1093 19.5201 11.2864 19.7005C11.2889 19.7031 11.2914 19.7056 11.2939 19.7081L14.7929 23.2071C15.1834 23.5976 15.8166 23.5976 16.2071 23.2071C16.5976 22.8166 16.5976 22.1834 16.2071 21.7929L14.4142 20H17C19.7614 20 22 17.7614 22 15V7C22 4.23858 19.7614 2 17 2H7Z">`);
+const IconRetry = (props) => {
+	const size = () => props.size ?? 12;
+	return (() => {
+		var _el$ = _tmpl$$15();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/selection-label/error-view.tsx
+var _tmpl$$14 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center justify-end gap-[5px] w-full h-fit"><button data-react-grab-retry class="contain-layout shrink-0 flex items-center justify-center gap-1 px-[3px] py-px rounded-sm bg-[var(--rg-surface-hover)] [border-width:0.5px] border-solid border-[var(--rg-border-button)] cursor-pointer transition-all hover:bg-[var(--rg-surface-active)] press-scale h-[17px]"><span class="text-[var(--rg-text-primary)] text-[13px] leading-3.5 font-sans font-medium">Retry</span></button><button data-react-grab-error-ok class="contain-layout shrink-0 flex items-center justify-center gap-1 px-[3px] py-px rounded-sm bg-[var(--rg-surface-hover)] [border-width:0.5px] border-solid border-[var(--rg-border-button)] cursor-pointer transition-all hover:bg-[var(--rg-surface-active)] press-scale h-[17px]"><span class="text-[var(--rg-text-primary)] text-[13px] leading-3.5 font-sans font-medium">Ok`), _tmpl$2$8 = /* @__PURE__ */ template(`<div data-react-grab-error class="contain-layout shrink-0 flex flex-col justify-center items-end w-fit h-fit max-w-[280px]"><div class="contain-layout shrink-0 flex items-start gap-1 px-2 w-full h-fit"><span class="text-[var(--rg-error-text)] text-[13px] leading-4 font-sans font-medium overflow-hidden line-clamp-5">`);
+const ErrorView = (props) => {
+	const instanceId = Symbol();
+	const handleKeyDown = (event) => {
+		if (!confirmationFocusManager.isActive(instanceId)) return;
+		if (isKeyboardEventTriggeredByInput(event)) return;
+		const isEnter = event.code === "Enter";
+		const isEscape = event.code === "Escape";
+		if (isEnter) {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onRetry?.();
+		} else if (isEscape) {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onAcknowledge?.();
+		}
+	};
+	const handleFocus = () => {
+		confirmationFocusManager.claim(instanceId);
+	};
+	onMount(() => {
+		confirmationFocusManager.claim(instanceId);
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+	});
+	onCleanup(() => {
+		confirmationFocusManager.release(instanceId);
+		window.removeEventListener("keydown", handleKeyDown, { capture: true });
+	});
+	const hasActions = () => Boolean(props.onRetry || props.onAcknowledge);
+	return (() => {
+		var _el$ = _tmpl$2$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+		_el$.$$click = handleFocus;
+		_el$.$$pointerdown = handleFocus;
+		insert(_el$3, () => props.error);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return hasActions();
+			},
+			get children() {
+				return createComponent(BottomSection, { get children() {
+					var _el$4 = _tmpl$$14(), _el$5 = _el$4.firstChild;
+					_el$5.firstChild;
+					var _el$7 = _el$5.nextSibling;
+					addEventListener(_el$5, "click", props.onRetry, true);
+					insert(_el$5, createComponent(IconRetry, {
+						size: 10,
+						"class": "text-[var(--rg-text-secondary)]"
+					}), null);
+					addEventListener(_el$7, "click", props.onAcknowledge, true);
+					return _el$4;
+				} });
+			}
+		}), null);
+		createRenderEffect((_p$) => {
+			var _v$ = {
+				"pt-1.5 pb-1": hasActions(),
+				"py-1.5": !hasActions()
+			}, _v$2 = props.error;
+			_p$.e = classList(_el$2, _v$, _p$.e);
+			_v$2 !== _p$.t && setAttribute(_el$3, "title", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents(["pointerdown", "click"]);
+
+//#endregion
+//#region src/components/icons/icon-ellipsis.tsx
+var _tmpl$$13 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M7.5 12C7.5 13.3807 6.38071 14.5 5 14.5C3.61929 14.5 2.5 13.3807 2.5 12C2.5 10.6193 3.61929 9.5 5 9.5C6.38071 9.5 7.5 10.6193 7.5 12ZM14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12ZM19 14.5C20.3807 14.5 21.5 13.3807 21.5 12C21.5 10.6193 20.3807 9.5 19 9.5C17.6193 9.5 16.5 10.6193 16.5 12C16.5 13.3807 17.6193 14.5 19 14.5Z">`);
+const IconEllipsis = (props) => {
+	const size = () => props.size ?? 14;
+	return (() => {
+		var _el$ = _tmpl$$13();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/icons/icon-check.tsx
+var _tmpl$$12 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM17.7071 10.7071C18.0976 10.3166 18.0976 9.68342 17.7071 9.29289C17.3166 8.90237 16.6834 8.90237 16.2929 9.29289L11 14.5858L8.70711 12.2929C8.31658 11.9024 7.68342 11.9024 7.29289 12.2929C6.90237 12.6834 6.90237 13.3166 7.29289 13.7071L10.2929 16.7071C10.6834 17.0976 11.3166 17.0976 11.7071 16.7071L17.7071 10.7071Z">`);
+const IconCheck = (props) => {
+	const size = () => props.size ?? 14;
+	return (() => {
+		var _el$ = _tmpl$$12();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/selection-label/completion-view.tsx
+var _tmpl$$11 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-more-options class="flex items-center justify-center size-4 rounded-sm cursor-pointer bg-transparent hover:bg-[var(--rg-surface-hover)] text-[var(--rg-text-secondary)] hover:text-[var(--rg-text-primary)] border-none outline-none p-0 shrink-0 press-scale">`), _tmpl$2$7 = /* @__PURE__ */ template(`<button data-react-grab-dismiss class="contain-layout shrink-0 flex items-center justify-center gap-1 px-[3px] py-px rounded-sm bg-[var(--rg-surface-hover)] [border-width:0.5px] border-solid border-[var(--rg-border-button)] cursor-pointer transition-all hover:bg-[var(--rg-surface-active)] press-scale h-[17px]"><span class="text-[var(--rg-text-primary)] text-[13px] leading-3.5 font-sans font-medium">Keep`), _tmpl$3$4 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center justify-between gap-2 pt-1.5 pb-1 px-2 w-full h-fit"><span class="text-[var(--rg-text-primary)] text-[13px] leading-4 font-sans font-medium h-fit tabular-nums overflow-hidden text-ellipsis whitespace-nowrap min-w-0"></span><div class="contain-layout shrink-0 flex items-center gap-2 h-fit">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex items-center gap-0.5 py-1.5 px-2 w-full h-fit"><span class="text-[var(--rg-text-primary)] text-[13px] leading-4 font-sans font-medium h-fit tabular-nums overflow-hidden text-ellipsis whitespace-nowrap min-w-0">`), _tmpl$5$1 = /* @__PURE__ */ template(`<div data-react-grab-completion>`);
+const MoreOptionsButton = (props) => {
+	return (() => {
+		var _el$ = _tmpl$$11();
+		addEventListener(_el$, "click", (event) => {
+			event.stopImmediatePropagation();
+			props.onClick();
+		});
+		addEventListener(_el$, "pointerdown", (event) => {
+			event.stopImmediatePropagation();
+		});
+		insert(_el$, createComponent(IconEllipsis, { size: 14 }));
+		return _el$;
+	})();
+};
+const CompletionView = (props) => {
+	const instanceId = Symbol();
+	let fadeTimeoutId;
+	let dismissTimeoutId;
+	const [didCopy, setDidCopy] = createSignal(false);
+	const [isFading, setIsFading] = createSignal(false);
+	const displayStatusText = () => didCopy() ? "Copied" : props.statusText;
+	const handleShowContextMenu = () => {
+		if (fadeTimeoutId !== void 0) window.clearTimeout(fadeTimeoutId);
+		if (dismissTimeoutId !== void 0) window.clearTimeout(dismissTimeoutId);
+		setIsFading(true);
+		props.onFadingChange?.(true);
+		props.onShowContextMenu?.();
+	};
+	const handleAccept = () => {
+		if (didCopy()) return;
+		setDidCopy(true);
+		fadeTimeoutId = window.setTimeout(() => {
+			setIsFading(true);
+			props.onFadingChange?.(true);
+			dismissTimeoutId = window.setTimeout(() => {
+				props.onDismiss?.();
+			}, 150);
+		}, FEEDBACK_DURATION_MS - 150);
+	};
+	const handleKeyDown = (event) => {
+		if (!confirmationFocusManager.isActive(instanceId)) return;
+		const isEnter = event.code === "Enter";
+		const isEscape = event.code === "Escape";
+		if (isKeyboardEventTriggeredByInput(event)) return;
+		if (isEnter) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleAccept();
+		} else if (isEscape) {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onDismiss?.();
+		}
+	};
+	const handleFocus = () => {
+		confirmationFocusManager.claim(instanceId);
+	};
+	onMount(() => {
+		confirmationFocusManager.claim(instanceId);
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+	});
+	onCleanup(() => {
+		confirmationFocusManager.release(instanceId);
+		window.removeEventListener("keydown", handleKeyDown, { capture: true });
+		if (fadeTimeoutId !== void 0) window.clearTimeout(fadeTimeoutId);
+		if (dismissTimeoutId !== void 0) window.clearTimeout(dismissTimeoutId);
+	});
+	return (() => {
+		var _el$2 = _tmpl$5$1();
+		_el$2.$$click = handleFocus;
+		_el$2.$$pointerdown = handleFocus;
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return memo(() => !!!didCopy())() && props.onDismiss;
+			},
+			get children() {
+				var _el$3 = _tmpl$3$4(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+				insert(_el$4, displayStatusText);
+				insert(_el$5, createComponent(Show, {
+					get when() {
+						return props.onShowContextMenu;
+					},
+					get children() {
+						return createComponent(MoreOptionsButton, { onClick: handleShowContextMenu });
+					}
+				}), null);
+				insert(_el$5, createComponent(Show, {
+					get when() {
+						return props.onDismiss;
+					},
+					get children() {
+						var _el$6 = _tmpl$2$7();
+						_el$6.firstChild;
+						_el$6.$$click = handleAccept;
+						insert(_el$6, createComponent(Show, {
+							get when() {
+								return !didCopy();
+							},
+							get children() {
+								return createComponent(IconReturn, {
+									size: 10,
+									"class": "text-[var(--rg-text-secondary)]"
+								});
+							}
+						}), null);
+						createRenderEffect(() => _el$6.disabled = didCopy());
+						return _el$6;
+					}
+				}), null);
+				return _el$3;
+			}
+		}), null);
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return didCopy() || !props.onDismiss;
+			},
+			get children() {
+				var _el$8 = _tmpl$4$1(), _el$9 = _el$8.firstChild;
+				insert(_el$8, createComponent(IconCheck, {
+					size: 14,
+					"class": "text-[var(--rg-text-primary-85)] shrink-0 animate-success-pop"
+				}), _el$9);
+				insert(_el$9, displayStatusText);
+				insert(_el$8, createComponent(Show, {
+					get when() {
+						return props.onShowContextMenu;
+					},
+					get children() {
+						return createComponent(MoreOptionsButton, { onClick: handleShowContextMenu });
+					}
+				}), null);
+				return _el$8;
+			}
+		}), null);
+		createRenderEffect((_p$) => {
+			var _v$ = cn("contain-layout shrink-0 flex flex-col justify-center items-end rounded-[10px] antialiased w-fit h-fit max-w-[280px] transition-opacity duration-100 ease-out [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-[var(--rg-panel-bg)]"), _v$2 = isFading() ? 0 : 1;
+			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "opacity", _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$2;
+	})();
+};
+delegateEvents(["pointerdown", "click"]);
+
+//#endregion
+//#region src/utils/create-menu-highlight.ts
+const DEFAULT_HIDDEN_OPACITY = "0";
+const DEFAULT_VISIBLE_OPACITY = "1";
+const createAnimatedBoundsFollower = ({ hiddenOpacity = DEFAULT_HIDDEN_OPACITY, visibleOpacity = DEFAULT_VISIBLE_OPACITY } = {}) => {
+	let containerElement;
+	let followerElement;
+	const hideFollower = () => {
+		if (!followerElement) return;
+		followerElement.style.opacity = hiddenOpacity;
+	};
+	const followElement = (targetElement) => {
+		if (!followerElement || !containerElement) return;
+		if (!targetElement) {
+			hideFollower();
+			return;
+		}
+		const containerRect = containerElement.getBoundingClientRect();
+		const targetRect = targetElement.getBoundingClientRect();
+		const targetTopWithinContainer = targetRect.top - containerRect.top + containerElement.scrollTop;
+		const targetLeftWithinContainer = targetRect.left - containerRect.left + containerElement.scrollLeft;
+		followerElement.style.opacity = visibleOpacity;
+		followerElement.style.top = `${targetTopWithinContainer}px`;
+		followerElement.style.left = `${targetLeftWithinContainer}px`;
+		followerElement.style.width = `${targetRect.width}px`;
+		followerElement.style.height = `${targetRect.height}px`;
+	};
+	const setContainerRef = (containerNode) => {
+		containerElement = containerNode;
+	};
+	const setFollowerRef = (followerNode) => {
+		followerElement = followerNode;
+	};
+	return {
+		containerRef: setContainerRef,
+		followerRef: setFollowerRef,
+		followElement,
+		hideFollower
+	};
+};
+const createMenuHighlight = () => {
+	const { containerRef, followerRef: highlightRef, followElement: updateHighlight, hideFollower: clearHighlight } = createAnimatedBoundsFollower();
+	return {
+		containerRef,
+		highlightRef,
+		updateHighlight,
+		clearHighlight
+	};
+};
+
+//#endregion
+//#region src/components/selection-label/arrow-navigation-menu.tsx
+var _tmpl$$10 = /* @__PURE__ */ template(`<div class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"><div class="pointer-events-none absolute opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out bg-[var(--rg-surface-hover)]">`), _tmpl$2$6 = /* @__PURE__ */ template(`<span class=text-[var(--rg-text-secondary)]>.`), _tmpl$3$3 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="relative z-1 contain-layout flex items-center w-full px-2 py-1 cursor-pointer text-left border-none bg-transparent"><span class="text-[13px] leading-4 h-fit font-medium overflow-hidden text-ellipsis whitespace-nowrap min-w-0 transition-colors">`);
+const ArrowNavigationMenu = (props) => {
+	const { containerRef: highlightContainerRef, highlightRef, updateHighlight, clearHighlight } = createMenuHighlight();
+	let menuItemsRef;
+	let didPointerMove = false;
+	const getMenuItemByIndex = (itemIndex) => {
+		if (!menuItemsRef) return void 0;
+		return menuItemsRef.querySelector(`[data-react-grab-arrow-nav-index="${itemIndex}"]`) ?? void 0;
+	};
+	createEffect(() => {
+		props.items;
+		didPointerMove = false;
+	});
+	createEffect(() => {
+		const activeMenuItem = getMenuItemByIndex(props.activeIndex);
+		if (activeMenuItem) updateHighlight(activeMenuItem);
+	});
+	return createComponent(BottomSection, { get children() {
+		var _el$ = _tmpl$$10(), _el$2 = _el$.firstChild;
+		_el$.$$pointermove = () => {
+			didPointerMove = true;
+		};
+		use((element) => {
+			menuItemsRef = element;
+			highlightContainerRef(element);
+		}, _el$);
+		use(highlightRef, _el$2);
+		insert(_el$, createComponent(For, {
+			get each() {
+				return props.items;
+			},
+			children: (item, itemIndex) => (() => {
+				var _el$3 = _tmpl$3$3(), _el$4 = _el$3.firstChild;
+				_el$3.$$click = (event) => {
+					event.stopPropagation();
+					props.onSelect(itemIndex());
+				};
+				_el$3.addEventListener("pointerleave", () => {
+					const activeMenuItem = getMenuItemByIndex(props.activeIndex);
+					if (activeMenuItem) updateHighlight(activeMenuItem);
+					else clearHighlight();
+				});
+				_el$3.addEventListener("pointerenter", (event) => {
+					updateHighlight(event.currentTarget);
+					if (didPointerMove) props.onSelect(itemIndex());
+				});
+				_el$3.$$pointerdown = (event) => event.stopPropagation();
+				insert(_el$4, createComponent(Show, {
+					get when() {
+						return item.componentName;
+					},
+					get children() {
+						return [memo(() => item.componentName), _tmpl$2$6()];
+					}
+				}), null);
+				insert(_el$4, () => item.tagName, null);
+				createRenderEffect((_p$) => {
+					var _v$ = item.tagName, _v$2 = itemIndex(), _v$3 = !!(itemIndex() === props.activeIndex), _v$4 = !!(itemIndex() !== props.activeIndex);
+					_v$ !== _p$.e && setAttribute(_el$3, "data-react-grab-arrow-nav-item", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$3, "data-react-grab-arrow-nav-index", _p$.t = _v$2);
+					_v$3 !== _p$.a && _el$4.classList.toggle("text-[var(--rg-text-primary)]", _p$.a = _v$3);
+					_v$4 !== _p$.o && _el$4.classList.toggle("text-[var(--rg-text-secondary)]", _p$.o = _v$4);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0
+				});
+				return _el$3;
+			})()
+		}), null);
+		return _el$;
+	} });
+};
+delegateEvents([
+	"pointermove",
+	"pointerdown",
+	"click"
+]);
+
+//#endregion
+//#region src/components/selection-label/index.tsx
+var _tmpl$$9 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start w-fit h-fit max-w-[280px]"><div class="contain-layout shrink-0 flex items-center gap-1 py-1.5 px-2 w-full h-fit"><span class="shimmer-text text-[13px] leading-4 font-sans font-medium h-fit tabular-nums overflow-hidden text-ellipsis whitespace-nowrap">`), _tmpl$2$5 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col items-start w-fit h-fit"><div class="contain-layout shrink-0 flex items-center gap-1 w-fit h-fit px-2">`), _tmpl$3$2 = /* @__PURE__ */ template(`<button data-react-grab-submit class="contain-layout shrink-0 flex items-center justify-center size-4 rounded-full bg-[var(--rg-submit-bg)] cursor-pointer ml-1 interactive-scale">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="shrink-0 flex justify-between items-end w-full min-h-4"><textarea data-react-grab-ignore-events data-react-grab-input class="text-[var(--rg-text-primary)] text-[13px] leading-4 font-medium bg-transparent border-none outline-none resize-none flex-1 p-0 m-0 wrap-break-word overflow-y-auto"placeholder="Add context"rows=1 style=field-sizing:content;min-height:16px;scrollbar-width:none>`), _tmpl$5 = /* @__PURE__ */ template(`<div class="contain-layout shrink-0 flex flex-col justify-center items-start w-fit h-fit min-w-[150px] max-w-[280px]"><div class="contain-layout shrink-0 flex items-center gap-1 pt-1.5 pb-1 w-fit h-fit px-2 max-w-full">`), _tmpl$6 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-selection-label><div>`);
+const DEFAULT_OFFSCREEN_POSITION = {
+	left: SELECTION_LABEL_OFFSCREEN_PX,
+	top: SELECTION_LABEL_OFFSCREEN_PX,
+	arrowLeftPercent: 50,
+	arrowLeftOffset: 0,
+	edgeOffsetX: 0
+};
+const SelectionLabel = (props) => {
+	let containerRef;
+	let panelRef;
+	let inputRef;
+	let isTagCurrentlyHovered = false;
+	const [measuredWidth, setMeasuredWidth] = createSignal(0);
+	const [measuredHeight, setMeasuredHeight] = createSignal(0);
+	const [panelWidth, setPanelWidth] = createSignal(0);
+	const [viewportVersion, setViewportVersion] = createSignal(0);
+	const [isInternalFading, setIsInternalFading] = createSignal(false);
+	const [isShaking, setIsShaking] = createSignal(false);
+	const canInteract = () => props.status !== "copying" && props.status !== "copied" && props.status !== "fading" && props.status !== "error";
+	const isCompletedStatus = () => props.status === "copied" || props.status === "fading";
+	const canToggleExpand = () => Boolean(props.shouldToggleExpandOnClick) && Boolean(props.onToggleExpand) && canInteract() && !props.isPromptMode;
+	const shouldEnablePointerEvents = () => {
+		if (props.isPromptMode) return true;
+		if (canToggleExpand()) return true;
+		if (isCompletedStatus() && (props.onDismiss || props.onShowContextMenu)) return true;
+		if (props.status === "error" && (props.onAcknowledgeError || props.onRetry)) return true;
+		if (props.arrowNavigationState?.isVisible) return true;
+		return false;
+	};
+	let resizeObserver;
+	const handleTagHoverChange = (hovered) => {
+		isTagCurrentlyHovered = hovered;
+	};
+	const handleViewportChange = () => {
+		setViewportVersion((version) => version + 1);
+	};
+	const handleGlobalKeyDown = (event) => {
+		if (isKeyboardEventTriggeredByInput(event)) return;
+		if (event.code === "Enter" && !props.isPromptMode && canInteract()) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			props.onToggleExpand?.();
+		}
+	};
+	onMount(() => {
+		resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const rect = entry.target.getBoundingClientRect();
+				if (entry.target === containerRef && !isTagCurrentlyHovered) {
+					setMeasuredWidth(rect.width);
+					setMeasuredHeight(rect.height);
+				} else if (entry.target === panelRef) setPanelWidth(rect.width);
+			}
+		});
+		if (containerRef) {
+			const rect = containerRef.getBoundingClientRect();
+			setMeasuredWidth(rect.width);
+			setMeasuredHeight(rect.height);
+			resizeObserver.observe(containerRef);
+		}
+		if (panelRef) {
+			setPanelWidth(panelRef.getBoundingClientRect().width);
+			resizeObserver.observe(panelRef);
+		}
+		window.addEventListener("scroll", handleViewportChange, true);
+		window.addEventListener("resize", handleViewportChange);
+		window.visualViewport?.addEventListener("resize", handleViewportChange);
+		window.visualViewport?.addEventListener("scroll", handleViewportChange);
+		if (props.onToggleExpand) window.addEventListener("keydown", handleGlobalKeyDown, { capture: true });
+	});
+	onCleanup(() => {
+		resizeObserver?.disconnect();
+		window.removeEventListener("scroll", handleViewportChange, true);
+		window.removeEventListener("resize", handleViewportChange);
+		window.visualViewport?.removeEventListener("resize", handleViewportChange);
+		window.visualViewport?.removeEventListener("scroll", handleViewportChange);
+		window.removeEventListener("keydown", handleGlobalKeyDown, { capture: true });
+	});
+	const elementIdentity = () => `${props.tagName ?? ""}:${props.componentName ?? ""}`;
+	const positionComputation = createMemo((previousResult) => {
+		viewportVersion();
+		const currentElementIdentity = elementIdentity();
+		const cached = currentElementIdentity !== previousResult.elementIdentity ? {
+			position: DEFAULT_OFFSCREEN_POSITION,
+			computedArrowPosition: null,
+			hadValidBounds: false,
+			elementIdentity: currentElementIdentity
+		} : previousResult;
+		const bounds = props.selectionBounds;
+		const labelWidth = measuredWidth();
+		const labelHeight = measuredHeight();
+		const hasMeasurements = labelWidth > 0 && labelHeight > 0;
+		const hasValidBounds = bounds && bounds.width > 0 && bounds.height > 0;
+		if (!hasMeasurements || !hasValidBounds) return {
+			position: cached.hadValidBounds ? cached.position : DEFAULT_OFFSCREEN_POSITION,
+			computedArrowPosition: cached.computedArrowPosition,
+			hadValidBounds: cached.hadValidBounds,
+			elementIdentity: currentElementIdentity
+		};
+		const visualViewport = window.visualViewport;
+		const viewportLeft = visualViewport?.offsetLeft ?? 0;
+		const viewportTop = visualViewport?.offsetTop ?? 0;
+		const viewportRight = viewportLeft + (visualViewport?.width ?? window.innerWidth);
+		const viewportBottom = viewportTop + (visualViewport?.height ?? window.innerHeight);
+		if (!(bounds.x + bounds.width > viewportLeft && bounds.x < viewportRight && bounds.y + bounds.height > viewportTop && bounds.y < viewportBottom)) return {
+			position: DEFAULT_OFFSCREEN_POSITION,
+			computedArrowPosition: cached.computedArrowPosition,
+			hadValidBounds: cached.hadValidBounds,
+			elementIdentity: currentElementIdentity
+		};
+		const selectionCenterX = bounds.x + bounds.width / 2;
+		const cursorX = props.mouseX ?? selectionCenterX;
+		const selectionBottom = bounds.y + bounds.height;
+		const selectionTop = bounds.y;
+		const actualArrowHeight = props.hideArrow ? 0 : getArrowSize(panelWidth());
+		const anchorX = cursorX;
+		let edgeOffsetX = 0;
+		let positionTop = selectionBottom + actualArrowHeight + 4;
+		if (labelWidth > 0) {
+			const labelLeft = anchorX - labelWidth / 2;
+			const labelRight = anchorX + labelWidth / 2;
+			if (labelRight > viewportRight - 8) edgeOffsetX = viewportRight - 8 - labelRight;
+			if (labelLeft + edgeOffsetX < viewportLeft + 8) edgeOffsetX = viewportLeft + 8 - labelLeft;
+		}
+		const totalHeightNeeded = labelHeight + actualArrowHeight + 4;
+		const fitsBelow = positionTop + labelHeight <= viewportBottom - 8;
+		if (!fitsBelow) positionTop = selectionTop - totalHeightNeeded;
+		if (positionTop < viewportTop + 8) positionTop = viewportTop + 8;
+		const labelHalfWidth = labelWidth / 2;
+		const arrowCenterPx = labelHalfWidth - edgeOffsetX;
+		const arrowMinPx = Math.min(16, labelHalfWidth);
+		const arrowMaxPx = Math.max(labelWidth - 16, labelHalfWidth);
+		const arrowLeftOffset = Math.max(arrowMinPx, Math.min(arrowMaxPx, arrowCenterPx)) - labelHalfWidth;
+		return {
+			position: {
+				left: anchorX,
+				top: positionTop,
+				arrowLeftPercent: 50,
+				arrowLeftOffset,
+				edgeOffsetX
+			},
+			computedArrowPosition: fitsBelow ? "bottom" : "top",
+			hadValidBounds: true,
+			elementIdentity: currentElementIdentity
+		};
+	}, {
+		position: DEFAULT_OFFSCREEN_POSITION,
+		computedArrowPosition: null,
+		hadValidBounds: false,
+		elementIdentity: ""
+	});
+	const arrowPosition = () => positionComputation().computedArrowPosition ?? "bottom";
+	const hadValidBounds = () => positionComputation().hadValidBounds;
+	createEffect(on(() => props.selectionLabelShakeCount, () => setIsShaking(true), { defer: true }));
+	const handleKeyDown = (event) => {
+		if (event.isComposing || event.keyCode === 229) return;
+		event.stopImmediatePropagation();
+		const isEnterWithoutShift = event.code === "Enter" && !event.shiftKey;
+		const isEscape = event.code === "Escape";
+		if (isEnterWithoutShift) {
+			event.preventDefault();
+			props.onSubmit?.();
+		} else if (isEscape) {
+			event.preventDefault();
+			props.onConfirmDismiss?.();
+		}
+	};
+	const handleInput = (event) => {
+		const inputTarget = event.target;
+		if (!(inputTarget instanceof HTMLTextAreaElement)) return;
+		autoResizeTextarea(inputTarget, 95);
+		props.onInputChange?.(inputTarget.value);
+	};
+	const tagDisplayResult = () => getTagDisplay({
+		tagName: props.tagName,
+		componentName: props.componentName,
+		elementsCount: props.elementsCount
+	});
+	const isArrowNavigationVisible = () => Boolean(props.arrowNavigationState?.isVisible);
+	const handleTagClick = (event) => {
+		event.stopImmediatePropagation();
+		if (props.filePath && props.onOpen) {
+			props.onOpen();
+			return;
+		}
+		if (canToggleExpand()) props.onToggleExpand?.();
+	};
+	const handleContainerPointerDown = (event) => {
+		event.stopImmediatePropagation();
+		if (canInteract() && props.isPromptMode && !props.isPendingDismiss && props.onSubmit && inputRef) inputRef.focus({ preventScroll: true });
+	};
+	const shouldPersistDuringFade = () => hadValidBounds() && (isCompletedStatus() || props.status === "error");
+	return createComponent(Show, {
+		get when() {
+			return memo(() => props.visible !== false)() && (props.selectionBounds || shouldPersistDuringFade());
+		},
+		get children() {
+			var _el$ = _tmpl$6(), _el$2 = _el$.firstChild;
+			_el$.addEventListener("mouseleave", () => props.onHoverChange?.(false));
+			_el$.addEventListener("mouseenter", () => props.onHoverChange?.(true));
+			_el$.$$click = (event) => {
+				event.stopImmediatePropagation();
+			};
+			_el$.$$pointerdown = handleContainerPointerDown;
+			var _ref$ = containerRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
+			setStyleProperty(_el$, "z-index", `${Z_INDEX_OVERLAY}`);
+			setStyleProperty(_el$, "transition", `opacity ${150}ms ease-out, filter ${150}ms ease-out`);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return !props.hideArrow;
+				},
+				get children() {
+					return createComponent(Arrow, {
+						get position() {
+							return arrowPosition();
+						},
+						get leftPercent() {
+							return positionComputation().position.arrowLeftPercent;
+						},
+						get leftOffsetPx() {
+							return positionComputation().position.arrowLeftOffset;
+						},
+						get labelWidth() {
+							return panelWidth();
+						}
+					});
+				}
+			}), _el$2);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return memo(() => !!isCompletedStatus())() && !props.error;
+				},
+				get children() {
+					return createComponent(CompletionView, {
+						get statusText() {
+							return props.statusText ?? "Copied";
+						},
+						get onDismiss() {
+							return props.onDismiss;
+						},
+						onFadingChange: setIsInternalFading,
+						get onShowContextMenu() {
+							return props.onShowContextMenu;
+						}
+					});
+				}
+			}), _el$2);
+			_el$2.addEventListener("animationend", () => setIsShaking(false));
+			var _ref$2 = panelRef;
+			typeof _ref$2 === "function" ? use(_ref$2, _el$2) : panelRef = _el$2;
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return props.status === "copying";
+				},
+				get children() {
+					var _el$3 = _tmpl$$9(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
+					insert(_el$4, createComponent(IconLoader, {
+						size: 13,
+						"class": "text-[var(--rg-text-secondary)] shrink-0"
+					}), _el$5);
+					insert(_el$5, () => props.statusText ?? "Grabbing…");
+					return _el$3;
+				}
+			}), null);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return memo(() => !!canInteract())() && !props.isPromptMode;
+				},
+				get children() {
+					var _el$6 = _tmpl$2$5(), _el$7 = _el$6.firstChild;
+					insert(_el$7, createComponent(TagBadge, {
+						get tagName() {
+							return tagDisplayResult().tagName;
+						},
+						get componentName() {
+							return tagDisplayResult().componentName;
+						},
+						get isClickable() {
+							return Boolean(props.filePath && props.onOpen);
+						},
+						onClick: handleTagClick,
+						onHoverChange: handleTagHoverChange,
+						shrink: true,
+						get forceShowIcon() {
+							return memo(() => !!isArrowNavigationVisible())() ? Boolean(props.filePath && props.onOpen) : Boolean(props.isContextMenuOpen);
+						}
+					}));
+					insert(_el$6, createComponent(Show, {
+						get when() {
+							return props.arrowNavigationState?.isVisible;
+						},
+						get children() {
+							return createComponent(ArrowNavigationMenu, {
+								get items() {
+									return props.arrowNavigationState.items;
+								},
+								get activeIndex() {
+									return props.arrowNavigationState.activeIndex;
+								},
+								onSelect: (index) => props.onArrowNavigationSelect?.(index)
+							});
+						}
+					}), null);
+					createRenderEffect((_p$) => {
+						var _v$ = !!isArrowNavigationVisible(), _v$2 = {
+							"py-1.5": !isArrowNavigationVisible(),
+							"pt-1.5 pb-1": isArrowNavigationVisible()
+						};
+						_v$ !== _p$.e && _el$6.classList.toggle("min-w-[100px]", _p$.e = _v$);
+						_p$.t = classList(_el$7, _v$2, _p$.t);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$6;
+				}
+			}), null);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return memo(() => !!(canInteract() && props.isPromptMode))() && !props.isPendingDismiss;
+				},
+				get children() {
+					var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild;
+					insert(_el$9, createComponent(TagBadge, {
+						get tagName() {
+							return tagDisplayResult().tagName;
+						},
+						get componentName() {
+							return tagDisplayResult().componentName;
+						},
+						get isClickable() {
+							return Boolean(props.filePath && props.onOpen);
+						},
+						onClick: handleTagClick,
+						onHoverChange: handleTagHoverChange,
+						forceShowIcon: true
+					}));
+					insert(_el$8, createComponent(BottomSection, { get children() {
+						var _el$0 = _tmpl$4(), _el$1 = _el$0.firstChild;
+						_el$1.$$keydown = handleKeyDown;
+						_el$1.$$input = handleInput;
+						use((element) => {
+							inputRef = element;
+							if (props.onSubmit) queueMicrotask(() => {
+								element.focus({ preventScroll: true });
+								autoResizeTextarea(element, 95);
+							});
+						}, _el$1);
+						setStyleProperty(_el$1, "max-height", `${95}px`);
+						insert(_el$0, createComponent(Show, {
+							get when() {
+								return props.onSubmit;
+							},
+							get children() {
+								var _el$10 = _tmpl$3$2();
+								_el$10.$$click = () => props.onSubmit?.();
+								insert(_el$10, createComponent(IconSubmit, {
+									size: 10,
+									"class": "text-[var(--rg-submit-fg)]"
+								}));
+								return _el$10;
+							}
+						}), null);
+						createRenderEffect(() => _el$1.readOnly = !props.onSubmit);
+						createRenderEffect(() => _el$1.value = props.inputValue ?? "");
+						return _el$0;
+					} }), null);
+					return _el$8;
+				}
+			}), null);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return props.isPendingDismiss;
+				},
+				get children() {
+					return createComponent(DiscardPrompt, {
+						get onConfirm() {
+							return props.onConfirmDismiss;
+						},
+						onCancel: () => {
+							props.onCancelDismiss?.();
+							inputRef?.focus({ preventScroll: true });
+						}
+					});
+				}
+			}), null);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return props.error;
+				},
+				get children() {
+					return createComponent(ErrorView, {
+						get error() {
+							return props.error;
+						},
+						get onAcknowledge() {
+							return props.onAcknowledgeError;
+						},
+						get onRetry() {
+							return props.onRetry;
+						}
+					});
+				}
+			}), null);
+			createRenderEffect((_p$) => {
+				var _v$3 = cn("fixed font-sans text-[13px] antialiased select-none ease-out"), _v$4 = `${positionComputation().position.top}px`, _v$5 = `${positionComputation().position.left}px`, _v$6 = `translateX(calc(-50% + ${positionComputation().position.edgeOffsetX}px))`, _v$7 = shouldEnablePointerEvents() ? "auto" : "none", _v$8 = props.status === "fading" || isInternalFading() ? 0 : 1, _v$9 = `drop-shadow(${PANEL_SHADOW}) blur(${props.status === "fading" || isInternalFading() ? "3px" : "0"})`, _v$0 = cn("contain-layout flex items-center gap-[5px] rounded-[10px] antialiased w-fit h-fit p-0 [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-[var(--rg-panel-bg)]", isShaking() && "animate-shake"), _v$1 = isCompletedStatus() && !props.error ? "none" : void 0;
+				_v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
+				_v$4 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$4);
+				_v$5 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$5);
+				_v$6 !== _p$.o && setStyleProperty(_el$, "transform", _p$.o = _v$6);
+				_v$7 !== _p$.i && setStyleProperty(_el$, "pointer-events", _p$.i = _v$7);
+				_v$8 !== _p$.n && setStyleProperty(_el$, "opacity", _p$.n = _v$8);
+				_v$9 !== _p$.s && setStyleProperty(_el$, "filter", _p$.s = _v$9);
+				_v$0 !== _p$.h && className(_el$2, _p$.h = _v$0);
+				_v$1 !== _p$.r && setStyleProperty(_el$2, "display", _p$.r = _v$1);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0,
+				s: void 0,
+				h: void 0,
+				r: void 0
+			});
+			return _el$;
+		}
+	});
+};
+delegateEvents([
+	"pointerdown",
+	"click",
+	"input",
+	"keydown"
+]);
+
+//#endregion
+//#region src/components/icons/icon-select.tsx
+var _tmpl$$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M20.8977 4.02356L21.8277 4.39121C22.3784 2.99813 21.0382 1.60206 19.6238 2.09546L3.47334 7.72936C1.38661 8.45728 1.49021 11.443 3.6224 12.0245L10.1289 13.799L11.2331 19.8724C11.638 22.0991 14.7072 22.4019 15.5393 20.2972L21.8277 4.39121L20.8977 4.02356Z">`);
+const IconSelect = (props) => {
+	const size = () => props.size ?? 14;
+	return (() => {
+		var _el$ = _tmpl$$8();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/utils/toolbar-layout.ts
+const getButtonSpacingClass = (isVertical) => isVertical ? "mb-1.5" : "mr-1.5";
+const getMinDimensionClass = (isVertical) => isVertical ? "min-h-0" : "min-w-0";
+
+//#endregion
+//#region src/components/icons/icon-chevron.tsx
+var _tmpl$$7 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C14.8946 11.4804 15 11.7348 15 12C15 12.2652 14.8946 12.5196 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071Z">`);
+const IconChevron = (props) => {
+	const size = () => props.size ?? 14;
+	return (() => {
+		var _el$ = _tmpl$$7();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/toolbar/toolbar-content.tsx
+var _tmpl$$6 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-toolbar-collapse class="contain-layout shrink-0 flex items-center justify-center cursor-pointer interactive-scale">`), _tmpl$2$4 = /* @__PURE__ */ template(`<div data-react-grab-toolbar-panel><div><div><div>`);
+const ToolbarContent = (props) => {
+	const edge = () => props.snapEdge ?? "bottom";
+	const isVertical = () => edge() === "left" || edge() === "right";
+	const sizeDurationClass = () => props.isCollapsed ? "duration-140" : "duration-220";
+	const opacityEnterClass = "transition-opacity duration-180 ease-drawer delay-[80ms]";
+	const opacityExitClass = "transition-opacity duration-100 ease-drawer";
+	const gridSizeTransitionClass = () => isVertical() ? `transition-[grid-template-rows] ${sizeDurationClass()} ease-drawer` : `transition-[grid-template-columns] ${sizeDurationClass()} ease-drawer`;
+	const minDimensionClass = () => getMinDimensionClass(isVertical());
+	const collapsedEdgeClasses = () => {
+		if (!props.isCollapsed) return "";
+		return `${{
+			top: "rounded-t-none rounded-b-[10px]",
+			bottom: "rounded-b-none rounded-t-[10px]",
+			left: "rounded-l-none rounded-r-[10px]",
+			right: "rounded-r-none rounded-l-[10px]"
+		}[edge()]} ${isVertical() ? "px-0.25 py-2" : "px-2 py-0.25"}`;
+	};
+	const chevronRotation = () => {
+		const collapsed = props.isCollapsed;
+		switch (edge()) {
+			case "top": return collapsed ? "rotate-90" : "-rotate-90";
+			case "bottom": return collapsed ? "-rotate-90" : "rotate-90";
+			case "left": return collapsed ? "rotate-0" : "rotate-180";
+			case "right": return collapsed ? "rotate-180" : "rotate-0";
+			default: return "-rotate-90";
+		}
+	};
+	const pressSquishTransform = () => {
+		if (!props.isChevronPressed) return void 0;
+		return isVertical() ? "scale(0.97, 1)" : "scale(1, 0.97)";
+	};
+	const defaultCollapseButton = () => (() => {
+		var _el$ = _tmpl$$6();
+		addEventListener(_el$, "pointercancel", props.onCollapsePointerLeave);
+		addEventListener(_el$, "pointerleave", props.onCollapsePointerLeave);
+		addEventListener(_el$, "pointerup", props.onCollapsePointerUp, true);
+		addEventListener(_el$, "pointerdown", props.onCollapsePointerDown);
+		addEventListener(_el$, "click", props.onCollapseClick, true);
+		insert(_el$, createComponent(IconChevron, {
+			size: 18,
+			get ["class"]() {
+				return cn("text-[var(--rg-text-secondary)] transition-transform duration-150 ease-drawer -m-0.5", chevronRotation());
+			}
+		}));
+		createRenderEffect(() => setAttribute(_el$, "aria-label", props.isCollapsed ? "Expand toolbar" : "Collapse toolbar"));
+		return _el$;
+	})();
+	const outerTransitionClass = () => props.isChevronPressed ? `transition-[padding,border-radius,transform] duration-60 ease-[cubic-bezier(0,0,0.2,1)]` : `transition-[padding,border-radius,transform] ${sizeDurationClass()} ease-drawer`;
+	return (() => {
+		var _el$2 = _tmpl$2$4(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
+		addEventListener(_el$2, "click", props.onPanelClick, true);
+		addEventListener(_el$2, "animationend", props.onAnimationEnd);
+		insert(_el$5, () => props.selectButton);
+		insert(_el$2, () => props.collapseButton ?? defaultCollapseButton(), null);
+		createRenderEffect((_p$) => {
+			var _v$ = cn("flex items-center justify-center rounded-full antialiased relative overflow-visible [font-synthesis:none]", outerTransitionClass(), isVertical() && "flex-col", "bg-[var(--rg-panel-bg)] [box-shadow:var(--rg-shadow)]", !props.isCollapsed && (isVertical() ? "px-1.5 gap-0 py-2" : "py-1.5 gap-0 px-2"), collapsedEdgeClasses(), props.isShaking && "animate-shake"), _v$2 = props.transformOrigin, _v$3 = pressSquishTransform(), _v$4 = cn("grid relative overflow-visible", gridSizeTransitionClass(), props.isCollapsed ? isVertical() ? "grid-rows-[0fr] pointer-events-none" : "grid-cols-[0fr] pointer-events-none" : isVertical() ? "grid-rows-[1fr]" : "grid-cols-[1fr]"), _v$5 = cn("flex", isVertical() ? "flex-col items-center min-h-0" : "items-center min-w-0", props.isCollapsed ? "opacity-0" : "opacity-100", props.isCollapsed ? opacityExitClass : opacityEnterClass), _v$6 = cn("relative overflow-visible", minDimensionClass());
+			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$2, "transform-origin", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$2, "transform", _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+			_v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+			_v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0,
+			n: void 0
+		});
+		return _el$2;
+	})();
+};
+delegateEvents(["click", "pointerup"]);
+
+//#endregion
+//#region src/utils/get-visual-viewport.ts
+const getVisualViewport = () => {
+	const visualViewport = window.visualViewport;
+	if (visualViewport) return {
+		width: visualViewport.width,
+		height: visualViewport.height,
+		offsetLeft: visualViewport.offsetLeft,
+		offsetTop: visualViewport.offsetTop
+	};
+	return {
+		width: window.innerWidth,
+		height: window.innerHeight,
+		offsetLeft: 0,
+		offsetTop: 0
+	};
+};
+
+//#endregion
+//#region src/utils/toolbar-position.ts
+const isHorizontalEdge = (edge) => edge === "top" || edge === "bottom";
+const getCollapsedDimsForEdge = (edge) => {
+	const horizontal = isHorizontalEdge(edge);
+	return {
+		width: horizontal ? 30 : 16,
+		height: horizontal ? 16 : 30
+	};
+};
+const getPositionFromEdgeAndRatio = (edge, ratio, elementWidth, elementHeight) => {
+	const viewport = getVisualViewport();
+	const viewportWidth = viewport.width;
+	const viewportHeight = viewport.height;
+	const minX = viewport.offsetLeft + 16;
+	const maxX = Math.max(minX, viewport.offsetLeft + viewportWidth - elementWidth - 16);
+	const minY = viewport.offsetTop + 16;
+	const maxY = Math.max(minY, viewport.offsetTop + viewportHeight - elementHeight - 16);
+	if (edge === "top" || edge === "bottom") {
+		const availableWidth = Math.max(0, viewportWidth - elementWidth - 16 * 2);
+		return {
+			x: Math.min(maxX, Math.max(minX, viewport.offsetLeft + 16 + availableWidth * ratio)),
+			y: edge === "top" ? minY : maxY
+		};
+	}
+	const availableHeight = Math.max(0, viewportHeight - elementHeight - 16 * 2);
+	const positionY = Math.min(maxY, Math.max(minY, viewport.offsetTop + 16 + availableHeight * ratio));
+	return {
+		x: edge === "left" ? minX : maxX,
+		y: positionY
+	};
+};
+const getRatioFromPosition = (edge, positionX, positionY, elementWidth, elementHeight) => {
+	const viewport = getVisualViewport();
+	const viewportWidth = viewport.width;
+	const viewportHeight = viewport.height;
+	if (edge === "top" || edge === "bottom") {
+		const availableWidth = viewportWidth - elementWidth - 16 * 2;
+		if (availableWidth <= 0) return TOOLBAR_DEFAULT_POSITION_RATIO;
+		return Math.max(0, Math.min(1, (positionX - viewport.offsetLeft - 16) / availableWidth));
+	}
+	const availableHeight = viewportHeight - elementHeight - 16 * 2;
+	if (availableHeight <= 0) return TOOLBAR_DEFAULT_POSITION_RATIO;
+	return Math.max(0, Math.min(1, (positionY - viewport.offsetTop - 16) / availableHeight));
+};
+const calculateExpandedPositionFromCollapsed = (collapsedPosition, edge, expandedDimensions, actualCollapsedWidth, actualCollapsedHeight) => {
+	const viewport = getVisualViewport();
+	const viewportWidth = viewport.width;
+	const viewportHeight = viewport.height;
+	const { width: expandedWidth, height: expandedHeight } = expandedDimensions;
+	let newPosition;
+	if (edge === "top" || edge === "bottom") {
+		const xOffset = (expandedWidth - actualCollapsedWidth) / 2;
+		newPosition = {
+			x: clampToRange(collapsedPosition.x - xOffset, viewport.offsetLeft + 16, viewport.offsetLeft + viewportWidth - expandedWidth - 16),
+			y: edge === "top" ? viewport.offsetTop + 16 : viewport.offsetTop + viewportHeight - expandedHeight - 16
+		};
+	} else {
+		const yOffset = (expandedHeight - actualCollapsedHeight) / 2;
+		const clampedY = clampToRange(collapsedPosition.y - yOffset, viewport.offsetTop + 16, viewport.offsetTop + viewportHeight - expandedHeight - 16);
+		newPosition = {
+			x: edge === "left" ? viewport.offsetLeft + 16 : viewport.offsetLeft + viewportWidth - expandedWidth - 16,
+			y: clampedY
+		};
+	}
+	const ratio = getRatioFromPosition(edge, newPosition.x, newPosition.y, expandedWidth, expandedHeight);
+	return {
+		position: newPosition,
+		ratio
+	};
+};
+const getCollapsedPosition = (edge, expandedPosition, expandedDimensions, collapsedDimensions) => {
+	const viewport = getVisualViewport();
+	const { width: expandedWidth, height: expandedHeight } = expandedDimensions;
+	const { width: collapsedWidth, height: collapsedHeight } = collapsedDimensions;
+	switch (edge) {
+		case "top":
+		case "bottom": {
+			const xOffset = (expandedWidth - collapsedWidth) / 2;
+			return {
+				x: clampToRange(expandedPosition.x + xOffset, viewport.offsetLeft, viewport.offsetLeft + viewport.width - collapsedWidth),
+				y: edge === "top" ? viewport.offsetTop : viewport.offsetTop + viewport.height - collapsedHeight
+			};
+		}
+		case "left":
+		case "right": {
+			const yOffset = (expandedHeight - collapsedHeight) / 2;
+			const clampedY = clampToRange(expandedPosition.y + yOffset, viewport.offsetTop, viewport.offsetTop + viewport.height - collapsedHeight);
+			return {
+				x: edge === "left" ? viewport.offsetLeft : viewport.offsetLeft + viewport.width - collapsedWidth,
+				y: clampedY
+			};
+		}
+	}
+};
+const getSnapPosition = (currentX, currentY, elementWidth, elementHeight, velocityX, velocityY) => {
+	const viewport = getVisualViewport();
+	const viewportWidth = viewport.width;
+	const viewportHeight = viewport.height;
+	const projectedX = currentX + velocityX * 150;
+	const projectedY = currentY + velocityY * 150;
+	const distanceToTop = projectedY - viewport.offsetTop + elementHeight / 2;
+	const distanceToBottom = viewport.offsetTop + viewportHeight - projectedY - elementHeight / 2;
+	const distanceToLeft = projectedX - viewport.offsetLeft + elementWidth / 2;
+	const distanceToRight = viewport.offsetLeft + viewportWidth - projectedX - elementWidth / 2;
+	const minDistance = Math.min(distanceToTop, distanceToBottom, distanceToLeft, distanceToRight);
+	const clampX = (rawX) => clampToRange(rawX, viewport.offsetLeft + 16, viewport.offsetLeft + viewportWidth - elementWidth - 16);
+	const clampY = (rawY) => clampToRange(rawY, viewport.offsetTop + 16, viewport.offsetTop + viewportHeight - elementHeight - 16);
+	if (minDistance === distanceToTop) return {
+		edge: "top",
+		x: clampX(projectedX),
+		y: viewport.offsetTop + 16
+	};
+	if (minDistance === distanceToLeft) return {
+		edge: "left",
+		x: viewport.offsetLeft + 16,
+		y: clampY(projectedY)
+	};
+	if (minDistance === distanceToRight) return {
+		edge: "right",
+		x: viewport.offsetLeft + viewportWidth - elementWidth - 16,
+		y: clampY(projectedY)
+	};
+	return {
+		edge: "bottom",
+		x: clampX(projectedX),
+		y: viewport.offsetTop + viewportHeight - elementHeight - 16
+	};
+};
+
+//#endregion
+//#region src/utils/create-toolbar-drag.ts
+const createToolbarDrag = (config) => {
+	const [isDragging, setIsDragging] = createSignal(false);
+	const [isSnapping, setIsSnapping] = createSignal(false);
+	const [hasDragMoved, setHasDragMoved] = createSignal(false);
+	const [velocity, setVelocity] = createSignal({
+		x: 0,
+		y: 0
+	});
+	let dragOffset = {
+		x: 0,
+		y: 0
+	};
+	let lastPointerPosition = {
+		x: 0,
+		y: 0,
+		time: 0
+	};
+	let pointerStartPosition = {
+		x: 0,
+		y: 0
+	};
+	let didDragOccur = false;
+	let snapAnimationTimeout;
+	let dragAbortController = null;
+	const teardownDragListeners = () => {
+		dragAbortController?.abort();
+		dragAbortController = null;
+	};
+	const handleWindowPointerMove = (event) => {
+		if (!hasDragMoved()) {
+			if (Math.hypot(event.clientX - pointerStartPosition.x, event.clientY - pointerStartPosition.y) <= 5) return;
+			setHasDragMoved(true);
+			config.onDragStart();
+		}
+		const now = performance.now();
+		const deltaTime = now - lastPointerPosition.time;
+		if (deltaTime > 0) setVelocity({
+			x: (event.clientX - lastPointerPosition.x) / deltaTime,
+			y: (event.clientY - lastPointerPosition.y) / deltaTime
+		});
+		lastPointerPosition = {
+			x: event.clientX,
+			y: event.clientY,
+			time: now
+		};
+		const newX = event.clientX - dragOffset.x;
+		const newY = event.clientY - dragOffset.y;
+		config.onPositionUpdate({
+			x: newX,
+			y: newY
+		});
+	};
+	const handleWindowPointerUp = () => {
+		teardownDragListeners();
+		const didMove = hasDragMoved();
+		setIsDragging(false);
+		if (!didMove) return;
+		didDragOccur = true;
+		const containerRef = config.getContainerRef();
+		const rect = containerRef?.getBoundingClientRect();
+		if (!rect) return;
+		const currentVelocity = velocity();
+		const snap = getSnapPosition(rect.left, rect.top, rect.width, rect.height, currentVelocity.x, currentVelocity.y);
+		const ratio = getRatioFromPosition(snap.edge, snap.x, snap.y, rect.width, rect.height);
+		config.onSnapEdgeChange(snap.edge, ratio);
+		setIsSnapping(true);
+		nativeRequestAnimationFrame(() => {
+			const postRenderRect = containerRef?.getBoundingClientRect();
+			const updatedDimensions = postRenderRect ? {
+				width: postRenderRect.width,
+				height: postRenderRect.height
+			} : config.getExpandedDimensions();
+			nativeRequestAnimationFrame(() => {
+				const snappedPosition = getPositionFromEdgeAndRatio(snap.edge, ratio, updatedDimensions.width, updatedDimensions.height);
+				config.onSnapComplete({
+					edge: snap.edge,
+					ratio,
+					position: snappedPosition,
+					expandedDimensions: updatedDimensions
+				});
+				snapAnimationTimeout = setTimeout(() => {
+					setIsSnapping(false);
+					config.onSnapAnimationEnd?.();
+				}, 300);
+			});
+		});
+	};
+	const handlePointerDown = (event) => {
+		if (event.button !== 0) return;
+		if (config.isCollapsed()) return;
+		const rect = config.getContainerRef()?.getBoundingClientRect();
+		if (!rect) return;
+		pointerStartPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		dragOffset = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+		setIsDragging(true);
+		setHasDragMoved(false);
+		setVelocity({
+			x: 0,
+			y: 0
+		});
+		lastPointerPosition = {
+			x: event.clientX,
+			y: event.clientY,
+			time: performance.now()
+		};
+		teardownDragListeners();
+		dragAbortController = new AbortController();
+		const { signal } = dragAbortController;
+		window.addEventListener("pointermove", handleWindowPointerMove, { signal });
+		window.addEventListener("pointerup", handleWindowPointerUp, { signal });
+		window.addEventListener("pointercancel", handleWindowPointerUp, { signal });
+	};
+	const createDragAwareHandler = (callback) => (event) => {
+		event.stopImmediatePropagation();
+		if (didDragOccur) {
+			didDragOccur = false;
+			return;
+		}
+		callback();
+	};
+	onCleanup(() => {
+		teardownDragListeners();
+		clearTimeout(snapAnimationTimeout);
+	});
+	return {
+		isDragging,
+		isSnapping,
+		handlePointerDown,
+		createDragAwareHandler
+	};
+};
+
+//#endregion
+//#region src/components/toolbar/index.tsx
+var _tmpl$$5 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar>`), _tmpl$2$3 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-toolbar-toggle>`);
+const Toolbar = (props) => {
+	let containerRef;
+	let unfreezeUpdatesCallback = null;
+	const savedState = loadToolbarState();
+	const [isVisible, setIsVisible] = createSignal(false);
+	const [isCollapsed, setIsCollapsed] = createSignal(false);
+	const [isResizing, setIsResizing] = createSignal(false);
+	const [snapEdge, setSnapEdge] = createSignal(savedState?.edge ?? "bottom");
+	const [positionRatio, setPositionRatio] = createSignal(savedState?.ratio ?? .5);
+	const [position, setPosition] = createSignal({
+		x: 0,
+		y: 0
+	});
+	const [isShaking, setIsShaking] = createSignal(false);
+	const [isCollapseAnimating, setIsCollapseAnimating] = createSignal(false);
+	const [isChevronPressed, setIsChevronPressed] = createSignal(false);
+	const [isToolbarHovered, setIsToolbarHovered] = createSignal(false);
+	const drag = createToolbarDrag({
+		getContainerRef: () => containerRef,
+		isCollapsed,
+		getExpandedDimensions: () => expandedDimensions,
+		onDragStart: () => {
+			if (unfreezeUpdatesCallback) {
+				unfreezeUpdatesCallback();
+				unfreezeUpdatesCallback = null;
+				unfreezeGlobalAnimations();
+				unfreezePseudoStates();
+			}
+		},
+		onPositionUpdate: (newPosition) => setPosition(newPosition),
+		onSnapEdgeChange: (edge, ratio) => {
+			syncCollapsedDimensionsToEdge(snapEdge(), edge);
+			setSnapEdge(edge);
+			setPositionRatio(ratio);
+		},
+		onSnapComplete: (result) => {
+			expandedDimensions = result.expandedDimensions;
+			setPosition(result.position);
+			saveAndNotify({
+				edge: result.edge,
+				ratio: result.ratio,
+				collapsed: isCollapsed(),
+				enabled: !isCollapsed()
+			});
+		}
+	});
+	const isVertical = () => snapEdge() === "left" || snapEdge() === "right";
+	const buttonSpacingClass = () => getButtonSpacingClass(isVertical());
+	const stopEventPropagation = (event) => {
+		event.stopImmediatePropagation();
+	};
+	const createFreezeHandlers = (options) => ({
+		onMouseEnter: (event) => {
+			if (drag.isDragging()) return;
+			if (options?.shouldFreezeInteractions !== false && !unfreezeUpdatesCallback) {
+				unfreezeUpdatesCallback = freezeUpdates();
+				freezeGlobalAnimations();
+				freezePseudoStates(event.clientX, event.clientY);
+			}
+			options?.onHoverChange?.(true);
+		},
+		onMouseLeave: () => {
+			if (options?.shouldFreezeInteractions !== false && !props.isActive && !props.isContextMenuOpen) {
+				unfreezeUpdatesCallback?.();
+				unfreezeUpdatesCallback = null;
+				unfreezeGlobalAnimations();
+				unfreezePseudoStates();
+			}
+			options?.onHoverChange?.(false);
+		}
+	});
+	createEffect(on(() => props.shakeCount, (count) => {
+		if (count && !props.enabled) setIsShaking(true);
+	}));
+	createEffect(on(() => [props.isActive, props.isContextMenuOpen], ([isActive, isContextMenuOpen]) => {
+		if (!isActive && !isContextMenuOpen && unfreezeUpdatesCallback) {
+			unfreezeUpdatesCallback();
+			unfreezeUpdatesCallback = null;
+		}
+	}));
+	let expandedDimensions = {
+		width: 78,
+		height: 28
+	};
+	const [collapsedDimensions, setCollapsedDimensions] = createSignal(getCollapsedDimsForEdge(snapEdge()));
+	const syncCollapsedDimensionsToEdge = (oldEdge, newEdge) => {
+		if (isHorizontalEdge(oldEdge) === isHorizontalEdge(newEdge)) return;
+		setCollapsedDimensions(getCollapsedDimsForEdge(newEdge));
+	};
+	const getExpandedFromCollapsed = (collapsedPosition, edge) => {
+		const actualRect = containerRef?.getBoundingClientRect();
+		const fallback = getCollapsedDimsForEdge(edge);
+		return calculateExpandedPositionFromCollapsed(collapsedPosition, edge, expandedDimensions, actualRect?.width ?? fallback.width, actualRect?.height ?? fallback.height);
+	};
+	const recalculatePosition = () => {
+		setPosition(getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), expandedDimensions.width, expandedDimensions.height));
+	};
+	const handleToggle = drag.createDragAwareHandler(() => props.onToggle?.());
+	const handleToggleCollapse = drag.createDragAwareHandler(() => {
+		const rect = containerRef?.getBoundingClientRect();
+		const wasCollapsed = isCollapsed();
+		let newRatio = positionRatio();
+		if (wasCollapsed) {
+			const { position: newPos, ratio } = getExpandedFromCollapsed(currentPosition(), snapEdge());
+			newRatio = ratio;
+			setPosition(newPos);
+			setPositionRatio(newRatio);
+		} else if (rect) expandedDimensions = {
+			width: rect.width,
+			height: rect.height
+		};
+		setIsCollapseAnimating(true);
+		setIsCollapsed((prev) => !prev);
+		saveAndNotify({
+			edge: snapEdge(),
+			ratio: newRatio,
+			collapsed: !wasCollapsed,
+			enabled: wasCollapsed
+		});
+		if (collapseAnimationTimeout) clearTimeout(collapseAnimationTimeout);
+		collapseAnimationTimeout = setTimeout(() => {
+			setIsCollapseAnimating(false);
+			captureDimensionsAfterAnimation();
+		}, 260);
+	});
+	const computeCollapsedPosition = () => getCollapsedPosition(snapEdge(), position(), expandedDimensions, collapsedDimensions());
+	let resizeTimeout;
+	let collapseAnimationTimeout;
+	let lastObservedExpandedSize = null;
+	const captureDimensionsAfterAnimation = () => {
+		const finalRect = containerRef?.getBoundingClientRect();
+		if (!finalRect || finalRect.width === 0 || finalRect.height === 0) return;
+		if (isCollapsed()) setCollapsedDimensions({
+			width: finalRect.width,
+			height: finalRect.height
+		});
+		else {
+			expandedDimensions = {
+				width: finalRect.width,
+				height: finalRect.height
+			};
+			lastObservedExpandedSize = {
+				width: finalRect.width,
+				height: finalRect.height
+			};
+		}
+	};
+	const handleObservedSizeChange = (newWidth, newHeight) => {
+		if (newWidth === 0 || newHeight === 0) return;
+		if (drag.isDragging() || drag.isSnapping()) return;
+		if (isCollapseAnimating()) return;
+		if (isCollapsed()) {
+			const currentCollapsed = collapsedDimensions();
+			if (currentCollapsed.width === newWidth && currentCollapsed.height === newHeight) return;
+			setCollapsedDimensions({
+				width: newWidth,
+				height: newHeight
+			});
+			return;
+		}
+		if (lastObservedExpandedSize && lastObservedExpandedSize.width === newWidth && lastObservedExpandedSize.height === newHeight) return;
+		lastObservedExpandedSize = {
+			width: newWidth,
+			height: newHeight
+		};
+		expandedDimensions = {
+			width: newWidth,
+			height: newHeight
+		};
+		setPosition(getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), newWidth, newHeight));
+	};
+	const handleResize = () => {
+		if (drag.isDragging()) return;
+		setIsResizing(true);
+		recalculatePosition();
+		if (resizeTimeout) clearTimeout(resizeTimeout);
+		resizeTimeout = setTimeout(() => {
+			setIsResizing(false);
+			const newRatio = getRatioFromPosition(snapEdge(), position().x, position().y, expandedDimensions.width, expandedDimensions.height);
+			setPositionRatio(newRatio);
+			saveAndNotify({
+				edge: snapEdge(),
+				ratio: newRatio,
+				collapsed: isCollapsed(),
+				enabled: !isCollapsed()
+			});
+		}, 500);
+	};
+	const saveAndNotify = (state) => {
+		saveToolbarState(state);
+		props.onStateChange?.(state);
+	};
+	onMount(() => {
+		if (containerRef) props.onContainerRef?.(containerRef);
+		const rect = containerRef?.getBoundingClientRect();
+		const viewport = getVisualViewport();
+		const hasMeasurableRect = Boolean(rect && rect.width > 0 && rect.height > 0);
+		if (savedState) {
+			if (hasMeasurableRect && rect) expandedDimensions = {
+				width: rect.width,
+				height: rect.height
+			};
+			setIsCollapsed(savedState.collapsed);
+			setPosition(getPositionFromEdgeAndRatio(savedState.edge, savedState.ratio, expandedDimensions.width, expandedDimensions.height));
+		} else if (hasMeasurableRect && rect) {
+			expandedDimensions = {
+				width: rect.width,
+				height: rect.height
+			};
+			setPosition({
+				x: viewport.offsetLeft + (viewport.width - rect.width) / 2,
+				y: viewport.offsetTop + viewport.height - rect.height - 16
+			});
+			setPositionRatio(TOOLBAR_DEFAULT_POSITION_RATIO);
+		} else {
+			setPosition(getPositionFromEdgeAndRatio("bottom", TOOLBAR_DEFAULT_POSITION_RATIO, expandedDimensions.width, expandedDimensions.height));
+			setPositionRatio(TOOLBAR_DEFAULT_POSITION_RATIO);
+		}
+		if (props.onSubscribeToStateChanges) onCleanup(props.onSubscribeToStateChanges((state) => {
+			if (isCollapseAnimating()) return;
+			if (!containerRef?.getBoundingClientRect()) return;
+			const didCollapsedChange = isCollapsed() !== state.collapsed;
+			syncCollapsedDimensionsToEdge(snapEdge(), state.edge);
+			setSnapEdge(state.edge);
+			if (didCollapsedChange && !state.collapsed) {
+				const collapsedPos = currentPosition();
+				setIsCollapseAnimating(true);
+				setIsCollapsed(state.collapsed);
+				const { position: newPos, ratio: newRatio } = getExpandedFromCollapsed(collapsedPos, state.edge);
+				setPosition(newPos);
+				setPositionRatio(newRatio);
+				clearTimeout(collapseAnimationTimeout);
+				collapseAnimationTimeout = setTimeout(() => {
+					setIsCollapseAnimating(false);
+					captureDimensionsAfterAnimation();
+				}, 260);
+			} else {
+				if (didCollapsedChange) {
+					setIsCollapseAnimating(true);
+					clearTimeout(collapseAnimationTimeout);
+					collapseAnimationTimeout = setTimeout(() => {
+						setIsCollapseAnimating(false);
+						captureDimensionsAfterAnimation();
+					}, 260);
+				}
+				setIsCollapsed(state.collapsed);
+				setPosition(getPositionFromEdgeAndRatio(state.edge, state.ratio, expandedDimensions.width, expandedDimensions.height));
+				setPositionRatio(state.ratio);
+			}
+		}));
+		window.addEventListener("resize", handleResize);
+		window.visualViewport?.addEventListener("resize", handleResize);
+		window.visualViewport?.addEventListener("scroll", handleResize);
+		if (typeof ResizeObserver !== "undefined" && containerRef) {
+			const observer = new ResizeObserver((entries) => {
+				const entry = entries[0];
+				if (!entry) return;
+				const borderBox = entry.borderBoxSize?.[0];
+				let width;
+				let height;
+				if (borderBox) {
+					width = borderBox.inlineSize;
+					height = borderBox.blockSize;
+				} else {
+					const rect = containerRef?.getBoundingClientRect();
+					if (!rect) return;
+					width = rect.width;
+					height = rect.height;
+				}
+				handleObservedSizeChange(width, height);
+			});
+			observer.observe(containerRef);
+			onCleanup(() => observer.disconnect());
+		}
+		const fadeInTimeout = setTimeout(() => {
+			setIsVisible(true);
+		}, 500);
+		onCleanup(() => {
+			clearTimeout(fadeInTimeout);
+		});
+	});
+	onCleanup(() => {
+		window.removeEventListener("resize", handleResize);
+		window.visualViewport?.removeEventListener("resize", handleResize);
+		window.visualViewport?.removeEventListener("scroll", handleResize);
+		clearTimeout(resizeTimeout);
+		clearTimeout(collapseAnimationTimeout);
+		unfreezeUpdatesCallback?.();
+	});
+	const currentPosition = () => {
+		return isCollapsed() ? computeCollapsedPosition() : position();
+	};
+	const getCursorClass = () => {
+		if (isCollapsed()) return "cursor-pointer";
+		if (drag.isDragging()) return "cursor-grabbing";
+		return "cursor-grab";
+	};
+	const isInteracting = () => isToolbarHovered() || Boolean(props.isContextMenuOpen) || drag.isDragging() || drag.isSnapping() || isCollapseAnimating() || isChevronPressed();
+	const shouldDim = () => Boolean(props.isActive) && !isInteracting();
+	const getTransitionClass = () => {
+		if (isResizing() || drag.isDragging()) return "";
+		if (drag.isSnapping()) return "transition-[transform,opacity] duration-300 ease-out";
+		if (isCollapseAnimating()) return `transition-[transform,opacity] ${isCollapsed() ? "duration-140" : "duration-220"} ease-drawer`;
+		return "transition-[transform,opacity] duration-400 ease-drawer";
+	};
+	const getTransformOrigin = () => {
+		switch (snapEdge()) {
+			case "top": return "center top";
+			case "bottom": return "center bottom";
+			case "left": return "left center";
+			case "right": return "right center";
+			default: return "center center";
+		}
+	};
+	return (() => {
+		var _el$ = _tmpl$$5();
+		_el$.addEventListener("mouseleave", () => {
+			setIsToolbarHovered(false);
+			props.onSelectHoverChange?.(false);
+		});
+		_el$.addEventListener("mouseenter", () => {
+			setIsToolbarHovered(true);
+			if (!isCollapsed()) props.onSelectHoverChange?.(true);
+		});
+		addEventListener(_el$, "mousedown", stopEventPropagation);
+		addEventListener(_el$, "pointerdown", (event) => {
+			stopEventPropagation(event);
+			drag.handlePointerDown(event);
+		});
+		var _ref$ = containerRef;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
+		insert(_el$, createComponent(ToolbarContent, {
+			get isCollapsed() {
+				return isCollapsed();
+			},
+			get snapEdge() {
+				return snapEdge();
+			},
+			get isShaking() {
+				return isShaking();
+			},
+			get isChevronPressed() {
+				return isChevronPressed();
+			},
+			get transformOrigin() {
+				return getTransformOrigin();
+			},
+			onAnimationEnd: () => setIsShaking(false),
+			onCollapseClick: handleToggleCollapse,
+			onCollapsePointerDown: () => setIsChevronPressed(true),
+			onCollapsePointerUp: () => setIsChevronPressed(false),
+			onCollapsePointerLeave: () => setIsChevronPressed(false),
+			onPanelClick: (event) => {
+				if (isCollapsed()) {
+					event.stopPropagation();
+					const { position: newPos, ratio: newRatio } = getExpandedFromCollapsed(currentPosition(), snapEdge());
+					setPosition(newPos);
+					setPositionRatio(newRatio);
+					setIsCollapseAnimating(true);
+					setIsCollapsed(false);
+					saveAndNotify({
+						edge: snapEdge(),
+						ratio: newRatio,
+						collapsed: false,
+						enabled: true
+					});
+					if (collapseAnimationTimeout) clearTimeout(collapseAnimationTimeout);
+					collapseAnimationTimeout = setTimeout(() => {
+						setIsCollapseAnimating(false);
+						captureDimensionsAfterAnimation();
+					}, 260);
+				}
+			},
+			get selectButton() {
+				return (() => {
+					var _el$2 = _tmpl$2$3();
+					addEventListener(_el$2, "contextmenu", (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						props.onToggleToolbarMenu?.();
+					});
+					addEventListener(_el$2, "click", handleToggle, true);
+					spread(_el$2, mergeProps({
+						get ["aria-label"]() {
+							return props.isActive ? "Stop selecting element" : "Select element";
+						},
+						get ["aria-pressed"]() {
+							return Boolean(props.isActive);
+						},
+						get ["class"]() {
+							return cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox", buttonSpacingClass());
+						}
+					}, createFreezeHandlers), false, true);
+					insert(_el$2, createComponent(IconSelect, {
+						size: 14,
+						get ["class"]() {
+							return cn("transition-colors", props.isActive ? "text-[var(--rg-text-primary)]" : "text-[var(--rg-text-secondary)]");
+						}
+					}));
+					return _el$2;
+				})();
+			}
+		}));
+		createRenderEffect((_p$) => {
+			var _v$ = cn("fixed left-0 top-0 font-sans text-[13px] antialiased select-none", getCursorClass(), getTransitionClass(), isVisible() ? "pointer-events-auto" : "pointer-events-none"), _v$2 = String(Z_INDEX_OVERLAY), _v$3 = `translate(${currentPosition().x}px, ${currentPosition().y}px) scale(${shouldDim() ? .97 : 1})`, _v$4 = getTransformOrigin(), _v$5 = !isVisible() ? 0 : shouldDim() ? .55 : 1;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && setStyleProperty(_el$, "z-index", _p$.t = _v$2);
+			_v$3 !== _p$.a && setStyleProperty(_el$, "transform", _p$.a = _v$3);
+			_v$4 !== _p$.o && setStyleProperty(_el$, "transform-origin", _p$.o = _v$4);
+			_v$5 !== _p$.i && setStyleProperty(_el$, "opacity", _p$.i = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0,
+			i: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents(["click"]);
+
+//#endregion
+//#region src/components/icons/icon-command.tsx
+var _tmpl$$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path fill-rule=evenodd clip-rule=evenodd d="M6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8H8V6.5C8 5.67157 7.32843 5 6.5 5ZM10 8V6.5C10 4.567 8.433 3 6.5 3C4.567 3 3 4.567 3 6.5C3 8.433 4.567 10 6.5 10H8V14H6.5C4.567 14 3 15.567 3 17.5C3 19.433 4.567 21 6.5 21C8.433 21 10 19.433 10 17.5V16H14V17.5C14 19.433 15.567 21 17.5 21C19.433 21 21 19.433 21 17.5C21 15.567 19.433 14 17.5 14H16V10H17.5C19.433 10 21 8.433 21 6.5C21 4.567 19.433 3 17.5 3C15.567 3 14 4.567 14 6.5V8H10ZM10 10V14H14V10H10ZM16 8H17.5C18.3284 8 19 7.32843 19 6.5C19 5.67157 18.3284 5 17.5 5C16.6716 5 16 5.67157 16 6.5V8ZM16 16V17.5C16 18.3284 16.6716 19 17.5 19C18.3284 19 19 18.3284 19 17.5C19 16.6716 18.3284 16 17.5 16H16ZM8 16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19C7.32843 19 8 18.3284 8 17.5V16Z">`);
+const IconCommand = (props) => {
+	const size = () => props.size ?? 11;
+	return (() => {
+		var _el$ = _tmpl$$4();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size(), _v$3 = props.class;
+			_v$ !== _p$.e && setAttribute(_el$, "width", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "height", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$, "class", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/components/shortcut-hint.tsx
+var _tmpl$$3 = /* @__PURE__ */ template(`<span>`), _tmpl$2$2 = /* @__PURE__ */ template(`<span style=display:inline-flex;align-items:center;gap:2px>`), _tmpl$3$1 = /* @__PURE__ */ template(`<span>Ctrl+`);
+const ShortcutHint = (props) => {
+	const isEnter = () => props.shortcut === "Enter";
+	const isMacPlatform = isMac();
+	return (() => {
+		var _el$ = _tmpl$2$2();
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return isEnter();
+			},
+			get children() {
+				return createComponent(IconReturn, { size: 8 });
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return !isEnter();
+			},
+			get children() {
+				return createComponent(Show, {
+					when: isMacPlatform,
+					get fallback() {
+						return (() => {
+							var _el$3 = _tmpl$3$1();
+							_el$3.firstChild;
+							insert(_el$3, () => props.shortcut, null);
+							return _el$3;
+						})();
+					},
+					get children() {
+						return [createComponent(IconCommand, { size: 9 }), (() => {
+							var _el$2 = _tmpl$$3();
+							insert(_el$2, () => props.shortcut);
+							return _el$2;
+						})()];
+					}
+				});
+			}
+		}), null);
+		createRenderEffect(() => className(_el$, props.class));
+		return _el$;
+	})();
+};
+
+//#endregion
+//#region src/utils/resolve-action-enabled.ts
+const resolveBooleanEnabled = (enabled) => enabled ?? true;
+const resolveActionEnabled = (action, context) => {
+	if (typeof action.enabled === "function") {
+		if (!context) return false;
+		return action.enabled(context);
+	}
+	return resolveBooleanEnabled(action.enabled);
+};
+
+//#endregion
+//#region src/utils/suppress-menu-event.ts
+const suppressMenuEvent = (event) => {
+	if (event.type === "contextmenu") event.preventDefault();
+	event.stopImmediatePropagation();
+};
+
+//#endregion
+//#region src/utils/register-overlay-dismiss.ts
+const registerOverlayDismiss = (options) => {
+	const handleKeyDown = (event) => {
+		if (!options.isOpen()) return;
+		if (options.shouldIgnoreInputEvents && isKeyboardEventTriggeredByInput(event)) return;
+		if (event.code === "Escape") {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			options.onDismiss();
+			return;
+		}
+		if (event.code === "Enter" && options.onConfirm) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			options.onConfirm();
+		}
+	};
+	const handleClickOutside = (event) => {
+		if (!options.isOpen()) return;
+		if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
+		if (options.shouldIgnoreRightClick && event instanceof MouseEvent && event.button === 2) return;
+		options.onDismiss();
+	};
+	const frameId = nativeRequestAnimationFrame(() => {
+		window.addEventListener("mousedown", handleClickOutside, { capture: true });
+		window.addEventListener("touchstart", handleClickOutside, { capture: true });
+	});
+	window.addEventListener("keydown", handleKeyDown, { capture: true });
+	return () => {
+		nativeCancelAnimationFrame(frameId);
+		window.removeEventListener("keydown", handleKeyDown, { capture: true });
+		window.removeEventListener("mousedown", handleClickOutside, { capture: true });
+		window.removeEventListener("touchstart", handleClickOutside, { capture: true });
+	};
+};
+
+//#endregion
+//#region src/components/context-menu.tsx
+var _tmpl$$2 = /* @__PURE__ */ template(`<div class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"><div class="pointer-events-none absolute opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out bg-[var(--rg-surface-hover)]">`), _tmpl$2$1 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-context-menu class="fixed font-sans text-[13px] antialiased [filter:var(--rg-drop-shadow)] select-none"style=pointer-events:auto><div><div class="contain-layout shrink-0 flex items-center gap-1 pt-1.5 pb-1 w-fit h-fit px-2">`), _tmpl$3 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="relative z-1 contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer text-left border-none bg-transparent disabled:opacity-40 disabled:cursor-default"><span class="text-[13px] leading-4 font-sans font-medium text-[var(--rg-text-primary)]">`);
+const ContextMenu = (props) => {
+	let containerRef;
+	const { containerRef: highlightContainerRef, highlightRef, updateHighlight, clearHighlight } = createMenuHighlight();
+	const [measuredWidth, setMeasuredWidth] = createSignal(0);
+	const [measuredHeight, setMeasuredHeight] = createSignal(0);
+	const isVisible = () => props.position !== null;
+	const tagDisplayResult = createMemo(() => getTagDisplay({
+		tagName: props.tagName,
+		componentName: props.componentName
+	}));
+	const measureContainer = () => {
+		if (containerRef) {
+			const rect = containerRef.getBoundingClientRect();
+			setMeasuredWidth(rect.width);
+			setMeasuredHeight(rect.height);
+		}
+	};
+	createEffect(() => {
+		if (isVisible()) nativeRequestAnimationFrame(measureContainer);
+	});
+	const computedPosition = createMemo(() => {
+		const bounds = props.selectionBounds;
+		const clickPosition = props.position;
+		const labelWidth = measuredWidth();
+		const labelHeight = measuredHeight();
+		if (labelWidth === 0 || labelHeight === 0 || !bounds || !clickPosition) return {
+			left: DROPDOWN_OFFSCREEN_POSITION.left,
+			top: DROPDOWN_OFFSCREEN_POSITION.top,
+			arrowLeft: 0,
+			arrowPosition: "bottom"
+		};
+		const cursorX = clickPosition.x ?? bounds.x + bounds.width / 2;
+		const positionLeft = Math.max(4, Math.min(cursorX - labelWidth / 2, window.innerWidth - labelWidth - 4));
+		const arrowLeft = Math.max(8, Math.min(cursorX - positionLeft, labelWidth - 8));
+		const positionBelow = bounds.y + bounds.height + 8 + 4;
+		const positionAbove = bounds.y - labelHeight - 8 - 4;
+		const wouldOverflowBottom = positionBelow + labelHeight > window.innerHeight;
+		const hasSpaceAbove = positionAbove >= 0;
+		const shouldFlipAbove = wouldOverflowBottom && hasSpaceAbove;
+		let positionTop = shouldFlipAbove ? positionAbove : positionBelow;
+		let arrowPosition = shouldFlipAbove ? "top" : "bottom";
+		if (wouldOverflowBottom && !hasSpaceAbove) {
+			const cursorY = clickPosition.y ?? bounds.y + bounds.height / 2;
+			positionTop = Math.max(4, Math.min(cursorY + 4, window.innerHeight - labelHeight - 4));
+			arrowPosition = "top";
+		}
+		return {
+			left: positionLeft,
+			top: positionTop,
+			arrowLeft,
+			arrowPosition
+		};
+	});
+	const menuItems = createMemo(() => {
+		const pluginActions = props.actions ?? [];
+		const context = props.actionContext;
+		return pluginActions.map((action) => ({
+			label: action.label,
+			action: () => {
+				if (context) action.onAction(context);
+			},
+			enabled: resolveActionEnabled(action, context),
+			shortcut: action.shortcut
+		}));
+	});
+	const handleAction = (item, event) => {
+		event.stopPropagation();
+		if (item.enabled) {
+			item.action();
+			props.onHide();
+		}
+	};
+	onMount(() => {
+		measureContainer();
+		const handleKeyDown = (event) => {
+			if (!isVisible()) return;
+			const isEnter = event.key === "Enter";
+			const hasModifierKey = event.metaKey || event.ctrlKey;
+			const keyLower = event.key.toLowerCase();
+			const pluginActions = props.actions ?? [];
+			const context = props.actionContext;
+			const runActionIfAllowed = (action) => {
+				if (!context) return;
+				if (!resolveActionEnabled(action, context)) return;
+				event.preventDefault();
+				event.stopPropagation();
+				action.onAction(context);
+				props.onHide();
+			};
+			if (isEnter) {
+				const enterAction = pluginActions.find((action) => action.shortcut === "Enter");
+				if (enterAction) runActionIfAllowed(enterAction);
+				return;
+			}
+			if (!hasModifierKey) return;
+			if (event.repeat) return;
+			const modifierAction = pluginActions.find((action) => action.shortcut && action.shortcut !== "Enter" && keyLower === action.shortcut.toLowerCase());
+			if (modifierAction) runActionIfAllowed(modifierAction);
+		};
+		const unregisterOverlayDismiss = registerOverlayDismiss({
+			isOpen: isVisible,
+			onDismiss: props.onDismiss,
+			shouldIgnoreRightClick: true
+		});
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+		onCleanup(() => {
+			unregisterOverlayDismiss();
+			window.removeEventListener("keydown", handleKeyDown, { capture: true });
+		});
+	});
+	return createComponent(Show, {
+		get when() {
+			return isVisible();
+		},
+		get children() {
+			var _el$ = _tmpl$2$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+			addEventListener(_el$, "contextmenu", suppressMenuEvent, true);
+			addEventListener(_el$, "click", suppressMenuEvent, true);
+			addEventListener(_el$, "mousedown", suppressMenuEvent, true);
+			addEventListener(_el$, "pointerdown", suppressMenuEvent, true);
+			var _ref$ = containerRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
+			setStyleProperty(_el$, "z-index", `${Z_INDEX_OVERLAY}`);
+			insert(_el$, createComponent(Arrow, {
+				get position() {
+					return computedPosition().arrowPosition;
+				},
+				leftPercent: 0,
+				get leftOffsetPx() {
+					return computedPosition().arrowLeft;
+				}
+			}), _el$2);
+			insert(_el$3, createComponent(TagBadge, {
+				get tagName() {
+					return tagDisplayResult().tagName;
+				},
+				get componentName() {
+					return tagDisplayResult().componentName;
+				},
+				get isClickable() {
+					return props.hasFilePath;
+				},
+				onClick: (event) => {
+					event.stopPropagation();
+					if (props.hasFilePath && props.actionContext) (props.actions?.find((action) => action.id === "open"))?.onAction(props.actionContext);
+				},
+				shrink: true,
+				get forceShowIcon() {
+					return props.hasFilePath;
+				}
+			}));
+			insert(_el$2, createComponent(BottomSection, { get children() {
+				var _el$4 = _tmpl$$2(), _el$5 = _el$4.firstChild;
+				use(highlightContainerRef, _el$4);
+				use(highlightRef, _el$5);
+				insert(_el$4, createComponent(For, {
+					get each() {
+						return menuItems();
+					},
+					children: (item) => (() => {
+						var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+						_el$6.$$click = (event) => handleAction(item, event);
+						addEventListener(_el$6, "pointerleave", clearHighlight);
+						_el$6.addEventListener("pointerenter", (event) => {
+							if (item.enabled) updateHighlight(event.currentTarget);
+						});
+						_el$6.$$pointerdown = (event) => event.stopPropagation();
+						insert(_el$7, () => item.label);
+						insert(_el$6, createComponent(Show, {
+							get when() {
+								return item.shortcut;
+							},
+							children: (shortcut) => createComponent(ShortcutHint, {
+								get shortcut() {
+									return shortcut();
+								},
+								"class": "text-[11px] font-sans text-[var(--rg-text-secondary)] ml-4"
+							})
+						}), null);
+						createRenderEffect((_p$) => {
+							var _v$4 = item.label.toLowerCase(), _v$5 = !item.enabled;
+							_v$4 !== _p$.e && setAttribute(_el$6, "data-react-grab-menu-item", _p$.e = _v$4);
+							_v$5 !== _p$.t && (_el$6.disabled = _p$.t = _v$5);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$6;
+					})()
+				}), null);
+				return _el$4;
+			} }), null);
+			createRenderEffect((_p$) => {
+				var _v$ = `${computedPosition().top}px`, _v$2 = `${computedPosition().left}px`, _v$3 = cn("contain-layout flex flex-col justify-center items-start rounded-[10px] antialiased w-fit h-fit min-w-[100px] [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-[var(--rg-panel-bg)]");
+				_v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
+				_v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$;
+		}
+	});
+};
+delegateEvents([
+	"pointerdown",
+	"mousedown",
+	"click",
+	"contextmenu"
+]);
+
+//#endregion
+//#region src/utils/clamp-to-viewport.ts
+const clampToViewport = (value, elementSize, viewportSize, padding) => Math.max(padding, Math.min(value, viewportSize - elementSize - padding));
+
+//#endregion
+//#region src/utils/get-anchored-dropdown-position.ts
+const getAnchoredDropdownPosition = ({ anchor, measuredWidth, measuredHeight, viewportWidth, viewportHeight, anchorGapPx, viewportPaddingPx, offscreenPosition }) => {
+	if (!anchor || measuredWidth === 0 || measuredHeight === 0) return offscreenPosition;
+	let rawLeft;
+	let rawTop;
+	if (anchor.edge === "left" || anchor.edge === "right") {
+		rawLeft = anchor.edge === "left" ? anchor.x + anchorGapPx : anchor.x - measuredWidth - anchorGapPx;
+		rawTop = anchor.y - measuredHeight / 2;
+	} else {
+		rawLeft = anchor.x - measuredWidth / 2;
+		rawTop = anchor.edge === "top" ? anchor.y + anchorGapPx : anchor.y - measuredHeight - anchorGapPx;
+	}
+	return {
+		left: clampToViewport(rawLeft, measuredWidth, viewportWidth, viewportPaddingPx),
+		top: clampToViewport(rawTop, measuredHeight, viewportHeight, viewportPaddingPx)
+	};
+};
+
+//#endregion
+//#region src/utils/create-anchored-dropdown.ts
+const createAnchoredDropdown = (containerRef, anchorAccessor) => {
+	const [measuredWidth, setMeasuredWidth] = createSignal(0);
+	const [measuredHeight, setMeasuredHeight] = createSignal(0);
+	const [shouldMount, setShouldMount] = createSignal(false);
+	const [isAnimatedIn, setIsAnimatedIn] = createSignal(false);
+	const [viewportVersion, setViewportVersion] = createSignal(0);
+	const [lastAnchorEdge, setLastAnchorEdge] = createSignal("bottom");
+	let exitAnimationTimeout;
+	let enterAnimationFrameId;
+	const clearAnimationHandles = () => {
+		clearTimeout(exitAnimationTimeout);
+		if (enterAnimationFrameId !== void 0) {
+			nativeCancelAnimationFrame(enterAnimationFrameId);
+			enterAnimationFrameId = void 0;
+		}
+	};
+	const measure = () => {
+		const container = containerRef();
+		if (container) {
+			setMeasuredWidth(container.offsetWidth);
+			setMeasuredHeight(container.offsetHeight);
+		}
+	};
+	const handleViewportChange = () => {
+		setViewportVersion((previousViewportVersion) => previousViewportVersion + 1);
+		measure();
+	};
+	createEffect(() => {
+		const anchor = anchorAccessor();
+		if (anchor) {
+			setLastAnchorEdge(anchor.edge);
+			clearTimeout(exitAnimationTimeout);
+			setShouldMount(true);
+			if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
+			enterAnimationFrameId = nativeRequestAnimationFrame(() => {
+				measure();
+				containerRef()?.offsetHeight;
+				setIsAnimatedIn(true);
+			});
+		} else {
+			if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
+			setIsAnimatedIn(false);
+			exitAnimationTimeout = setTimeout(() => {
+				setShouldMount(false);
+			}, 120);
+		}
+		onCleanup(clearAnimationHandles);
+	});
+	createEffect(() => {
+		if (!anchorAccessor()) return;
+		window.addEventListener("resize", handleViewportChange);
+		window.visualViewport?.addEventListener("resize", handleViewportChange);
+		window.visualViewport?.addEventListener("scroll", handleViewportChange);
+		onCleanup(() => {
+			window.removeEventListener("resize", handleViewportChange);
+			window.visualViewport?.removeEventListener("resize", handleViewportChange);
+			window.visualViewport?.removeEventListener("scroll", handleViewportChange);
+		});
+	});
+	return {
+		shouldMount,
+		isAnimatedIn,
+		lastAnchorEdge,
+		displayPosition: createMemo((previousPosition) => {
+			viewportVersion();
+			const position = getAnchoredDropdownPosition({
+				anchor: anchorAccessor(),
+				measuredWidth: measuredWidth(),
+				measuredHeight: measuredHeight(),
+				viewportWidth: window.innerWidth,
+				viewportHeight: window.innerHeight,
+				anchorGapPx: 8,
+				viewportPaddingPx: 8,
+				offscreenPosition: DROPDOWN_OFFSCREEN_POSITION
+			});
+			if (position.left !== DROPDOWN_OFFSCREEN_POSITION.left) return position;
+			return previousPosition;
+		}, DROPDOWN_OFFSCREEN_POSITION),
+		measure,
+		clearAnimationHandles
+	};
+};
+
+//#endregion
+//#region src/components/toolbar/toolbar-menu.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar-menu><div><div class="relative flex flex-col py-1"><div class="pointer-events-none absolute opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out bg-[var(--rg-surface-hover)]">`), _tmpl$2 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="relative z-1 contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer text-left border-none bg-transparent"><span>`);
+const ToolbarMenu = (props) => {
+	let containerRef;
+	const { containerRef: highlightContainerRef, highlightRef, updateHighlight, clearHighlight } = createMenuHighlight();
+	const dropdown = createAnchoredDropdown(() => containerRef, () => props.position);
+	const handleActionClick = (action, event) => {
+		event.stopPropagation();
+		props.onSetDefaultAction(action.id);
+		props.onDismiss();
+	};
+	onMount(() => {
+		dropdown.measure();
+		const unregisterOverlayDismiss = registerOverlayDismiss({
+			isOpen: () => Boolean(props.position),
+			onDismiss: props.onDismiss
+		});
+		onCleanup(() => {
+			dropdown.clearAnimationHandles();
+			unregisterOverlayDismiss();
+		});
+	});
+	return createComponent(Show, {
+		get when() {
+			return dropdown.shouldMount();
+		},
+		get children() {
+			var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+			addEventListener(_el$, "contextmenu", suppressMenuEvent, true);
+			addEventListener(_el$, "click", suppressMenuEvent, true);
+			addEventListener(_el$, "mousedown", suppressMenuEvent, true);
+			addEventListener(_el$, "pointerdown", suppressMenuEvent, true);
+			var _ref$ = containerRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
+			setStyleProperty(_el$, "z-index", `${Z_INDEX_OVERLAY}`);
+			setStyleProperty(_el$2, "min-width", `${100}px`);
+			use(highlightContainerRef, _el$3);
+			use(highlightRef, _el$4);
+			insert(_el$3, createComponent(For, {
+				get each() {
+					return props.actions;
+				},
+				children: (action) => {
+					const isDefault = () => action.id === props.defaultActionId;
+					return (() => {
+						var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
+						_el$5.$$click = (event) => handleActionClick(action, event);
+						addEventListener(_el$5, "pointerleave", clearHighlight);
+						_el$5.addEventListener("pointerenter", (event) => updateHighlight(event.currentTarget));
+						_el$5.$$pointerdown = (event) => event.stopPropagation();
+						insert(_el$6, () => action.label);
+						insert(_el$5, createComponent(Show, {
+							get when() {
+								return action.shortcut;
+							},
+							children: (shortcutKey) => createComponent(ShortcutHint, {
+								get shortcut() {
+									return shortcutKey();
+								},
+								"class": "text-[11px] font-sans text-[var(--rg-text-secondary)] ml-4"
+							})
+						}), null);
+						createRenderEffect((_p$) => {
+							var _v$9 = action.id, _v$0 = cn("text-[13px] leading-4 font-sans font-medium", isDefault() ? "text-[var(--rg-text-primary)]" : "text-[var(--rg-text-secondary)]");
+							_v$9 !== _p$.e && setAttribute(_el$5, "data-react-grab-menu-item", _p$.e = _v$9);
+							_v$0 !== _p$.t && className(_el$6, _p$.t = _v$0);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$5;
+					})();
+				}
+			}), null);
+			createRenderEffect((_p$) => {
+				var _v$ = cn("fixed font-sans text-[13px] antialiased [filter:var(--rg-drop-shadow)] select-none will-change-[opacity,transform]", dropdown.isAnimatedIn() ? "transition-[opacity,transform] duration-220 ease-spring" : "transition-[opacity,transform] duration-120 ease-drawer"), _v$2 = `${dropdown.displayPosition().top}px`, _v$3 = `${dropdown.displayPosition().left}px`, _v$4 = dropdown.isAnimatedIn() ? "auto" : "none", _v$5 = DROPDOWN_EDGE_TRANSFORM_ORIGIN[dropdown.lastAnchorEdge()], _v$6 = dropdown.isAnimatedIn() ? "1" : "0", _v$7 = dropdown.isAnimatedIn() ? "scale(1)" : "scale(0.92)", _v$8 = cn("contain-layout flex flex-col rounded-[10px] antialiased w-fit h-fit overflow-hidden [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-[var(--rg-panel-bg)]");
+				_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
+				_v$3 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$3);
+				_v$4 !== _p$.o && setStyleProperty(_el$, "pointer-events", _p$.o = _v$4);
+				_v$5 !== _p$.i && setStyleProperty(_el$, "transform-origin", _p$.i = _v$5);
+				_v$6 !== _p$.n && setStyleProperty(_el$, "opacity", _p$.n = _v$6);
+				_v$7 !== _p$.s && setStyleProperty(_el$, "transform", _p$.s = _v$7);
+				_v$8 !== _p$.h && className(_el$2, _p$.h = _v$8);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0,
+				s: void 0,
+				h: void 0
+			});
+			return _el$;
+		}
+	});
+};
+delegateEvents([
+	"pointerdown",
+	"mousedown",
+	"click",
+	"contextmenu"
+]);
+
+//#endregion
+//#region src/components/renderer.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;will-change:opacity;contain:strict;transform:translateZ(0)>`);
+const ReactGrabRenderer = (props) => {
+	return [
+		createComponent(OverlayCanvas, {
+			get selectionVisible() {
+				return props.selectionVisible;
+			},
+			get selectionBounds() {
+				return props.selectionBounds;
+			},
+			get selectionBoundsMultiple() {
+				return props.selectionBoundsMultiple;
+			},
+			get selectionShouldSnap() {
+				return props.selectionShouldSnap;
+			},
+			get dragVisible() {
+				return props.dragVisible;
+			},
+			get dragBounds() {
+				return props.dragBounds;
+			},
+			get grabbedBoxes() {
+				return props.grabbedBoxes;
+			},
+			get labelInstances() {
+				return props.labelInstances;
+			}
+		}),
+		(() => {
+			var _el$ = _tmpl$();
+			setStyleProperty(_el$, "z-index", Z_INDEX_OVERLAY_CANVAS);
+			setStyleProperty(_el$, "transition", `opacity ${150}ms ease-out`);
+			setStyleProperty(_el$, "box-shadow", `inset 0 0 ${50}px ${FROZEN_GLOW_COLOR}`);
+			createRenderEffect((_$p) => setStyleProperty(_el$, "opacity", props.isFrozen ? 1 : 0));
+			return _el$;
+		})(),
+		createComponent(Show, {
+			get when() {
+				return memo(() => !!props.selectionLabelVisible)() && (props.frozenLabelEntries?.length ?? 0) > 0;
+			},
+			get children() {
+				return createComponent(Index, {
+					get each() {
+						return props.frozenLabelEntries ?? [];
+					},
+					children: (entry, entryIndex) => createComponent(SelectionLabel, {
+						get tagName() {
+							return entry().tagName;
+						},
+						get componentName() {
+							return entry().componentName;
+						},
+						get selectionBounds() {
+							return entry().bounds;
+						},
+						get mouseX() {
+							return entry().mouseX;
+						},
+						visible: true,
+						shouldToggleExpandOnClick: entryIndex === 0,
+						get onToggleExpand() {
+							return entryIndex === 0 ? props.onToggleExpand : void 0;
+						}
+					})
+				});
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return memo(() => !!props.selectionLabelVisible)() && props.pendingShiftPreviewEntry;
+			},
+			children: (pendingEntry) => createComponent(SelectionLabel, {
+				get tagName() {
+					return pendingEntry().tagName;
+				},
+				get componentName() {
+					return pendingEntry().componentName;
+				},
+				get selectionBounds() {
+					return pendingEntry().bounds;
+				},
+				get mouseX() {
+					return pendingEntry().mouseX;
+				},
+				visible: true
+			})
+		}),
+		createComponent(Show, {
+			get when() {
+				return memo(() => !!(props.selectionLabelVisible && props.selectionBounds))() && (props.frozenLabelEntries?.length ?? 0) === 0;
+			},
+			get children() {
+				return createComponent(SelectionLabel, {
+					get tagName() {
+						return props.selectionTagName;
+					},
+					get componentName() {
+						return props.selectionComponentName;
+					},
+					get elementsCount() {
+						return props.selectionElementsCount;
+					},
+					get selectionBounds() {
+						return props.selectionBounds;
+					},
+					get mouseX() {
+						return props.mouseX;
+					},
+					get visible() {
+						return props.selectionLabelVisible;
+					},
+					get isPromptMode() {
+						return props.isPromptMode;
+					},
+					get inputValue() {
+						return props.inputValue;
+					},
+					get status() {
+						return props.selectionLabelStatus;
+					},
+					get arrowNavigationState() {
+						return props.selectionArrowNavigationState;
+					},
+					get onArrowNavigationSelect() {
+						return props.onArrowNavigationSelect;
+					},
+					get filePath() {
+						return props.selectionFilePath;
+					},
+					get onInputChange() {
+						return props.onInputChange;
+					},
+					get onSubmit() {
+						return props.onInputSubmit;
+					},
+					get onToggleExpand() {
+						return props.onToggleExpand;
+					},
+					get isPendingDismiss() {
+						return props.isPendingDismiss;
+					},
+					get selectionLabelShakeCount() {
+						return props.selectionLabelShakeCount;
+					},
+					get onConfirmDismiss() {
+						return props.onConfirmDismiss;
+					},
+					get onCancelDismiss() {
+						return props.onCancelDismiss;
+					},
+					onOpen: () => {
+						if (props.selectionFilePath) openFile(props.selectionFilePath, props.selectionLineNumber);
+					},
+					get isContextMenuOpen() {
+						return props.contextMenuPosition !== null;
+					}
+				});
+			}
+		}),
+		createComponent(Index, {
+			get each() {
+				return props.labelInstances ?? [];
+			},
+			children: (instance) => createComponent(SelectionLabel, {
+				get tagName() {
+					return instance().tagName;
+				},
+				get componentName() {
+					return instance().componentName;
+				},
+				get elementsCount() {
+					return instance().elementsCount;
+				},
+				get selectionBounds() {
+					return instance().bounds;
+				},
+				get mouseX() {
+					return instance().mouseX;
+				},
+				visible: true,
+				get status() {
+					return instance().status;
+				},
+				get statusText() {
+					return instance().statusText;
+				},
+				get isPromptMode() {
+					return instance().isPromptMode;
+				},
+				get inputValue() {
+					return instance().inputValue;
+				},
+				get error() {
+					return instance().errorMessage;
+				},
+				get hideArrow() {
+					return instance().hideArrow;
+				},
+				get onShowContextMenu() {
+					const currentInstance = instance();
+					if (!(currentInstance.status === "copied" || currentInstance.status === "fading") || !isElementConnected(currentInstance.element)) return;
+					return () => props.onShowContextMenuInstance?.(currentInstance.id);
+				},
+				onHoverChange: (isHovered) => props.onLabelInstanceHoverChange?.(instance().id, isHovered)
+			})
+		}),
+		createComponent(Show, {
+			get when() {
+				return props.toolbarVisible !== false;
+			},
+			get children() {
+				return createComponent(Toolbar, {
+					get isActive() {
+						return props.isActive;
+					},
+					get isContextMenuOpen() {
+						return props.contextMenuPosition !== null;
+					},
+					get onToggle() {
+						return props.onToggleActive;
+					},
+					get enabled() {
+						return props.enabled;
+					},
+					get shakeCount() {
+						return props.shakeCount;
+					},
+					get onStateChange() {
+						return props.onToolbarStateChange;
+					},
+					get onSubscribeToStateChanges() {
+						return props.onSubscribeToToolbarStateChanges;
+					},
+					get onSelectHoverChange() {
+						return props.onToolbarSelectHoverChange;
+					},
+					get onContainerRef() {
+						return props.onToolbarRef;
+					},
+					get onToggleToolbarMenu() {
+						return props.onToggleToolbarMenu;
+					}
+				});
+			}
+		}),
+		createComponent(ContextMenu, {
+			get position() {
+				return props.contextMenuPosition ?? null;
+			},
+			get selectionBounds() {
+				return props.contextMenuBounds ?? null;
+			},
+			get tagName() {
+				return props.contextMenuTagName;
+			},
+			get componentName() {
+				return props.contextMenuComponentName;
+			},
+			get hasFilePath() {
+				return props.contextMenuHasFilePath ?? false;
+			},
+			get actions() {
+				return props.actions;
+			},
+			get actionContext() {
+				return props.actionContext;
+			},
+			get onDismiss() {
+				return props.onContextMenuDismiss ?? (() => {});
+			},
+			get onHide() {
+				return props.onContextMenuHide ?? (() => {});
+			}
+		}),
+		createComponent(ToolbarMenu, {
+			get position() {
+				return props.toolbarMenuPosition ?? null;
+			},
+			get actions() {
+				return props.toolbarMenuActions ?? [];
+			},
+			get defaultActionId() {
+				return props.defaultActionId ?? "comment";
+			},
+			get onSetDefaultAction() {
+				return props.onSetDefaultAction ?? (() => {});
+			},
+			get onDismiss() {
+				return props.onToolbarMenuDismiss ?? (() => {});
+			}
+		})
+	];
+};
+
+//#endregion
+export { ReactGrabRenderer };