/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
const require_index = require('../css-tokens/dist/index.cjs');
const require_utils_parseShadow = require('../utils/parseShadow.cjs');
const require_utils_svgFloatingContentUtils = require('../utils/svgFloatingContentUtils.cjs');
let react = require("react");

//#region src/hooks/useSvgFloatingContent.ts
function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRef, animationDuration, hideArrow = false, arrowWidth, arrowHeight, arrowTipRadiusFraction }) {
	const internalRef = (0, react.useRef)(null);
	const shadowFilterId = (0, react.useId)();
	const [dimensions, setDimensions] = (0, react.useState)({
		width: 0,
		height: 0
	});
	(0, react.useEffect)(() => {
		const el = internalRef.current;
		if (!el) return;
		const observer = new ResizeObserver(() => {
			setDimensions({
				width: el.offsetWidth,
				height: el.offsetHeight
			});
		});
		observer.observe(el);
		return () => observer.disconnect();
	}, [open]);
	const [shadows, setShadows] = (0, react.useState)([]);
	const shadowValueRef = (0, react.useRef)("");
	const readShadows = (0, react.useCallback)(() => {
		if (!internalRef.current) return;
		const shadowValue = getComputedStyle(internalRef.current).getPropertyValue(`--${require_index.DROP_SHADOW_PREFIX}`);
		if (shadowValue !== shadowValueRef.current) {
			shadowValueRef.current = shadowValue;
			setShadows(require_utils_parseShadow.parseShadow(shadowValue));
		}
	}, []);
	const shadowPadding = (0, react.useMemo)(() => {
		if (shadows.length === 0) return 0;
		return shadows.reduce((max, s) => {
			const extentX = Math.abs(s.x) + s.blur + Math.abs(s.spread);
			const extentY = Math.abs(s.y) + s.blur + Math.abs(s.spread);
			return Math.max(max, extentX, extentY);
		}, 0);
	}, [shadows]);
	const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
	const computeArrowCenter = (0, react.useCallback)(() => {
		const arrowEl = arrowRef.current;
		const el = internalRef.current;
		if (!arrowEl || !el) return;
		const arrowRect = arrowEl.getBoundingClientRect();
		const rect = el.getBoundingClientRect();
		const side = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - rect.left : arrowRect.top + arrowRect.height / 2 - rect.top;
		return Math.round(raw);
	}, [arrowRef, effectivePlacement]);
	const onPositionUpdate = (0, react.useCallback)(async ({ updatePosition }) => {
		await updatePosition();
		const el = internalRef.current;
		if (el) {
			const { offsetWidth, offsetHeight } = el;
			if (offsetWidth > 0 && offsetHeight > 0) setDimensions((prev) => {
				if (prev.width === offsetWidth && prev.height === offsetHeight) return prev;
				return {
					width: offsetWidth,
					height: offsetHeight
				};
			});
			readShadows();
		}
		if (!hideArrow) {
			const next = computeArrowCenter();
			if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
		}
	}, [
		computeArrowCenter,
		readShadows,
		hideArrow
	]);
	const svgPath = (0, react.useMemo)(() => {
		return dimensions.width > 0 && dimensions.height > 0 ? require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
			width: dimensions.width,
			height: dimensions.height,
			placement: effectivePlacement,
			borderRadius,
			arrowCenter: hideArrow ? void 0 : arrowCenter,
			arrowWidth,
			arrowHeight,
			arrowTipRadiusFraction,
			...hideArrow && {
				arrowWidth: 0,
				arrowHeight: 0
			}
		}) : null;
	}, [
		effectivePlacement,
		dimensions.width,
		dimensions.height,
		borderRadius,
		arrowCenter,
		hideArrow,
		arrowWidth,
		arrowHeight,
		arrowTipRadiusFraction
	]);
	const blurClipPath = (0, react.useMemo)(() => {
		if (dimensions.width <= 0 || dimensions.height <= 0) return null;
		if (hideArrow) return require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
			width: dimensions.width,
			height: dimensions.height,
			placement: effectivePlacement,
			borderRadius,
			arrowWidth: 0,
			arrowHeight: 0,
			arrowTipRadiusFraction
		});
		const arrowSide = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
		const offsetX = arrowSide === "left" ? arrowHeight : 0;
		const offsetY = arrowSide === "top" ? arrowHeight : 0;
		return require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
			width: dimensions.width,
			height: dimensions.height,
			placement: effectivePlacement,
			borderRadius,
			arrowCenter,
			offsetX,
			offsetY,
			arrowWidth,
			arrowHeight,
			arrowTipRadiusFraction
		});
	}, [
		effectivePlacement,
		dimensions.width,
		dimensions.height,
		borderRadius,
		arrowCenter,
		hideArrow,
		arrowHeight,
		arrowWidth,
		arrowTipRadiusFraction
	]);
	const blurStyle = (0, react.useMemo)(() => {
		const style = {};
		if (blurClipPath && dimensions.width > 0 && dimensions.height > 0) {
			let maskWidth = dimensions.width;
			let maskHeight = dimensions.height;
			if (!hideArrow) {
				const arrowSide = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
				if (arrowSide === "top" || arrowSide === "bottom") maskHeight += arrowHeight;
				else maskWidth += arrowHeight;
			}
			const svgMask = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${maskWidth} ${maskHeight}'><path d='${blurClipPath}' fill='white'/></svg>`;
			const maskUrl = `url("data:image/svg+xml,${encodeURIComponent(svgMask)}")`;
			style.WebkitMaskImage = maskUrl;
			style.maskImage = maskUrl;
			style.WebkitMaskSize = "100% 100%";
			style.maskSize = "100% 100%";
		}
		if (!hideArrow) switch (require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement)) {
			case "top":
				style.height = `calc(100% + ${arrowHeight}px)`;
				style.top = "auto";
				style.bottom = "0";
				break;
			case "bottom":
				style.height = `calc(100% + ${arrowHeight}px)`;
				break;
			case "left":
				style.width = `calc(100% + ${arrowHeight}px)`;
				style.left = "auto";
				style.right = "0";
				break;
			case "right":
				style.width = `calc(100% + ${arrowHeight}px)`;
				break;
		}
		return style;
	}, [
		blurClipPath,
		dimensions.width,
		dimensions.height,
		effectivePlacement,
		hideArrow,
		arrowHeight
	]);
	const [visible, setVisible] = (0, react.useState)(false);
	(0, react.useEffect)(() => {
		const raf = requestAnimationFrame(() => {
			setVisible(open && !!svgPath);
		});
		return () => cancelAnimationFrame(raf);
	}, [open, svgPath]);
	return {
		internalRef,
		shadowFilterId,
		dimensions,
		shadows,
		shadowPadding,
		svgPath,
		blurClipPath,
		blurStyle,
		visible,
		childTransitionStyle: {
			opacity: visible ? 1 : 0,
			transition: `opacity ${animationDuration}ms ease-in-out`
		},
		shift: (0, react.useMemo)(() => {
			if (hideArrow || arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
				x: 0,
				y: 0
			};
			return require_utils_svgFloatingContentUtils.getArrowClampDelta({
				width: dimensions.width,
				height: dimensions.height,
				placement: effectivePlacement,
				borderRadius,
				arrowCenter,
				arrowWidth
			});
		}, [
			hideArrow,
			arrowCenter,
			dimensions.width,
			dimensions.height,
			effectivePlacement,
			borderRadius,
			arrowWidth
		]),
		onPositionUpdate
	};
}

//#endregion
exports.useSvgFloatingContent = useSvgFloatingContent;