npm - @intlayer/design-system - Versions diffs - 9.3.1 → 9.3.3 - Mend

@intlayer/design-system 9.3.1 → 9.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/dist/esm/components/Pattern/GridDistortionPattern.mjs CHANGED Viewed

@@ -105,29 +105,53 @@ const buildSegmentAttrs = (startX, startY, endX, endY, mouseX, mouseY, mouseActi
 		strokeWidth
 	};
 };
+/**
+* Advances every point one step toward its target and reports how far the
+* furthest one travelled.
+*
+* The caller uses that distance to decide whether another frame is worth
+* running: the relaxation is exponential, so once it drops below
+* {@link SETTLE_THRESHOLD_PX} the grid is visually at rest and redrawing it
+* only burns the main thread.
+*
+* @returns Largest per-axis distance any point moved this step, in pixels.
+*/
 const updateGridPoints = (grid, mouseX, mouseY, mouseActive, radius, strength) => {
 	const rows = grid.length;
 	const columns = grid[0].length;
+	let largestMovement = 0;
 	for (let rowIndex = 0; rowIndex < rows; rowIndex++) for (let columnIndex = 0; columnIndex < columns; columnIndex++) {
 		const point = grid[rowIndex][columnIndex];
+		const previousX = point.x;
+		const previousY = point.y;
 		if (!mouseActive) {
 			point.x += (point.baseX - point.x) * .08;
 			point.y += (point.baseY - point.y) * .08;
-			continue;
-		}
-		const deltaX = mouseX - point.baseX;
-		const deltaY = mouseY - point.baseY;
-		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-		if (distance < radius && distance > 0) {
-			const displacement = (Math.cos(distance / radius * Math.PI) + 1) / 2 * strength * radius * .3;
-			point.x += (point.baseX + deltaX / distance * displacement - point.x) * .12;
-			point.y += (point.baseY + deltaY / distance * displacement - point.y) * .12;
 		} else {
-			point.x += (point.baseX - point.x) * .08;
-			point.y += (point.baseY - point.y) * .08;
+			const deltaX = mouseX - point.baseX;
+			const deltaY = mouseY - point.baseY;
+			const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+			if (distance < radius && distance > 0) {
+				const displacement = (Math.cos(distance / radius * Math.PI) + 1) / 2 * strength * radius * .3;
+				point.x += (point.baseX + deltaX / distance * displacement - point.x) * .12;
+				point.y += (point.baseY + deltaY / distance * displacement - point.y) * .12;
+			} else {
+				point.x += (point.baseX - point.x) * .08;
+				point.y += (point.baseY - point.y) * .08;
+			}
 		}
+		const movement = Math.max(Math.abs(point.x - previousX), Math.abs(point.y - previousY));
+		if (movement > largestMovement) largestMovement = movement;
 	}
+	return largestMovement;
 };
+/**
+* Per-frame movement below which the grid counts as at rest, in pixels.
+*
+* Well under a device pixel, so the frame that crosses it is the last one that
+* could have changed anything on screen.
+*/
+const SETTLE_THRESHOLD_PX = .05;
 const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength = .12, lineColor, highlightColor, className, ...props }) => {
 	const theme = useIsDarkMode() ? DARK_THEME : LIGHT_THEME;
 	const resolvedLineColor = lineColor ?? theme.lineColor;
@@ -139,6 +163,19 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 		active: false
 	});
 	const points = useRef([]);
+	/**
+	* Bumped on every pointer move. The loop records the value it rendered so it
+	* can tell "the pointer is somewhere over the page but has not moved" — which
+	* looks identical frame to frame — from a genuine change.
+	*/
+	const pointerMoveCount = useRef(0);
+	/**
+	* Restarts the animation loop after it has parked itself.
+	*
+	* Assigned by the animation effect; the resize, colour and pointer effects
+	* call it so a change they make is picked up even when the grid was at rest.
+	*/
+	const wakeLoop = useRef(() => void 0);
 	const radiusRef = useRef(radius);
 	const strengthRef = useRef(strength);
 	const lineRgbRef = useRef(FALLBACK_RGB);
@@ -154,6 +191,7 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 		if (!svg) return;
 		lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);
 		highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);
+		wakeLoop.current();
 	}, [resolvedLineColor, resolvedHighlightColor]);
 	useEffect(() => {
 		const svg = svgRef.current;
@@ -175,6 +213,7 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 				newGrid.push(row);
 			}
 			points.current = newGrid;
+			wakeLoop.current();
 		};
 		resize();
 		const resizeObserver = new ResizeObserver(resize);
@@ -191,9 +230,13 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 				y: event.clientY - rect.top,
 				active: true
 			};
+			pointerMoveCount.current++;
+			wakeLoop.current();
 		};
 		const handlePointerLeave = () => {
 			mouse.current.active = false;
+			pointerMoveCount.current++;
+			wakeLoop.current();
 		};
 		window.addEventListener("pointermove", handlePointerMove, { passive: true });
 		window.addEventListener("pointerleave", handlePointerLeave, { passive: true });
@@ -202,11 +245,39 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 			window.removeEventListener("pointerleave", handlePointerLeave);
 		};
 	}, []);
+	/**
+	* Runs the grid only while it has something to show.
+	*
+	* Each frame rewrites four attributes on every segment — on a full-viewport
+	* grid that is close to nine thousand `setAttribute` calls. Left running
+	* unconditionally it saturated the main thread of any page embedding the
+	* pattern, which starved React's transition lanes and made every other
+	* scroll-driven animation on the page advance in visible steps.
+	*
+	* So the loop parks itself whenever the grid is at rest and the pointer has
+	* not moved, and while the SVG is scrolled out of view. Anything that can
+	* change the picture — a pointer move, a resize, a colour change, the element
+	* coming back on screen — wakes it through {@link wakeLoop}.
+	*/
 	useEffect(() => {
 		const svg = svgRef.current;
 		if (!svg) return;
 		const pathPool = [];
 		let frame = 0;
+		let isRunning = false;
+		let isOnScreen = true;
+		/** Value of `pointerMoveCount` the last rendered frame was drawn for. */
+		let renderedPointerMoveCount = -1;
+		const start = () => {
+			if (isRunning || !isOnScreen) return;
+			isRunning = true;
+			frame = requestAnimationFrame(tick);
+		};
+		const stop = () => {
+			if (!isRunning) return;
+			isRunning = false;
+			cancelAnimationFrame(frame);
+		};
 		const ensurePathCount = (count) => {
 			while (pathPool.length < count) {
 				const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -219,9 +290,10 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 		const tick = () => {
 			const grid = points.current;
 			if (!grid.length) {
-				frame = requestAnimationFrame(tick);
+				isRunning = false;
 				return;
 			}
+			const pointerMoveCountAtFrameStart = pointerMoveCount.current;
 			const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;
 			const currentRadius = radiusRef.current;
 			const currentStrength = strengthRef.current;
@@ -229,7 +301,11 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 			const highlightRgb = highlightRgbRef.current;
 			const baseOpacity = baseOpacityRef.current;
 			const highlightOpacityBoost = highlightOpacityBoostRef.current;
-			updateGridPoints(grid, mouseX, mouseY, mouseActive, currentRadius, currentStrength);
+			if (updateGridPoints(grid, mouseX, mouseY, mouseActive, currentRadius, currentStrength) < SETTLE_THRESHOLD_PX && renderedPointerMoveCount === pointerMoveCountAtFrameStart) {
+				isRunning = false;
+				return;
+			}
+			renderedPointerMoveCount = pointerMoveCountAtFrameStart;
 			const rows = grid.length;
 			const columns = grid[0].length;
 			const totalSegments = rows * (columns - 1) + columns * (rows - 1);
@@ -257,9 +333,18 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 			}
 			frame = requestAnimationFrame(tick);
 		};
-		tick();
+		wakeLoop.current = start;
+		const visibilityObserver = new IntersectionObserver(([entry]) => {
+			isOnScreen = entry?.isIntersecting ?? true;
+			if (isOnScreen) start();
+			else stop();
+		});
+		visibilityObserver.observe(svg);
+		start();
 		return () => {
-			cancelAnimationFrame(frame);
+			wakeLoop.current = () => void 0;
+			visibilityObserver.disconnect();
+			stop();
 			for (const el of pathPool) el.remove();
 		};
 	}, []);

package/dist/esm/components/Pattern/GridDistortionPattern.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridDistortionPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridDistortionPattern.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type SVGProps, useEffect, useRef } from 'react';\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode';\n\n// ---------------------------------------------------------------------------\n// Theme configuration — tweak these to adjust the grid appearance globally\n// ---------------------------------------------------------------------------\n\ntype GridTheme = {\n /** Resting line color, used far from the pointer. /\n lineColor: string;\n /\n Color the lines fade toward as the pointer approaches. To avoid lines\n * appearing to \"dim into the background\" near the pointer, this should be\n * brighter (higher luminance) than {@link GridTheme.lineColor} in dark mode\n * and clearly contrasting in light mode.\n /\n highlightColor: string;\n /* Stroke opacity far from the pointer — keeps the whole grid visible. /\n baseOpacity: number;\n /* Extra opacity added at the pointer's center on top of {@link GridTheme.baseOpacity}. /\n highlightOpacityBoost: number;\n};\n\n/\n Light mode: a visible (but subtle) gray line on white. The base opacity is\n * raised and the highlight boost lowered so the grid no longer fades to nothing\n * far from the pointer while spiking to a harsh accent underneath it.\n /\nconst LIGHT_THEME: GridTheme = {\n lineColor: '#a8a8a8',\n highlightColor: '#969696',\n baseOpacity: 0.3,\n highlightOpacityBoost: 0.3,\n};\n\n/\n Dark mode: a mid-gray line that brightens toward a light purple near the\n * pointer (brighter than the resting line, so the hovered segment lights up\n * instead of darkening into the black background).\n /\nconst DARK_THEME: GridTheme = {\n lineColor: '#4d4d4d',\n highlightColor: '#5c5c5c',\n baseOpacity: 0.2,\n highlightOpacityBoost: 0.2,\n};\n\n/\n Falloff exponent for the highlight. A gentler curve (2 = quadratic) spreads\n * the highlight over a wider area than a cubic one, smoothing the transition\n * between the resting line and the accent under the pointer.\n /\nconst HIGHLIGHT_FALLOFF_EXPONENT = 2;\n\n// ---------------------------------------------------------------------------\n// Pure helpers — defined once at module level, never recreated\n// ---------------------------------------------------------------------------\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n const numericValue = parseInt(hex.replace('#', ''), 16);\n return [\n (numericValue >> 16) & 255,\n (numericValue >> 8) & 255,\n numericValue & 255,\n ];\n};\n\n/* Neutral gray used when a color string can't be parsed into RGB. /\nconst FALLBACK_RGB: [number, number, number] = [136, 136, 136];\n\n/\n Resolves any CSS color string — `#rrggbb`, `rgb()/hsl()`, a named color, or a\n * `var(--token)` reference — into an `[r, g, b]` triple.\n \n 6-digit hex is parsed directly. Everything else is resolved by the browser\n * via a throwaway probe element mounted inside `contextElement`, so custom\n * properties resolve against the correct cascade. Falls back to a neutral gray\n * when the value can't be parsed, so the grid never emits invalid\n * `rgb(NaN, …)` strokes (which browsers render as solid black).\n /\nconst resolveColorToRgb = (\n color: string,\n contextElement: Element\n): [number, number, number] => {\n const trimmed = color.trim();\n\n // Fast path: 6-digit hex needs no DOM access.\n if (/^#[0-9a-f]{6}$/i.test(trimmed)) {\n return hexToRgb(trimmed);\n }\n\n const probe = document.createElement('span');\n probe.style.color = trimmed;\n probe.style.display = 'none';\n contextElement.appendChild(probe);\n const computedColor = getComputedStyle(probe).color;\n probe.remove();\n\n const channels = computedColor.match(/-?\\d+(?:\\.\\d+)?/g);\n if (channels && channels.length >= 3) {\n return [Number(channels[0]), Number(channels[1]), Number(channels[2])];\n }\n\n return FALLBACK_RGB;\n};\n\ntype Point = { baseX: number; baseY: number; x: number; y: number };\n\nconst buildSegmentAttrs = (\n startX: number,\n startY: number,\n endX: number,\n endY: number,\n mouseX: number,\n mouseY: number,\n mouseActive: boolean,\n radius: number,\n strength: number,\n lineRgb: [number, number, number],\n highlightRgb: [number, number, number],\n baseOpacity: number,\n highlightOpacityBoost: number\n): {\n d: string;\n stroke: string;\n strokeOpacity: number;\n strokeWidth: number;\n} => {\n let red: number;\n let green: number;\n let blue: number;\n let opacity: number;\n let strokeWidth: number;\n\n if (!mouseActive) {\n [red, green, blue] = lineRgb;\n opacity = baseOpacity;\n strokeWidth = 0.8;\n } else {\n const midX = (startX + endX) / 2;\n const midY = (startY + endY) / 2;\n const deltaX = mouseX - midX;\n const deltaY = mouseY - midY;\n const distance = Math.sqrt(deltaX deltaX + deltaY * deltaY);\n const distanceRatio = Math.max(0, 1 - distance / radius);\n const easing = distanceRatio ** HIGHLIGHT_FALLOFF_EXPONENT;\n red = Math.round(lineRgb[0] + (highlightRgb[0] - lineRgb[0]) * easing);\n green = Math.round(lineRgb[1] + (highlightRgb[1] - lineRgb[1]) * easing);\n blue = Math.round(lineRgb[2] + (highlightRgb[2] - lineRgb[2]) * easing);\n opacity = baseOpacity + easing * highlightOpacityBoost;\n strokeWidth = 0.8 + easing * 1.2;\n void strength; // currently unused in segment coloring, kept for API compatibility\n }\n\n return {\n d: `M ${startX} ${startY} L ${endX} ${endY}`,\n stroke: `rgb(${red},${green},${blue})`,\n strokeOpacity: opacity,\n strokeWidth,\n };\n};\n\nconst updateGridPoints = (\n grid: Point[][],\n mouseX: number,\n mouseY: number,\n mouseActive: boolean,\n radius: number,\n strength: number\n): void => {\n const rows = grid.length;\n const columns = grid[0]!.length;\n\n for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n const point = grid[rowIndex]![columnIndex]!;\n if (!mouseActive) {\n point.x += (point.baseX - point.x) * 0.08;\n point.y += (point.baseY - point.y) * 0.08;\n continue;\n }\n const deltaX = mouseX - point.baseX;\n const deltaY = mouseY - point.baseY;\n const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n if (distance < radius && distance > 0) {\n const force = (Math.cos((distance / radius) * Math.PI) + 1) / 2;\n const displacement = force * strength * radius * 0.3;\n point.x +=\n (point.baseX + (deltaX / distance) * displacement - point.x) * 0.12;\n point.y +=\n (point.baseY + (deltaY / distance) * displacement - point.y) * 0.12;\n } else {\n point.x += (point.baseX - point.x) * 0.08;\n point.y += (point.baseY - point.y) * 0.08;\n }\n }\n }\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\ntype GridDistortionPatternProps = {\n width?: number;\n height?: number;\n radius?: number;\n strength?: number;\n lineColor?: string;\n highlightColor?: string;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridDistortionPattern: FC<GridDistortionPatternProps> = ({\n width = 70,\n height = 70,\n radius = 280,\n strength = 0.12,\n lineColor,\n highlightColor,\n className,\n ...props\n}) => {\n const isDarkMode = useIsDarkMode();\n const theme = isDarkMode ? DARK_THEME : LIGHT_THEME;\n\n // Explicit props win; otherwise fall back to the active theme's defaults.\n const resolvedLineColor = lineColor ?? theme.lineColor;\n const resolvedHighlightColor = highlightColor ?? theme.highlightColor;\n\n const svgRef = useRef<SVGSVGElement>(null);\n const mouse = useRef({ x: -9999, y: -9999, active: false });\n const points = useRef<Point[][]>([]);\n\n // Stable refs so the animation loop always sees the latest prop values\n // without needing to restart itself.\n const radiusRef = useRef(radius);\n const strengthRef = useRef(strength);\n // Initialized to safe placeholders; the real (possibly CSS-variable-based)\n // colors are resolved against the DOM in the effect below.\n const lineRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n const highlightRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n const baseOpacityRef = useRef(theme.baseOpacity);\n const highlightOpacityBoostRef = useRef(theme.highlightOpacityBoost);\n\n // Keep numeric refs in sync with props on each render (cheap assignments).\n radiusRef.current = radius;\n strengthRef.current = strength;\n baseOpacityRef.current = theme.baseOpacity;\n highlightOpacityBoostRef.current = theme.highlightOpacityBoost;\n\n // Resolve colors once mounted — getComputedStyle is required so that\n // `var(--token)` highlight/line colors resolve against the live cascade.\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);\n highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);\n }, [resolvedLineColor, resolvedHighlightColor]);\n\n // ---------------------------------------------------------------------------\n // Resize — rebuild the point grid and resize the SVG viewBox\n // ---------------------------------------------------------------------------\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n\n const resize = () => {\n const rect = svg.getBoundingClientRect();\n svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);\n\n const columns = Math.ceil(rect.width / width) + 2;\n const rows = Math.ceil(rect.height / height) + 2;\n const newGrid: Point[][] = [];\n\n for (let rowIndex = -1; rowIndex <= rows; rowIndex++) {\n const row: Point[] = [];\n for (let columnIndex = -1; columnIndex <= columns; columnIndex++) {\n row.push({\n baseX: columnIndex * width,\n baseY: rowIndex * height,\n x: columnIndex * width,\n y: rowIndex * height,\n });\n }\n newGrid.push(row);\n }\n points.current = newGrid;\n };\n\n resize();\n const resizeObserver = new ResizeObserver(resize);\n resizeObserver.observe(svg);\n return () => resizeObserver.disconnect();\n }, [width, height]);\n\n // ---------------------------------------------------------------------------\n // Pointer tracking — passive listeners, no React state involved\n // ---------------------------------------------------------------------------\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n\n const handlePointerMove = (event: PointerEvent) => {\n const rect = svg.getBoundingClientRect();\n mouse.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n active: true,\n };\n };\n const handlePointerLeave = () => {\n mouse.current.active = false;\n };\n\n window.addEventListener('pointermove', handlePointerMove, {\n passive: true,\n });\n window.addEventListener('pointerleave', handlePointerLeave, {\n passive: true,\n });\n return () => {\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerleave', handlePointerLeave);\n };\n }, []);\n\n // ---------------------------------------------------------------------------\n // Animation loop — writes directly to SVG DOM, no React state/re-renders\n // ---------------------------------------------------------------------------\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n\n // We maintain a pool of <path> elements and reuse them each frame\n // to avoid GC pressure from creating/deleting DOM nodes every tick.\n const pathPool: SVGPathElement[] = [];\n let frame = 0;\n\n const ensurePathCount = (count: number) => {\n while (pathPool.length < count) {\n const el = document.createElementNS(\n 'http://www.w3.org/2000/svg',\n 'path'\n );\n el.setAttribute('fill', 'none');\n svg.appendChild(el);\n pathPool.push(el);\n }\n // Hide surplus paths\n for (let i = count; i < pathPool.length; i++) {\n pathPool[i]!.setAttribute('d', '');\n }\n };\n\n const tick = () => {\n const grid = points.current;\n if (!grid.length) {\n frame = requestAnimationFrame(tick);\n return;\n }\n\n const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;\n const currentRadius = radiusRef.current;\n const currentStrength = strengthRef.current;\n const lineRgb = lineRgbRef.current;\n const highlightRgb = highlightRgbRef.current;\n const baseOpacity = baseOpacityRef.current;\n const highlightOpacityBoost = highlightOpacityBoostRef.current;\n\n // Update point positions\n updateGridPoints(\n grid,\n mouseX,\n mouseY,\n mouseActive,\n currentRadius,\n currentStrength\n );\n\n const rows = grid.length;\n const columns = grid[0]!.length;\n\n // Count segments up front so we can size the pool\n const horizontalCount = rows * (columns - 1);\n const verticalCount = columns * (rows - 1);\n const totalSegments = horizontalCount + verticalCount;\n ensurePathCount(totalSegments);\n\n let pathIndex = 0;\n\n // Horizontal segments\n for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {\n const p0 = grid[rowIndex]![columnIndex]!;\n const p1 = grid[rowIndex]![columnIndex + 1]!;\n const attrs = buildSegmentAttrs(\n p0.x,\n p0.y,\n p1.x,\n p1.y,\n mouseX,\n mouseY,\n mouseActive,\n currentRadius,\n currentStrength,\n lineRgb,\n highlightRgb,\n baseOpacity,\n highlightOpacityBoost\n );\n const el = pathPool[pathIndex++]!;\n el.setAttribute('d', attrs.d);\n el.setAttribute('stroke', attrs.stroke);\n el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n el.setAttribute('stroke-width', String(attrs.strokeWidth));\n }\n }\n\n // Vertical segments\n for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n for (let rowIndex = 0; rowIndex < rows - 1; rowIndex++) {\n const p0 = grid[rowIndex]![columnIndex]!;\n const p1 = grid[rowIndex + 1]![columnIndex]!;\n const attrs = buildSegmentAttrs(\n p0.x,\n p0.y,\n p1.x,\n p1.y,\n mouseX,\n mouseY,\n mouseActive,\n currentRadius,\n currentStrength,\n lineRgb,\n highlightRgb,\n baseOpacity,\n highlightOpacityBoost\n );\n const el = pathPool[pathIndex++]!;\n el.setAttribute('d', attrs.d);\n el.setAttribute('stroke', attrs.stroke);\n el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n el.setAttribute('stroke-width', String(attrs.strokeWidth));\n }\n }\n\n frame = requestAnimationFrame(tick);\n };\n\n tick();\n\n return () => {\n cancelAnimationFrame(frame);\n // Clean up path elements we injected\n for (const el of pathPool) {\n el.remove();\n }\n };\n }, []); // no dependencies — reads everything via refs\n\n return (\n <svg\n ref={svgRef}\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 size-full',\n className\n )}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,cAAyB;CAC7B,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,uBAAuB;AACzB;;;;;;AAOA,MAAM,aAAwB;CAC5B,WAAW;CACX,gBAAgB;CAChB,aAAa;CACb,uBAAuB;AACzB;;;;;;AAOA,MAAM,6BAA6B;AAMnC,MAAM,YAAY,QAA0C;CAC1D,MAAM,eAAe,SAAS,IAAI,QAAQ,KAAK,EAAE,GAAG,EAAE;CACtD,OAAO;EACJ,gBAAgB,KAAM;EACtB,gBAAgB,IAAK;EACtB,eAAe;CACjB;AACF;;AAGA,MAAM,eAAyC;CAAC;CAAK;CAAK;AAAG;;;;;;;;;;;AAY7D,MAAM,qBACJ,OACA,mBAC6B;CAC7B,MAAM,UAAU,MAAM,KAAK;CAG3B,IAAI,kBAAkB,KAAK,OAAO,GAChC,OAAO,SAAS,OAAO;CAGzB,MAAM,QAAQ,SAAS,cAAc,MAAM;CAC3C,MAAM,MAAM,QAAQ;CACpB,MAAM,MAAM,UAAU;CACtB,eAAe,YAAY,KAAK;CAChC,MAAM,gBAAgB,iBAAiB,KAAK,CAAC,CAAC;CAC9C,MAAM,OAAO;CAEb,MAAM,WAAW,cAAc,MAAM,kBAAkB;CACvD,IAAI,YAAY,SAAS,UAAU,GACjC,OAAO;EAAC,OAAO,SAAS,EAAE;EAAG,OAAO,SAAS,EAAE;EAAG,OAAO,SAAS,EAAE;CAAC;CAGvE,OAAO;AACT;AAIA,MAAM,qBACJ,QACA,QACA,MACA,MACA,QACA,QACA,aACA,QACA,UACA,SACA,cACA,aACA,0BAMG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,IAAI,CAAC,aAAa;EAChB,CAAC,KAAK,OAAO,QAAQ;EACrB,UAAU;EACV,cAAc;CAChB,OAAO;EACL,MAAM,QAAQ,SAAS,QAAQ;EAC/B,MAAM,QAAQ,SAAS,QAAQ;EAC/B,MAAM,SAAS,SAAS;EACxB,MAAM,SAAS,SAAS;EACxB,MAAM,WAAW,KAAK,KAAK,SAAS,SAAS,SAAS,MAAM;EAE5D,MAAM,SADgB,KAAK,IAAI,GAAG,IAAI,WAAW,MACtB,KAAK;EAChC,MAAM,KAAK,MAAM,QAAQ,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM;EACrE,QAAQ,KAAK,MAAM,QAAQ,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM;EACvE,OAAO,KAAK,MAAM,QAAQ,MAAM,aAAa,KAAK,QAAQ,MAAM,MAAM;EACtE,UAAU,cAAc,SAAS;EACjC,cAAc,KAAM,SAAS;CAE/B;CAEA,OAAO;EACL,GAAG,KAAK,OAAO,GAAG,OAAO,KAAK,KAAK,GAAG;EACtC,QAAQ,OAAO,IAAI,GAAG,MAAM,GAAG,KAAK;EACpC,eAAe;EACf;CACF;AACF;AAEA,MAAM,oBACJ,MACA,QACA,QACA,aACA,QACA,aACS;CACT,MAAM,OAAO,KAAK;CAClB,MAAM,UAAU,KAAK,EAAE,CAAE;CAEzB,KAAK,IAAI,WAAW,GAAG,WAAW,MAAM,YACtC,KAAK,IAAI,cAAc,GAAG,cAAc,SAAS,eAAe;EAC9D,MAAM,QAAQ,KAAK,SAAS,CAAE;EAC9B,IAAI,CAAC,aAAa;GAChB,MAAM,MAAM,MAAM,QAAQ,MAAM,KAAK;GACrC,MAAM,MAAM,MAAM,QAAQ,MAAM,KAAK;GACrC;EACF;EACA,MAAM,SAAS,SAAS,MAAM;EAC9B,MAAM,SAAS,SAAS,MAAM;EAC9B,MAAM,WAAW,KAAK,KAAK,SAAS,SAAS,SAAS,MAAM;EAE5D,IAAI,WAAW,UAAU,WAAW,GAAG;GAErC,MAAM,gBADS,KAAK,IAAK,WAAW,SAAU,KAAK,EAAE,IAAI,KAAK,IACjC,WAAW,SAAS;GACjD,MAAM,MACH,MAAM,QAAS,SAAS,WAAY,eAAe,MAAM,KAAK;GACjE,MAAM,MACH,MAAM,QAAS,SAAS,WAAY,eAAe,MAAM,KAAK;EACnE,OAAO;GACL,MAAM,MAAM,MAAM,QAAQ,MAAM,KAAK;GACrC,MAAM,MAAM,MAAM,QAAQ,MAAM,KAAK;EACvC;CACF;AAEJ;AAeA,MAAa,yBAAyD,EACpE,QAAQ,IACR,SAAS,IACT,SAAS,KACT,WAAW,KACX,WACA,gBACA,WACA,GAAG,YACC;CAEJ,MAAM,QADa,cACI,IAAI,aAAa;CAGxC,MAAM,oBAAoB,aAAa,MAAM;CAC7C,MAAM,yBAAyB,kBAAkB,MAAM;CAEvD,MAAM,SAAS,OAAsB,IAAI;CACzC,MAAM,QAAQ,OAAO;EAAE,GAAG;EAAO,GAAG;EAAO,QAAQ;CAAM,CAAC;CAC1D,MAAM,SAAS,OAAkB,CAAC,CAAC;CAInC,MAAM,YAAY,OAAO,MAAM;CAC/B,MAAM,cAAc,OAAO,QAAQ;CAGnC,MAAM,aAAa,OAAiC,YAAY;CAChE,MAAM,kBAAkB,OAAiC,YAAY;CACrE,MAAM,iBAAiB,OAAO,MAAM,WAAW;CAC/C,MAAM,2BAA2B,OAAO,MAAM,qBAAqB;CAGnE,UAAU,UAAU;CACpB,YAAY,UAAU;CACtB,eAAe,UAAU,MAAM;CAC/B,yBAAyB,UAAU,MAAM;CAIzC,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EACV,WAAW,UAAU,kBAAkB,mBAAmB,GAAG;EAC7D,gBAAgB,UAAU,kBAAkB,wBAAwB,GAAG;CACzE,GAAG,CAAC,mBAAmB,sBAAsB,CAAC;CAK9C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,MAAM,eAAe;GACnB,MAAM,OAAO,IAAI,sBAAsB;GACvC,IAAI,aAAa,WAAW,OAAO,KAAK,MAAM,GAAG,KAAK,QAAQ;GAE9D,MAAM,UAAU,KAAK,KAAK,KAAK,QAAQ,KAAK,IAAI;GAChD,MAAM,OAAO,KAAK,KAAK,KAAK,SAAS,MAAM,IAAI;GAC/C,MAAM,UAAqB,CAAC;GAE5B,KAAK,IAAI,WAAW,IAAI,YAAY,MAAM,YAAY;IACpD,MAAM,MAAe,CAAC;IACtB,KAAK,IAAI,cAAc,IAAI,eAAe,SAAS,eACjD,IAAI,KAAK;KACP,OAAO,cAAc;KACrB,OAAO,WAAW;KAClB,GAAG,cAAc;KACjB,GAAG,WAAW;IAChB,CAAC;IAEH,QAAQ,KAAK,GAAG;GAClB;GACA,OAAO,UAAU;EACnB;EAEA,OAAO;EACP,MAAM,iBAAiB,IAAI,eAAe,MAAM;EAChD,eAAe,QAAQ,GAAG;EAC1B,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,OAAO,MAAM,CAAC;CAKlB,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,MAAM,qBAAqB,UAAwB;GACjD,MAAM,OAAO,IAAI,sBAAsB;GACvC,MAAM,UAAU;IACd,GAAG,MAAM,UAAU,KAAK;IACxB,GAAG,MAAM,UAAU,KAAK;IACxB,QAAQ;GACV;EACF;EACA,MAAM,2BAA2B;GAC/B,MAAM,QAAQ,SAAS;EACzB;EAEA,OAAO,iBAAiB,eAAe,mBAAmB,EACxD,SAAS,KACX,CAAC;EACD,OAAO,iBAAiB,gBAAgB,oBAAoB,EAC1D,SAAS,KACX,CAAC;EACD,aAAa;GACX,OAAO,oBAAoB,eAAe,iBAAiB;GAC3D,OAAO,oBAAoB,gBAAgB,kBAAkB;EAC/D;CACF,GAAG,CAAC,CAAC;CAKL,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAIV,MAAM,WAA6B,CAAC;EACpC,IAAI,QAAQ;EAEZ,MAAM,mBAAmB,UAAkB;GACzC,OAAO,SAAS,SAAS,OAAO;IAC9B,MAAM,KAAK,SAAS,gBAClB,8BACA,MACF;IACA,GAAG,aAAa,QAAQ,MAAM;IAC9B,IAAI,YAAY,EAAE;IAClB,SAAS,KAAK,EAAE;GAClB;GAEA,KAAK,IAAI,IAAI,OAAO,IAAI,SAAS,QAAQ,KACvC,SAAS,EAAE,CAAE,aAAa,KAAK,EAAE;EAErC;EAEA,MAAM,aAAa;GACjB,MAAM,OAAO,OAAO;GACpB,IAAI,CAAC,KAAK,QAAQ;IAChB,QAAQ,sBAAsB,IAAI;IAClC;GACF;GAEA,MAAM,EAAE,GAAG,QAAQ,GAAG,QAAQ,QAAQ,gBAAgB,MAAM;GAC5D,MAAM,gBAAgB,UAAU;GAChC,MAAM,kBAAkB,YAAY;GACpC,MAAM,UAAU,WAAW;GAC3B,MAAM,eAAe,gBAAgB;GACrC,MAAM,cAAc,eAAe;GACnC,MAAM,wBAAwB,yBAAyB;GAGvD,iBACE,MACA,QACA,QACA,aACA,eACA,eACF;GAEA,MAAM,OAAO,KAAK;GAClB,MAAM,UAAU,KAAK,EAAE,CAAE;GAKzB,MAAM,gBAFkB,QAAQ,UAAU,KACpB,WAAW,OAAO;GAExC,gBAAgB,aAAa;GAE7B,IAAI,YAAY;GAGhB,KAAK,IAAI,WAAW,GAAG,WAAW,MAAM,YACtC,KAAK,IAAI,cAAc,GAAG,cAAc,UAAU,GAAG,eAAe;IAClE,MAAM,KAAK,KAAK,SAAS,CAAE;IAC3B,MAAM,KAAK,KAAK,SAAS,CAAE,cAAc;IACzC,MAAM,QAAQ,kBACZ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,QACA,QACA,aACA,eACA,iBACA,SACA,cACA,aACA,qBACF;IACA,MAAM,KAAK,SAAS;IACpB,GAAG,aAAa,KAAK,MAAM,CAAC;IAC5B,GAAG,aAAa,UAAU,MAAM,MAAM;IACtC,GAAG,aAAa,kBAAkB,OAAO,MAAM,aAAa,CAAC;IAC7D,GAAG,aAAa,gBAAgB,OAAO,MAAM,WAAW,CAAC;GAC3D;GAIF,KAAK,IAAI,cAAc,GAAG,cAAc,SAAS,eAC/C,KAAK,IAAI,WAAW,GAAG,WAAW,OAAO,GAAG,YAAY;IACtD,MAAM,KAAK,KAAK,SAAS,CAAE;IAC3B,MAAM,KAAK,KAAK,WAAW,EAAE,CAAE;IAC/B,MAAM,QAAQ,kBACZ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,QACA,QACA,aACA,eACA,iBACA,SACA,cACA,aACA,qBACF;IACA,MAAM,KAAK,SAAS;IACpB,GAAG,aAAa,KAAK,MAAM,CAAC;IAC5B,GAAG,aAAa,UAAU,MAAM,MAAM;IACtC,GAAG,aAAa,kBAAkB,OAAO,MAAM,aAAa,CAAC;IAC7D,GAAG,aAAa,gBAAgB,OAAO,MAAM,WAAW,CAAC;GAC3D;GAGF,QAAQ,sBAAsB,IAAI;EACpC;EAEA,KAAK;EAEL,aAAa;GACX,qBAAqB,KAAK;GAE1B,KAAK,MAAM,MAAM,UACf,GAAG,OAAO;EAEd;CACF,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,OAAD;EACE,KAAK;EACL,eAAY;EACZ,WAAW,GACT,kDACA,SACF;EACA,GAAI;CACL;AAEL"}
1	+ {"version":3,"file":"GridDistortionPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridDistortionPattern.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type SVGProps, useEffect, useRef } from 'react';\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode';\n\n// ---------------------------------------------------------------------------\n// Theme configuration — tweak these to adjust the grid appearance globally\n// ---------------------------------------------------------------------------\n\ntype GridTheme = {\n /** Resting line color, used far from the pointer. /\n lineColor: string;\n /\n Color the lines fade toward as the pointer approaches. To avoid lines\n * appearing to \"dim into the background\" near the pointer, this should be\n * brighter (higher luminance) than {@link GridTheme.lineColor} in dark mode\n * and clearly contrasting in light mode.\n /\n highlightColor: string;\n /* Stroke opacity far from the pointer — keeps the whole grid visible. /\n baseOpacity: number;\n /* Extra opacity added at the pointer's center on top of {@link GridTheme.baseOpacity}. /\n highlightOpacityBoost: number;\n};\n\n/\n Light mode: a visible (but subtle) gray line on white. The base opacity is\n * raised and the highlight boost lowered so the grid no longer fades to nothing\n * far from the pointer while spiking to a harsh accent underneath it.\n /\nconst LIGHT_THEME: GridTheme = {\n lineColor: '#a8a8a8',\n highlightColor: '#969696',\n baseOpacity: 0.3,\n highlightOpacityBoost: 0.3,\n};\n\n/\n Dark mode: a mid-gray line that brightens toward a light purple near the\n * pointer (brighter than the resting line, so the hovered segment lights up\n * instead of darkening into the black background).\n /\nconst DARK_THEME: GridTheme = {\n lineColor: '#4d4d4d',\n highlightColor: '#5c5c5c',\n baseOpacity: 0.2,\n highlightOpacityBoost: 0.2,\n};\n\n/\n Falloff exponent for the highlight. A gentler curve (2 = quadratic) spreads\n * the highlight over a wider area than a cubic one, smoothing the transition\n * between the resting line and the accent under the pointer.\n /\nconst HIGHLIGHT_FALLOFF_EXPONENT = 2;\n\n// ---------------------------------------------------------------------------\n// Pure helpers — defined once at module level, never recreated\n// ---------------------------------------------------------------------------\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n const numericValue = parseInt(hex.replace('#', ''), 16);\n return [\n (numericValue >> 16) & 255,\n (numericValue >> 8) & 255,\n numericValue & 255,\n ];\n};\n\n/* Neutral gray used when a color string can't be parsed into RGB. /\nconst FALLBACK_RGB: [number, number, number] = [136, 136, 136];\n\n/\n Resolves any CSS color string — `#rrggbb`, `rgb()/hsl()`, a named color, or a\n * `var(--token)` reference — into an `[r, g, b]` triple.\n \n 6-digit hex is parsed directly. Everything else is resolved by the browser\n * via a throwaway probe element mounted inside `contextElement`, so custom\n * properties resolve against the correct cascade. Falls back to a neutral gray\n * when the value can't be parsed, so the grid never emits invalid\n * `rgb(NaN, …)` strokes (which browsers render as solid black).\n /\nconst resolveColorToRgb = (\n color: string,\n contextElement: Element\n): [number, number, number] => {\n const trimmed = color.trim();\n\n // Fast path: 6-digit hex needs no DOM access.\n if (/^#[0-9a-f]{6}$/i.test(trimmed)) {\n return hexToRgb(trimmed);\n }\n\n const probe = document.createElement('span');\n probe.style.color = trimmed;\n probe.style.display = 'none';\n contextElement.appendChild(probe);\n const computedColor = getComputedStyle(probe).color;\n probe.remove();\n\n const channels = computedColor.match(/-?\\d+(?:\\.\\d+)?/g);\n if (channels && channels.length >= 3) {\n return [Number(channels[0]), Number(channels[1]), Number(channels[2])];\n }\n\n return FALLBACK_RGB;\n};\n\ntype Point = { baseX: number; baseY: number; x: number; y: number };\n\nconst buildSegmentAttrs = (\n startX: number,\n startY: number,\n endX: number,\n endY: number,\n mouseX: number,\n mouseY: number,\n mouseActive: boolean,\n radius: number,\n strength: number,\n lineRgb: [number, number, number],\n highlightRgb: [number, number, number],\n baseOpacity: number,\n highlightOpacityBoost: number\n): {\n d: string;\n stroke: string;\n strokeOpacity: number;\n strokeWidth: number;\n} => {\n let red: number;\n let green: number;\n let blue: number;\n let opacity: number;\n let strokeWidth: number;\n\n if (!mouseActive) {\n [red, green, blue] = lineRgb;\n opacity = baseOpacity;\n strokeWidth = 0.8;\n } else {\n const midX = (startX + endX) / 2;\n const midY = (startY + endY) / 2;\n const deltaX = mouseX - midX;\n const deltaY = mouseY - midY;\n const distance = Math.sqrt(deltaX deltaX + deltaY * deltaY);\n const distanceRatio = Math.max(0, 1 - distance / radius);\n const easing = distanceRatio ** HIGHLIGHT_FALLOFF_EXPONENT;\n red = Math.round(lineRgb[0] + (highlightRgb[0] - lineRgb[0]) * easing);\n green = Math.round(lineRgb[1] + (highlightRgb[1] - lineRgb[1]) * easing);\n blue = Math.round(lineRgb[2] + (highlightRgb[2] - lineRgb[2]) * easing);\n opacity = baseOpacity + easing * highlightOpacityBoost;\n strokeWidth = 0.8 + easing * 1.2;\n void strength; // currently unused in segment coloring, kept for API compatibility\n }\n\n return {\n d: `M ${startX} ${startY} L ${endX} ${endY}`,\n stroke: `rgb(${red},${green},${blue})`,\n strokeOpacity: opacity,\n strokeWidth,\n };\n};\n\n/*\n Advances every point one step toward its target and reports how far the\n * furthest one travelled.\n \n The caller uses that distance to decide whether another frame is worth\n * running: the relaxation is exponential, so once it drops below\n * {@link SETTLE_THRESHOLD_PX} the grid is visually at rest and redrawing it\n * only burns the main thread.\n \n @returns Largest per-axis distance any point moved this step, in pixels.\n /\nconst updateGridPoints = (\n grid: Point[][],\n mouseX: number,\n mouseY: number,\n mouseActive: boolean,\n radius: number,\n strength: number\n): number => {\n const rows = grid.length;\n const columns = grid[0]!.length;\n let largestMovement = 0;\n\n for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n const point = grid[rowIndex]![columnIndex]!;\n const previousX = point.x;\n const previousY = point.y;\n\n if (!mouseActive) {\n point.x += (point.baseX - point.x) 0.08;\n point.y += (point.baseY - point.y) * 0.08;\n } else {\n const deltaX = mouseX - point.baseX;\n const deltaY = mouseY - point.baseY;\n const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n if (distance < radius && distance > 0) {\n const force = (Math.cos((distance / radius) * Math.PI) + 1) / 2;\n const displacement = force * strength * radius * 0.3;\n point.x +=\n (point.baseX + (deltaX / distance) * displacement - point.x) * 0.12;\n point.y +=\n (point.baseY + (deltaY / distance) * displacement - point.y) * 0.12;\n } else {\n point.x += (point.baseX - point.x) * 0.08;\n point.y += (point.baseY - point.y) * 0.08;\n }\n }\n\n const movement = Math.max(\n Math.abs(point.x - previousX),\n Math.abs(point.y - previousY)\n );\n if (movement > largestMovement) largestMovement = movement;\n }\n }\n\n return largestMovement;\n};\n\n/*\n Per-frame movement below which the grid counts as at rest, in pixels.\n \n Well under a device pixel, so the frame that crosses it is the last one that\n * could have changed anything on screen.\n /\nconst SETTLE_THRESHOLD_PX = 0.05;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\ntype GridDistortionPatternProps = {\n width?: number;\n height?: number;\n radius?: number;\n strength?: number;\n lineColor?: string;\n highlightColor?: string;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridDistortionPattern: FC<GridDistortionPatternProps> = ({\n width = 70,\n height = 70,\n radius = 280,\n strength = 0.12,\n lineColor,\n highlightColor,\n className,\n ...props\n}) => {\n const isDarkMode = useIsDarkMode();\n const theme = isDarkMode ? DARK_THEME : LIGHT_THEME;\n\n // Explicit props win; otherwise fall back to the active theme's defaults.\n const resolvedLineColor = lineColor ?? theme.lineColor;\n const resolvedHighlightColor = highlightColor ?? theme.highlightColor;\n\n const svgRef = useRef<SVGSVGElement>(null);\n const mouse = useRef({ x: -9999, y: -9999, active: false });\n const points = useRef<Point[][]>([]);\n /\n Bumped on every pointer move. The loop records the value it rendered so it\n * can tell \"the pointer is somewhere over the page but has not moved\" — which\n * looks identical frame to frame — from a genuine change.\n /\n const pointerMoveCount = useRef(0);\n /\n Restarts the animation loop after it has parked itself.\n \n Assigned by the animation effect; the resize, colour and pointer effects\n * call it so a change they make is picked up even when the grid was at rest.\n /\n const wakeLoop = useRef<() => void>(() => undefined);\n\n // Stable refs so the animation loop always sees the latest prop values\n // without needing to restart itself.\n const radiusRef = useRef(radius);\n const strengthRef = useRef(strength);\n // Initialized to safe placeholders; the real (possibly CSS-variable-based)\n // colors are resolved against the DOM in the effect below.\n const lineRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n const highlightRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n const baseOpacityRef = useRef(theme.baseOpacity);\n const highlightOpacityBoostRef = useRef(theme.highlightOpacityBoost);\n\n // Keep numeric refs in sync with props on each render (cheap assignments).\n radiusRef.current = radius;\n strengthRef.current = strength;\n baseOpacityRef.current = theme.baseOpacity;\n highlightOpacityBoostRef.current = theme.highlightOpacityBoost;\n\n // Resolve colors once mounted — getComputedStyle is required so that\n // `var(--token)` highlight/line colors resolve against the live cascade.\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);\n highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);\n wakeLoop.current();\n }, [resolvedLineColor, resolvedHighlightColor]);\n\n // ---------------------------------------------------------------------------\n // Resize — rebuild the point grid and resize the SVG viewBox\n // ---------------------------------------------------------------------------\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n\n const resize = () => {\n const rect = svg.getBoundingClientRect();\n svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);\n\n const columns = Math.ceil(rect.width / width) + 2;\n const rows = Math.ceil(rect.height / height) + 2;\n const newGrid: Point[][] = [];\n\n for (let rowIndex = -1; rowIndex <= rows; rowIndex++) {\n const row: Point[] = [];\n for (let columnIndex = -1; columnIndex <= columns; columnIndex++) {\n row.push({\n baseX: columnIndex width,\n baseY: rowIndex * height,\n x: columnIndex * width,\n y: rowIndex * height,\n });\n }\n newGrid.push(row);\n }\n points.current = newGrid;\n wakeLoop.current();\n };\n\n resize();\n const resizeObserver = new ResizeObserver(resize);\n resizeObserver.observe(svg);\n return () => resizeObserver.disconnect();\n }, [width, height]);\n\n // ---------------------------------------------------------------------------\n // Pointer tracking — passive listeners, no React state involved\n // ---------------------------------------------------------------------------\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n\n const handlePointerMove = (event: PointerEvent) => {\n const rect = svg.getBoundingClientRect();\n mouse.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n active: true,\n };\n pointerMoveCount.current++;\n wakeLoop.current();\n };\n const handlePointerLeave = () => {\n mouse.current.active = false;\n pointerMoveCount.current++;\n wakeLoop.current();\n };\n\n window.addEventListener('pointermove', handlePointerMove, {\n passive: true,\n });\n window.addEventListener('pointerleave', handlePointerLeave, {\n passive: true,\n });\n return () => {\n window.removeEventListener('pointermove', handlePointerMove);\n window.removeEventListener('pointerleave', handlePointerLeave);\n };\n }, []);\n\n // ---------------------------------------------------------------------------\n // Animation loop — writes directly to SVG DOM, no React state/re-renders\n // ---------------------------------------------------------------------------\n /*\n Runs the grid only while it has something to show.\n \n Each frame rewrites four attributes on every segment — on a full-viewport\n * grid that is close to nine thousand `setAttribute` calls. Left running\n * unconditionally it saturated the main thread of any page embedding the\n * pattern, which starved React's transition lanes and made every other\n * scroll-driven animation on the page advance in visible steps.\n \n So the loop parks itself whenever the grid is at rest and the pointer has\n * not moved, and while the SVG is scrolled out of view. Anything that can\n * change the picture — a pointer move, a resize, a colour change, the element\n * coming back on screen — wakes it through {@link wakeLoop}.\n /\n useEffect(() => {\n const svg = svgRef.current;\n if (!svg) return;\n\n // We maintain a pool of <path> elements and reuse them each frame\n // to avoid GC pressure from creating/deleting DOM nodes every tick.\n const pathPool: SVGPathElement[] = [];\n let frame = 0;\n let isRunning = false;\n let isOnScreen = true;\n /* Value of `pointerMoveCount` the last rendered frame was drawn for. /\n let renderedPointerMoveCount = -1;\n\n const start = () => {\n if (isRunning \|\| !isOnScreen) return;\n isRunning = true;\n frame = requestAnimationFrame(tick);\n };\n\n const stop = () => {\n if (!isRunning) return;\n isRunning = false;\n cancelAnimationFrame(frame);\n };\n\n const ensurePathCount = (count: number) => {\n while (pathPool.length < count) {\n const el = document.createElementNS(\n 'http://www.w3.org/2000/svg',\n 'path'\n );\n el.setAttribute('fill', 'none');\n svg.appendChild(el);\n pathPool.push(el);\n }\n // Hide surplus paths\n for (let i = count; i < pathPool.length; i++) {\n pathPool[i]!.setAttribute('d', '');\n }\n };\n\n const tick = () => {\n const grid = points.current;\n if (!grid.length) {\n // No grid yet — the resize effect will wake us once it has built one.\n isRunning = false;\n return;\n }\n\n const pointerMoveCountAtFrameStart = pointerMoveCount.current;\n\n const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;\n const currentRadius = radiusRef.current;\n const currentStrength = strengthRef.current;\n const lineRgb = lineRgbRef.current;\n const highlightRgb = highlightRgbRef.current;\n const baseOpacity = baseOpacityRef.current;\n const highlightOpacityBoost = highlightOpacityBoostRef.current;\n\n // Update point positions\n const largestMovement = updateGridPoints(\n grid,\n mouseX,\n mouseY,\n mouseActive,\n currentRadius,\n currentStrength\n );\n\n // Nothing moved and the pointer is where it already was, so this frame\n // would repaint the picture already on screen.\n if (\n largestMovement < SETTLE_THRESHOLD_PX &&\n renderedPointerMoveCount === pointerMoveCountAtFrameStart\n ) {\n isRunning = false;\n return;\n }\n renderedPointerMoveCount = pointerMoveCountAtFrameStart;\n\n const rows = grid.length;\n const columns = grid[0]!.length;\n\n // Count segments up front so we can size the pool\n const horizontalCount = rows (columns - 1);\n const verticalCount = columns * (rows - 1);\n const totalSegments = horizontalCount + verticalCount;\n ensurePathCount(totalSegments);\n\n let pathIndex = 0;\n\n // Horizontal segments\n for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {\n const p0 = grid[rowIndex]![columnIndex]!;\n const p1 = grid[rowIndex]![columnIndex + 1]!;\n const attrs = buildSegmentAttrs(\n p0.x,\n p0.y,\n p1.x,\n p1.y,\n mouseX,\n mouseY,\n mouseActive,\n currentRadius,\n currentStrength,\n lineRgb,\n highlightRgb,\n baseOpacity,\n highlightOpacityBoost\n );\n const el = pathPool[pathIndex++]!;\n el.setAttribute('d', attrs.d);\n el.setAttribute('stroke', attrs.stroke);\n el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n el.setAttribute('stroke-width', String(attrs.strokeWidth));\n }\n }\n\n // Vertical segments\n for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n for (let rowIndex = 0; rowIndex < rows - 1; rowIndex++) {\n const p0 = grid[rowIndex]![columnIndex]!;\n const p1 = grid[rowIndex + 1]![columnIndex]!;\n const attrs = buildSegmentAttrs(\n p0.x,\n p0.y,\n p1.x,\n p1.y,\n mouseX,\n mouseY,\n mouseActive,\n currentRadius,\n currentStrength,\n lineRgb,\n highlightRgb,\n baseOpacity,\n highlightOpacityBoost\n );\n const el = pathPool[pathIndex++]!;\n el.setAttribute('d', attrs.d);\n el.setAttribute('stroke', attrs.stroke);\n el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n el.setAttribute('stroke-width', String(attrs.strokeWidth));\n }\n }\n\n frame = requestAnimationFrame(tick);\n };\n\n wakeLoop.current = start;\n\n // Off-screen the grid cannot be seen, so neither the relaxation nor the\n // redraw is worth a frame.\n const visibilityObserver = new IntersectionObserver(([entry]) => {\n isOnScreen = entry?.isIntersecting ?? true;\n if (isOnScreen) start();\n else stop();\n });\n visibilityObserver.observe(svg);\n\n start();\n\n return () => {\n wakeLoop.current = () => undefined;\n visibilityObserver.disconnect();\n stop();\n // Clean up path elements we injected\n for (const el of pathPool) {\n el.remove();\n }\n };\n }, []); // no dependencies — reads everything via refs\n\n return (\n <svg\n ref={svgRef}\n aria-hidden=\"true\"\n className={cn(\n 'pointer-events-none absolute inset-0 size-full',\n className\n )}\n {...props}\n />\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/Popover/dynamic.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import { Detail as Detail$1, PopoverStatic } from "./static.mjs";
+import { Detail as Detail$1, PopoverStatic, usePopoverIds } from "./static.mjs";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -35,6 +35,7 @@ const PopoverComponent = (props) => {
 */
 const Detail = ({ xAlign = "start", yAlign = "below", ...props }) => {
 	const popoverRef = useRef(null);
+	const { triggerId } = usePopoverIds(props.identifier);
 	const [computedXAlign, setComputedXAlign] = useState(xAlign);
 	const [computedYAlign, setComputedYAlign] = useState(yAlign);
 	const [maxWidth, setMaxWidth] = useState(void 0);
@@ -42,7 +43,7 @@ const Detail = ({ xAlign = "start", yAlign = "below", ...props }) => {
 		const adjustPosition = () => {
 			if (!popoverRef.current) return;
 			const popoverElement = popoverRef.current;
-			const triggerElement = document.getElementById(`unrollable-panel-button-${props.identifier}`);
+			const triggerElement = document.getElementById(triggerId);
 			if (!triggerElement) return;
 			const triggerRect = triggerElement.getBoundingClientRect();
 			const viewportWidth = window.innerWidth;
@@ -84,7 +85,7 @@ const Detail = ({ xAlign = "start", yAlign = "below", ...props }) => {
 			});
 		};
 		const timeoutId = setTimeout(adjustPosition, 0);
-		const triggerElement = document.getElementById(`unrollable-panel-button-${props.identifier}`);
+		const triggerElement = document.getElementById(triggerId);
 		if (triggerElement) {
 			triggerElement.addEventListener("mouseenter", adjustPosition);
 			triggerElement.addEventListener("focusin", adjustPosition);
@@ -106,7 +107,7 @@ const Detail = ({ xAlign = "start", yAlign = "below", ...props }) => {
 			window.removeEventListener("scroll", adjustPosition, true);
 		};
 	}, [
-		props.identifier,
+		triggerId,
 		xAlign,
 		yAlign
 	]);

package/dist/esm/components/Popover/dynamic.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n Detail as StaticDetail,\n} from './static';\n\n/*\n Popover Component (Client-side)\n \n Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/\n Popover Detail Component (Client-side)\n \n Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n \n Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = 'start',\n yAlign = 'below',\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number \| undefined>(undefined);\n\n useLayoutEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(~~\n `unrollable-panel-button-${props.identifier}`\n~~ );\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === 'below' && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = 'above';\n }\n } else if (yAlign === 'above' && spaceAbove < popoverRect.height) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = 'below';\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === 'start' && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = 'end';\n }\n } else if (xAlign === 'end' && spaceLeft < popoverRect.width) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = 'start';\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(~~\n `unrollable-panel-button-${props.identifier}`\n~~ );\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [~~props.identifier~~, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;;;;;;;;;~~AAqBA~~,MAAM,oBAAsC,UAAU;CACpD,OAAO,oBAAC,eAAD,EAAe,GAAI,MAAQ;AACpC;;;;;;;;;;;;;;;;;AAkBA,MAAM,UAA2B,EAC/B,SAAS,SACT,SAAS,SACT,GAAG,YACC;CACJ,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM;CAC3D,MAAM,CAAC,UAAU,eAAe,SAA6B,MAAS;CAEtE,sBAAsB;EACpB,MAAM,uBAAuB;GAC3B,IAAI,CAAC,WAAW,SAAS;GAEzB,MAAM,iBAAiB,WAAW;GAClC,MAAM,iBAAiB,SAAS,~~eAC9B~~,~~2BAA2B,MAAM,YACnC~~;~~GAEA~~,IAAI,CAAC,gBAAgB;GAErB,MAAM,cAAc,eAAe,sBAAsB;GACzD,MAAM,gBAAgB,OAAO;GAC7B,MAAM,iBAAiB,OAAO;GAC9B,MAAM,MAAM;GACZ,MAAM,UAAU;GAGhB,MAAM,mBAAmB,gBAAgB,YAAY,OAAO;GAC5D,MAAM,oBAAoB,YAAY,QAAQ;GAK9C,YAFyB,KAAK,IAAI,kBAAkB,iBAEzB,CAAC;GAG5B,MAAM,eAAe,eAAe,UAAU,SAAS,WAAW;GAClE,IAAI,cAAc;IAChB,eAAe,MAAM,aAAa;IAClC,eAAe,UAAU,OAAO,WAAW;GAC7C;GAGA,4BAA4B;IAC1B,MAAM,cAAc,eAAe,sBAAsB;IAGzD,IAAI,cAAc;KAChB,eAAe,MAAM,aAAa;KAClC,eAAe,UAAU,IAAI,WAAW;IAC1C;IAGA,IAAI,YAAY;IAChB,MAAM,aAAa,iBAAiB,YAAY,SAAS;IACzD,MAAM,aAAa,YAAY,MAAM;IAErC,IAAI,WAAW,WAAW,aAAa,YAAY,QAEjD;SAAI,cAAc,YAAY,QAC5B,YAAY;IACd,OACK,IAAI,WAAW,WAAW,aAAa,YAAY,QAExD;SAAI,cAAc,YAAY,QAC5B,YAAY;IACd;IAIF,IAAI,YAAY;IAChB,MAAM,aAAa,gBAAgB,YAAY,OAAO;IACtD,MAAM,YAAY,YAAY,QAAQ;IAEtC,IAAI,WAAW,WAAW,aAAa,YAAY,OAEjD;SAAI,aAAa,YAAY,OAC3B,YAAY;IACd,OACK,IAAI,WAAW,SAAS,YAAY,YAAY,OAErD;SAAI,cAAc,YAAY,OAC5B,YAAY;IACd;IAGF,kBAAkB,SAAS;IAC3B,kBAAkB,SAAS;GAC7B,CAAC;EACH;EAGA,MAAM,YAAY,WAAW,gBAAgB,CAAC;EAG9C,MAAM,iBAAiB,SAAS,~~eAC9B~~,~~2BAA2B,MAAM,YACnC~~;~~EAEA~~,IAAI,gBAAgB;GAClB,eAAe,iBAAiB,cAAc,cAAc;GAC5D,eAAe,iBAAiB,WAAW,cAAc;EAC3D;EAGA,MAAM,iBAAiB,IAAI,qBAAqB;GAC9C,eAAe;EACjB,CAAC;EAED,IAAI,WAAW,SACb,eAAe,QAAQ,WAAW,OAAO;EAG3C,OAAO,iBAAiB,UAAU,cAAc;EAChD,OAAO,iBAAiB,UAAU,gBAAgB,IAAI;EAEtD,aAAa;GACX,aAAa,SAAS;GACtB,IAAI,gBAAgB;IAClB,eAAe,oBAAoB,cAAc,cAAc;IAC/D,eAAe,oBAAoB,WAAW,cAAc;GAC9D;GACA,eAAe,WAAW;GAC1B,OAAO,oBAAoB,UAAU,cAAc;GACnD,OAAO,oBAAoB,UAAU,gBAAgB,IAAI;EAC3D;CACF,GAAG;EAAC~~,MAAM~~;~~EAAY~~;EAAQ;CAAM,CAAC;~~CAGrC~~,OACE,oBAACA,UAAD;EACE,GAAI;EACJ,QAAQ;EACR,QAAQ;EACR,KAAK;EACL,OAAO;GACL,GAAG,MAAM;GACT,UAAU,WAAW,GAAG,SAAS,MAAM;EACzC;CACD;AAEL;AAGA,MAAa,UAAuB;AAEpC,QAAQ,SAAS"}
1	+ {"version":3,"file":"dynamic.mjs","names":["StaticDetail"],"sources":["../../../../src/components/Popover/dynamic.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport {\n type DetailProps,\n type PopoverProps,\n PopoverStatic,\n type PopoverType,\n Detail as StaticDetail,\n usePopoverIds,\n} from './static';\n\n/*\n Popover Component (Client-side)\n \n Client-side wrapper around the static Popover component.\n * Reuses the server-side compatible implementation.\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nconst PopoverComponent: FC<PopoverProps> = (props) => {\n return <PopoverStatic {...props} />;\n};\n\n/\n Popover Detail Component (Client-side)\n \n Client-side wrapper around the static Detail component that adds automatic\n * positioning logic based on viewport constraints.\n \n Features:\n * - Reuses server-side compatible static Detail component\n * - Adds automatic positioning adjustment based on viewport\n * - Calculates optimal X/Y alignment to prevent overflow\n * - Dynamically adjusts max-width based on available space\n * - Listens to window resize and scroll events\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n xAlign = 'start',\n yAlign = 'below',\n ...props\n}) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const { triggerId } = usePopoverIds(props.identifier);\n const [computedXAlign, setComputedXAlign] = useState(xAlign);\n const [computedYAlign, setComputedYAlign] = useState(yAlign);\n const [maxWidth, setMaxWidth] = useState<number \| undefined>(undefined);\n\n useLayoutEffect(() => {\n const adjustPosition = () => {\n if (!popoverRef.current) return;\n\n const popoverElement = popoverRef.current;\n const triggerElement = document.getElementById(triggerId);\n\n if (!triggerElement) return;\n\n const triggerRect = triggerElement.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gap = 16; // 1rem gap\n const padding = 16; // Additional padding from viewport edges\n\n // Calculate maximum width based on viewport and trigger position\n const maxWidthFromLeft = viewportWidth - triggerRect.left - padding;\n const maxWidthFromRight = triggerRect.right - padding;\n\n // Use the larger space to ensure popover can fit\n const absoluteMaxWidth = Math.max(maxWidthFromLeft, maxWidthFromRight);\n\n setMaxWidth(absoluteMaxWidth);\n\n // Force a layout calculation by temporarily making visible if needed\n const wasInvisible = popoverElement.classList.contains('invisible');\n if (wasInvisible) {\n popoverElement.style.visibility = 'hidden';\n popoverElement.classList.remove('invisible');\n }\n\n // Small delay to ensure max-width is applied and content reflows\n requestAnimationFrame(() => {\n const popoverRect = popoverElement.getBoundingClientRect();\n\n // Restore invisible state if it was invisible\n if (wasInvisible) {\n popoverElement.style.visibility = '';\n popoverElement.classList.add('invisible');\n }\n\n // Determine optimal Y alignment\n let newYAlign = yAlign;\n const spaceBelow = viewportHeight - triggerRect.bottom - gap;\n const spaceAbove = triggerRect.top - gap;\n\n if (yAlign === 'below' && spaceBelow < popoverRect.height) {\n // Not enough space below, try above\n if (spaceAbove >= popoverRect.height) {\n newYAlign = 'above';\n }\n } else if (yAlign === 'above' && spaceAbove < popoverRect.height) {\n // Not enough space above, try below\n if (spaceBelow >= popoverRect.height) {\n newYAlign = 'below';\n }\n }\n\n // Determine optimal X alignment\n let newXAlign = xAlign;\n const spaceRight = viewportWidth - triggerRect.left - padding;\n const spaceLeft = triggerRect.right - padding;\n\n if (xAlign === 'start' && spaceRight < popoverRect.width) {\n // Not enough space on the right, try left\n if (spaceLeft >= popoverRect.width) {\n newXAlign = 'end';\n }\n } else if (xAlign === 'end' && spaceLeft < popoverRect.width) {\n // Not enough space on the left, try right\n if (spaceRight >= popoverRect.width) {\n newXAlign = 'start';\n }\n }\n\n setComputedYAlign(newYAlign);\n setComputedXAlign(newXAlign);\n });\n };\n\n // Adjust position with a slight delay to ensure DOM is ready\n const timeoutId = setTimeout(adjustPosition, 0);\n\n // Listen to mouse enter on the trigger to recalculate\n const triggerElement = document.getElementById(triggerId);\n\n if (triggerElement) {\n triggerElement.addEventListener('mouseenter', adjustPosition);\n triggerElement.addEventListener('focusin', adjustPosition);\n }\n\n // Use ResizeObserver to detect popover content size changes\n const resizeObserver = new ResizeObserver(() => {\n adjustPosition();\n });\n\n if (popoverRef.current) {\n resizeObserver.observe(popoverRef.current);\n }\n\n window.addEventListener('resize', adjustPosition);\n window.addEventListener('scroll', adjustPosition, true);\n\n return () => {\n clearTimeout(timeoutId);\n if (triggerElement) {\n triggerElement.removeEventListener('mouseenter', adjustPosition);\n triggerElement.removeEventListener('focusin', adjustPosition);\n }\n resizeObserver.disconnect();\n window.removeEventListener('resize', adjustPosition);\n window.removeEventListener('scroll', adjustPosition, true);\n };\n }, [triggerId, xAlign, yAlign]);\n\n // Use the static Detail component with computed alignment values\n return (\n <StaticDetail\n {...props}\n xAlign={computedXAlign}\n yAlign={computedYAlign}\n ref={popoverRef}\n style={{\n ...props.style,\n maxWidth: maxWidth ? `${maxWidth}px` : undefined,\n }}\n />\n );\n};\n\n// Create Popover with Detail attached\nexport const Popover: PopoverType = PopoverComponent as PopoverType;\n\nPopover.Detail = Detail;\n"],"mappings":"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"}

package/dist/esm/components/Popover/index.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Detail, PopoverStatic } from "./static.mjs";
+import { Detail, PopoverStatic, usePopoverIds } from "./static.mjs";
 import { Popover } from "./dynamic.mjs";
-export { Detail, Popover, PopoverStatic };
+export { Detail, Popover, PopoverStatic, usePopoverIds };

package/dist/esm/components/Popover/static.mjs CHANGED Viewed

@@ -1,9 +1,28 @@
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
+import { createContext, useContext, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Popover/static.tsx
 /**
+* Name the trigger shares with its own `Detail` so both derive the same ids.
+*
+* The `identifier` prop names a *kind* of popover ("copy", "history"), and the
+* same kind legitimately appears many times on one page — a documentation page
+* renders one copy popover per code block. Deriving the ids from the identifier
+* alone made every one of them share them, which is invalid HTML and leaves
+* `aria-labelledby` pointing at whichever element the browser matched first.
+*/
+const PopoverNameContext = createContext(null);
+/** Ids of a popover pair, unique to the instance that rendered it. */
+const usePopoverIds = (identifier) => {
+	const name = useContext(PopoverNameContext) ?? identifier;
+	return {
+		triggerId: `unrollable-panel-button-${name}`,
+		panelId: `unrollable-panel-${name}`
+	};
+};
+/**
 * Popover Component
 *
 * A versatile popover container that displays contextual content when triggered by hover
@@ -84,13 +103,20 @@ import { jsx } from "react/jsx-runtime";
 * @param props - Popover component props
 * @returns Trigger container with popover functionality
 */
-const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn(`group/popover relative flex cursor-pointer`, className),
-	id: `unrollable-panel-button-${identifier}`,
-	"aria-haspopup": true,
-	...props,
-	children
-});
+const PopoverStatic = ({ children, className, identifier, ...props }) => {
+	const name = `${identifier}${useId()}`;
+	const { triggerId } = usePopoverIds(name);
+	return /* @__PURE__ */ jsx(PopoverNameContext, {
+		value: name,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(`group/popover relative flex cursor-pointer`, className),
+			id: triggerId,
+			"aria-haspopup": true,
+			...props,
+			children
+		})
+	});
+};
 /**
 * Popover Detail Component
 *
@@ -154,18 +180,21 @@ const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__P
 * @param props - Popover Detail component props
 * @returns Positioned popover content with animations and accessibility
 */
-const Detail = ({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = "start", yAlign = "below", identifier, className, displayArrow = true, ...props }) => /* @__PURE__ */ jsx(Container, {
-	transparency: "xs",
-	role: "group",
-	"aria-hidden": isHidden,
-	"aria-labelledby": `unrollable-panel-button-${identifier}`,
-	id: `unrollable-panel-${identifier}`,
-	className: cn("absolute z-60 min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "center" && "left-1/2 -translate-x-1/2", xAlign === "end" && "right-0", yAlign === "below" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && "before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]", displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "center" && "before:left-1/2 before:-translate-x-1/2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "below" && "before:-top-2.5 before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent", displayArrow && yAlign === "above" && "before:-bottom-2.5 before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`, isFocusable && `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`, className),
-	...props,
-	children
-});
+const Detail = ({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = "start", yAlign = "below", identifier, className, displayArrow = true, ...props }) => {
+	const { triggerId, panelId } = usePopoverIds(identifier);
+	return /* @__PURE__ */ jsx(Container, {
+		transparency: "xs",
+		role: "group",
+		"aria-hidden": isHidden,
+		"aria-labelledby": triggerId,
+		id: panelId,
+		className: cn("absolute z-60 min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "center" && "left-1/2 -translate-x-1/2", xAlign === "end" && "right-0", yAlign === "below" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && "before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]", displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "center" && "before:left-1/2 before:-translate-x-1/2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "below" && "before:-top-2.5 before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent", displayArrow && yAlign === "above" && "before:-bottom-2.5 before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`, isFocusable && `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`, className),
+		...props,
+		children
+	});
+};
 PopoverStatic.Detail = Detail;
 //#endregion
-export { Detail, PopoverStatic };
+export { Detail, PopoverStatic, usePopoverIds };
 //# sourceMappingURL=static.mjs.map

package/dist/esm/components/Popover/static.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type {\n ComponentProps,\n DetailedHTMLProps,\n FC,\n HTMLAttributes,\n} from 'react';\nimport { Container } from '../Container';\n\n/*\n Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n /\nexport type PopoverProps = DetailedHTMLProps<\n HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n> & {\n /* Unique identifier linking the trigger to its popover content for accessibility /\n identifier: string;\n};\n\n/\n Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n /\nexport type PopoverType = FC<PopoverProps> & {\n Detail: FC<DetailProps>;\n};\n\n/\n Horizontal alignment options for popover positioning\n /\nexport type PopoverXAlign = 'start' \| 'center' \| 'end';\n\n/\n Vertical alignment options for popover positioning\n /\nexport type PopoverYAlign = 'below' \| 'above';\n\n/\n Popover Component\n \n A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n \n Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n \n Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n \n @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n * <button>Need Help?</button>\n \n <Popover.Detail identifier=\"help-tooltip\">\n * <div>This is helpful information!</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n * <input placeholder=\"Focus me\" />\n \n <Popover.Detail\n * identifier=\"focus-menu\"\n * isFocusable\n * isOverable={false}\n * >\n * <div>Focus-only menu content</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n * <span>Hover me</span>\n \n <Popover.Detail\n * identifier=\"positioned\"\n * xAlign=\"end\"\n * yAlign=\"above\"\n * displayArrow={false}\n * >\n * <div>Above and right-aligned</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n \n Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nexport const PopoverStatic: PopoverType = ({\n children,\n className,\n identifier,\n ...props\n}) => (\n <div\n className={cn(`group/popover relative flex cursor-pointer`, className)}\n id={`unrollable-panel-button-${identifier}`}\n aria-haspopup\n {...props}\n >\n {children}\n </div>\n);\n\n/\n Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n /\nexport type DetailProps = ComponentProps<typeof Container> & {\n /* Whether the popover responds to focus events on the trigger /\n isFocusable?: boolean;\n /* Controls visibility state - undefined allows automatic hover/focus control /\n isHidden?: boolean;\n /* Whether the popover responds to hover events on the trigger /\n isOverable?: boolean;\n /* Unique identifier matching the trigger's identifier for accessibility /\n identifier: string;\n /* Horizontal positioning relative to trigger /\n xAlign?: PopoverXAlign \| `${PopoverXAlign}`;\n /* Vertical positioning relative to trigger /\n yAlign?: PopoverYAlign \| `${PopoverYAlign}`;\n /* Whether to display the directional arrow indicator /\n displayArrow?: boolean;\n};\n\n/\n Popover Detail Component\n \n The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n \n Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n \n Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n \n Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n \n Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n \n @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n * <div className=\"p-4\">\n * <h3>Popover Title</h3>\n * <p>Detailed information with multiple paragraphs.</p>\n * <button>Action Button</button>\n * </div>\n * </Popover.Detail>\n * ```\n \n @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign=\"end\"\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n /\nconst Detail: FC<DetailProps> = ({\n children,\n isHidden = undefined,\n isOverable = true,\n isFocusable = false,\n xAlign = 'start',\n yAlign = 'below',\n identifier,\n className,\n displayArrow = true,\n ...props\n}) => (\n <Container\n transparency=\"xs\"\n role=\"group\"\n aria-hidden={isHidden}\n aria-labelledby={`unrollable-panel-button-${identifier}`}\n id={`unrollable-panel-${identifier}`}\n className={cn(\n 'absolute z-60 min-w-full rounded-md ring-1 ring-neutral',\n\n / Positioning /\n xAlign === 'start' && 'left-0',\n xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n xAlign === 'end' && 'right-0',\n yAlign === 'below' && 'top-[calc(100%+1rem)]',\n yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n / Arrow indicator /\n displayArrow &&\n 'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n / Horizontal positioning /\n displayArrow && xAlign === 'start' && 'before:left-2',\n displayArrow &&\n xAlign === 'center' &&\n 'before:left-1/2 before:-translate-x-1/2',\n displayArrow && xAlign === 'end' && 'before:right-2',\n\n / Arrow pointing up (when popover is below trigger) /\n displayArrow &&\n yAlign === 'below' &&\n 'before:-top-2.5 before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n / Arrow pointing down (when popover is above trigger) /\n displayArrow &&\n yAlign === 'above' &&\n 'before:-bottom-2.5 before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n / Visibility management */\n 'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n isOverable &&\n `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,\n isFocusable &&\n `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,\n className\n )}\n {...props}\n >\n {children}\n </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwHA,MAAa,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GAAG,8CAA8C,SAAS;CACrE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;AACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFP,MAAM,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,SACT,SAAS,SACT,YACA,WACA,eAAe,MACf,GAAG,YAEH,oBAAC,WAAD;CACE,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,2DAGA,WAAW,WAAW,UACtB,WAAW,YAAY,6BACvB,WAAW,SAAS,WACpB,WAAW,WAAW,yBACtB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,WACX,wKAGF,gBACE,WAAW,WACX,2KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,SACF;CACA,GAAI;CAEH;AACQ;AAGb,cAAc,SAAS"}
1	+ {"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport {\n type ComponentProps,\n createContext,\n type DetailedHTMLProps,\n type FC,\n type HTMLAttributes,\n useContext,\n useId,\n} from 'react';\nimport { Container } from '../Container';\n\n/*\n Name the trigger shares with its own `Detail` so both derive the same ids.\n \n The `identifier` prop names a kind of popover (\"copy\", \"history\"), and the\n * same kind legitimately appears many times on one page — a documentation page\n * renders one copy popover per code block. Deriving the ids from the identifier\n * alone made every one of them share them, which is invalid HTML and leaves\n * `aria-labelledby` pointing at whichever element the browser matched first.\n /\nconst PopoverNameContext = createContext<string \| null>(null);\n\n/* Ids of a popover pair, unique to the instance that rendered it. /\nexport const usePopoverIds = (identifier: string) => {\n const name = useContext(PopoverNameContext) ?? identifier;\n\n return {\n triggerId: `unrollable-panel-button-${name}`,\n panelId: `unrollable-panel-${name}`,\n };\n};\n\n/\n Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n /\nexport type PopoverProps = DetailedHTMLProps<\n HTMLAttributes<HTMLDivElement>,\n HTMLDivElement\n> & {\n /* Unique identifier linking the trigger to its popover content for accessibility /\n identifier: string;\n};\n\n/\n Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n /\nexport type PopoverType = FC<PopoverProps> & {\n Detail: FC<DetailProps>;\n};\n\n/\n Horizontal alignment options for popover positioning\n /\nexport type PopoverXAlign = 'start' \| 'center' \| 'end';\n\n/\n Vertical alignment options for popover positioning\n /\nexport type PopoverYAlign = 'below' \| 'above';\n\n/\n Popover Component\n \n A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n \n Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n \n Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n \n @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n * <button>Need Help?</button>\n \n <Popover.Detail identifier=\"help-tooltip\">\n * <div>This is helpful information!</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n * <input placeholder=\"Focus me\" />\n \n <Popover.Detail\n * identifier=\"focus-menu\"\n * isFocusable\n * isOverable={false}\n * >\n * <div>Focus-only menu content</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n * <span>Hover me</span>\n \n <Popover.Detail\n * identifier=\"positioned\"\n * xAlign=\"end\"\n * yAlign=\"above\"\n * displayArrow={false}\n * >\n * <div>Above and right-aligned</div>\n * </Popover.Detail>\n * </Popover>\n * ```\n \n Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n \n Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n \n @param props - Popover component props\n * @returns Trigger container with popover functionality\n /\nexport const PopoverStatic: PopoverType = ({\n children,\n className,\n identifier,\n ...props\n}) => {\n const name = `${identifier}${useId()}`;\n const { triggerId } = usePopoverIds(name);\n\n return (\n <PopoverNameContext value={name}>\n <div\n className={cn(`group/popover relative flex cursor-pointer`, className)}\n id={triggerId}\n aria-haspopup\n {...props}\n >\n {children}\n </div>\n </PopoverNameContext>\n );\n};\n\n/\n Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n /\nexport type DetailProps = ComponentProps<typeof Container> & {\n /* Whether the popover responds to focus events on the trigger /\n isFocusable?: boolean;\n /* Controls visibility state - undefined allows automatic hover/focus control /\n isHidden?: boolean;\n /* Whether the popover responds to hover events on the trigger /\n isOverable?: boolean;\n /* Unique identifier matching the trigger's identifier for accessibility /\n identifier: string;\n /* Horizontal positioning relative to trigger /\n xAlign?: PopoverXAlign \| `${PopoverXAlign}`;\n /* Vertical positioning relative to trigger /\n yAlign?: PopoverYAlign \| `${PopoverYAlign}`;\n /* Whether to display the directional arrow indicator /\n displayArrow?: boolean;\n};\n\n/\n Popover Detail Component\n \n The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n \n Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n \n Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n \n Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n \n Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n \n @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n * <div className=\"p-4\">\n * <h3>Popover Title</h3>\n * <p>Detailed information with multiple paragraphs.</p>\n * <button>Action Button</button>\n * </div>\n * </Popover.Detail>\n * ```\n \n @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign=\"end\"\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n \n @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n /\nconst Detail: FC<DetailProps> = ({\n children,\n isHidden = undefined,\n isOverable = true,\n isFocusable = false,\n xAlign = 'start',\n yAlign = 'below',\n identifier,\n className,\n displayArrow = true,\n ...props\n}) => {\n const { triggerId, panelId } = usePopoverIds(identifier);\n\n return (\n <Container\n transparency=\"xs\"\n role=\"group\"\n aria-hidden={isHidden}\n aria-labelledby={triggerId}\n id={panelId}\n className={cn(\n 'absolute z-60 min-w-full rounded-md ring-1 ring-neutral',\n\n / Positioning /\n xAlign === 'start' && 'left-0',\n xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n xAlign === 'end' && 'right-0',\n yAlign === 'below' && 'top-[calc(100%+1rem)]',\n yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n / Arrow indicator /\n displayArrow &&\n 'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n / Horizontal positioning /\n displayArrow && xAlign === 'start' && 'before:left-2',\n displayArrow &&\n xAlign === 'center' &&\n 'before:left-1/2 before:-translate-x-1/2',\n displayArrow && xAlign === 'end' && 'before:right-2',\n\n / Arrow pointing up (when popover is below trigger) /\n displayArrow &&\n yAlign === 'below' &&\n 'before:-top-2.5 before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n / Arrow pointing down (when popover is above trigger) /\n displayArrow &&\n yAlign === 'above' &&\n 'before:-bottom-2.5 before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n / Visibility management */\n 'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n isOverable &&\n `group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800`,\n isFocusable &&\n `group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800`,\n className\n )}\n {...props}\n >\n {children}\n </Container>\n );\n};\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAM,qBAAqB,cAA6B,IAAI;;AAG5D,MAAa,iBAAiB,eAAuB;CACnD,MAAM,OAAO,WAAW,kBAAkB,KAAK;CAE/C,OAAO;EACL,WAAW,2BAA2B;EACtC,SAAS,oBAAoB;CAC/B;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,MAAa,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YACC;CACJ,MAAM,OAAO,GAAG,aAAa,MAAM;CACnC,MAAM,EAAE,cAAc,cAAc,IAAI;CAExC,OACE,oBAAC,oBAAD;EAAoB,OAAO;YACzB,oBAAC,OAAD;GACE,WAAW,GAAG,8CAA8C,SAAS;GACrE,IAAI;GACJ;GACA,GAAI;GAEH;EACE;CACa;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAM,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,SACT,SAAS,SACT,YACA,WACA,eAAe,MACf,GAAG,YACC;CACJ,MAAM,EAAE,WAAW,YAAY,cAAc,UAAU;CAEvD,OACE,oBAAC,WAAD;EACE,cAAa;EACb,MAAK;EACL,eAAa;EACb,mBAAiB;EACjB,IAAI;EACJ,WAAW,GACT,2DAGA,WAAW,WAAW,UACtB,WAAW,YAAY,6BACvB,WAAW,SAAS,WACpB,WAAW,WAAW,yBACtB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,WACX,wKAGF,gBACE,WAAW,WACX,2KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,SACF;EACA,GAAI;EAEH;CACQ;AAEf;AAEA,cAAc,SAAS"}