xiod-ui 1.0.0

package/dist/components/dot-matrix.js

@@ -0,0 +1,707 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+//#region src/components/dot-matrix.tsx
+const DIRECT_ANIMS = /* @__PURE__ */ new Set([
+	"helix",
+	"infinity",
+	"heart-pulse",
+	"orbit",
+	"matrix-rain",
+	"sine-wave",
+	"crt-glide",
+	"twin-orbit",
+	"rung-shift",
+	"lunar-breath",
+	"nova-wheel",
+	"prism-bloom",
+	"half-helix",
+	"honey-gate",
+	"spiral-lattice",
+	"altitude-wave",
+	"glyph-cluster",
+	"rail-scan",
+	"halo-drift"
+]);
+function usePrefersReducedMotion() {
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setPrefersReducedMotion(mediaQuery.matches);
+		const listener = (event) => {
+			setPrefersReducedMotion(event.matches);
+		};
+		mediaQuery.addEventListener("change", listener);
+		return () => mediaQuery.removeEventListener("change", listener);
+	}, []);
+	return prefersReducedMotion;
+}
+function getSpiralOrder(rows, cols) {
+	const order = Array.from({ length: rows * cols }).fill(0);
+	let top = 0;
+	let bottom = rows - 1;
+	let left = 0;
+	let right = cols - 1;
+	let step = 0;
+	while (top <= bottom && left <= right) {
+		for (let col = left; col <= right; col++) order[top * cols + col] = step++;
+		top++;
+		for (let row = top; row <= bottom; row++) order[row * cols + right] = step++;
+		right--;
+		if (top <= bottom) {
+			for (let col = right; col >= left; col--) order[bottom * cols + col] = step++;
+			bottom--;
+		}
+		if (left <= right) {
+			for (let row = bottom; row >= top; row--) order[row * cols + left] = step++;
+			left++;
+		}
+	}
+	return order;
+}
+function getSnakeOrder(rows, cols) {
+	const order = Array.from({ length: rows * cols }).fill(0);
+	let step = 0;
+	for (let row = 0; row < rows; row++) if (row % 2 === 0) for (let col = 0; col < cols; col++) order[row * cols + col] = step++;
+	else for (let col = cols - 1; col >= 0; col--) order[row * cols + col] = step++;
+	return order;
+}
+function ensureFrameSize(frame, rows, cols) {
+	const result = [];
+	for (let r = 0; r < rows; r++) {
+		result.push([]);
+		const row = frame[r] || [];
+		for (let c = 0; c < cols; c++) {
+			const val = row[c];
+			result[r][c] = typeof val === "boolean" ? val ? 1 : 0 : val ?? 0;
+		}
+	}
+	return result;
+}
+function distanceSquared(ax, ay, bx, by) {
+	const dx = ax - bx;
+	const dy = ay - by;
+	return dx * dx + dy * dy;
+}
+function triangleWave(value) {
+	const wrapped = (value % 1 + 1) % 1;
+	return 1 - Math.abs(wrapped * 2 - 1);
+}
+function wavePeak(value) {
+	const wrapped = (value % 1 + 1) % 1;
+	return Math.max(0, 1 - Math.abs(wrapped * 2 - 1) / .55);
+}
+function DotMatrix({ rows = 5, cols = 5, mode = "animation", pattern, preset = "ripple", frames, isPlaying = true, loop = true, autoplay = true, fps = 12, speed = 1, levels, dotSize = 8, gap = 3, shape = "circle", colorPreset = "solid", color = "currentColor", colorOff = "var(--muted-foreground)", bloom = true, bloomIntensity = 1.8, halo = false, ariaLabel = "Dot matrix loader", className, onFrame, ...props }) {
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const [currentFrameIndex, setCurrentFrameIndex] = useState(0);
+	const frameIdRef = useRef(void 0);
+	const lastTimeRef = useRef(0);
+	const accumulatorRef = useRef(0);
+	const svgRef = useRef(null);
+	useEffect(() => {
+		if (!autoplay || !isPlaying || prefersReducedMotion) return;
+		if (!DIRECT_ANIMS.has(preset)) return;
+		const svg = svgRef.current;
+		if (!svg) return;
+		const dots = svg.querySelectorAll(".dmx-dot-cell");
+		if (dots.length === 0) return;
+		let animationFrameId;
+		const startTime = performance.now();
+		const tick = (now) => {
+			const elapsed = now - startTime;
+			const cycleDuration = 1600 / speed;
+			const u = elapsed % cycleDuration / cycleDuration;
+			for (let i = 0; i < dots.length; i++) {
+				const dot = dots[i];
+				const row = parseInt(dot.getAttribute("data-row") || "0", 10);
+				const col = parseInt(dot.getAttribute("data-col") || "0", 10);
+				let opacity = .12;
+				if (preset === "helix") {
+					const colCenter = (cols - 1) / 2;
+					const rowPhase = u * 2 * 2 * Math.PI + row * 1.24;
+					const left = Math.round(colCenter / 2 + Math.sin(rowPhase) * colCenter / 2);
+					const right = cols - 1 - left;
+					const bridgeOn = Math.cos(rowPhase * 2) > .82;
+					if (col === left || col === right) opacity = 1;
+					else if (bridgeOn && col > Math.min(left, right) && col < Math.max(left, right)) opacity = .58;
+					else if (Math.abs(col - left) === 1 || Math.abs(col - right) === 1) opacity = .35;
+					else opacity = .15;
+				} else if (preset === "infinity") {
+					const t = u * Math.PI * 2;
+					const hAx = Math.sin(t);
+					const hAy = .58 * Math.sin(2 * t);
+					const hBx = Math.sin(t + Math.PI);
+					const hBy = .58 * Math.sin(2 * (t + Math.PI));
+					const tAx = Math.sin(t - .25);
+					const tAy = .58 * Math.sin(2 * (t - .25));
+					const tBx = Math.sin(t + Math.PI - .25);
+					const tBy = .58 * Math.sin(2 * (t + Math.PI - .25));
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const dotX = (col - colCenter) / Math.max(1, colCenter);
+					const dotY = (rowCenter - row) / Math.max(1, rowCenter);
+					const headInfluence = (hx, hy) => Math.exp(-distanceSquared(dotX, dotY, hx, hy) / .19);
+					const leadVal = Math.max(headInfluence(hAx, hAy), headInfluence(hBx, hBy));
+					const trailVal = Math.max(headInfluence(tAx, tAy), headInfluence(tBx, tBy));
+					const centerPulse = Math.exp(-(dotX * dotX + dotY * dotY) / .05) * (.45 + .55 * leadVal);
+					opacity = .08 + .78 * leadVal + .42 * trailVal + .16 * centerPulse;
+					opacity = Math.min(1, opacity);
+				} else if (preset === "heart-pulse") {
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const xVal = col - colCenter;
+					const yVal = row - rowCenter;
+					const radius = Math.hypot(xVal, yVal);
+					const beat = Math.sin(u * Math.PI * 2);
+					const spike = Math.sin(u * Math.PI * 4);
+					const pulse = Math.max(0, beat) + Math.max(0, spike) * .55;
+					if (radius < 1.2) opacity = .25 + pulse * .75;
+					else if (radius < 2.2) opacity = .15 + pulse * .55;
+					else opacity = .12 + pulse * .18;
+				} else if (preset === "orbit") {
+					const totalOuter = Math.max(1, cols * 2 + (rows - 2) * 2);
+					if (row === 0 || row === rows - 1 || col === 0 || col === cols - 1) {
+						let ringIndex = 0;
+						if (row === 0) ringIndex = col;
+						else if (col === cols - 1) ringIndex = cols - 1 + row;
+						else if (row === rows - 1) ringIndex = cols - 1 + rows - 1 + (cols - 1 - col);
+						else if (col === 0) ringIndex = cols - 1 + rows - 1 + cols - 1 + (rows - 1 - row);
+						const distToHead = (u * totalOuter - ringIndex + totalOuter) % totalOuter;
+						opacity = .15 + Math.max(0, 1 - distToHead / (totalOuter * .35)) * .85;
+					} else opacity = .12;
+				} else if (preset === "matrix-rain") {
+					const offset = col * 7.3 % 1;
+					const dist = row - ((u * (.6 + col * 11.3 % .6) + offset) % 1 * (rows + 4) - 2);
+					if (dist <= 0 && dist > -4) opacity = .15 + (4 + dist) / 4 * .85;
+					else opacity = .15;
+				} else if (preset === "sine-wave") {
+					const phase = u * 2 * Math.PI;
+					const colPhase = col / cols * 2 * Math.PI;
+					const waveHeight = (Math.sin(phase + colPhase) + 1) / 2 * rows;
+					const distToTop = rows - 1 - row;
+					if (distToTop < waveHeight) {
+						const diff = waveHeight - distToTop;
+						opacity = .15 + Math.min(1, diff) * .85;
+					} else opacity = .15;
+				} else if (preset === "crt-glide") {
+					const dist = row - (u * (rows + 3) - 1.5);
+					if (dist >= 0 && dist < 3) opacity = .15 + (1 - dist / 3) * .85;
+					else opacity = .15;
+				} else if (preset === "twin-orbit") {
+					const totalOuter = Math.max(1, cols * 2 + (rows - 2) * 2);
+					if (row === 0 || row === rows - 1 || col === 0 || col === cols - 1) {
+						let ringIndex = 0;
+						if (row === 0) ringIndex = col;
+						else if (col === cols - 1) ringIndex = cols - 1 + row;
+						else if (row === rows - 1) ringIndex = cols - 1 + rows - 1 + (cols - 1 - col);
+						else if (col === 0) ringIndex = cols - 1 + rows - 1 + cols - 1 + (rows - 1 - row);
+						const distToHead = (u * totalOuter - ringIndex + totalOuter) % totalOuter;
+						opacity = .15 + Math.max(0, 1 - distToHead / (totalOuter * .35)) * .85;
+					} else if (rows > 2 && cols > 2) {
+						const innerRow = row - 1;
+						const innerCol = col - 1;
+						const innerR = rows - 2;
+						const innerC = cols - 2;
+						const totalInner = Math.max(1, innerC * 2 + (innerR - 2) * 2);
+						if (innerRow === 0 || innerRow === innerR - 1 || innerCol === 0 || innerCol === innerC - 1) {
+							let innerIndex = 0;
+							if (innerRow === 0) innerIndex = innerCol;
+							else if (innerCol === innerC - 1) innerIndex = innerC - 1 + innerRow;
+							else if (innerRow === innerR - 1) innerIndex = innerC - 1 + innerR - 1 + (innerC - 1 - innerCol);
+							else if (innerCol === 0) innerIndex = innerC - 1 + innerR - 1 + innerC - 1 + (innerR - 1 - innerRow);
+							const headPos = u * totalInner;
+							const distToHead = (innerIndex - headPos + totalInner) % totalInner;
+							opacity = .15 + Math.max(0, 1 - distToHead / (totalInner * .45)) * .85;
+						} else opacity = .15;
+					} else opacity = .15;
+				} else if (preset === "rung-shift") {
+					const colCenter = (cols - 1) / 2;
+					const yVal = row - (rows - 1) / 2;
+					const phaseStep = Math.floor(u * 10);
+					const activeRow = (phaseStep + rows) % rows;
+					const rowDistance = Math.abs(row - activeRow);
+					const swing = Math.sin(phaseStep / 10 * Math.PI * 2 + yVal * .9);
+					const leftAnchor = Math.round(colCenter / 2 + swing * colCenter / 2);
+					const rightAnchor = cols - 1 - leftAnchor;
+					if (row === activeRow && col >= leftAnchor && col <= rightAnchor) opacity = .95;
+					else if ((col === leftAnchor || col === rightAnchor) && rowDistance <= 1) opacity = .56;
+					else if ((col === leftAnchor || col === rightAnchor) && rowDistance === 2) opacity = .28;
+					else opacity = .15;
+				} else if (preset === "lunar-breath") {
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const x = col - colCenter;
+					const y = row - rowCenter;
+					const ring = Math.hypot(x, y);
+					const t = u * Math.PI * 2;
+					const angle = Math.atan2(y, x);
+					const moonCenterX = Math.cos(t) * (colCenter * .35);
+					const moonCenterY = Math.sin(t) * (rowCenter * .35);
+					const body = Math.hypot(x - moonCenterX, y - moonCenterY);
+					const cutCenterX = moonCenterX + Math.cos(t) * (colCenter * .41);
+					const cutCenterY = moonCenterY + Math.sin(t) * (rowCenter * .41);
+					const cut = Math.hypot(x - cutCenterX, y - cutCenterY);
+					const rim = Math.max(0, 1 - Math.abs(body - colCenter * .77) / .35);
+					const haloStrength = Math.max(0, 1 - Math.acos(Math.cos(angle - t)) / .9);
+					if (body < colCenter * .77 && cut > colCenter * .52) opacity = .95;
+					else if (rim > .5) opacity = .3 + rim * .22;
+					else if (haloStrength > .68 && ring > colCenter * .6) opacity = .3;
+					else opacity = .15;
+				} else if (preset === "nova-wheel") {
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const x = col - colCenter;
+					const y = row - rowCenter;
+					const radius = Math.hypot(x, y);
+					const angle = Math.atan2(y, x);
+					const theta = u * Math.PI * 2;
+					const pinwheel = Math.cos(angle * 4 - theta * 2.2);
+					const radialGate = Math.sin(radius * 2.1 - theta * 1.25);
+					if (radius < .6) opacity = .66;
+					else if (pinwheel > .48 && radialGate > -.25) opacity = .94;
+					else if (pinwheel > .1) opacity = .34;
+					else opacity = .15;
+				} else if (preset === "prism-bloom") {
+					const masks = [
+						"x...x.x.x...o...x.x.x...x",
+						"..x...oxo.xooox.oxo...x..",
+						".x.x.x.o.x..o..x.o.x.x.x.",
+						"x.x.x.o.o.x.o.x.o.o.x.x.x"
+					];
+					const cell = (masks[[
+						0,
+						1,
+						2,
+						3,
+						2,
+						1
+					][Math.floor(u * 6) % 6] ?? 0] ?? masks[0] ?? "")[row % 5 * 5 + col % 5] || ".";
+					if (cell === "x") opacity = 1;
+					else if (cell === "o") opacity = .52;
+					else opacity = .15;
+				} else if (preset === "half-helix") {
+					const colCenter = (cols - 1) / 2;
+					const STEP_COUNT = 20;
+					const HELIX_LOOP_RADIANS = Math.PI * 2 / 19;
+					const rowPhase = u * STEP_COUNT * HELIX_LOOP_RADIANS + row * 1.24;
+					const strandCol = Math.round(colCenter + colCenter * Math.sin(rowPhase));
+					if (col === strandCol) opacity = 1;
+					else if (Math.abs(col - strandCol) === 1) opacity = .35;
+					else opacity = .15;
+				} else if (preset === "honey-gate") {
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const x = col - colCenter;
+					const y = row - rowCenter;
+					const sweep = triangleWave(u) * 4 - 2;
+					const diagA = x * .86 + y * .5;
+					const diagB = x * -.86 + y * .5;
+					const gateA = Math.max(0, 1 - Math.abs(diagA - sweep) / .55);
+					const gateB = Math.max(0, 1 - Math.abs(diagB + sweep) / .55);
+					const centerDistance = Math.hypot(x, y);
+					const centerFlash = Math.max(0, 1 - Math.abs(sweep) / .68) * Math.max(0, 1 - centerDistance / 1.9);
+					opacity = .15 + gateA * .7 + gateB * .7 + centerFlash * .42;
+					opacity = Math.min(1, opacity);
+				} else if (preset === "spiral-lattice") {
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const x = col - colCenter;
+					const y = row - rowCenter;
+					const radius = Math.hypot(x, y);
+					const angle = Math.atan2(y, x);
+					const spiral = u + radius * .18 + angle / (Math.PI * 2);
+					const counterSpiral = u * .72 - radius * .16 - angle / (Math.PI * 2);
+					const a = wavePeak(spiral);
+					const b = wavePeak(counterSpiral) * .55;
+					const core = radius < .8 ? .54 + Math.sin(u * Math.PI * 4) * .26 : 0;
+					opacity = .15 + a * .7 + b * .42 + core;
+					opacity = Math.min(1, opacity);
+				} else if (preset === "altitude-wave") {
+					const colCenter = (cols - 1) / 2;
+					const rowPhase = (rows - 1 - row) * .13;
+					const pulse = .5 - .5 * Math.cos((u + rowPhase) * Math.PI * 2);
+					const crest = pulse * pulse;
+					const altitudeWeight = .58 + (rows - 1 - row) * .16;
+					const centerWeight = col === Math.floor(colCenter) ? .16 : 0;
+					opacity = .15 + pulse * .26 + crest * (altitudeWeight + centerWeight) * (.94 - .34);
+					opacity = Math.min(.95, opacity);
+				} else if (preset === "glyph-cluster") {
+					const patterns = [
+						[
+							"1,1",
+							"2,1",
+							"3,1",
+							"1,3",
+							"2,3",
+							"3,3"
+						],
+						[
+							"1,1",
+							"2,1",
+							"3,1",
+							"2,2",
+							"1,3",
+							"2,3",
+							"3,3"
+						],
+						[
+							"1,1",
+							"1,2",
+							"1,3",
+							"2,1",
+							"2,3",
+							"3,1",
+							"3,2",
+							"3,3"
+						],
+						[
+							"1,1",
+							"3,1",
+							"2,2",
+							"1,3",
+							"3,3"
+						],
+						[
+							"2,1",
+							"1,2",
+							"3,2",
+							"2,3"
+						],
+						[
+							"1,1",
+							"2,1",
+							"2,2",
+							"2,3",
+							"3,3"
+						]
+					];
+					const count = patterns.length;
+					const phaseIndex = Math.floor(u * count) % count;
+					const previousIndex = (phaseIndex + count - 1) % count;
+					const activeSet = new Set(patterns[phaseIndex]);
+					const prevSet = new Set(patterns[previousIndex]);
+					const key = `${row % 5},${col % 5}`;
+					const colCenter = (cols - 1) / 2;
+					const rowCenter = (rows - 1) / 2;
+					const ring = Math.hypot(col - colCenter, row - rowCenter);
+					if (activeSet.has(key)) opacity = .95;
+					else if (prevSet.has(key)) opacity = .34;
+					else if (ring < 1.1) opacity = .2;
+					else opacity = .15;
+				} else if (preset === "rail-scan") {
+					const STEP_COUNT = 25;
+					const t = Math.floor(u * STEP_COUNT) % STEP_COUNT;
+					const activeRow = t % rows;
+					const activeBrailleCol = Math.floor(t / rows * 2) % 2;
+					const railColLeft = Math.max(0, Math.floor(cols * .25));
+					const railColRight = Math.min(cols - 1, Math.ceil(cols * .75));
+					const railCol = activeBrailleCol === 0 ? railColLeft : railColRight;
+					const nearCol = Math.floor((cols - 1) / 2);
+					const rowDistance = Math.abs(row - activeRow);
+					if (col === railCol && rowDistance === 0) opacity = .95;
+					else if (col === railCol && rowDistance === 1) opacity = .34;
+					else if (col === nearCol && rowDistance === 0) opacity = .52;
+					else if ((col === railColLeft || col === railColRight) && rowDistance === 2) opacity = .24;
+					else opacity = .15;
+				} else if (preset === "halo-drift") {
+					const colCenter = (cols - 1) / 2;
+					const t = u * 20;
+					const HELIX_LOOP_RADIANS = Math.PI * 2 / 19;
+					const diagonalAxis = row + col;
+					const phaseOffset = t * HELIX_LOOP_RADIANS + diagonalAxis * .82;
+					const strandPerpendicular = Math.round(colCenter * .8 * Math.sin(phaseOffset));
+					const cellPerpendicular = col - row;
+					const distanceFromStrand = Math.abs(cellPerpendicular - strandPerpendicular);
+					if (distanceFromStrand === 0) opacity = 1;
+					else if (distanceFromStrand === 1) opacity = .35;
+					else opacity = .15;
+				}
+				dot.style.opacity = opacity.toFixed(4);
+				dot.style.filter = "none";
+			}
+			animationFrameId = requestAnimationFrame(tick);
+		};
+		animationFrameId = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(animationFrameId);
+	}, [
+		autoplay,
+		isPlaying,
+		speed,
+		preset,
+		prefersReducedMotion,
+		rows,
+		cols
+	]);
+	const spiralOrder = useMemo(() => getSpiralOrder(rows, cols), [rows, cols]);
+	const snakeOrder = useMemo(() => getSnakeOrder(rows, cols), [rows, cols]);
+	const hasCustomFrames = mode === "animation" && frames && frames.length > 0;
+	const isCurrentlyAnimating = autoplay && isPlaying && !prefersReducedMotion && hasCustomFrames;
+	useEffect(() => {
+		if (!isCurrentlyAnimating || !frames || frames.length === 0) return;
+		const interval = 1e3 / fps;
+		const animate = (currentTime) => {
+			if (lastTimeRef.current === 0) lastTimeRef.current = currentTime;
+			const delta = currentTime - lastTimeRef.current;
+			lastTimeRef.current = currentTime;
+			accumulatorRef.current += delta;
+			if (accumulatorRef.current >= interval) {
+				accumulatorRef.current -= interval;
+				setCurrentFrameIndex((prev) => {
+					const next = prev + 1;
+					if (next >= frames.length) {
+						if (loop) {
+							onFrame?.(0);
+							return 0;
+						}
+						return prev;
+					}
+					onFrame?.(next);
+					return next;
+				});
+			}
+			frameIdRef.current = requestAnimationFrame(animate);
+		};
+		frameIdRef.current = requestAnimationFrame(animate);
+		return () => {
+			if (frameIdRef.current) cancelAnimationFrame(frameIdRef.current);
+		};
+	}, [
+		isCurrentlyAnimating,
+		frames,
+		fps,
+		loop,
+		onFrame
+	]);
+	useEffect(() => {
+		setCurrentFrameIndex(0);
+		lastTimeRef.current = 0;
+		accumulatorRef.current = 0;
+	}, []);
+	const gridWidth = cols * (dotSize + gap) - gap;
+	const gridHeight = rows * (dotSize + gap) - gap;
+	const viewBoxWidth = gridWidth + 8;
+	const viewBoxHeight = gridHeight + 8;
+	const currentFrame = useMemo(() => {
+		if (mode === "vu" && levels) {
+			const frame = Array.from({ length: rows }, () => Array.from({ length: cols }).fill(0));
+			for (let col = 0; col < Math.min(cols, levels.length); col++) {
+				const level = Math.max(0, Math.min(1, levels[col] ?? 0));
+				const height = Math.round(level * rows);
+				for (let row = 0; row < rows; row++) if (rows - 1 - row < height) frame[row][col] = 1;
+			}
+			return frame;
+		}
+		if (mode === "static" && pattern) return ensureFrameSize(pattern, rows, cols);
+		if (hasCustomFrames && frames) return ensureFrameSize(frames[currentFrameIndex] || frames[0] || [], rows, cols);
+		return Array.from({ length: rows }, () => Array.from({ length: cols }).fill(1));
+	}, [
+		mode,
+		pattern,
+		frames,
+		currentFrameIndex,
+		levels,
+		rows,
+		cols,
+		hasCustomFrames
+	]);
+	const gradientColors = colorPreset !== "solid" ? {
+		sunset: ["#ff5f6d", "#ffc371"],
+		ocean: ["#00c6ff", "#0072ff"],
+		neon: ["#b4ff39", "#39ffb6"],
+		aurora: [
+			"#ff3cac",
+			"#784ba0",
+			"#2b86c5"
+		],
+		fire: ["#ff512f", "#dd2476"],
+		prism: [
+			"#12c2e9",
+			"#c471ed",
+			"#f64f59"
+		]
+	}[colorPreset] : null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative inline-block select-none", className),
+		"data-slot": "dot-matrix",
+		style: {
+			"--dmx-color": color,
+			"--dmx-color-off": colorOff
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			ref: svgRef,
+			width: viewBoxWidth,
+			height: viewBoxHeight,
+			viewBox: `-4 -4 ${viewBoxWidth} ${viewBoxHeight}`,
+			xmlns: "http://www.w3.org/2000/svg",
+			className: "block overflow-visible",
+			"aria-label": ariaLabel,
+			role: "img",
+			children: [
+				/* @__PURE__ */ jsxs("defs", { children: [
+					gradientColors && /* @__PURE__ */ jsx("linearGradient", {
+						id: "dmx-gradient-preset",
+						x1: "0%",
+						y1: "0%",
+						x2: "100%",
+						y2: "100%",
+						gradientUnits: "userSpaceOnUse",
+						children: gradientColors.map((col, idx) => /* @__PURE__ */ jsx("stop", {
+							offset: `${idx / (gradientColors.length - 1) * 100}%`,
+							stopColor: col
+						}, col))
+					}),
+					(bloom || halo) && /* @__PURE__ */ jsxs("filter", {
+						id: "dmx-bloom-filter",
+						x: "-50%",
+						y: "-50%",
+						width: "200%",
+						height: "200%",
+						children: [/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: bloomIntensity,
+							result: "blur"
+						}), /* @__PURE__ */ jsxs("feMerge", { children: [/* @__PURE__ */ jsx("feMergeNode", { in: "blur" }), /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })] })]
+					}),
+					/* @__PURE__ */ jsxs("filter", {
+						id: "dmx-hover-filter",
+						x: "-50%",
+						y: "-50%",
+						width: "200%",
+						height: "200%",
+						children: [/* @__PURE__ */ jsx("feGaussianBlur", {
+							in: "SourceGraphic",
+							stdDeviation: bloomIntensity * 1.5,
+							result: "blur"
+						}), /* @__PURE__ */ jsxs("feMerge", { children: [/* @__PURE__ */ jsx("feMergeNode", { in: "blur" }), /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })] })]
+					})
+				] }),
+				/* @__PURE__ */ jsx("style", { children: `
+            .dmx-dot {
+              transform-origin: center;
+              transform-box: fill-box;
+              transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease;
+            }
+            .dmx-dot-on {
+              fill: ${gradientColors ? "url(#dmx-gradient-preset)" : "var(--dmx-color, currentColor)"};
+            }
+            .dmx-dot-off {
+              fill: var(--dmx-color-off, currentColor);
+              opacity: 0.12;
+            }
+            .dmx-dot-animate-pulse {
+              animation: dmx-pulse-anim ${1.5 / speed}s infinite ease-in-out;
+            }
+            .dmx-dot-animate-trail {
+              animation: dmx-trail-anim ${1.5 / speed}s infinite linear;
+            }
+            .dmx-dot:hover {
+              transform: scale(1.3);
+              opacity: 1 !important;
+              ${bloom ? "filter: url(#dmx-hover-filter);" : ""}
+            }
+            @keyframes dmx-pulse-anim {
+              0%, 100% { opacity: 0.12; }
+              50% { opacity: 1; }
+            }
+            @keyframes dmx-trail-anim {
+              0% { opacity: 1; }
+              35%, 100% { opacity: 0.12; }
+            }
+          ` }),
+				currentFrame.map((rowArr, rowIdx) => rowArr.map((cellVal, colIdx) => {
+					const cx = colIdx * (dotSize + gap) + dotSize / 2;
+					const cy = rowIdx * (dotSize + gap) + dotSize / 2;
+					const x = colIdx * (dotSize + gap);
+					const y = rowIdx * (dotSize + gap);
+					const isCellOn = cellVal > .01;
+					const cellOpacity = isCellOn ? cellVal : .12;
+					const isDirectAnim = DIRECT_ANIMS.has(preset);
+					const useCSSAnimation = mode === "animation" && isPlaying && !prefersReducedMotion && !hasCustomFrames && preset !== "none" && !isDirectAnim;
+					const animationClass = useCSSAnimation ? [
+						"spiral",
+						"snake",
+						"diagonal",
+						"diagonal-reverse",
+						"rotor",
+						"columns-flux"
+					].includes(preset) ? "dmx-dot-animate-trail" : "dmx-dot-animate-pulse" : "";
+					const elementStyle = {
+						animationDelay: useCSSAnimation ? (() => {
+							const scaledCycle = 1.5 / speed;
+							if (preset === "ripple") {
+								const rowCenter = (rows - 1) / 2;
+								const colCenter = (cols - 1) / 2;
+								return `${(Math.hypot(rowIdx - rowCenter, colIdx - colCenter) / (Math.hypot(rowCenter, colCenter) || 1) * scaledCycle).toFixed(4)}s`;
+							}
+							if (preset === "spiral") return `${((spiralOrder[rowIdx * cols + colIdx] || 0) / (rows * cols - 1 || 1) * scaledCycle).toFixed(4)}s`;
+							if (preset === "snake") return `${((snakeOrder[rowIdx * cols + colIdx] || 0) / (rows * cols - 1 || 1) * scaledCycle).toFixed(4)}s`;
+							if (preset === "wave") return `${(colIdx / (cols - 1 || 1) * scaledCycle).toFixed(4)}s`;
+							if (preset === "wave-vertical") return `${(rowIdx / (rows - 1 || 1) * scaledCycle).toFixed(4)}s`;
+							if (preset === "diagonal") return `${((rowIdx + colIdx) / (rows + cols - 2 || 1) * scaledCycle).toFixed(4)}s`;
+							if (preset === "diagonal-reverse") return `${((rowIdx + (cols - 1 - colIdx)) / (rows + cols - 2 || 1) * scaledCycle).toFixed(4)}s`;
+							if (preset === "rotor") {
+								const rowCenter = (rows - 1) / 2;
+								const colCenter = (cols - 1) / 2;
+								return `${((Math.atan2(rowIdx - rowCenter, colIdx - colCenter) + Math.PI) / (Math.PI * 2) * scaledCycle).toFixed(4)}s`;
+							}
+							if (preset === "columns-flux") {
+								const yNorm = colIdx % 2 === 0 ? rowIdx / (rows - 1 || 1) : (rows - 1 - rowIdx) / (rows - 1 || 1);
+								const colStagger = colIdx / (cols - 1 || 1) * .3;
+								return `${((yNorm * .7 + colStagger) * scaledCycle).toFixed(4)}s`;
+							}
+							return "0s";
+						})() : void 0,
+						...(bloom || halo) && isCellOn && !useCSSAnimation && !isDirectAnim ? { filter: "url(#dmx-bloom-filter)" } : {},
+						...!useCSSAnimation ? { opacity: cellOpacity } : {}
+					};
+					const baseProps = {
+						className: cn("dmx-dot dmx-dot-cell", isCellOn ? "dmx-dot-on" : "dmx-dot-off", isCellOn && animationClass),
+						style: elementStyle,
+						"data-row": rowIdx,
+						"data-col": colIdx
+					};
+					const key = `${rowIdx}-${colIdx}`;
+					if (shape === "square") return /* @__PURE__ */ jsx("rect", {
+						...baseProps,
+						x,
+						y,
+						width: dotSize,
+						height: dotSize,
+						rx: Math.max(1, dotSize * .15)
+					}, key);
+					if (shape === "diamond") {
+						const radius = dotSize / 2;
+						const points = `${cx},${cy - radius} ${cx + radius},${cy} ${cx},${cy + radius} ${cx - radius},${cy}`;
+						return /* @__PURE__ */ jsx("polygon", {
+							...baseProps,
+							points
+						}, key);
+					}
+					if (shape === "heart") {
+						const s = dotSize / 12;
+						const pathD = `M ${cx} ${cy + 4 * s}
+                C ${cx - 5 * s} ${cy - 1.5 * s} ${cx - 6 * s} ${cy - 5 * s} ${cx - 3 * s} ${cy - 5.5 * s}
+                C ${cx - 1 * s} ${cy - 5.8 * s} ${cx} ${cy - 3 * s} ${cx} ${cy - 3 * s}
+                C ${cx} ${cy - 3 * s} ${cx + 1 * s} ${cy - 5.8 * s} ${cx + 3 * s} ${cy - 5.5 * s}
+                C ${cx + 6 * s} ${cy - 5 * s} ${cx + 5 * s} ${cy - 1.5 * s} ${cx} ${cy + 4 * s} Z`;
+						return /* @__PURE__ */ jsx("path", {
+							...baseProps,
+							d: pathD
+						}, key);
+					}
+					return /* @__PURE__ */ jsx("circle", {
+						...baseProps,
+						cx,
+						cy,
+						r: dotSize / 2
+					}, key);
+				}))
+			]
+		})
+	});
+}
+//#endregion
+export { DotMatrix };