react-grab 0.1.29 → 0.1.30

package/dist/renderer-yNfPLGJa.js

@@ -0,0 +1,4101 @@
+/**
+ * @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 { D as style, E as spread, G as on, H as createSignal, I as createComponent, K as onCleanup, L as createEffect, M as For, N as Index, O as template, P as Show, R as createMemo, S as memo, T as setStyleProperty, W as mergeProps, _ as addEventListener, a as isMac, b as delegateEvents, c as getCollapsedPosition, d as getSnapPosition, f as getVisualViewport, g as isElementConnected, h as isKeyboardEventTriggeredByInput, i as isEventFromOverlay, k as use, l as getPositionFromEdgeAndRatio, n as saveToolbarState, o as calculateExpandedPositionFromCollapsed, q as onMount, r as resolveActionEnabled, s as clampToRange, t as loadToolbarState, u as getRatioFromPosition, v as classList, w as setAttribute, x as insert, y as className, z as createRenderEffect } from "./state-Cz4euNVW.js";
+import { $ as OVERLAY_FILL_COLOR_DEFAULT, B as FROZEN_GLOW_COLOR, F as DRAG_LERP_FACTOR, H as LERP_CONVERGENCE_THRESHOLD_PX, L as DROPDOWN_EDGE_TRANSFORM_ORIGIN, N as ARROW_MAX_LABEL_WIDTH_RATIO, O as nativeCancelAnimationFrame, P as DEFAULT_ACTION_ID, Q as OVERLAY_BORDER_COLOR_INSPECT, R as DROPDOWN_OFFSCREEN_POSITION, V as HINT_FLIP_IN_ANIMATION, X as OVERLAY_BORDER_COLOR_DEFAULT, Y as OPACITY_CONVERGENCE_THRESHOLD, Z as OVERLAY_BORDER_COLOR_DRAG, a as freezeGlobalAnimations, at as SELECTION_LERP_FACTOR, ct as TOOLTIP_BASE_CLASS, d as freezePseudoStates, dt as Z_INDEX_OVERLAY, et as OVERLAY_FILL_COLOR_DRAG, ft as Z_INDEX_OVERLAY_CANVAS, it as SELECTION_LABEL_OFFSCREEN_PX, k as nativeRequestAnimationFrame, m as unfreezePseudoStates, o as unfreezeGlobalAnimations, ot as TOOLBAR_DEFAULT_POSITION_RATIO, pt as supportsDisplayP3, rt as SELECTION_HINT_CYCLE_INTERVAL_MS, s as openFile, st as TOOLBAR_SHAKE_TOOLTIP_DURATION_MS, t as freezeUpdates, tt as OVERLAY_FILL_COLOR_INSPECT, z as FEEDBACK_DURATION_MS } from "./freeze-updates-BbbID39H.js";
+
+//#region src/utils/lerp.ts
+const lerp = (start, end, factor) => {
+	return start + (end - start) * factor;
+};
+
+//#endregion
+//#region src/components/overlay-canvas.tsx
+var _tmpl$$29 = /* @__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,
+	inspect: {
+		borderColor: OVERLAY_BORDER_COLOR_INSPECT,
+		fillColor: OVERLAY_FILL_COLOR_INSPECT,
+		lerpFactor: SELECTION_LERP_FACTOR
+	}
+};
+const OverlayCanvas = (props) => {
+	let canvasRef;
+	let mainContext = null;
+	let canvasWidth = 0;
+	let canvasHeight = 0;
+	let devicePixelRatio = 1;
+	let animationFrameId = null;
+	const layers = {
+		drag: {
+			canvas: null,
+			context: null
+		},
+		selection: {
+			canvas: null,
+			context: null
+		},
+		grabbed: {
+			canvas: null,
+			context: null
+		},
+		inspect: {
+			canvas: null,
+			context: null
+		}
+	};
+	let selectionAnimations = [];
+	let dragAnimation = null;
+	let grabbedAnimations = [];
+	let inspectAnimations = [];
+	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,
+		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) {
+			const effectiveOpacity = props.selectionIsFading ? 0 : animation.opacity;
+			drawRoundedRectangle(context, animation.current.x, animation.current.y, animation.current.width, animation.current.height, animation.borderRadius, style.fillColor, style.borderColor, effectiveOpacity);
+		}
+	};
+	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);
+		renderBoundsLayer("inspect", inspectAnimations);
+		for (const layerName of [
+			"inspect",
+			"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 = () => {
+		let shouldContinueAnimating = false;
+		if (dragAnimation?.isInitialized) {
+			if (interpolateBounds(dragAnimation, LAYER_STYLES.drag.lerpFactor)) shouldContinueAnimating = true;
+		}
+		for (const animation of selectionAnimations) if (animation.isInitialized) {
+			if (interpolateBounds(animation, LAYER_STYLES.selection.lerpFactor)) shouldContinueAnimating = true;
+		}
+		const currentTimestamp = Date.now();
+		grabbedAnimations = grabbedAnimations.filter((animation) => {
+			const isLabelAnimation = animation.id.startsWith("label-");
+			if (animation.isInitialized) {
+				if (interpolateBounds(animation, LAYER_STYLES.grabbed.lerpFactor, { interpolateOpacity: isLabelAnimation })) shouldContinueAnimating = true;
+			}
+			if (animation.createdAt) {
+				const elapsed = currentTimestamp - animation.createdAt;
+				if (elapsed >= 1500 + 100) return false;
+				if (elapsed > 1500) {
+					animation.opacity = 1 - (elapsed - FEEDBACK_DURATION_MS) / 100;
+					shouldContinueAnimating = true;
+				}
+				return true;
+			}
+			if (isLabelAnimation) {
+				if (Math.abs(animation.opacity - animation.targetOpacity) < .01 && animation.targetOpacity === 0) return false;
+				return true;
+			}
+			return animation.opacity > 0;
+		});
+		for (const animation of inspectAnimations) if (animation.isInitialized) {
+			if (interpolateBounds(animation, LAYER_STYLES.inspect.lerpFactor)) shouldContinueAnimating = true;
+		}
+		compositeAllLayers();
+		if (shouldContinueAnimating) animationFrameId = nativeRequestAnimationFrame(runAnimationFrame);
+		else animationFrameId = null;
+	};
+	const scheduleAnimationFrame = () => {
+		if (animationFrameId !== null) return;
+		animationFrameId = nativeRequestAnimationFrame(runAnimationFrame);
+	};
+	const handleWindowResize = () => {
+		initializeCanvas();
+		scheduleAnimationFrame();
+	};
+	createEffect(on(() => [
+		props.selectionVisible,
+		props.selectionBounds,
+		props.selectionBoundsMultiple,
+		props.selectionIsFading,
+		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);
+			return activeBoxIds.has(animation.id);
+		});
+		scheduleAnimationFrame();
+	}));
+	createEffect(on(() => [props.inspectVisible, props.inspectBounds], ([isVisible, bounds]) => {
+		if (!isVisible || !bounds || bounds.length === 0) {
+			inspectAnimations = [];
+			scheduleAnimationFrame();
+			return;
+		}
+		inspectAnimations = bounds.map((ancestorBounds, index) => {
+			const animationId = `inspect-${index}`;
+			const existingAnimation = inspectAnimations.find((animation) => animation.id === animationId);
+			if (existingAnimation) {
+				updateAnimationTarget(existingAnimation, ancestorBounds);
+				return existingAnimation;
+			}
+			return createAnimatedBounds(animationId, ancestorBounds);
+		});
+		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$$29();
+		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/utils/format-shortcut.ts
+const formatShortcut = (shortcut) => {
+	if (shortcut === "Enter") return "↵";
+	if (isMac()) return `⌘${shortcut}`;
+	return `Ctrl+${shortcut.replace("⇧", "Shift+")}`;
+};
+
+//#endregion
+//#region src/components/icons/icon-submit.tsx
+var _tmpl$$28 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 12 12"fill=none><path d="M6 1L6 11M6 1L2 5M6 1L10 5"stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>`);
+const IconSubmit = (props) => {
+	const size = () => props.size ?? 12;
+	return (() => {
+		var _el$ = _tmpl$$28();
+		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$$27 = /* @__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$$27();
+		_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$$26 = /* @__PURE__ */ template(`<div data-react-grab-arrow class="absolute w-0 h-0 z-10">`);
+const Arrow = (props) => {
+	const arrowColor = () => props.color ?? "white";
+	const isBottom = () => props.position === "bottom";
+	const arrowSize = () => getArrowSize(props.labelWidth ?? 0);
+	return (() => {
+		var _el$ = _tmpl$$26();
+		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/icons/icon-open.tsx
+var _tmpl$$25 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><path d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"></path><path d="M11 13l9-9"></path><path d="M15 4h5v5">`);
+const IconOpen = (props) => {
+	const size = () => props.size ?? 12;
+	return (() => {
+		var _el$ = _tmpl$$25();
+		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/tag-badge.tsx
+var _tmpl$$24 = /* @__PURE__ */ template(`<span class=text-black>`), _tmpl$2$10 = /* @__PURE__ */ template(`<span class=text-black/50>.`), _tmpl$3$7 = /* @__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 [isHovered, setIsHovered] = createSignal(false);
+	const handleMouseEnter = () => {
+		setIsHovered(true);
+		props.onHoverChange?.(true);
+	};
+	const handleMouseLeave = () => {
+		setIsHovered(false);
+		props.onHoverChange?.(false);
+	};
+	return (() => {
+		var _el$ = _tmpl$3$7(), _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$$24();
+					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$$24();
+				insert(_el$6, () => props.tagName);
+				return _el$6;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.isClickable || props.forceShowIcon;
+			},
+			get children() {
+				return createComponent(IconOpen, {
+					size: 10,
+					get ["class"]() {
+						return cn("text-black transition-all duration-100 shrink-0", isHovered() || props.forceShowIcon ? "opacity-100 scale-100" : "opacity-0 scale-75 -ml-[2px] w-0");
+					}
+				});
+			}
+		}), 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$$23 = /* @__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-[#D9D9D9] antialiased rounded-t-none rounded-b-[6px]">`);
+const BottomSection = (props) => (() => {
+	var _el$ = _tmpl$$23();
+	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$$22 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 22 19"fill=none><path d="M6.76263 18.6626C7.48251 18.6626 7.95474 18.1682 7.95474 17.4895C7.95474 17.1207 7.80474 16.8576 7.58683 16.6361L5.3018 14.4137L2.84621 12.3589L2.44374 13.0037L5.92137 13.1622H17.9232C20.4842 13.1622 21.593 12.021 21.593 9.47237V3.66983C21.593 1.10875 20.4842 0 17.9232 0H12.5414C11.8179 0 11.3018 0.545895 11.3018 1.21695C11.3018 1.888 11.8179 2.43389 12.5414 2.43389H17.8424C18.7937 2.43389 19.1897 2.83653 19.1897 3.78784V9.35747C19.1897 10.3257 18.7937 10.7314 17.8424 10.7314H5.92137L2.44374 10.8832L2.84621 11.5281L5.3018 9.47993L7.58683 7.2606C7.80474 7.03914 7.95474 6.7693 7.95474 6.40049C7.95474 5.72854 7.48251 5.22747 6.76263 5.22747C6.46129 5.22747 6.12975 5.36905 5.89231 5.6096L0.376815 11.0425C0.134921 11.2777 0 11.6141 0 11.9452C0 12.2728 0.134921 12.6158 0.376815 12.848L5.89231 18.2871C6.12975 18.5276 6.46129 18.6626 6.76263 18.6626Z"fill=currentColor>`);
+const IconReturn = (props) => {
+	const size = () => props.size ?? 12;
+	return (() => {
+		var _el$ = _tmpl$$22();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size() * 19 / 22, _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$$21 = /* @__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-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px]"><span class="text-black 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-[#FEF2F2] cursor-pointer transition-all hover:bg-[#FEE2E2] press-scale h-[17px]"><span class="text-[#B91C1C] 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-black 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$$21(), _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-[#B91C1C]/50"
+			}), null);
+			return _el$4;
+		} }), null);
+		return _el$;
+	})();
+};
+delegateEvents(["pointerdown", "click"]);
+
+//#endregion
+//#region src/components/icons/icon-retry.tsx
+var _tmpl$$20 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4C7.58 4 4.01 7.58 4.01 12C4.01 16.42 7.58 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z"fill=currentColor>`);
+const IconRetry = (props) => {
+	const size = () => props.size ?? 12;
+	return (() => {
+		var _el$ = _tmpl$$20();
+		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$$19 = /* @__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-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px]"><span class="text-black 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-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px]"><span class="text-black 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-[#B91C1C] 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$$19(), _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-black/50"
+					}), 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$$18 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><circle cx=5 cy=12 r=2></circle><circle cx=12 cy=12 r=2></circle><circle cx=19 cy=12 r=2>`);
+const IconEllipsis = (props) => {
+	const size = () => props.size ?? 12;
+	return (() => {
+		var _el$ = _tmpl$$18();
+		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$$17 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 21 21"fill=none><g clip-path=url(#clip0_icon_check)><path d="M20.1767 10.0875C20.1767 15.6478 15.6576 20.175 10.0875 20.175C4.52715 20.175 0 15.6478 0 10.0875C0 4.51914 4.52715 0 10.0875 0C15.6576 0 20.1767 4.51914 20.1767 10.0875ZM13.0051 6.23867L8.96699 12.7041L7.08476 10.3143C6.83358 9.99199 6.59941 9.88828 6.28984 9.88828C5.79414 9.88828 5.39961 10.2918 5.39961 10.7893C5.39961 11.0367 5.48925 11.2621 5.66386 11.4855L8.05703 14.3967C8.33027 14.7508 8.63183 14.9103 8.99902 14.9103C9.36445 14.9103 9.68105 14.7312 9.90546 14.3896L14.4742 7.27206C14.6107 7.04765 14.7289 6.80898 14.7289 6.58359C14.7289 6.07187 14.281 5.72968 13.7934 5.72968C13.4937 5.72968 13.217 5.90527 13.0051 6.23867Z"fill=currentColor></path></g><defs><clipPath id=clip0_icon_check><rect width=20.5381 height=20.1848 fill=white>`);
+const IconCheck = (props) => {
+	const size = () => props.size ?? 21;
+	return (() => {
+		var _el$ = _tmpl$$17();
+		createRenderEffect((_p$) => {
+			var _v$ = size(), _v$2 = size() * 20.1848 / 20.5381, _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$$16 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-more-options class="flex items-center justify-center size-[18px] rounded-sm cursor-pointer bg-transparent hover:bg-black/10 text-black/30 hover:text-black 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-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px]"><span class="text-black text-[13px] leading-3.5 font-sans font-medium">Keep`), _tmpl$3$6 = /* @__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-black 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$4 = /* @__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-black text-[13px] leading-4 font-sans font-medium h-fit tabular-nums overflow-hidden text-ellipsis whitespace-nowrap min-w-0">`), _tmpl$5$3 = /* @__PURE__ */ template(`<div data-react-grab-completion>`);
+const MoreOptionsButton = (props) => {
+	return (() => {
+		var _el$ = _tmpl$$16();
+		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?.();
+			}, 100);
+		}, FEEDBACK_DURATION_MS - 100);
+	};
+	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$3();
+		_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$6(), _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-black/50"
+								});
+							}
+						}), 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$4(), _el$9 = _el$8.firstChild;
+				insert(_el$8, createComponent(IconCheck, {
+					size: 14,
+					"class": "text-black/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-white"), _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$$15 = /* @__PURE__ */ template(`<div class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`), _tmpl$2$6 = /* @__PURE__ */ template(`<span class=text-black/40>.`), _tmpl$3$5 = /* @__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$$15(), _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$5(), _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-black", _p$.a = _v$3);
+					_v$4 !== _p$.o && _el$4.classList.toggle("text-black/30", _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$$14 = /* @__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="flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5">`), _tmpl$3$4 = /* @__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$4$3 = /* @__PURE__ */ template(`<button data-react-grab-submit class="contain-layout shrink-0 flex items-center justify-center size-4 rounded-full bg-black cursor-pointer ml-1 interactive-scale">`), _tmpl$5$2 = /* @__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-black 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$6$1 = /* @__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$7$1 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-selection-label><div>`), _tmpl$8$1 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`), _tmpl$9$1 = /* @__PURE__ */ template(`<div class="contain-layout flex items-center justify-between w-full px-2 py-1 transition-colors"><span class="text-[13px] leading-4 font-sans font-medium text-black">`);
+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 shouldEnablePointerEvents = () => {
+		if (props.isPromptMode) 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;
+		if (props.inspectNavigationState?.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);
+		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 isInspectNavigationVisible = () => Boolean(props.inspectNavigationState?.isVisible);
+	const handleTagClick = (event) => {
+		event.stopImmediatePropagation();
+		if (props.filePath && props.onOpen) props.onOpen();
+	};
+	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$7$1(), _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}`);
+			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$$14(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
+					insert(_el$4, createComponent(IconLoader, {
+						size: 13,
+						"class": "text-[#71717a] 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$3$4(), _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() || isInspectNavigationVisible()))() ? 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);
+					insert(_el$6, createComponent(Show, {
+						get when() {
+							return memo(() => !!(!isArrowNavigationVisible() && isInspectNavigationVisible()))() && props.inspectNavigationState;
+						},
+						children: (state) => createComponent(ArrowNavigationMenu, {
+							get items() {
+								return state().items;
+							},
+							get activeIndex() {
+								return state().activeIndex;
+							},
+							onSelect: (index) => props.onInspectSelect?.(index)
+						})
+					}), null);
+					insert(_el$6, createComponent(Show, {
+						get when() {
+							return memo(() => !!(!isArrowNavigationVisible() && !isInspectNavigationVisible()))() && Boolean(props.actionCycleState?.isVisible);
+						},
+						get children() {
+							return createComponent(BottomSection, { get children() {
+								var _el$8 = _tmpl$2$5();
+								insert(_el$8, createComponent(For, {
+									get each() {
+										return props.actionCycleState?.items ?? [];
+									},
+									children: (item, itemIndex) => (() => {
+										var _el$12 = _tmpl$9$1(), _el$13 = _el$12.firstChild;
+										insert(_el$13, () => item.label);
+										insert(_el$12, createComponent(Show, {
+											get when() {
+												return item.shortcut;
+											},
+											get children() {
+												var _el$14 = _tmpl$8$1();
+												insert(_el$14, () => formatShortcut(item.shortcut));
+												return _el$14;
+											}
+										}), null);
+										createRenderEffect((_p$) => {
+											var _v$1 = item.label.toLowerCase(), _v$10 = !!(itemIndex() === (props.actionCycleState?.activeIndex ?? 0)), _v$11 = !!(itemIndex() === (props.actionCycleState?.items ?? []).length - 1);
+											_v$1 !== _p$.e && setAttribute(_el$12, "data-react-grab-action-cycle-item", _p$.e = _v$1);
+											_v$10 !== _p$.t && _el$12.classList.toggle("bg-black/5", _p$.t = _v$10);
+											_v$11 !== _p$.a && _el$12.classList.toggle("rounded-b-[6px]", _p$.a = _v$11);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0,
+											a: void 0
+										});
+										return _el$12;
+									})()
+								}));
+								return _el$8;
+							} });
+						}
+					}), null);
+					createRenderEffect((_p$) => {
+						var _v$ = !!(isArrowNavigationVisible() || isInspectNavigationVisible()), _v$2 = {
+							"py-1.5": !isArrowNavigationVisible() && !isInspectNavigationVisible(),
+							"pt-1.5 pb-1": isArrowNavigationVisible() || isInspectNavigationVisible()
+						};
+						_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$9 = _tmpl$6$1(), _el$0 = _el$9.firstChild;
+					insert(_el$0, 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$9, createComponent(BottomSection, { get children() {
+						var _el$1 = _tmpl$5$2(), _el$10 = _el$1.firstChild;
+						_el$10.$$keydown = handleKeyDown;
+						_el$10.$$input = handleInput;
+						use((element) => {
+							inputRef = element;
+							if (props.onSubmit) queueMicrotask(() => {
+								element.focus({ preventScroll: true });
+								autoResizeTextarea(element, 95);
+							});
+						}, _el$10);
+						setStyleProperty(_el$10, "max-height", `${95}px`);
+						insert(_el$1, createComponent(Show, {
+							get when() {
+								return props.onSubmit;
+							},
+							get children() {
+								var _el$11 = _tmpl$4$3();
+								_el$11.$$click = () => props.onSubmit?.();
+								insert(_el$11, createComponent(IconSubmit, {
+									size: 10,
+									"class": "text-white"
+								}));
+								return _el$11;
+							}
+						}), null);
+						createRenderEffect(() => _el$10.readOnly = !props.onSubmit);
+						createRenderEffect(() => _el$10.value = props.inputValue ?? "");
+						return _el$1;
+					} }), null);
+					return _el$9;
+				}
+			}), 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 filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-opacity duration-100 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 = 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-white", isShaking() && "animate-shake"), _v$0 = 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 && className(_el$2, _p$.s = _v$9);
+				_v$0 !== _p$.h && setStyleProperty(_el$2, "display", _p$.h = _v$0);
+				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",
+	"click",
+	"input",
+	"keydown"
+]);
+
+//#endregion
+//#region src/components/icons/icon-select.tsx
+var _tmpl$$13 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 18 18"fill=currentColor><path opacity=0.4 d="M7.65631 10.9565C7.31061 10.0014 7.54012 8.96635 8.25592 8.25195C8.74522 7.76615 9.38771 7.49951 10.0694 7.49951C10.3682 7.49951 10.6641 7.55171 10.9483 7.65381L16.0001 9.49902V4.75C16.0001 3.2334 14.7667 2 13.2501 2H4.75012C3.23352 2 2.00012 3.2334 2.00012 4.75V13.25C2.00012 14.7666 3.23352 16 4.75012 16H9.49962L7.65631 10.9565Z"></path><path d="M17.296 11.5694L10.4415 9.06545C10.0431 8.92235 9.61441 9.01658 9.31551 9.31338C9.01671 9.61168 8.92101 10.0429 9.06551 10.4413L11.5704 17.2948C11.7247 17.7191 12.128 18.0004 12.5772 18.0004C12.585 18.0004 12.5918 17.9999 12.5987 17.9999C13.0577 17.9906 13.4591 17.6913 13.5987 17.2543L14.4854 14.4857L17.2559 13.5985C17.6914 13.4589 17.9903 13.057 18 12.599C18.0097 12.141 17.7267 11.7276 17.296 11.5694Z">`);
+const IconSelect = (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-comment.tsx
+var _tmpl$$12 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path d="M9.85 1.75H14.15C18.2041 1.75 20.2311 1.75 21.4906 3.01407C22.75 4.27813 22.75 6.31261 22.75 10.3816V10.9211C22.75 14.99 22.75 17.0245 21.4906 18.2886C20.2311 19.5526 18.2041 19.5526 14.15 19.5526C13.5475 19.5661 13.0676 19.6121 12.5962 19.7199C11.5124 19.9703 10.4961 20.4783 9.49881 20.9768L9.4985 20.977C9.31046 21.071 9.12311 21.1646 8.93611 21.2562C7.25633 22.0782 6.41645 22.4893 5.88937 22.1045C5.38644 21.7285 5.36431 21.0194 5.5044 20.2351C5.56226 19.9112 5.5912 19.7492 5.52074 19.6474C5.45029 19.5457 5.28808 19.5158 4.96365 19.4558C3.90736 19.2607 3.09038 18.8716 2.50944 18.2886C1.25 17.0245 1.25 14.99 1.25 10.9211V10.3816C1.25 6.31261 1.25 4.27813 2.50944 3.01407C3.76888 1.75 5.79592 1.75 9.85 1.75Z">`);
+const IconComment = (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/icons/icon-copy.tsx
+var _tmpl$$11 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path d="M16.0549 8.25C17.4225 8.24998 18.5248 8.24996 19.3918 8.36652C20.2919 8.48754 21.0497 8.74643 21.6517 9.34835C22.2536 9.95027 22.5125 10.7081 22.6335 11.6083C22.75 12.4752 22.75 13.5775 22.75 14.9451V14.9451V16.0549V16.0549C22.75 17.4225 22.75 18.5248 22.6335 19.3918C22.5125 20.2919 22.2536 21.0497 21.6517 21.6517C21.0497 22.2536 20.2919 22.5125 19.3918 22.6335C18.5248 22.75 17.4225 22.75 16.0549 22.75H16.0549H14.9451H14.9451C13.5775 22.75 12.4752 22.75 11.6082 22.6335C10.7081 22.5125 9.95027 22.2536 9.34835 21.6516C8.74643 21.0497 8.48754 20.2919 8.36652 19.3918C8.24996 18.5248 8.24998 17.4225 8.25 16.0549V16.0549V14.9451V14.9451C8.24998 13.5775 8.24996 12.4752 8.36652 11.6082C8.48754 10.7081 8.74643 9.95027 9.34835 9.34835C9.95027 8.74643 10.7081 8.48754 11.6083 8.36652C12.4752 8.24996 13.5775 8.24998 14.9451 8.25H14.9451H16.0549H16.0549Z"></path><path d="M6.75 14.8569C6.74991 13.5627 6.74983 12.3758 6.8799 11.4084C7.0232 10.3425 7.36034 9.21504 8.28769 8.28769C9.21504 7.36034 10.3425 7.0232 11.4084 6.8799C12.3758 6.74983 13.5627 6.74991 14.8569 6.75L17.0931 6.75C17.3891 6.75 17.5371 6.75 17.6261 6.65419C17.7151 6.55838 17.7045 6.4142 17.6833 6.12584C17.6648 5.87546 17.6412 5.63892 17.6111 5.41544C17.4818 4.45589 17.2232 3.6585 16.6718 2.98663C16.4744 2.74612 16.2539 2.52558 16.0134 2.3282C15.3044 1.74638 14.4557 1.49055 13.4248 1.36868C12.4205 1.24998 11.1512 1.24999 9.54893 1.25H9.45109C7.84883 1.24999 6.57947 1.24998 5.57525 1.36868C4.54428 1.49054 3.69558 1.74638 2.98663 2.3282C2.74612 2.52558 2.52558 2.74612 2.3282 2.98663C1.74638 3.69558 1.49055 4.54428 1.36868 5.57525C1.24998 6.57947 1.24999 7.84882 1.25 9.45108V9.54891C1.24999 11.1512 1.24998 12.4205 1.36868 13.4247C1.49054 14.4557 1.74638 15.3044 2.3282 16.0134C2.52558 16.2539 2.74612 16.4744 2.98663 16.6718C3.6585 17.2232 4.45589 17.4818 5.41544 17.6111C5.63892 17.6412 5.87546 17.6648 6.12584 17.6833C6.4142 17.7045 6.55838 17.7151 6.65419 17.6261C6.75 17.5371 6.75 17.3891 6.75 17.0931V14.8569Z">`);
+const IconCopy = (props) => {
+	const size = () => props.size ?? 14;
+	return (() => {
+		var _el$ = _tmpl$$11();
+		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/safe-polygon.ts
+const computeTriangleSign = (point1, point2, point3) => (point1.x - point3.x) * (point2.y - point3.y) - (point2.x - point3.x) * (point1.y - point3.y);
+const isPositionInTriangle = (point, vertex1, vertex2, vertex3) => {
+	const sign1 = computeTriangleSign(point, vertex1, vertex2);
+	const sign2 = computeTriangleSign(point, vertex2, vertex3);
+	const sign3 = computeTriangleSign(point, vertex3, vertex1);
+	return !(sign1 < 0 || sign2 < 0 || sign3 < 0) || !(sign1 > 0 || sign2 > 0 || sign3 > 0);
+};
+const isPositionInRect = (point, rect) => point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+const computeFarEdgeCorners = (cursor, targetRect) => {
+	const targetBottom = targetRect.y + targetRect.height;
+	const targetRight = targetRect.x + targetRect.width;
+	if (cursor.y <= targetRect.y) return [{
+		x: targetRect.x,
+		y: targetBottom
+	}, {
+		x: targetRight,
+		y: targetBottom
+	}];
+	if (cursor.y >= targetBottom) return [{
+		x: targetRect.x,
+		y: targetRect.y
+	}, {
+		x: targetRight,
+		y: targetRect.y
+	}];
+	if (cursor.x <= targetRect.x) return [{
+		x: targetRight,
+		y: targetRect.y
+	}, {
+		x: targetRight,
+		y: targetBottom
+	}];
+	return [{
+		x: targetRect.x,
+		y: targetRect.y
+	}, {
+		x: targetRect.x,
+		y: targetBottom
+	}];
+};
+const createSafePolygonTracker = () => {
+	let removeListener = null;
+	const stop = () => {
+		removeListener?.();
+		removeListener = null;
+	};
+	const start = (cursorPosition, targetRects, onLeavePolygon) => {
+		stop();
+		const primaryTarget = targetRects[0];
+		if (!primaryTarget) return;
+		if (isPositionInRect(cursorPosition, primaryTarget)) return;
+		const [corner1, corner2] = computeFarEdgeCorners(cursorPosition, primaryTarget);
+		const isInAnySafeRect = (point) => targetRects.some((rect) => isPositionInRect(point, rect));
+		const handleMouseMove = (event) => {
+			const cursor = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (isInAnySafeRect(cursor)) {
+				if (isPositionInRect(cursor, primaryTarget)) stop();
+				return;
+			}
+			if (isPositionInTriangle(cursor, cursorPosition, corner1, corner2)) return;
+			stop();
+			onLeavePolygon();
+		};
+		window.addEventListener("mousemove", handleMouseMove);
+		removeListener = () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+		};
+	};
+	return {
+		start,
+		stop
+	};
+};
+
+//#endregion
+//#region src/components/tooltip.tsx
+var _tmpl$$10 = /* @__PURE__ */ template(`<div>`);
+let lastCloseTimestamp = 0;
+const wasTooltipRecentlyVisible = () => {
+	return Date.now() - lastCloseTimestamp < 100;
+};
+const Tooltip = (props) => {
+	const [delayedVisible, setDelayedVisible] = createSignal(false);
+	const [shouldAnimate, setShouldAnimate] = createSignal(true);
+	let delayTimeoutId;
+	createEffect(on(() => props.visible, (isVisible) => {
+		if (delayTimeoutId !== void 0) {
+			clearTimeout(delayTimeoutId);
+			delayTimeoutId = void 0;
+		}
+		if (isVisible) if (wasTooltipRecentlyVisible()) {
+			setShouldAnimate(false);
+			setDelayedVisible(true);
+		} else {
+			setShouldAnimate(true);
+			delayTimeoutId = setTimeout(() => {
+				setDelayedVisible(true);
+			}, 400);
+		}
+		else {
+			if (delayedVisible()) lastCloseTimestamp = Date.now();
+			setDelayedVisible(false);
+		}
+	}));
+	onCleanup(() => {
+		if (delayTimeoutId !== void 0) clearTimeout(delayTimeoutId);
+		if (delayedVisible()) lastCloseTimestamp = Date.now();
+	});
+	return createComponent(Show, {
+		get when() {
+			return delayedVisible();
+		},
+		get children() {
+			var _el$ = _tmpl$$10();
+			setStyleProperty(_el$, "z-index", `${Z_INDEX_OVERLAY}`);
+			insert(_el$, () => props.children);
+			createRenderEffect(() => className(_el$, cn(TOOLTIP_BASE_CLASS, "bg-white", props.position === "left" || props.position === "right" ? "top-1/2 -translate-y-1/2" : "left-1/2 -translate-x-1/2", props.position === "top" && "bottom-full mb-2.5", props.position === "bottom" && "top-full mt-2.5", props.position === "left" && "right-full mr-2.5", props.position === "right" && "left-full ml-2.5", shouldAnimate() && "animate-tooltip-fade-in")));
+			return _el$;
+		}
+	});
+};
+
+//#endregion
+//#region src/components/kbd.tsx
+var _tmpl$$9 = /* @__PURE__ */ template(`<kbd class="inline-flex items-center justify-center px-[3px] h-3.5 rounded-sm [border-width:0.5px] border-solid border-[#B3B3B3] text-black/70 text-[10px] font-medium leading-none">`);
+const Kbd = (props) => (() => {
+	var _el$ = _tmpl$$9();
+	insert(_el$, () => props.children);
+	return _el$;
+})();
+
+//#endregion
+//#region src/utils/toolbar-layout.ts
+const getExpandGridClass = (isVertical, isExpanded, collapsedExtra) => {
+	if (isExpanded) return isVertical ? "grid-rows-[1fr] opacity-100" : "grid-cols-[1fr] opacity-100";
+	const base = isVertical ? "grid-rows-[0fr] opacity-0" : "grid-cols-[0fr] opacity-0";
+	return collapsedExtra ? `${base} ${collapsedExtra}` : base;
+};
+const getButtonSpacingClass = (isVertical) => isVertical ? "mb-1.5" : "mr-1.5";
+const getMinDimensionClass = (isVertical) => isVertical ? "min-h-0" : "min-w-0";
+const getHitboxConstraintClass = (isVertical) => isVertical ? "before:!min-h-full" : "before:!min-w-full";
+
+//#endregion
+//#region src/components/icons/icon-chevron.tsx
+var _tmpl$$8 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="m18 15-6-6-6 6">`);
+const IconChevron = (props) => {
+	const size = () => props.size ?? 12;
+	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/components/toolbar/toolbar-content.tsx
+var _tmpl$$7 = /* @__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><div><div><div><div><div></div></div><div><div></div></div><div><div></div></div></div><div class="relative shrink-0 overflow-visible">`);
+const ToolbarContent = (props) => {
+	const edge = () => props.snapEdge ?? "bottom";
+	const isVertical = () => edge() === "left" || edge() === "right";
+	const expandGridClass = (isExpanded, collapsedExtra) => getExpandGridClass(isVertical(), isExpanded, collapsedExtra);
+	const gridTransitionClass = () => {
+		if (props.disableGridTransitions) return "";
+		if (isVertical()) return "transition-[grid-template-rows,opacity] duration-150 ease-out";
+		return "transition-[grid-template-columns,opacity] duration-150 ease-out";
+	};
+	const gridSizeTransitionClass = () => {
+		if (props.disableGridTransitions) return "";
+		if (isVertical()) return "transition-[grid-template-rows] duration-150 ease-out";
+		return "transition-[grid-template-columns] duration-150 ease-out";
+	};
+	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-180" : "rotate-0";
+			case "bottom": return collapsed ? "rotate-0" : "rotate-180";
+			case "left": return collapsed ? "rotate-90" : "-rotate-90";
+			case "right": return collapsed ? "-rotate-90" : "rotate-90";
+			default: return "rotate-0";
+		}
+	};
+	const defaultCollapseButton = () => (() => {
+		var _el$ = _tmpl$$7();
+		addEventListener(_el$, "click", props.onCollapseClick, true);
+		insert(_el$, createComponent(IconChevron, {
+			size: 14,
+			get ["class"]() {
+				return cn("text-[#B3B3B3] transition-transform duration-150", chevronRotation());
+			}
+		}));
+		createRenderEffect(() => setAttribute(_el$, "aria-label", props.isCollapsed ? "Expand toolbar" : "Collapse toolbar"));
+		return _el$;
+	})();
+	return (() => {
+		var _el$2 = _tmpl$2$4(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$8.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$5.nextSibling;
+		addEventListener(_el$2, "click", props.onPanelClick, true);
+		addEventListener(_el$2, "animationend", props.onAnimationEnd);
+		use((element) => props.onExpandableButtonsRef?.(element), _el$5);
+		insert(_el$7, () => props.selectButton);
+		insert(_el$9, () => props.commentsButton);
+		insert(_el$1, () => props.copyAllButton);
+		insert(_el$10, () => props.toggleButton);
+		insert(_el$2, () => props.collapseButton ?? defaultCollapseButton(), null);
+		createRenderEffect((_p$) => {
+			var _v$ = cn("flex items-center justify-center rounded-[10px] antialiased relative overflow-visible [font-synthesis:none] filter-[drop-shadow(0px_1px_2px_#51515140)] [corner-shape:superellipse(1.25)]", isVertical() && "flex-col", "bg-white", !props.isCollapsed && (isVertical() ? "px-1.5 gap-1.5 py-2" : "py-1.5 gap-1.5 px-2"), collapsedEdgeClasses(), props.isShaking && "animate-shake"), _v$2 = props.transformOrigin, _v$3 = 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$4 = cn("flex", isVertical() ? "flex-col items-center min-h-0" : "items-center min-w-0", props.isCollapsed ? "opacity-0" : "opacity-100", !props.disableGridTransitions && "transition-opacity duration-150 ease-out"), _v$5 = cn("flex items-center", isVertical() && "flex-col"), _v$6 = cn("grid", gridTransitionClass(), expandGridClass(Boolean(props.enabled))), _v$7 = cn("relative overflow-visible", minDimensionClass()), _v$8 = cn("grid", gridTransitionClass(), expandGridClass(Boolean(props.enabled) && Boolean(props.isCommentsExpanded), "pointer-events-none")), _v$9 = cn("relative overflow-visible", minDimensionClass()), _v$0 = cn("grid", gridTransitionClass(), expandGridClass(Boolean(props.isCopyAllExpanded), "pointer-events-none")), _v$1 = 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 && className(_el$3, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
+			_v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+			_v$6 !== _p$.n && className(_el$6, _p$.n = _v$6);
+			_v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
+			_v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
+			_v$9 !== _p$.r && className(_el$9, _p$.r = _v$9);
+			_v$0 !== _p$.d && className(_el$0, _p$.d = _v$0);
+			_v$1 !== _p$.l && className(_el$1, _p$.l = _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,
+			d: void 0,
+			l: void 0
+		});
+		return _el$2;
+	})();
+};
+delegateEvents(["click"]);
+
+//#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;
+	const handleWindowPointerMove = (event) => {
+		if (!isDragging()) return;
+		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 = () => {
+		if (!isDragging()) return;
+		window.removeEventListener("pointermove", handleWindowPointerMove);
+		window.removeEventListener("pointerup", handleWindowPointerUp);
+		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 (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()
+		};
+		window.addEventListener("pointermove", handleWindowPointerMove);
+		window.addEventListener("pointerup", handleWindowPointerUp);
+	};
+	const createDragAwareHandler = (callback) => (event) => {
+		event.stopImmediatePropagation();
+		if (didDragOccur) {
+			didDragOccur = false;
+			return;
+		}
+		callback();
+	};
+	onCleanup(() => {
+		window.removeEventListener("pointermove", handleWindowPointerMove);
+		window.removeEventListener("pointerup", handleWindowPointerUp);
+		clearTimeout(snapAnimationTimeout);
+	});
+	return {
+		isDragging,
+		isSnapping,
+		handlePointerDown,
+		createDragAwareHandler
+	};
+};
+
+//#endregion
+//#region src/components/toolbar/index.tsx
+var _tmpl$$6 = /* @__PURE__ */ template(`<span>Click or<!>to capture`), _tmpl$2$3 = /* @__PURE__ */ template(`<span>to fine-tune target`), _tmpl$3$3 = /* @__PURE__ */ template(`<span>to cancel`), _tmpl$4$2 = /* @__PURE__ */ template(`<div>`), _tmpl$5$1 = /* @__PURE__ */ template(`<div>Enable to continue`), _tmpl$6 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar>`), _tmpl$7 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-toolbar-toggle>`), _tmpl$8 = /* @__PURE__ */ template(`<span data-react-grab-unread-indicator class="absolute -top-1 -right-1 min-w-2.5 h-2.5 px-0.5 flex items-center justify-center rounded-full bg-black text-white text-[8px] font-semibold leading-none">`), _tmpl$9 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-toolbar-comments aria-haspopup=menu><span class="inline-flex relative">`), _tmpl$0 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-toolbar-copy-all aria-label="Copy all comments">`), _tmpl$1 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events data-react-grab-toolbar-enabled><div><div>`);
+const Toolbar = (props) => {
+	let containerRef;
+	let expandableButtonsRef;
+	let unfreezeUpdatesCallback = null;
+	let lastKnownExpandableWidth = 0;
+	let lastKnownExpandableHeight = 0;
+	const safePolygonTracker = createSafePolygonTracker();
+	const getElementRect = (selector) => {
+		if (!containerRef) return null;
+		const element = containerRef.getRootNode().querySelector(selector);
+		if (!element) return null;
+		const rect = element.getBoundingClientRect();
+		return {
+			x: rect.x - 8,
+			y: rect.y - 8,
+			width: rect.width + 8 * 2,
+			height: rect.height + 8 * 2
+		};
+	};
+	const getSafePolygonTargets = (...selectors) => {
+		const rects = [];
+		for (const selector of selectors) {
+			const rect = getElementRect(selector);
+			if (rect) rects.push(rect);
+		}
+		return rects.length > 0 ? rects : 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 [isSelectTooltipVisible, setIsSelectTooltipVisible] = createSignal(false);
+	const [isToggleTooltipVisible, setIsToggleTooltipVisible] = createSignal(false);
+	const [isShakeTooltipVisible, setIsShakeTooltipVisible] = createSignal(false);
+	const [isToggleAnimating, setIsToggleAnimating] = createSignal(false);
+	const [isRapidRetoggle, setIsRapidRetoggle] = createSignal(false);
+	const [isCommentsTooltipVisible, setIsCommentsTooltipVisible] = createSignal(false);
+	const [isCopyAllTooltipVisible, setIsCopyAllTooltipVisible] = createSignal(false);
+	let clockFlashRef;
+	const [selectionHintIndex, setSelectionHintIndex] = createSignal(0);
+	const [hasHintCycled, setHasHintCycled] = 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) => {
+			setSnapEdge(edge);
+			setPositionRatio(ratio);
+		},
+		onSnapComplete: (result) => {
+			expandedDimensions = result.expandedDimensions;
+			setPosition(result.position);
+			saveAndNotify({
+				edge: result.edge,
+				ratio: result.ratio,
+				collapsed: isCollapsed(),
+				enabled: props.enabled ?? true
+			});
+		},
+		onSnapAnimationEnd: () => {
+			if (props.enabled) measureExpandableDimension();
+		}
+	});
+	const hasLearnedSelectionHints = () => (props.clockFlashTrigger ?? 0) > 0;
+	createEffect(on(() => [props.isActive, hasLearnedSelectionHints()], ([isActive, hasLearned]) => {
+		setSelectionHintIndex(0);
+		setHasHintCycled(false);
+		if (!isActive || hasLearned) return;
+		const intervalId = setInterval(() => {
+			if (!hasHintCycled()) setHasHintCycled(true);
+			setSelectionHintIndex((previousIndex) => (previousIndex + 1) % 3);
+		}, SELECTION_HINT_CYCLE_INTERVAL_MS);
+		onCleanup(() => clearInterval(intervalId));
+	}, { defer: true }));
+	const commentsTooltipLabel = () => {
+		const count = props.commentItemCount ?? 0;
+		return count > 0 ? `Comments (${count})` : "Comments";
+	};
+	const commentsIconClass = () => cn("transition-colors", props.isCommentsPinned ? "text-black/50" : "text-[#B3B3B3]");
+	const isVertical = () => snapEdge() === "left" || snapEdge() === "right";
+	const measureExpandableDimension = () => {
+		if (!expandableButtonsRef) return;
+		const rect = expandableButtonsRef.getBoundingClientRect();
+		if (isVertical()) lastKnownExpandableHeight = rect.height;
+		else lastKnownExpandableWidth = rect.width;
+	};
+	const isTooltipAllowed = () => !isCollapsed() && !props.isCommentsDropdownOpen && !props.isToolbarMenuOpen && !props.isClearPromptOpen;
+	const tooltipPosition = () => {
+		switch (snapEdge()) {
+			case "top": return "bottom";
+			case "bottom": return "top";
+			case "left": return "right";
+			case "right": return "left";
+		}
+	};
+	const buttonSpacingClass = () => getButtonSpacingClass(isVertical());
+	const hitboxConstraintClass = () => getHitboxConstraintClass(isVertical());
+	const shakeTooltipPositionClass = () => {
+		const tooltipSide = tooltipPosition();
+		if (isVertical()) return `top-1/2 -translate-y-1/2 ${tooltipSide === "left" ? "right-full mr-0.5" : "left-full ml-0.5"}`;
+		return `left-1/2 -translate-x-1/2 ${tooltipSide === "top" ? "bottom-full mb-0.5" : "top-full mt-0.5"}`;
+	};
+	const stopEventPropagation = (event) => {
+		event.stopImmediatePropagation();
+	};
+	const createFreezeHandlers = (setTooltipVisible, options) => ({
+		onMouseEnter: () => {
+			if (drag.isDragging()) return;
+			safePolygonTracker.stop();
+			setTooltipVisible(true);
+			if (options?.shouldFreezeInteractions !== false && !unfreezeUpdatesCallback) {
+				unfreezeUpdatesCallback = freezeUpdates();
+				freezeGlobalAnimations();
+				freezePseudoStates();
+			}
+			options?.onHoverChange?.(true);
+		},
+		onMouseLeave: (event) => {
+			setTooltipVisible(false);
+			if (options?.shouldFreezeInteractions !== false && !props.isActive && !props.isContextMenuOpen) {
+				unfreezeUpdatesCallback?.();
+				unfreezeUpdatesCallback = null;
+				unfreezeGlobalAnimations();
+				unfreezePseudoStates();
+			}
+			const targetRects = options?.safePolygonTargets?.();
+			if (targetRects) {
+				safePolygonTracker.start({
+					x: event.clientX,
+					y: event.clientY
+				}, targetRects, () => options?.onHoverChange?.(false));
+				return;
+			}
+			options?.onHoverChange?.(false);
+		}
+	});
+	let shakeTooltipTimeout;
+	const clearShakeTooltipTimeout = () => {
+		if (shakeTooltipTimeout !== void 0) {
+			clearTimeout(shakeTooltipTimeout);
+			shakeTooltipTimeout = void 0;
+		}
+	};
+	createEffect(on(() => props.shakeCount, (count) => {
+		if (count && !props.enabled) {
+			setIsShaking(true);
+			setIsShakeTooltipVisible(true);
+			clearShakeTooltipTimeout();
+			shakeTooltipTimeout = setTimeout(() => {
+				setIsShakeTooltipVisible(false);
+			}, TOOLBAR_SHAKE_TOOLTIP_DURATION_MS);
+			onCleanup(() => {
+				clearShakeTooltipTimeout();
+			});
+		}
+	}));
+	createEffect(on(() => props.enabled, (enabled) => {
+		if (enabled && isShakeTooltipVisible()) {
+			setIsShakeTooltipVisible(false);
+			clearShakeTooltipTimeout();
+		}
+	}));
+	createEffect(on(() => [props.isActive, props.isContextMenuOpen], ([isActive, isContextMenuOpen]) => {
+		if (!isActive && !isContextMenuOpen && unfreezeUpdatesCallback) {
+			unfreezeUpdatesCallback();
+			unfreezeUpdatesCallback = null;
+		}
+	}));
+	const reclampToolbarToViewport = () => {
+		if (!containerRef) return;
+		const rect = containerRef.getBoundingClientRect();
+		expandedDimensions = {
+			width: rect.width,
+			height: rect.height
+		};
+		const currentPos = position();
+		const viewport = getVisualViewport();
+		const edge = snapEdge();
+		let clampedX = currentPos.x;
+		let clampedY = currentPos.y;
+		if (edge === "top" || edge === "bottom") {
+			const minX = viewport.offsetLeft + 16;
+			const maxX = Math.max(minX, viewport.offsetLeft + viewport.width - rect.width - 16);
+			clampedX = clampToRange(currentPos.x, minX, maxX);
+			clampedY = edge === "top" ? viewport.offsetTop + 16 : viewport.offsetTop + viewport.height - rect.height - 16;
+		} else {
+			const minY = viewport.offsetTop + 16;
+			const maxY = Math.max(minY, viewport.offsetTop + viewport.height - rect.height - 16);
+			clampedY = clampToRange(currentPos.y, minY, maxY);
+			clampedX = edge === "left" ? viewport.offsetLeft + 16 : viewport.offsetLeft + viewport.width - rect.width - 16;
+		}
+		setPositionRatio(getRatioFromPosition(edge, clampedX, clampedY, rect.width, rect.height));
+		if (clampedX !== currentPos.x || clampedY !== currentPos.y) {
+			setIsCollapseAnimating(true);
+			nativeRequestAnimationFrame(() => {
+				nativeRequestAnimationFrame(() => {
+					setPosition({
+						x: clampedX,
+						y: clampedY
+					});
+					if (collapseAnimationTimeout) clearTimeout(collapseAnimationTimeout);
+					collapseAnimationTimeout = setTimeout(() => {
+						setIsCollapseAnimating(false);
+					}, 150);
+				});
+			});
+		}
+	};
+	createEffect(on(() => props.clockFlashTrigger ?? 0, () => {
+		if (props.isCommentsDropdownOpen) return;
+		if (clockFlashRef) {
+			clockFlashRef.classList.remove("animate-clock-flash");
+			clockFlashRef.offsetHeight;
+			clockFlashRef.classList.add("animate-clock-flash");
+		}
+		setIsCommentsTooltipVisible(true);
+		const timerId = setTimeout(() => {
+			clockFlashRef?.classList.remove("animate-clock-flash");
+			setIsCommentsTooltipVisible(false);
+		}, FEEDBACK_DURATION_MS);
+		onCleanup(() => {
+			clearTimeout(timerId);
+			setIsCommentsTooltipVisible(false);
+		});
+	}, { defer: true }));
+	createEffect(on(() => props.commentItemCount ?? 0, () => {
+		if (isCollapsed()) return;
+		if (commentItemCountTimeout) clearTimeout(commentItemCountTimeout);
+		commentItemCountTimeout = setTimeout(() => {
+			measureExpandableDimension();
+			reclampToolbarToViewport();
+		}, 150);
+		onCleanup(() => {
+			if (commentItemCountTimeout) clearTimeout(commentItemCountTimeout);
+		});
+	}, { defer: true }));
+	let expandedDimensions = {
+		width: 78,
+		height: 28
+	};
+	const [collapsedDimensions, setCollapsedDimensions] = createSignal({
+		width: 14,
+		height: 14
+	});
+	const getExpandedFromCollapsed = (collapsedPosition, edge) => {
+		const actualRect = containerRef?.getBoundingClientRect();
+		const actualCollapsedWidth = actualRect?.width ?? 14;
+		const actualCollapsedHeight = actualRect?.height ?? 14;
+		return calculateExpandedPositionFromCollapsed(collapsedPosition, edge, expandedDimensions, actualCollapsedWidth, actualCollapsedHeight);
+	};
+	const recalculatePosition = () => {
+		setPosition(getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), expandedDimensions.width, expandedDimensions.height));
+	};
+	const handleToggle = drag.createDragAwareHandler(() => props.onToggle?.());
+	const handleComments = drag.createDragAwareHandler(() => props.onToggleComments?.());
+	const handleCopyAll = drag.createDragAwareHandler(() => props.onCopyAll?.());
+	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: props.enabled ?? true
+		});
+		if (collapseAnimationTimeout) clearTimeout(collapseAnimationTimeout);
+		collapseAnimationTimeout = setTimeout(() => {
+			setIsCollapseAnimating(false);
+			if (isCollapsed()) {
+				const collapsedRect = containerRef?.getBoundingClientRect();
+				if (collapsedRect) setCollapsedDimensions({
+					width: collapsedRect.width,
+					height: collapsedRect.height
+				});
+			}
+		}, 150);
+	});
+	const handleToggleEnabled = drag.createDragAwareHandler(() => {
+		const isCurrentlyEnabled = Boolean(props.enabled);
+		const edge = snapEdge();
+		const preTogglePosition = position();
+		const isVerticalEdge = edge === "left" || edge === "right";
+		const readExpandableDimension = () => isVerticalEdge ? lastKnownExpandableHeight : lastKnownExpandableWidth;
+		if (isCurrentlyEnabled && expandableButtonsRef && !isToggleAnimating()) measureExpandableDimension();
+		let expandableDimension = readExpandableDimension();
+		let shouldCompensatePosition = expandableDimension > 0;
+		let currentRenderedDimension = 0;
+		if (expandableButtonsRef) {
+			const expandableRect = expandableButtonsRef.getBoundingClientRect();
+			currentRenderedDimension = isVerticalEdge ? expandableRect.height : expandableRect.width;
+		}
+		if (!isCurrentlyEnabled && expandableDimension === 0 && expandableButtonsRef) {
+			const hasCommentItems = (props.commentItemCount ?? 0) > 0;
+			const expandedWrappers = Array.from(expandableButtonsRef.children).filter((child) => {
+				if (!(child instanceof HTMLElement)) return false;
+				if (child.querySelector("[data-react-grab-toolbar-comments]")) return hasCommentItems;
+				if (child.querySelector("[data-react-grab-toolbar-copy-all]")) return Boolean(props.isCommentsDropdownOpen);
+				return true;
+			});
+			const gridProperty = isVerticalEdge ? "gridTemplateRows" : "gridTemplateColumns";
+			for (const wrapper of expandedWrappers) {
+				wrapper.style.transition = "none";
+				wrapper.style[gridProperty] = "1fr";
+			}
+			expandableButtonsRef.offsetWidth;
+			measureExpandableDimension();
+			expandableDimension = readExpandableDimension();
+			for (const wrapper of expandedWrappers) wrapper.style[gridProperty] = "";
+			expandableButtonsRef.offsetWidth;
+			for (const wrapper of expandedWrappers) wrapper.style.transition = "";
+			shouldCompensatePosition = expandableDimension > 0;
+		}
+		if (shouldCompensatePosition) {
+			setIsRapidRetoggle(isToggleAnimating());
+			setIsToggleAnimating(true);
+		}
+		props.onToggleEnabled?.();
+		if (shouldCompensatePosition) {
+			const dimensionChange = isCurrentlyEnabled ? -expandableDimension : expandableDimension;
+			if (isVerticalEdge) expandedDimensions = {
+				width: expandedDimensions.width,
+				height: expandedDimensions.height + dimensionChange
+			};
+			else expandedDimensions = {
+				width: expandedDimensions.width + dimensionChange,
+				height: expandedDimensions.height
+			};
+			const collapsedAxisPosition = isVerticalEdge ? preTogglePosition.y + currentRenderedDimension : preTogglePosition.x + currentRenderedDimension;
+			const computeClampedPosition = (expandDimension) => {
+				const viewport = getVisualViewport();
+				const targetAxisPosition = collapsedAxisPosition - expandDimension;
+				if (isVerticalEdge) {
+					const clampMin = viewport.offsetTop + 16;
+					const clampMax = viewport.offsetTop + viewport.height - expandedDimensions.height - 16;
+					return {
+						x: preTogglePosition.x,
+						y: clampToRange(targetAxisPosition, clampMin, clampMax)
+					};
+				}
+				return {
+					x: clampToRange(targetAxisPosition, viewport.offsetLeft + 16, viewport.offsetLeft + viewport.width - expandedDimensions.width - 16),
+					y: preTogglePosition.y
+				};
+			};
+			if (toggleAnimationRafId !== void 0) nativeCancelAnimationFrame(toggleAnimationRafId);
+			if (isRapidRetoggle()) {
+				setPosition(computeClampedPosition(isCurrentlyEnabled ? 0 : expandableDimension));
+				toggleAnimationRafId = void 0;
+			} else {
+				const animationStartTime = performance.now();
+				const syncPositionWithGrid = () => {
+					if (performance.now() - animationStartTime > 150 + 50) {
+						toggleAnimationRafId = void 0;
+						return;
+					}
+					if (expandableButtonsRef) setPosition(computeClampedPosition(isVerticalEdge ? expandableButtonsRef.getBoundingClientRect().height : expandableButtonsRef.getBoundingClientRect().width));
+					toggleAnimationRafId = nativeRequestAnimationFrame(syncPositionWithGrid);
+				};
+				toggleAnimationRafId = nativeRequestAnimationFrame(syncPositionWithGrid);
+			}
+			clearTimeout(toggleAnimationTimeout);
+			toggleAnimationTimeout = setTimeout(() => {
+				if (toggleAnimationRafId !== void 0) {
+					nativeCancelAnimationFrame(toggleAnimationRafId);
+					toggleAnimationRafId = void 0;
+				}
+				setPosition(computeClampedPosition(isCurrentlyEnabled ? 0 : expandableDimension));
+				setIsToggleAnimating(false);
+				setIsRapidRetoggle(false);
+				const newRatio = getRatioFromPosition(edge, position().x, position().y, expandedDimensions.width, expandedDimensions.height);
+				setPositionRatio(newRatio);
+				saveAndNotify({
+					edge,
+					ratio: newRatio,
+					collapsed: isCollapsed(),
+					enabled: !isCurrentlyEnabled
+				});
+			}, 150);
+		} else saveAndNotify({
+			edge,
+			ratio: positionRatio(),
+			collapsed: isCollapsed(),
+			enabled: !isCurrentlyEnabled
+		});
+	});
+	const computeCollapsedPosition = () => getCollapsedPosition(snapEdge(), position(), expandedDimensions, collapsedDimensions());
+	let resizeTimeout;
+	let collapseAnimationTimeout;
+	let toggleAnimationTimeout;
+	let toggleAnimationRafId;
+	let commentItemCountTimeout;
+	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: props.enabled ?? true
+			});
+		}, 500);
+	};
+	const saveAndNotify = (state) => {
+		saveToolbarState(state);
+		props.onStateChange?.(state);
+	};
+	onMount(() => {
+		if (containerRef) props.onContainerRef?.(containerRef);
+		const rect = containerRef?.getBoundingClientRect();
+		const viewport = getVisualViewport();
+		if (savedState) {
+			if (rect) expandedDimensions = {
+				width: rect.width,
+				height: rect.height
+			};
+			if (savedState.collapsed) {
+				const isHorizontalEdge = savedState.edge === "top" || savedState.edge === "bottom";
+				setCollapsedDimensions({
+					width: isHorizontalEdge ? 28 : 14,
+					height: isHorizontalEdge ? 14 : 28
+				});
+			}
+			setIsCollapsed(savedState.collapsed);
+			setPosition(getPositionFromEdgeAndRatio(savedState.edge, savedState.ratio, expandedDimensions.width, expandedDimensions.height));
+		} else if (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));
+		if (props.enabled) measureExpandableDimension();
+		if (props.onSubscribeToStateChanges) onCleanup(props.onSubscribeToStateChanges((state) => {
+			if (isCollapseAnimating() || isToggleAnimating()) return;
+			if (!containerRef?.getBoundingClientRect()) return;
+			const didCollapsedChange = isCollapsed() !== state.collapsed;
+			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);
+				}, 150);
+			} else {
+				if (didCollapsedChange) {
+					setIsCollapseAnimating(true);
+					clearTimeout(collapseAnimationTimeout);
+					collapseAnimationTimeout = setTimeout(() => {
+						setIsCollapseAnimating(false);
+					}, 150);
+				}
+				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);
+		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);
+		clearShakeTooltipTimeout();
+		clearTimeout(toggleAnimationTimeout);
+		clearTimeout(commentItemCountTimeout);
+		if (toggleAnimationRafId !== void 0) nativeCancelAnimationFrame(toggleAnimationRafId);
+		unfreezeUpdatesCallback?.();
+		safePolygonTracker.stop();
+	});
+	const currentPosition = () => {
+		return isCollapsed() ? computeCollapsedPosition() : position();
+	};
+	const getCursorClass = () => {
+		if (isCollapsed()) return "cursor-pointer";
+		if (drag.isDragging()) return "cursor-grabbing";
+		return "cursor-grab";
+	};
+	const getTransitionClass = () => {
+		if (isResizing()) return "";
+		if (drag.isSnapping()) return "transition-[transform,opacity] duration-300 ease-out";
+		if (isCollapseAnimating()) return "transition-[transform,opacity] duration-150 ease-out";
+		if (isToggleAnimating()) return "transition-opacity duration-150 ease-out";
+		return "transition-opacity duration-300 ease-out";
+	};
+	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$6();
+		_el$.addEventListener("mouseleave", () => props.onSelectHoverChange?.(false));
+		_el$.addEventListener("mouseenter", () => !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 isActive() {
+				return props.isActive;
+			},
+			get enabled() {
+				return props.enabled;
+			},
+			get isCollapsed() {
+				return isCollapsed();
+			},
+			get snapEdge() {
+				return snapEdge();
+			},
+			get isShaking() {
+				return isShaking();
+			},
+			get isCommentsExpanded() {
+				return (props.commentItemCount ?? 0) > 0;
+			},
+			get isCopyAllExpanded() {
+				return Boolean(props.isCommentsDropdownOpen);
+			},
+			get isCommentsPinned() {
+				return props.isCommentsPinned;
+			},
+			get disableGridTransitions() {
+				return isRapidRetoggle();
+			},
+			get transformOrigin() {
+				return getTransformOrigin();
+			},
+			onAnimationEnd: () => setIsShaking(false),
+			onCollapseClick: handleToggleCollapse,
+			onExpandableButtonsRef: (element) => {
+				expandableButtonsRef = element;
+			},
+			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: props.enabled ?? true
+					});
+					if (collapseAnimationTimeout) clearTimeout(collapseAnimationTimeout);
+					collapseAnimationTimeout = setTimeout(() => {
+						setIsCollapseAnimating(false);
+					}, 150);
+				}
+			},
+			get selectButton() {
+				return [(() => {
+					var _el$10 = _tmpl$7();
+					addEventListener(_el$10, "contextmenu", (event) => {
+						event.preventDefault();
+						event.stopPropagation();
+						setIsSelectTooltipVisible(false);
+						props.onToggleToolbarMenu?.();
+					});
+					_el$10.$$click = (event) => {
+						setIsSelectTooltipVisible(false);
+						handleToggle(event);
+					};
+					spread(_el$10, 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(), hitboxConstraintClass());
+						}
+					}, () => createFreezeHandlers(setIsSelectTooltipVisible)), false, true);
+					insert(_el$10, createComponent(IconSelect, {
+						size: 14,
+						get ["class"]() {
+							return cn("transition-colors", props.isActive ? "text-black" : "text-black/70");
+						}
+					}));
+					return _el$10;
+				})(), createComponent(Tooltip, {
+					get visible() {
+						return memo(() => !!isSelectTooltipVisible())() && isTooltipAllowed();
+					},
+					get position() {
+						return tooltipPosition();
+					},
+					get children() {
+						return ["Select element ", createComponent(Kbd, { get children() {
+							return formatShortcut("C");
+						} })];
+					}
+				})];
+			},
+			get commentsButton() {
+				return [(() => {
+					var _el$11 = _tmpl$9(), _el$12 = _el$11.firstChild;
+					_el$11.$$click = (event) => {
+						setIsCommentsTooltipVisible(false);
+						handleComments(event);
+					};
+					spread(_el$11, mergeProps({
+						get ["aria-label"]() {
+							return `Open comments${(props.commentItemCount ?? 0) > 0 ? ` (${props.commentItemCount ?? 0} items)` : ""}`;
+						},
+						get ["aria-expanded"]() {
+							return Boolean(props.isCommentsDropdownOpen);
+						},
+						get ["class"]() {
+							return cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox", buttonSpacingClass(), hitboxConstraintClass());
+						}
+					}, () => createFreezeHandlers((visible) => {
+						if (visible && props.isCommentsDropdownOpen) return;
+						setIsCommentsTooltipVisible(visible);
+					}, {
+						onHoverChange: (isHovered) => props.onCommentsButtonHover?.(isHovered),
+						shouldFreezeInteractions: false,
+						safePolygonTargets: () => props.isCommentsDropdownOpen ? getSafePolygonTargets("[data-react-grab-comments-dropdown]", "[data-react-grab-toolbar-copy-all]") : null
+					})), false, true);
+					var _ref$2 = clockFlashRef;
+					typeof _ref$2 === "function" ? use(_ref$2, _el$12) : clockFlashRef = _el$12;
+					insert(_el$12, createComponent(IconComment, {
+						size: 14,
+						get ["class"]() {
+							return commentsIconClass();
+						}
+					}), null);
+					insert(_el$12, createComponent(Show, {
+						get when() {
+							return (props.commentItemCount ?? 0) > 0;
+						},
+						get children() {
+							var _el$13 = _tmpl$8();
+							insert(_el$13, () => props.commentItemCount);
+							return _el$13;
+						}
+					}), null);
+					return _el$11;
+				})(), createComponent(Tooltip, {
+					get visible() {
+						return memo(() => !!isCommentsTooltipVisible())() && isTooltipAllowed();
+					},
+					get position() {
+						return tooltipPosition();
+					},
+					get children() {
+						return commentsTooltipLabel();
+					}
+				})];
+			},
+			get copyAllButton() {
+				return [(() => {
+					var _el$14 = _tmpl$0();
+					_el$14.$$click = (event) => {
+						setIsCopyAllTooltipVisible(false);
+						handleCopyAll(event);
+					};
+					spread(_el$14, mergeProps({ get ["class"]() {
+						return cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox", buttonSpacingClass(), hitboxConstraintClass());
+					} }, () => createFreezeHandlers(setIsCopyAllTooltipVisible, {
+						onHoverChange: (isHovered) => props.onCopyAllHover?.(isHovered),
+						shouldFreezeInteractions: false,
+						safePolygonTargets: () => props.isCommentsDropdownOpen ? getSafePolygonTargets("[data-react-grab-comments-dropdown]", "[data-react-grab-toolbar-comments]") : null
+					})), false, true);
+					insert(_el$14, createComponent(IconCopy, {
+						size: 14,
+						"class": "text-[#B3B3B3] transition-colors"
+					}));
+					return _el$14;
+				})(), createComponent(Tooltip, {
+					get visible() {
+						return memo(() => !!isCopyAllTooltipVisible())() && isTooltipAllowed();
+					},
+					get position() {
+						return tooltipPosition();
+					},
+					children: "Copy all"
+				})];
+			},
+			get toggleButton() {
+				return [(() => {
+					var _el$15 = _tmpl$1(), _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild;
+					_el$15.addEventListener("mouseleave", () => setIsToggleTooltipVisible(false));
+					_el$15.addEventListener("mouseenter", () => setIsToggleTooltipVisible(true));
+					_el$15.$$click = (event) => {
+						setIsToggleTooltipVisible(false);
+						handleToggleEnabled(event);
+					};
+					createRenderEffect((_p$) => {
+						var _v$1 = props.enabled ? "Disable React Grab" : "Enable React Grab", _v$10 = Boolean(props.enabled), _v$11 = cn("contain-layout flex items-center justify-center cursor-pointer interactive-scale outline-none", isVertical() ? "my-0.5" : "mx-0.5"), _v$12 = cn("relative rounded-full transition-colors", isVertical() ? "w-3.5 h-2.5" : "w-5 h-3", props.enabled ? "bg-black" : "bg-black/25"), _v$13 = cn("absolute top-0.5 rounded-full bg-white transition-transform", isVertical() ? "w-1.5 h-1.5" : "w-2 h-2", !props.enabled && "left-0.5", props.enabled && (isVertical() ? "left-1.5" : "left-2.5"));
+						_v$1 !== _p$.e && setAttribute(_el$15, "aria-label", _p$.e = _v$1);
+						_v$10 !== _p$.t && setAttribute(_el$15, "aria-pressed", _p$.t = _v$10);
+						_v$11 !== _p$.a && className(_el$15, _p$.a = _v$11);
+						_v$12 !== _p$.o && className(_el$16, _p$.o = _v$12);
+						_v$13 !== _p$.i && className(_el$17, _p$.i = _v$13);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0
+					});
+					return _el$15;
+				})(), createComponent(Tooltip, {
+					get visible() {
+						return memo(() => !!isToggleTooltipVisible())() && isTooltipAllowed();
+					},
+					get position() {
+						return tooltipPosition();
+					},
+					get children() {
+						return props.enabled ? "Disable" : "Enable";
+					}
+				})];
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return memo(() => !!props.isActive)() && !hasLearnedSelectionHints();
+			},
+			get children() {
+				var _el$2 = _tmpl$4$2();
+				insert(_el$2, createComponent(Show, {
+					get when() {
+						return selectionHintIndex() === 0;
+					},
+					get children() {
+						var _el$3 = _tmpl$$6(), _el$6 = _el$3.firstChild.nextSibling;
+						_el$6.nextSibling;
+						insert(_el$3, createComponent(Kbd, { children: "↵" }), _el$6);
+						createRenderEffect(() => className(_el$3, cn("flex items-center gap-1", hasHintCycled() && "animate-[hint-flip-in_var(--transition-normal)_ease-out]")));
+						return _el$3;
+					}
+				}), null);
+				insert(_el$2, createComponent(Show, {
+					get when() {
+						return selectionHintIndex() === 1;
+					},
+					get children() {
+						var _el$7 = _tmpl$2$3(), _el$8 = _el$7.firstChild;
+						insert(_el$7, createComponent(Kbd, { children: "↑" }), _el$8);
+						insert(_el$7, createComponent(Kbd, { children: "↓" }), _el$8);
+						createRenderEffect(() => className(_el$7, cn("flex items-center gap-1", HINT_FLIP_IN_ANIMATION)));
+						return _el$7;
+					}
+				}), null);
+				insert(_el$2, createComponent(Show, {
+					get when() {
+						return selectionHintIndex() === 2;
+					},
+					get children() {
+						var _el$9 = _tmpl$3$3(), _el$0 = _el$9.firstChild;
+						insert(_el$9, createComponent(Kbd, { children: "esc" }), _el$0);
+						createRenderEffect(() => className(_el$9, cn("flex items-center gap-1", HINT_FLIP_IN_ANIMATION)));
+						return _el$9;
+					}
+				}), null);
+				createRenderEffect((_p$) => {
+					var _v$ = cn(TOOLTIP_BASE_CLASS, "flex items-center gap-1 animate-tooltip-fade-in [animation-fill-mode:backwards]", "bg-white", shakeTooltipPositionClass()), _v$2 = { [isVertical() ? "top" : "left"]: "50%" }, _v$3 = String(Z_INDEX_OVERLAY);
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_p$.t = style(_el$2, _v$2, _p$.t);
+					_v$3 !== _p$.a && setStyleProperty(_el$2, "z-index", _p$.a = _v$3);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$2;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return isShakeTooltipVisible();
+			},
+			get children() {
+				var _el$1 = _tmpl$5$1();
+				createRenderEffect((_p$) => {
+					var _v$4 = cn(TOOLTIP_BASE_CLASS, "animate-tooltip-fade-in", "bg-white", shakeTooltipPositionClass()), _v$5 = { [isVertical() ? "top" : "left"]: "50%" }, _v$6 = String(Z_INDEX_OVERLAY);
+					_v$4 !== _p$.e && className(_el$1, _p$.e = _v$4);
+					_p$.t = style(_el$1, _v$5, _p$.t);
+					_v$6 !== _p$.a && setStyleProperty(_el$1, "z-index", _p$.a = _v$6);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$1;
+			}
+		}), null);
+		createRenderEffect((_p$) => {
+			var _v$7 = cn("fixed left-0 top-0 font-sans text-[13px] antialiased select-none", getCursorClass(), getTransitionClass(), isVisible() ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"), _v$8 = String(Z_INDEX_OVERLAY), _v$9 = `translate(${currentPosition().x}px, ${currentPosition().y}px)`, _v$0 = getTransformOrigin();
+			_v$7 !== _p$.e && className(_el$, _p$.e = _v$7);
+			_v$8 !== _p$.t && setStyleProperty(_el$, "z-index", _p$.t = _v$8);
+			_v$9 !== _p$.a && setStyleProperty(_el$, "transform", _p$.a = _v$9);
+			_v$0 !== _p$.o && setStyleProperty(_el$, "transform-origin", _p$.o = _v$0);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		return _el$;
+	})();
+};
+delegateEvents(["click"]);
+
+//#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$$5 = /* @__PURE__ */ template(`<div class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`), _tmpl$2$2 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-context-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] 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$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 disabled:opacity-40 disabled:cursor-default"><span class="text-[13px] leading-4 font-sans font-medium text-black">`), _tmpl$4$1 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`);
+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 false;
+				if (!resolveActionEnabled(action, context)) return false;
+				event.preventDefault();
+				event.stopPropagation();
+				action.onAction(context);
+				props.onHide();
+				return true;
+			};
+			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$2(), _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$$5(), _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$2(), _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) => (() => {
+								var _el$8 = _tmpl$4$1();
+								insert(_el$8, () => formatShortcut(shortcut()));
+								return _el$8;
+							})()
+						}), 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-white");
+				_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);
+			}, 100);
+		}
+		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$$4 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"><div><div class="relative flex flex-col py-1"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`), _tmpl$2$1 = /* @__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>`), _tmpl$3$1 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`);
+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$$4(), _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$1(), _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) => (() => {
+								var _el$7 = _tmpl$3$1();
+								insert(_el$7, () => formatShortcut(shortcutKey()));
+								return _el$7;
+							})()
+						}), null);
+						createRenderEffect((_p$) => {
+							var _v$8 = action.id, _v$9 = cn("text-[13px] leading-4 font-sans font-medium", isDefault() ? "text-black" : "text-black/60");
+							_v$8 !== _p$.e && setAttribute(_el$5, "data-react-grab-menu-item", _p$.e = _v$8);
+							_v$9 !== _p$.t && className(_el$6, _p$.t = _v$9);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$5;
+					})();
+				}
+			}), null);
+			createRenderEffect((_p$) => {
+				var _v$ = `${dropdown.displayPosition().top}px`, _v$2 = `${dropdown.displayPosition().left}px`, _v$3 = dropdown.isAnimatedIn() ? "auto" : "none", _v$4 = DROPDOWN_EDGE_TRANSFORM_ORIGIN[dropdown.lastAnchorEdge()], _v$5 = dropdown.isAnimatedIn() ? "1" : "0", _v$6 = dropdown.isAnimatedIn() ? "scale(1)" : "scale(0.95)", _v$7 = cn("contain-layout flex flex-col rounded-[10px] antialiased w-fit h-fit overflow-hidden [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-white");
+				_v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
+				_v$3 !== _p$.a && setStyleProperty(_el$, "pointer-events", _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);
+				_v$6 !== _p$.n && setStyleProperty(_el$, "transform", _p$.n = _v$6);
+				_v$7 !== _p$.s && className(_el$2, _p$.s = _v$7);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0,
+				s: void 0
+			});
+			return _el$;
+		}
+	});
+};
+delegateEvents([
+	"pointerdown",
+	"mousedown",
+	"click",
+	"contextmenu"
+]);
+
+//#endregion
+//#region src/components/icons/icon-trash.tsx
+var _tmpl$$3 = /* @__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="M4.63751 20.1665L3.82444 6.75092L3.73431 5.06621C3.72513 4.89447 3.8619 4.75018 4.03388 4.75018H19.9945C20.1685 4.75018 20.306 4.89769 20.2938 5.07124L20.1756 6.75092L19.3625 20.1665C19.2745 21.618 18.0717 22.7502 16.6176 22.7502H7.38247C5.9283 22.7502 4.72548 21.618 4.63751 20.1665ZM8.74963 16.5002C8.74963 16.9144 9.08542 17.2502 9.49963 17.2502C9.91385 17.2502 10.2496 16.9144 10.2496 16.5002V10.5002C10.2496 10.086 9.91385 9.75018 9.49963 9.75018C9.08542 9.75018 8.74963 10.086 8.74963 10.5002V16.5002ZM14.4996 9.75018C14.9138 9.75018 15.2496 10.086 15.2496 10.5002V16.5002C15.2496 16.9144 14.9138 17.2502 14.4996 17.2502C14.0854 17.2502 13.7496 16.9144 13.7496 16.5002V10.5002C13.7496 10.086 14.0854 9.75018 14.4996 9.75018Z"></path><path fill-rule=evenodd clip-rule=evenodd d="M8.31879 2.46286C8.63394 1.7275 9.35702 1.2507 10.1571 1.2507H13.8383C14.6383 1.2507 15.3614 1.7275 15.6766 2.46286L16.6569 4.75034H19.2239C19.2903 4.75034 19.3523 4.75034 19.4102 4.7507H19.4637C19.4857 4.74973 19.5079 4.74972 19.5303 4.7507H20.9977C21.55 4.7507 21.9977 5.19842 21.9977 5.7507C21.9977 6.30299 21.55 6.7507 20.9977 6.7507H2.99768C2.4454 6.7507 1.99768 6.30299 1.99768 5.7507C1.99768 5.19842 2.4454 4.7507 2.99768 4.7507H4.46507C4.48746 4.74972 4.50968 4.74973 4.53167 4.7507H4.58469C4.6426 4.75034 4.70457 4.75034 4.77093 4.75034H7.33844L8.31879 2.46286ZM13.8903 3.37192L14.481 4.75034H9.5144L10.1052 3.37192C10.1367 3.29838 10.209 3.2507 10.289 3.2507L13.7064 3.2507C13.7864 3.2507 13.8587 3.29838 13.8903 3.37192Z">`);
+const IconTrash = (props) => {
+	const size = () => props.size ?? 14;
+	return (() => {
+		var _el$ = _tmpl$$3();
+		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/format-relative-time.ts
+const SECONDS_PER_MINUTE = 60;
+const MINUTES_PER_HOUR = 60;
+const HOURS_PER_DAY = 24;
+const formatRelativeTime = (timestamp) => {
+	const elapsedSeconds = Math.floor((Date.now() - timestamp) / 1e3);
+	if (elapsedSeconds < SECONDS_PER_MINUTE) return "now";
+	const elapsedMinutes = Math.floor(elapsedSeconds / SECONDS_PER_MINUTE);
+	if (elapsedMinutes < MINUTES_PER_HOUR) return `${elapsedMinutes}m`;
+	const elapsedHours = Math.floor(elapsedMinutes / MINUTES_PER_HOUR);
+	if (elapsedHours < HOURS_PER_DAY) return `${elapsedHours}h`;
+	return `${Math.floor(elapsedHours / HOURS_PER_DAY)}d`;
+};
+
+//#endregion
+//#region src/components/comments-dropdown.tsx
+var _tmpl$$2 = /* @__PURE__ */ template(`<div class="flex items-center gap-[5px]"><div class=relative><button data-react-grab-ignore-events data-react-grab-comments-clear class="contain-layout shrink-0 flex items-center justify-center px-[3px] py-px rounded-sm bg-[#FEF2F2] cursor-pointer transition-all hover:bg-[#FEE2E2] press-scale h-[17px] text-[#B91C1C]"></button></div><div class=relative><button data-react-grab-ignore-events data-react-grab-comments-copy-all class="contain-layout shrink-0 flex items-center justify-center px-[3px] py-px rounded-sm bg-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px]">`), _tmpl$2 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-comments-dropdown class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"><div><div class="contain-layout shrink-0 flex items-center justify-between px-2 pt-1.5 pb-1"><span class="text-[11px] font-medium text-black/40">Comments</span></div><div class="min-h-0 [border-top-width:0.5px] border-t-solid border-t-[#D9D9D9] px-2 py-1.5"><div class="relative flex flex-col max-h-[240px] overflow-y-auto -mx-2 -my-1.5 [scrollbar-width:thin] [scrollbar-color:transparent_transparent] hover:[scrollbar-color:rgba(0,0,0,0.15)_transparent]"><div class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out">`), _tmpl$3 = /* @__PURE__ */ template(`<span class="text-black text-[13px] leading-3.5 font-sans font-medium">Copy`), _tmpl$4 = /* @__PURE__ */ template(`<span class="text-[11px] leading-3 font-sans text-black/40 truncate mt-0.5">`), _tmpl$5 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-comment-item class="group relative z-1 contain-layout flex items-start justify-between w-full px-2 py-1 cursor-pointer text-left gap-2"tabindex=0><span class="flex flex-col min-w-0 flex-1"><span class="text-[12px] leading-4 font-sans font-medium text-black truncate"></span></span><span class="shrink-0 text-[10px] font-sans text-black/25 flex items-center justify-end">`);
+const getCommentItemDisplayName = (item) => {
+	if (item.elementsCount && item.elementsCount > 1) return `${item.elementsCount} elements`;
+	return item.componentName ?? item.tagName;
+};
+const CommentsDropdown = (props) => {
+	let containerRef;
+	const { containerRef: highlightContainerRef, highlightRef, updateHighlight, clearHighlight } = createMenuHighlight();
+	const safePolygonTracker = createSafePolygonTracker();
+	const getToolbarTargetRects = () => {
+		if (!containerRef) return null;
+		const toolbar = containerRef.getRootNode().querySelector("[data-react-grab-toolbar]");
+		if (!toolbar) return null;
+		const rect = toolbar.getBoundingClientRect();
+		return [{
+			x: rect.x - 8,
+			y: rect.y - 8,
+			width: rect.width + 8 * 2,
+			height: rect.height + 8 * 2
+		}];
+	};
+	const dropdown = createAnchoredDropdown(() => containerRef, () => props.position);
+	const [activeHeaderTooltip, setActiveHeaderTooltip] = createSignal(null);
+	const [isCopyAllConfirmed, setIsCopyAllConfirmed] = createSignal(false);
+	let copyAllFeedbackTimeout;
+	createEffect(on(() => dropdown.isAnimatedIn(), (animatedIn) => {
+		if (animatedIn && containerRef?.matches(":hover")) props.onDropdownHover?.(true);
+	}, { defer: true }));
+	const clampedMaxWidth = () => Math.min(280, window.innerWidth - dropdown.displayPosition().left - 8);
+	const clampedMaxHeight = () => window.innerHeight - dropdown.displayPosition().top - 8;
+	const panelMinWidth = () => Math.max(180, props.position?.toolbarWidth ?? 0);
+	onMount(() => {
+		dropdown.measure();
+		const handleKeyDown = (event) => {
+			if (!props.position) return;
+			if (event.code === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				props.onDismiss?.();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown, { capture: true });
+		onCleanup(() => {
+			clearTimeout(copyAllFeedbackTimeout);
+			dropdown.clearAnimationHandles();
+			window.removeEventListener("keydown", handleKeyDown, { capture: true });
+			safePolygonTracker.stop();
+		});
+	});
+	return createComponent(Show, {
+		get when() {
+			return dropdown.shouldMount();
+		},
+		get children() {
+			var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+			_el$3.firstChild;
+			var _el$1 = _el$3.nextSibling.firstChild, _el$10 = _el$1.firstChild;
+			_el$.addEventListener("mouseleave", (event) => {
+				const targetRects = getToolbarTargetRects();
+				if (targetRects) {
+					safePolygonTracker.start({
+						x: event.clientX,
+						y: event.clientY
+					}, targetRects, () => props.onDropdownHover?.(false));
+					return;
+				}
+				props.onDropdownHover?.(false);
+			});
+			_el$.addEventListener("mouseenter", () => {
+				safePolygonTracker.stop();
+				props.onDropdownHover?.(true);
+			});
+			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$3, createComponent(Show, {
+				get when() {
+					return props.items.length > 0;
+				},
+				get children() {
+					var _el$5 = _tmpl$$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$6.nextSibling, _el$9 = _el$8.firstChild;
+					_el$7.addEventListener("mouseleave", () => setActiveHeaderTooltip(null));
+					_el$7.addEventListener("mouseenter", () => setActiveHeaderTooltip("clear"));
+					_el$7.$$click = (event) => {
+						event.stopPropagation();
+						setActiveHeaderTooltip(null);
+						props.onClearAll?.();
+					};
+					insert(_el$7, createComponent(IconTrash, { size: 11 }));
+					insert(_el$6, createComponent(Tooltip, {
+						get visible() {
+							return activeHeaderTooltip() === "clear";
+						},
+						position: "top",
+						children: "Clear all"
+					}), null);
+					_el$9.addEventListener("mouseleave", () => {
+						setActiveHeaderTooltip(null);
+						props.onCopyAllHover?.(false);
+					});
+					_el$9.addEventListener("mouseenter", () => {
+						setActiveHeaderTooltip("copy");
+						if (!isCopyAllConfirmed()) props.onCopyAllHover?.(true);
+					});
+					_el$9.$$click = (event) => {
+						event.stopPropagation();
+						setActiveHeaderTooltip(null);
+						props.onCopyAll?.();
+						setIsCopyAllConfirmed(true);
+						clearTimeout(copyAllFeedbackTimeout);
+						copyAllFeedbackTimeout = setTimeout(() => {
+							setIsCopyAllConfirmed(false);
+						}, FEEDBACK_DURATION_MS);
+					};
+					insert(_el$9, createComponent(Show, {
+						get when() {
+							return isCopyAllConfirmed();
+						},
+						get fallback() {
+							return _tmpl$3();
+						},
+						get children() {
+							return createComponent(IconCheck, {
+								size: 11,
+								"class": "text-black"
+							});
+						}
+					}));
+					insert(_el$8, createComponent(Tooltip, {
+						get visible() {
+							return activeHeaderTooltip() === "copy";
+						},
+						position: "top",
+						children: "Copy all"
+					}), null);
+					return _el$5;
+				}
+			}), null);
+			use(highlightContainerRef, _el$1);
+			use(highlightRef, _el$10);
+			insert(_el$1, createComponent(For, {
+				get each() {
+					return props.items;
+				},
+				children: (item) => (() => {
+					var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$16 = _el$13.nextSibling;
+					addEventListener(_el$12, "blur", clearHighlight);
+					_el$12.addEventListener("focus", (event) => updateHighlight(event.currentTarget));
+					_el$12.addEventListener("mouseleave", () => {
+						props.onItemHover?.(null);
+						clearHighlight();
+					});
+					_el$12.addEventListener("mouseenter", (event) => {
+						if (!props.disconnectedItemIds?.has(item.id)) props.onItemHover?.(item.id);
+						updateHighlight(event.currentTarget);
+					});
+					_el$12.$$keydown = (event) => {
+						if (event.code === "Space" && event.currentTarget === event.target) {
+							event.preventDefault();
+							event.stopPropagation();
+							props.onSelectItem?.(item);
+						}
+					};
+					_el$12.$$click = (event) => {
+						event.stopPropagation();
+						props.onSelectItem?.(item);
+					};
+					_el$12.$$pointerdown = (event) => event.stopPropagation();
+					insert(_el$14, () => getCommentItemDisplayName(item));
+					insert(_el$13, createComponent(Show, {
+						get when() {
+							return item.commentText;
+						},
+						get children() {
+							var _el$15 = _tmpl$4();
+							insert(_el$15, () => item.commentText);
+							return _el$15;
+						}
+					}), null);
+					insert(_el$16, () => formatRelativeTime(item.timestamp));
+					createRenderEffect((_$p) => classList(_el$12, { "opacity-40 hover:opacity-100": Boolean(props.disconnectedItemIds?.has(item.id)) }, _$p));
+					return _el$12;
+				})()
+			}), null);
+			createRenderEffect((_p$) => {
+				var _v$ = `${dropdown.displayPosition().top}px`, _v$2 = `${dropdown.displayPosition().left}px`, _v$3 = dropdown.isAnimatedIn() ? "auto" : "none", _v$4 = DROPDOWN_EDGE_TRANSFORM_ORIGIN[dropdown.lastAnchorEdge()], _v$5 = dropdown.isAnimatedIn() ? "1" : "0", _v$6 = dropdown.isAnimatedIn() ? "scale(1)" : "scale(0.95)", _v$7 = cn("contain-layout flex flex-col rounded-[10px] antialiased w-fit h-fit overflow-hidden [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-white"), _v$8 = `${panelMinWidth()}px`, _v$9 = `${clampedMaxWidth()}px`, _v$0 = `${clampedMaxHeight()}px`;
+				_v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
+				_v$3 !== _p$.a && setStyleProperty(_el$, "pointer-events", _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);
+				_v$6 !== _p$.n && setStyleProperty(_el$, "transform", _p$.n = _v$6);
+				_v$7 !== _p$.s && className(_el$2, _p$.s = _v$7);
+				_v$8 !== _p$.h && setStyleProperty(_el$2, "min-width", _p$.h = _v$8);
+				_v$9 !== _p$.r && setStyleProperty(_el$2, "max-width", _p$.r = _v$9);
+				_v$0 !== _p$.d && setStyleProperty(_el$2, "max-height", _p$.d = _v$0);
+				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,
+				d: void 0
+			});
+			return _el$;
+		}
+	});
+};
+delegateEvents([
+	"pointerdown",
+	"mousedown",
+	"click",
+	"contextmenu",
+	"keydown"
+]);
+
+//#endregion
+//#region src/components/clear-comments-prompt.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-clear-comments-prompt class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"><div>`);
+const ClearCommentsPrompt = (props) => {
+	let containerRef;
+	const dropdown = createAnchoredDropdown(() => containerRef, () => props.position);
+	onMount(() => {
+		dropdown.measure();
+		const unregisterOverlayDismiss = registerOverlayDismiss({
+			isOpen: () => Boolean(props.position),
+			onDismiss: props.onCancel,
+			onConfirm: props.onConfirm,
+			shouldIgnoreInputEvents: true
+		});
+		onCleanup(() => {
+			dropdown.clearAnimationHandles();
+			unregisterOverlayDismiss();
+		});
+	});
+	return createComponent(Show, {
+		get when() {
+			return dropdown.shouldMount();
+		},
+		get children() {
+			var _el$ = _tmpl$$1(), _el$2 = _el$.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$2, createComponent(DiscardPrompt, {
+				label: "Clear comments?",
+				cancelOnEscape: true,
+				get onConfirm() {
+					return props.onConfirm;
+				},
+				get onCancel() {
+					return props.onCancel;
+				}
+			}));
+			createRenderEffect((_p$) => {
+				var _v$ = `${dropdown.displayPosition().top}px`, _v$2 = `${dropdown.displayPosition().left}px`, _v$3 = dropdown.isAnimatedIn() ? "auto" : "none", _v$4 = DROPDOWN_EDGE_TRANSFORM_ORIGIN[dropdown.lastAnchorEdge()], _v$5 = dropdown.isAnimatedIn() ? "1" : "0", _v$6 = dropdown.isAnimatedIn() ? "scale(1)" : "scale(0.95)", _v$7 = cn("contain-layout flex flex-col rounded-[10px] antialiased w-fit h-fit [font-synthesis:none] [corner-shape:superellipse(1.25)]", "bg-white");
+				_v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
+				_v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
+				_v$3 !== _p$.a && setStyleProperty(_el$, "pointer-events", _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);
+				_v$6 !== _p$.n && setStyleProperty(_el$, "transform", _p$.n = _v$6);
+				_v$7 !== _p$.s && className(_el$2, _p$.s = _v$7);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0,
+				s: 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 selectionIsFading() {
+				return props.selectionLabelStatus === "fading";
+			},
+			get inspectVisible() {
+				return props.inspectVisible;
+			},
+			get inspectBounds() {
+				return props.inspectBounds;
+			},
+			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 ${100}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.selectionBounds;
+			},
+			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 actionCycleState() {
+						return props.selectionActionCycleState;
+					},
+					get arrowNavigationState() {
+						return props.selectionArrowNavigationState;
+					},
+					get onArrowNavigationSelect() {
+						return props.onArrowNavigationSelect;
+					},
+					get inspectNavigationState() {
+						return props.inspectNavigationState;
+					},
+					get onInspectSelect() {
+						return props.onInspectSelect;
+					},
+					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 onToggleEnabled() {
+						return props.onToggleEnabled;
+					},
+					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 commentItemCount() {
+						return props.commentItemCount;
+					},
+					get clockFlashTrigger() {
+						return props.clockFlashTrigger;
+					},
+					get onToggleComments() {
+						return props.onToggleComments;
+					},
+					get onCopyAll() {
+						return props.onCopyAll;
+					},
+					get onCopyAllHover() {
+						return props.onCopyAllHover;
+					},
+					get onCommentsButtonHover() {
+						return props.onCommentsButtonHover;
+					},
+					get isCommentsDropdownOpen() {
+						return Boolean(props.commentsDropdownPosition);
+					},
+					get isCommentsPinned() {
+						return props.isCommentsPinned;
+					},
+					get onToggleToolbarMenu() {
+						return props.onToggleToolbarMenu;
+					},
+					get isToolbarMenuOpen() {
+						return Boolean(props.toolbarMenuPosition);
+					},
+					get isClearPromptOpen() {
+						return Boolean(props.clearPromptPosition);
+					}
+				});
+			}
+		}),
+		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 ?? (() => {});
+			}
+		}),
+		createComponent(ClearCommentsPrompt, {
+			get position() {
+				return props.clearPromptPosition ?? null;
+			},
+			get onConfirm() {
+				return props.onClearCommentsConfirm ?? (() => {});
+			},
+			get onCancel() {
+				return props.onClearCommentsCancel ?? (() => {});
+			}
+		}),
+		createComponent(CommentsDropdown, {
+			get position() {
+				return props.commentsDropdownPosition ?? null;
+			},
+			get items() {
+				return props.commentItems ?? [];
+			},
+			get disconnectedItemIds() {
+				return props.commentsDisconnectedItemIds;
+			},
+			get onSelectItem() {
+				return props.onCommentItemSelect;
+			},
+			get onItemHover() {
+				return props.onCommentItemHover;
+			},
+			get onCopyAll() {
+				return props.onCommentsCopyAll;
+			},
+			get onCopyAllHover() {
+				return props.onCommentsCopyAllHover;
+			},
+			get onClearAll() {
+				return props.onCommentsClear;
+			},
+			get onDismiss() {
+				return props.onCommentsDismiss;
+			},
+			get onDropdownHover() {
+				return props.onCommentsDropdownHover;
+			}
+		})
+	];
+};
+
+//#endregion
+export { ReactGrabRenderer };