@tarsis/toolkit 0.7.1 → 0.7.3

package/dist/index.js

@@ -7,9 +7,9 @@ import { n as easing, r as staggerDelay, t as animationDuration } from "./animat
 import { i as lockAudioAssets, r as iconAssets, t as dockAudioAssets } from "./assets-huTvlamy.js";
 import { a as FormField, c as VisuallyHidden, i as DialogBase, n as TooltipBase, o as useFormFieldContext, r as PopoverBase, s as Portal, t as SelectBase } from "./SelectBase-DPcXvMTa.js";
 import { n as Cluster, r as Stack, t as Container } from "./Container-BirkN1fA.js";
-import { a as getVarName, i as Token, n as validateColorScheme, o as resolveToken, r as springPreset, t as REQUIRED_SEMANTIC_VARS } from "./tokens-B2AxRYyF.js";
+import { a as getVarName, i as Token, n as validateColorScheme, o as resolveToken, r as springPreset, t as REQUIRED_SEMANTIC_VARS } from "./tokens-CDVSR49D.js";
 import cn from "clsx";
-import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as THREE from "three";
 import gsap from "gsap";
@@ -758,31 +758,31 @@ var BubblyParticlesButton = () => {
 	});
 };
 var BurningButton_module_default = {
-	root: "_root_32poq_1",
-	button: "_button_32poq_11",
-	p: "_p_32poq_24",
-	text: "_text_32poq_24",
-	rise1: "_rise1_32poq_1",
-	rise2: "_rise2_32poq_1",
-	rise3: "_rise3_32poq_1",
-	rise4: "_rise4_32poq_1",
-	rise5: "_rise5_32poq_1",
-	rise6: "_rise6_32poq_1",
-	rise7: "_rise7_32poq_1",
-	rise8: "_rise8_32poq_1",
-	rise9: "_rise9_32poq_1",
-	rise10: "_rise10_32poq_1",
-	rise11: "_rise11_32poq_1",
-	rise12: "_rise12_32poq_1",
-	rise13: "_rise13_32poq_1",
-	rise14: "_rise14_32poq_1",
-	rise15: "_rise15_32poq_1",
-	rise16: "_rise16_32poq_1",
-	rise17: "_rise17_32poq_1",
-	rise18: "_rise18_32poq_1",
-	rise19: "_rise19_32poq_1",
-	rise20: "_rise20_32poq_1",
-	effects: "_effects_32poq_238"
+	root: "_root_16kfh_1",
+	button: "_button_16kfh_11",
+	p: "_p_16kfh_24",
+	text: "_text_16kfh_24",
+	rise1: "_rise1_16kfh_1",
+	rise2: "_rise2_16kfh_1",
+	rise3: "_rise3_16kfh_1",
+	rise4: "_rise4_16kfh_1",
+	rise5: "_rise5_16kfh_1",
+	rise6: "_rise6_16kfh_1",
+	rise7: "_rise7_16kfh_1",
+	rise8: "_rise8_16kfh_1",
+	rise9: "_rise9_16kfh_1",
+	rise10: "_rise10_16kfh_1",
+	rise11: "_rise11_16kfh_1",
+	rise12: "_rise12_16kfh_1",
+	rise13: "_rise13_16kfh_1",
+	rise14: "_rise14_16kfh_1",
+	rise15: "_rise15_16kfh_1",
+	rise16: "_rise16_16kfh_1",
+	rise17: "_rise17_16kfh_1",
+	rise18: "_rise18_16kfh_1",
+	rise19: "_rise19_16kfh_1",
+	rise20: "_rise20_16kfh_1",
+	effects: "_effects_16kfh_238"
 };
 //#endregion
 //#region src/components/Buttons/BurningButton/BurningButton.tsx
@@ -3834,10 +3834,10 @@ var NeonButton = ({ className, ...rest }) => {
 	});
 };
 var NoisyButton_module_default = {
-	root: "_root_hbg92_2",
-	i: "_i_hbg92_22",
-	noise: "_noise_hbg92_1",
-	text: "_text_hbg92_482"
+	root: "_root_g5m4p_2",
+	i: "_i_g5m4p_22",
+	noise: "_noise_g5m4p_1",
+	text: "_text_g5m4p_482"
 };
 //#endregion
 //#region src/components/Buttons/NoisyButton/NoisyButton.tsx
@@ -4722,16 +4722,18 @@ var ShimmeringBorderGradient = () => {
 	});
 };
 //#endregion
-//#region src/components/Buttons/ShinyButton/MacCursor.tsx
-var MacCursor = () => {
+//#region src/components/Buttons/ReflectiveButton/MacCursor.tsx
+function MacCursor() {
+	const filterId = useId().replace(/:/g, "");
 	return /* @__PURE__ */ jsxs("svg", {
 		width: "22",
 		height: "22",
 		viewBox: "0 0 22 22",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": true,
 		children: [/* @__PURE__ */ jsxs("g", {
-			filter: "url(#filter0_d_3664_1573)",
+			filter: `url(#${filterId})`,
 			children: [
 				/* @__PURE__ */ jsx("path", {
 					fillRule: "evenodd",
@@ -4768,7 +4770,7 @@ var MacCursor = () => {
 				})
 			]
 		}), /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
-			id: "filter0_d_3664_1573",
+			id: filterId,
 			x: "0.733344",
 			y: "0.4",
 			width: "21.2",
@@ -4806,173 +4808,384 @@ var MacCursor = () => {
 			]
 		}) })]
 	});
-};
+}
 //#endregion
-//#region src/components/Buttons/ShinyButton/ShinyButton.helpers.ts
+//#region src/components/Buttons/ReflectiveButton/ReflectiveButton.helpers.ts
 var scale$2 = (number, inMin, inMax, outMin, outMax) => {
 	return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
 };
-var ShinyButton_module_default = {
-	root: "_root_yozjp_1",
-	buttonContainer: "_buttonContainer_yozjp_7",
-	pressed: "_pressed_yozjp_14",
-	button: "_button_yozjp_7",
-	shadow: "_shadow_yozjp_33",
-	text: "_text_yozjp_49",
-	buttonReflection: "_buttonReflection_yozjp_68",
-	surfaceReflection: "_surfaceReflection_yozjp_77",
-	detailsContainer: "_detailsContainer_yozjp_95",
-	hackyCursorInnerDiv: "_hackyCursorInnerDiv_yozjp_108",
-	cursor: "_cursor_yozjp_119",
-	fingerprint: "_fingerprint_yozjp_129"
-};
-//#endregion
-//#region src/components/Buttons/ShinyButton/ShinyButton.tsx
-var ShinyButton = () => {
-	return /* @__PURE__ */ jsx("div", {
-		className: ShinyButton_module_default.root,
-		children: /* @__PURE__ */ jsx(Button, {
-			roughness: .2,
-			offset: -200,
-			children: "Button"
-		})
-	});
+function getDefaultReflectiveButtonVideoConstraints() {
+	return {
+		audio: false,
+		video: {
+			width: { ideal: 600 },
+			height: { ideal: 600 },
+			facingMode: "user"
+		}
+	};
+}
+var ReflectiveButton_module_default = {
+	root: "_root_1xtu1_1",
+	buttonContainer: "_buttonContainer_1xtu1_6",
+	pressed: "_pressed_1xtu1_13",
+	button: "_button_1xtu1_6",
+	shadow: "_shadow_1xtu1_55",
+	text: "_text_1xtu1_71",
+	buttonReflection: "_buttonReflection_1xtu1_88",
+	surfaceReflection: "_surfaceReflection_1xtu1_96",
+	detailsContainer: "_detailsContainer_1xtu1_113",
+	playfulLayersClip: "_playfulLayersClip_1xtu1_125",
+	cursor: "_cursor_1xtu1_135",
+	visuallyHidden: "_visuallyHidden_1xtu1_144",
+	fingerprint: "_fingerprint_1xtu1_156"
+};
+//#endregion
+//#region src/components/Buttons/ReflectiveButton/useUserMediaVideo.ts
+function mapGetUserMediaError(e) {
+	const error = e instanceof DOMException ? e : e instanceof Error ? e : new Error(String(e));
+	if (e instanceof DOMException && e.name === "NotAllowedError") return {
+		status: "denied",
+		error
+	};
+	return {
+		status: "unavailable",
+		error
+	};
+}
+function useUserMediaVideo(constraints, options) {
+	const optsRef = useRef(options);
+	const constraintsRef = useRef(constraints);
+	useEffect(() => {
+		optsRef.current = options;
+	}, [options]);
+	useEffect(() => {
+		constraintsRef.current = constraints;
+	}, [constraints]);
+	const [status, setStatus] = useState("idle");
+	const [stream, setStream] = useState(null);
+	const requestGenerationRef = useRef(0);
+	const streamRef = useRef(null);
+	const setStatusAndNotify = useCallback((next) => {
+		setStatus(next);
+		optsRef.current?.onStatusChange?.(next);
+	}, []);
+	const stopTracksInternal = useCallback(() => {
+		const s = streamRef.current;
+		if (s) s.getTracks().forEach((t) => {
+			t.stop();
+		});
+		streamRef.current = null;
+		setStream(null);
+	}, []);
+	const stop = useCallback(() => {
+		requestGenerationRef.current += 1;
+		stopTracksInternal();
+		setStatusAndNotify("idle");
+	}, [setStatusAndNotify, stopTracksInternal]);
+	const start = useCallback(() => {
+		if (typeof navigator === "undefined") {
+			const err = /* @__PURE__ */ new Error("navigator is not available");
+			setStatusAndNotify("unavailable");
+			optsRef.current?.onError?.(err);
+			return;
+		}
+		const mediaDevices = navigator.mediaDevices;
+		if (!mediaDevices?.getUserMedia) {
+			const err = /* @__PURE__ */ new Error("getUserMedia is not supported");
+			setStatusAndNotify("unavailable");
+			optsRef.current?.onError?.(err);
+			return;
+		}
+		const myGeneration = ++requestGenerationRef.current;
+		stopTracksInternal();
+		setStatusAndNotify("pending");
+		mediaDevices.getUserMedia(constraintsRef.current).then((mediaStream) => {
+			if (myGeneration !== requestGenerationRef.current) {
+				mediaStream.getTracks().forEach((t) => {
+					t.stop();
+				});
+				return;
+			}
+			streamRef.current = mediaStream;
+			setStream(mediaStream);
+			setStatusAndNotify("live");
+		}).catch((e) => {
+			if (myGeneration !== requestGenerationRef.current) return;
+			const { status: nextStatus, error } = mapGetUserMediaError(e);
+			setStatusAndNotify(nextStatus);
+			optsRef.current?.onError?.(error);
+		});
+	}, [setStatusAndNotify, stopTracksInternal]);
+	useEffect(() => {
+		return () => {
+			requestGenerationRef.current += 1;
+			const s = streamRef.current;
+			if (s) s.getTracks().forEach((t) => {
+				t.stop();
+			});
+			streamRef.current = null;
+		};
+	}, []);
+	return {
+		status,
+		stream,
+		start,
+		stop
+	};
+}
+//#endregion
+//#region src/components/Buttons/ReflectiveButton/ReflectiveButton.tsx
+var FINGERPRINT_MAX = 12;
+var defaultFeatures = {
+	fingerprints: true,
+	macCursor: true
 };
-function Button({ roughness = 0, offset = 0, children }) {
+function ReflectiveButton({ children, className, style, disabled = false, roughness = .2, offset = -200, camera = "on-interaction", features: featuresProp, videoConstraints, onCameraError, onCameraStateChange, cameraHandleRef, onPointerDown, onClick, onFocus, onBlur, ref, ...rest }) {
+	const features = {
+		...defaultFeatures,
+		...featuresProp
+	};
+	const showPlayfulLayers = !useReducedMotion() && (features.macCursor || features.fingerprints);
 	const reflectionRef = useRef(null);
 	const surfaceReflectionRef = useRef(null);
-	const detailsContainerRef = useRef(null);
+	const buttonElementRef = useRef(null);
+	const interactionCameraStartedRef = useRef(false);
+	const fingerprintIdRef = useRef(0);
+	const pointerClientRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const rafIdRef = useRef(null);
 	const [cursorPosition, setCursorPosition] = useState({
 		x: 0,
 		y: 0
 	});
-	const [buttonFocus, setButtonFocus] = useState(false);
+	const [pointerOverRoot, setPointerOverRoot] = useState(false);
+	const [buttonKeyboardFocus, setButtonKeyboardFocus] = useState(false);
 	const [buttonPressed, setButtonPressed] = useState(false);
 	const [fingerprints, setFingerprints] = useState([]);
-	const [inBrowser] = useState(() => typeof window !== "undefined");
-	const mappedRoughness = Math.round(scale$2(roughness, 0, 1, 0, 16));
-	const [showBorderRadius] = useState(() => !navigator.userAgent.includes("Chrome"));
+	const mergedButtonRef = useMergeRefs(ref, buttonElementRef);
+	const { status, stream, start, stop } = useUserMediaVideo(useMemo(() => {
+		const base = getDefaultReflectiveButtonVideoConstraints();
+		if (!videoConstraints) return base;
+		return {
+			...base,
+			video: {
+				...base.video,
+				...videoConstraints
+			}
+		};
+	}, [videoConstraints]), {
+		onError: onCameraError,
+		onStatusChange: onCameraStateChange
+	});
+	const cameraStatusMessage = status === "denied" ? "Camera access denied" : status === "unavailable" ? "Camera unavailable" : null;
+	useImperativeHandle(cameraHandleRef, () => ({
+		requestCamera: start,
+		stopCamera: stop
+	}), [start, stop]);
 	useEffect(() => {
-		if (!reflectionRef.current || !surfaceReflectionRef.current || !inBrowser) return;
-		try {
-			navigator.mediaDevices.getUserMedia({
-				audio: false,
-				video: {
-					width: { ideal: 600 },
-					height: { ideal: 600 },
-					facingMode: "user"
-				}
-			}).then((stream) => {
-				const video = reflectionRef.current;
-				if (!video) return;
-				video.setAttribute("playsinline", "true");
-				video.srcObject = stream;
-				video.onloadedmetadata = () => {
-					video.play();
-				};
-				const surface = surfaceReflectionRef.current;
-				if (!surface) return;
-				surface.setAttribute("playsinline", "true");
-				surface.srcObject = stream;
-				surface.onloadedmetadata = () => {
-					surface.play();
-				};
-			}).catch((e) => console.error(e));
-		} catch (e) {
-			console.error(e);
-		}
+		interactionCameraStartedRef.current = false;
+	}, [camera, disabled]);
+	useEffect(() => {
+		if (disabled) stop();
+	}, [disabled, stop]);
+	useEffect(() => {
+		if (camera !== "on-mount" || disabled) return;
+		start();
+		return () => {
+			stop();
+		};
 	}, [
-		reflectionRef,
-		surfaceReflectionRef,
-		inBrowser
+		camera,
+		disabled,
+		start,
+		stop
 	]);
 	useEffect(() => {
-		if (!detailsContainerRef.current || !inBrowser) return;
-		const handleMouseMove = (event) => {
-			const rect = detailsContainerRef.current?.getBoundingClientRect();
+		const face = reflectionRef.current;
+		const surface = surfaceReflectionRef.current;
+		const clearVideo = (el) => {
+			if (!el) return;
+			el.onloadedmetadata = null;
+			el.srcObject = null;
+		};
+		if (!stream) {
+			clearVideo(face);
+			clearVideo(surface);
+			return;
+		}
+		const attach = (el) => {
+			if (!el) return;
+			el.setAttribute("playsinline", "true");
+			el.muted = true;
+			el.srcObject = stream;
+			el.onloadedmetadata = () => {
+				el.play().catch(() => {});
+			};
+		};
+		attach(face);
+		attach(surface);
+		return () => {
+			clearVideo(face);
+			clearVideo(surface);
+		};
+	}, [stream]);
+	useEffect(() => {
+		if (!showPlayfulLayers || !features.macCursor) return;
+		const flushCursor = () => {
+			rafIdRef.current = null;
+			const rect = buttonElementRef.current?.getBoundingClientRect();
 			if (!rect) return;
+			const { x: clientX, y: clientY } = pointerClientRef.current;
 			setCursorPosition({
-				x: event.clientX - rect.x,
-				y: event.clientY - rect.y
+				x: clientX - rect.x,
+				y: clientY - rect.y
 			});
 		};
+		const handleMouseMove = (event) => {
+			pointerClientRef.current = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (rafIdRef.current === null) rafIdRef.current = window.requestAnimationFrame(flushCursor);
+		};
 		window.addEventListener("mousemove", handleMouseMove);
 		return () => {
 			window.removeEventListener("mousemove", handleMouseMove);
+			if (rafIdRef.current !== null) {
+				window.cancelAnimationFrame(rafIdRef.current);
+				rafIdRef.current = null;
+			}
 		};
-	}, [inBrowser]);
-	const handleMouseDown = (e) => {
+	}, [features.macCursor, showPlayfulLayers]);
+	const mappedRoughness = Math.round(scale$2(roughness, 0, 1, 0, 16));
+	const tryStartInteractionCamera = useCallback(() => {
+		if (camera !== "on-interaction" || disabled) return;
+		if (interactionCameraStartedRef.current) return;
+		interactionCameraStartedRef.current = true;
+		start();
+	}, [
+		camera,
+		disabled,
+		start
+	]);
+	const addFingerprintFromClient = useCallback((clientX, clientY) => {
+		if (!features.fingerprints || !showPlayfulLayers) return;
+		const rect = buttonElementRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		fingerprintIdRef.current += 1;
+		const id = String(fingerprintIdRef.current);
+		setFingerprints((prev) => [...prev, {
+			id,
+			x: clientX - rect.x,
+			y: clientY - rect.y
+		}].slice(-FINGERPRINT_MAX));
+	}, [features.fingerprints, showPlayfulLayers]);
+	const endPress = useCallback(() => setButtonPressed(false), []);
+	const handleButtonFocus = useCallback((e) => {
+		onFocus?.(e);
+		setButtonKeyboardFocus(true);
+	}, [onFocus]);
+	const handleButtonBlur = useCallback((e) => {
+		onBlur?.(e);
+		setButtonKeyboardFocus(false);
+	}, [onBlur]);
+	const handlePointerDown = useCallback((e) => {
+		onPointerDown?.(e);
+		if (e.defaultPrevented) return;
+		tryStartInteractionCamera();
 		setButtonPressed(true);
-		if (!detailsContainerRef.current) return;
-		const rect = detailsContainerRef.current.getBoundingClientRect();
-		const fingerprint = {
-			x: e.clientX - rect.x,
-			y: e.clientY - rect.y
-		};
-		setFingerprints((fingerprints) => [...fingerprints, fingerprint]);
-	};
-	const handleTouchStart = (e) => {
-		if (e.touches.length > 0 && detailsContainerRef.current) {
-			const touch = e.touches[0];
-			const rect = detailsContainerRef.current.getBoundingClientRect();
-			const fingerprint = {
-				x: touch.clientX - rect.x,
-				y: touch.clientY - rect.y
-			};
-			setButtonPressed(true);
-			setFingerprints((fingerprints) => [...fingerprints, fingerprint]);
-		}
-	};
-	if (!inBrowser) return null;
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		addFingerprintFromClient(e.clientX, e.clientY);
+	}, [
+		addFingerprintFromClient,
+		onPointerDown,
+		tryStartInteractionCamera
+	]);
+	const handleClick = useCallback((e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		tryStartInteractionCamera();
+	}, [onClick, tryStartInteractionCamera]);
+	const showMacCursorAffordance = pointerOverRoot || buttonKeyboardFocus;
 	return /* @__PURE__ */ jsxs("div", {
-		onMouseEnter: () => setButtonFocus(true),
-		onMouseLeave: () => setButtonFocus(false),
-		className: cn(ShinyButton_module_default.buttonContainer, { [ShinyButton_module_default.pressed]: buttonPressed }),
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: ShinyButton_module_default.detailsContainer,
-				ref: detailsContainerRef,
-				style: { borderRadius: showBorderRadius ? "var(--border-radius)" : 0 },
-				children: [/* @__PURE__ */ jsx("div", {
-					className: ShinyButton_module_default.hackyCursorInnerDiv,
-					children: /* @__PURE__ */ jsx("div", {
-						className: ShinyButton_module_default.cursor,
-						style: {
-							transform: `translate(${cursorPosition.x}px, ${cursorPosition.y}px) translate(-50%, -50%)`,
-							opacity: buttonFocus ? 1 : 0
-						},
-						children: /* @__PURE__ */ jsx(MacCursor, {})
-					})
-				}), fingerprints.map((el, i) => /* @__PURE__ */ jsx("div", {
-					className: ShinyButton_module_default.fingerprint,
-					style: { transform: `translate(${el.x}px, ${el.y}px) translate(-50%, -50%)` }
-				}, i))]
-			}),
-			/* @__PURE__ */ jsx("video", {
-				ref: surfaceReflectionRef,
-				className: cn(ShinyButton_module_default.surfaceReflection, { [ShinyButton_module_default.pressed]: buttonPressed })
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: cn(ShinyButton_module_default.button, { [ShinyButton_module_default.pressed]: buttonPressed }),
-				onMouseDown: handleMouseDown,
-				onTouchStart: handleTouchStart,
-				onMouseUp: () => setButtonPressed(false),
-				onTouchEnd: () => setButtonPressed(false),
-				children: [/* @__PURE__ */ jsx("video", {
-					ref: reflectionRef,
-					playsInline: true,
-					className: ShinyButton_module_default.buttonReflection,
-					style: {
-						filter: `blur(${mappedRoughness}px) saturate(0.4) brightness(1.1)`,
-						objectPosition: `0px ${offset}px`
-					}
-				}), /* @__PURE__ */ jsx("div", { className: ShinyButton_module_default.shadow })]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: ShinyButton_module_default.text,
-				children
-			})
-		]
+		className: cn(ReflectiveButton_module_default.root, className),
+		style,
+		onMouseEnter: () => setPointerOverRoot(true),
+		onMouseLeave: () => setPointerOverRoot(false),
+		children: [cameraStatusMessage ? /* @__PURE__ */ jsx("span", {
+			className: ReflectiveButton_module_default.visuallyHidden,
+			role: "status",
+			"aria-live": "polite",
+			children: cameraStatusMessage
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: cn(ReflectiveButton_module_default.buttonContainer, { [ReflectiveButton_module_default.pressed]: buttonPressed }),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: ReflectiveButton_module_default.detailsContainer,
+					children: showPlayfulLayers && (features.macCursor || features.fingerprints) ? /* @__PURE__ */ jsxs("div", {
+						className: ReflectiveButton_module_default.playfulLayersClip,
+						children: [features.macCursor ? /* @__PURE__ */ jsx("div", {
+							className: ReflectiveButton_module_default.cursor,
+							style: {
+								transform: `translate(${cursorPosition.x}px, ${cursorPosition.y}px) translate(-50%, -50%)`,
+								opacity: showMacCursorAffordance ? 1 : 0
+							},
+							children: /* @__PURE__ */ jsx(MacCursor, {})
+						}) : null, features.fingerprints ? fingerprints.map((fp) => /* @__PURE__ */ jsx("div", {
+							className: ReflectiveButton_module_default.fingerprint,
+							style: { transform: `translate(${fp.x}px, ${fp.y}px) translate(-50%, -50%)` }
+						}, fp.id)) : null]
+					}) : null
+				}),
+				/* @__PURE__ */ jsx("video", {
+					ref: surfaceReflectionRef,
+					className: cn(ReflectiveButton_module_default.surfaceReflection, { [ReflectiveButton_module_default.pressed]: buttonPressed }),
+					"aria-hidden": true,
+					muted: true,
+					playsInline: true
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					ref: mergedButtonRef,
+					disabled,
+					className: cn(ReflectiveButton_module_default.button, { [ReflectiveButton_module_default.pressed]: buttonPressed }),
+					"aria-busy": status === "pending" || void 0,
+					onPointerDown: handlePointerDown,
+					onPointerUp: endPress,
+					onPointerCancel: endPress,
+					onLostPointerCapture: endPress,
+					onClick: handleClick,
+					onFocus: handleButtonFocus,
+					onBlur: handleButtonBlur,
+					...rest,
+					children: [
+						/* @__PURE__ */ jsx("video", {
+							ref: reflectionRef,
+							playsInline: true,
+							className: ReflectiveButton_module_default.buttonReflection,
+							"aria-hidden": true,
+							muted: true,
+							style: {
+								filter: `blur(${mappedRoughness}px) saturate(0.4) brightness(1.1)`,
+								objectPosition: `0px ${offset}px`
+							}
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: ReflectiveButton_module_default.shadow,
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: ReflectiveButton_module_default.text,
+							children
+						})
+					]
+				})
+			]
+		})]
 	});
 }
 //#endregion
@@ -9581,16 +9794,16 @@ var playAudio = (src, onError) => {
 	});
 };
 var DockMotion_module_default = {
-	root: "_root_ofkv2_1",
-	container: "_container_ofkv2_18",
-	containerGlass: "_containerGlass_ofkv2_32",
-	glossyXLine: "_glossyXLine_ofkv2_39",
-	items: "_items_ofkv2_49",
-	child: "_child_ofkv2_89",
-	divider: "_divider_ofkv2_95",
-	glassFilter: "_glassFilter_ofkv2_106",
-	glassOverlay: "_glassOverlay_ofkv2_118",
-	glassSpecular: "_glassSpecular_ofkv2_127"
+	root: "_root_1b5vk_1",
+	container: "_container_1b5vk_18",
+	containerGlass: "_containerGlass_1b5vk_32",
+	glossyXLine: "_glossyXLine_1b5vk_39",
+	items: "_items_1b5vk_49",
+	child: "_child_1b5vk_89",
+	divider: "_divider_1b5vk_95",
+	glassFilter: "_glassFilter_1b5vk_106",
+	glassOverlay: "_glassOverlay_1b5vk_118",
+	glassSpecular: "_glassSpecular_1b5vk_127"
 };
 //#endregion
 //#region src/components/Docks/DockMotion/DockMotionDivider.tsx
@@ -10032,16 +10245,16 @@ var TooltipRangeSlider = () => {
 	});
 };
 var DockMotionItem_module_default = {
-	root: "_root_1aw22_1",
-	expanded: "_expanded_1aw22_15",
-	rootGlass: "_rootGlass_1aw22_24",
-	item: "_item_1aw22_28",
-	itemGlass: "_itemGlass_1aw22_44",
-	content: "_content_1aw22_52",
-	gloss: "_gloss_1aw22_63",
-	glassFilter: "_glassFilter_1aw22_73",
-	glassOverlay: "_glassOverlay_1aw22_85",
-	glassSpecular: "_glassSpecular_1aw22_94"
+	root: "_root_5hf3i_1",
+	expanded: "_expanded_5hf3i_17",
+	rootGlass: "_rootGlass_5hf3i_26",
+	item: "_item_5hf3i_30",
+	itemGlass: "_itemGlass_5hf3i_56",
+	content: "_content_5hf3i_64",
+	gloss: "_gloss_5hf3i_75",
+	glassFilter: "_glassFilter_5hf3i_85",
+	glassOverlay: "_glassOverlay_5hf3i_97",
+	glassSpecular: "_glassSpecular_5hf3i_106"
 };
 //#endregion
 //#region src/components/Docks/DockMotion/DockMotionItem.tsx
@@ -12510,7 +12723,7 @@ var SignatureAnimation = ({ className, onChange }) => {
 			return;
 		}
 		const digitData = DIGIT_BANK[key];
-		let charInfo = null;
+		let charInfo;
 		let className;
 		let charKey;
 		if (digitData) {
@@ -19526,12 +19739,12 @@ var ScrambledText = ({ children, reveal = false }) => {
 	});
 };
 var ScramblingLetters_module_default = {
-	root: "_root_139g6_1",
-	line: "_line_139g6_9",
-	word: "_word_139g6_14",
-	link: "_link_139g6_18",
-	letter: "_letter_139g6_22",
-	wobble: "_wobble_139g6_1"
+	root: "_root_1i3jf_1",
+	line: "_line_1i3jf_9",
+	word: "_word_1i3jf_14",
+	link: "_link_1i3jf_18",
+	letter: "_letter_1i3jf_22",
+	wobble: "_wobble_1i3jf_1"
 };
 //#endregion
 //#region src/components/Texts/ScramblingLetters/ScramblingLetters.tsx
@@ -19822,17 +20035,24 @@ function resolveThemeMode(mode) {
 function syncThemeToDom({ backgroundColor, colorSpace, resolvedTheme }) {
 	if (typeof document === "undefined") return;
 	const root = document.documentElement;
+	const body = document.body;
 	root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
 	root.style.colorScheme = resolvedTheme;
-	if (colorSpace) root.setAttribute(COLOR_SPACE_ATTRIBUTE, colorSpace === "p3" ? "true" : "false");
-	else root.removeAttribute(COLOR_SPACE_ATTRIBUTE);
+	if (body) body.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
+	if (colorSpace) {
+		root.setAttribute(COLOR_SPACE_ATTRIBUTE, colorSpace === "p3" ? "true" : "false");
+		if (body) body.setAttribute(COLOR_SPACE_ATTRIBUTE, colorSpace === "p3" ? "true" : "false");
+	} else {
+		root.removeAttribute(COLOR_SPACE_ATTRIBUTE);
+		if (body) body.removeAttribute(COLOR_SPACE_ATTRIBUTE);
+	}
 	if (backgroundColor) root.style.backgroundColor = backgroundColor;
 	else root.style.removeProperty("background-color");
 }
 //#endregion
 //#region src/components/primitives/ThemeProvider/ThemeProvider.tsx
 var STORAGE_KEY = "theme-mode";
-var ThemeProvider = ({ children, defaultMode = "system", mode: controlledMode, onModeChange, storageKey = STORAGE_KEY }) => {
+var ThemeProvider = ({ children, defaultMode = "system", mode: controlledMode, onModeChange, storageKey = STORAGE_KEY, syncDomExtras }) => {
 	const isControlled = controlledMode !== void 0;
 	const [uncontrolledMode, setUncontrolledMode] = useState(() => {
 		if (isControlled) return controlledMode;
@@ -19852,8 +20072,11 @@ var ThemeProvider = ({ children, defaultMode = "system", mode: controlledMode, o
 		return () => mql.removeEventListener("change", handler);
 	}, [mode]);
 	useEffect(() => {
-		syncThemeToDom({ resolvedTheme });
-	}, [resolvedTheme]);
+		syncThemeToDom({
+			resolvedTheme,
+			...syncDomExtras
+		});
+	}, [resolvedTheme, syncDomExtras]);
 	const setMode = useCallback((next) => {
 		if (!isControlled) {
 			setUncontrolledMode(next);
@@ -26279,4 +26502,4 @@ var ViewTransitionImageGallery = () => {
 	});
 };
 //#endregion
-export { AccentShardCard, AcrobaticPreloader, ActivateButton, AdjoinedFilters, AirplaneAnimation, AlienSkeuomorphicLoaders, AnimatedBlendedCard, AnimatedHeroTitle, AnimatedHoverButton, AnimatedHoverGlowButton, AnimatedIconsNav, AnimatedShareMenu, ApertureVideo, Appearance, AreaLight, AuroraButton, AutoMasonryGrid, AvatarHover, BackgroundCircles, BackgroundSlider, BaseLogger, BlurVignette, BlurredBackground, BoldHamburger, BorderGradient, BorderLink, BouncyClock, BrandCard, BreakingProgress, BubblyParticlesButton, BugsPage, BulletsCarousel, BurningButton, ButtonBase, ButtonHoverFill, ButtonShimmer, ButtonWithDot, CanOfDigits, CaptionCard, CardCarousel, CardDetails, CardGlow, CardMarquee, CardTile, ChaseLoader, Checkbox, CheckboxBase, ChequeredCard, Chips, ChromaticAberration, CircleDotsLoader, CircleLinesAnimation, CircleLink, CircleParticles, CircleTextHover, ClaymorphicHeart, ClearInput, ClickButtonParticles, ClickSpark, Cluster, CollapseAnimation, ColorfulButtons, ComingSoonBadge, ComplexGradient, ConfettiButton, Container, ContrastBackgroundText, Counter, CoverFlowGallery, CubeLoader, CurtainRevealMenu, DDDButton, DDDHoverCard, DDDRangeSlider, DailClock, DarkMatterButton, DarkMatterMouseEffect, DaySwitch, DenseGrid, DetachedMenu, DialControl, DialFuturistic, DialogBase, DissolveElementEffect, Dock, DockButton, DockHas, DockMotion, DoubleArrowButton, DoubleArrowCollabButton, DoubleStateButton, DropdownMenu, Duck, DynamicIconButton, DynamicIsland, EchoClickButton, ElasticCursor, ElectrifiedButton, ElectrifiedButtonGS, EmailInput, EmojiLayer, EndlessLoader, EnlightenedText, EnvelopeTile, Expand, FadeUp, FailedDownloadButton, FeedbackReactions, FigmaLogo, FileIcons, Fingerprint, FlipChips, FloatingLabelInput, FluidGooeyTextBackground, FootprintButton, FormField, ForwardArrowLink, FullScreenImageCarousel, Futuristic3DHoverMenu, GalaxyButton, GalleryReverseScroll, GlassIcon, GlassMusicPlayer, GlassSwitch, GlassToolbar, GlideImageGallery, GlidingReveal, GlitterCard, GlowButton, GlowSlider, GlowingDropdown, GlowingInput, GlowingShadows, GlowingTabs, GlowingTabs2, GlowingText, GlowingTile, GoHoverButton, GodRaysButton, GooeyButton, GradientBorder, GradientGlowingTile, GrainyGradientText, GravityButton, Grid3DCards, GridAccordion, GridHover, GridViewTransition, HamburgerMusic, HamburgerX, Header, HeartFoldButton, HoldSubmitButton, HoverGlowButton, HoverTile, Hoverable3DCard, ITEMS, Illumination, ImageCard, ImageClipping, IndeterminateCheckboxes, InfiniteLoader, InputBase, InputFirework, InvertedRadius, Ios15Button, IosSwitch, JellyText, LandingXYScroll, LayeredComponents, LeaningCards, ListItemHover, LoaderGenerator, LoadingBook, LoadingWave, Lock, LoveGlow, MagicMouseEffect, MagicalText, MagneticButton, MagnifiedNavItems, MetalCircleController, MinimalisticAccordion, MinimalisticGlassButton, MobileNavBar, MorphingSubmitButton, MotionClock, MotionDigits, MouseMoveGallery, MultiGradientBackground, MultiStageButton, MultipathSvgAnimation, NamedPointer, NavigationMenu, NeonButton, NeonToggleSwitch, NeumorphicAnalogClock, NeumorphicLogo, NeumorphicSlider, NeuromorphicToggle, NewsletterInput, NoisyButton, NotificationBell, OffTrackPreloader, OrbitalSubmitButton, PaintedLink, PaperPlanButton, ParallaxEmoji, ParallaxMenu, PasswordInput, PhotoCard, PhotoZoom, PianoNav, PieLoader, PinDropdown, PlayPauseButton, PlayPauseMusicButton, PolaroidStack, PopoverBase, Portal, PositionHover, PredictionButton, ProductTile, ProfileCard, ProgressButton, PsychedelicButton, PulseInLoader, PulseOutLoader, QuickTimeClock, REQUIRED_SEMANTIC_VARS, RadialMenu, RadialNavigation, RadioHopping, RadioParticles, RadioRolling, RadioSlidingFocus, RaysBackground, RealisticSmoke, RedirectPage, RegularLink, RepostButton, RevealImageAnimation, RhombusGallery, RingLoader, RotatedCardsCarousel, RoundScaleLoader, RubberButton, RunningButton, SchrodingerFormControls, ScrambledText, ScramblingLetters, ScrollCountdown, ScrollDrivenTextBlowOut, ScrollTextHighlight, ScrollTimeline, ScrollWithLight, Scroller, ScrollingTextReveal, SearchInput, SegmentedControls, SegmentedToggle, SelectBase, ShadowedCardsList, ShadowedClick, ShakingText, ShakyLine, ShapeSelection, ShimmerButton, ShimmeringBorderGradient, ShineAnimation, ShineCard, ShiningText, ShinyButton, ShinyCtaButton, SignatureAnimation, SinglePopoverMenu, SkateboardPreloader, SkeuomorphicLikeButton, SlideIn, SlidingButton, SlidingIcon, SlidingImages, SlidingStepper, Slot, Slottable, SmileyPreloader, SmokeTextDisappearance, SmoothScroll, SnowballPreloader, SolarEclipse, SparkleButton, SparklyButton, SpeechToText, SpinningClickAnimation, SpiralLoadingText, SplashCursor, SquircleAvatar, SquishButton, Stack, StackingCards, StaticSolarEclipse, StickyHeader, StickyList, StretchToggle, StretchyLoader, StrikethroughCheckbox, StrikethroughCheckboxes, StuntPreloader, SubtleBorderAnimation, SuccessLoader, SuccessLoadingButton, SwitchBase, TabBarAnimation, TextImageHover, TextMorphing, TextOutline, TextShadow, Texture, ThanosDisappearEffect, ThanosDisappearEffectList, ThanosDissolve, ThemeProvider, ThreadsLikeButton, ThreeDotsLoader, ThumbsUpButton, Ticker, TicklishButton, TimeCirclesLoader, TippingSwitch, Toasts, ToggleBubble, ToggleClipPath, Token, Tooltip, TooltipBase, TooltipRangeSlider, TranslucentBackdrop, TrickButton, TurbulenceFilter, UnderlinedLink, UnderlinedLink2, ViewTransitionAddToCard, ViewTransitionImageGallery, VisuallyHidden, VoiceAnimation, WavyMenu, WebGLSmoke, WeightText, animationDuration, animationLogger, apiLogger, chain, clearSession, componentLogger, createBoundedMap, createPresenceVariants, delay, distance, easing, eventLogger, fadePresence, formatDuration, formatTime, getCurrentLogLevel, getPath, getVarName, hookLogger, is, isDebugEnabled, isNonNullable, keys, lerp, lineEq, logger, mergeRefs, move, noop, normalizeError, notReachable, resolveToken, scalePresence, setLogLevel, setRequestId, setSessionId, slideDownPresence, slideUpPresence, springPreset, staggerDelay, startViewTransition, storageLogger, supportsViewTransitions, times, useAnimatedText, useBowser, useControllableState, useDebounce, useEffectEvent, useFormField, useFormFieldContext, useGsapContext, useInterval, useLiveRef, useMatchMedia, useMergeRefs, useOklch, useOutsideClick, usePreviousRender, usePreviousState, useRaf, useReducedMotion, useTheme, useThrottle, useTimeout, useUniversalLayoutEffect, useWindowReady, utilsLogger, validateColorScheme, values, wait };
+export { AccentShardCard, AcrobaticPreloader, ActivateButton, AdjoinedFilters, AirplaneAnimation, AlienSkeuomorphicLoaders, AnimatedBlendedCard, AnimatedHeroTitle, AnimatedHoverButton, AnimatedHoverGlowButton, AnimatedIconsNav, AnimatedShareMenu, ApertureVideo, Appearance, AreaLight, AuroraButton, AutoMasonryGrid, AvatarHover, BackgroundCircles, BackgroundSlider, BaseLogger, BlurVignette, BlurredBackground, BoldHamburger, BorderGradient, BorderLink, BouncyClock, BrandCard, BreakingProgress, BubblyParticlesButton, BugsPage, BulletsCarousel, BurningButton, ButtonBase, ButtonHoverFill, ButtonShimmer, ButtonWithDot, CanOfDigits, CaptionCard, CardCarousel, CardDetails, CardGlow, CardMarquee, CardTile, ChaseLoader, Checkbox, CheckboxBase, ChequeredCard, Chips, ChromaticAberration, CircleDotsLoader, CircleLinesAnimation, CircleLink, CircleParticles, CircleTextHover, ClaymorphicHeart, ClearInput, ClickButtonParticles, ClickSpark, Cluster, CollapseAnimation, ColorfulButtons, ComingSoonBadge, ComplexGradient, ConfettiButton, Container, ContrastBackgroundText, Counter, CoverFlowGallery, CubeLoader, CurtainRevealMenu, DDDButton, DDDHoverCard, DDDRangeSlider, DailClock, DarkMatterButton, DarkMatterMouseEffect, DaySwitch, DenseGrid, DetachedMenu, DialControl, DialFuturistic, DialogBase, DissolveElementEffect, Dock, DockButton, DockHas, DockMotion, DoubleArrowButton, DoubleArrowCollabButton, DoubleStateButton, DropdownMenu, Duck, DynamicIconButton, DynamicIsland, EchoClickButton, ElasticCursor, ElectrifiedButton, ElectrifiedButtonGS, EmailInput, EmojiLayer, EndlessLoader, EnlightenedText, EnvelopeTile, Expand, FadeUp, FailedDownloadButton, FeedbackReactions, FigmaLogo, FileIcons, Fingerprint, FlipChips, FloatingLabelInput, FluidGooeyTextBackground, FootprintButton, FormField, ForwardArrowLink, FullScreenImageCarousel, Futuristic3DHoverMenu, GalaxyButton, GalleryReverseScroll, GlassIcon, GlassMusicPlayer, GlassSwitch, GlassToolbar, GlideImageGallery, GlidingReveal, GlitterCard, GlowButton, GlowSlider, GlowingDropdown, GlowingInput, GlowingShadows, GlowingTabs, GlowingTabs2, GlowingText, GlowingTile, GoHoverButton, GodRaysButton, GooeyButton, GradientBorder, GradientGlowingTile, GrainyGradientText, GravityButton, Grid3DCards, GridAccordion, GridHover, GridViewTransition, HamburgerMusic, HamburgerX, Header, HeartFoldButton, HoldSubmitButton, HoverGlowButton, HoverTile, Hoverable3DCard, ITEMS, Illumination, ImageCard, ImageClipping, IndeterminateCheckboxes, InfiniteLoader, InputBase, InputFirework, InvertedRadius, Ios15Button, IosSwitch, JellyText, LandingXYScroll, LayeredComponents, LeaningCards, ListItemHover, LoaderGenerator, LoadingBook, LoadingWave, Lock, LoveGlow, MagicMouseEffect, MagicalText, MagneticButton, MagnifiedNavItems, MetalCircleController, MinimalisticAccordion, MinimalisticGlassButton, MobileNavBar, MorphingSubmitButton, MotionClock, MotionDigits, MouseMoveGallery, MultiGradientBackground, MultiStageButton, MultipathSvgAnimation, NamedPointer, NavigationMenu, NeonButton, NeonToggleSwitch, NeumorphicAnalogClock, NeumorphicLogo, NeumorphicSlider, NeuromorphicToggle, NewsletterInput, NoisyButton, NotificationBell, OffTrackPreloader, OrbitalSubmitButton, PaintedLink, PaperPlanButton, ParallaxEmoji, ParallaxMenu, PasswordInput, PhotoCard, PhotoZoom, PianoNav, PieLoader, PinDropdown, PlayPauseButton, PlayPauseMusicButton, PolaroidStack, PopoverBase, Portal, PositionHover, PredictionButton, ProductTile, ProfileCard, ProgressButton, PsychedelicButton, PulseInLoader, PulseOutLoader, QuickTimeClock, REQUIRED_SEMANTIC_VARS, RadialMenu, RadialNavigation, RadioHopping, RadioParticles, RadioRolling, RadioSlidingFocus, RaysBackground, RealisticSmoke, RedirectPage, ReflectiveButton, RegularLink, RepostButton, RevealImageAnimation, RhombusGallery, RingLoader, RotatedCardsCarousel, RoundScaleLoader, RubberButton, RunningButton, SchrodingerFormControls, ScrambledText, ScramblingLetters, ScrollCountdown, ScrollDrivenTextBlowOut, ScrollTextHighlight, ScrollTimeline, ScrollWithLight, Scroller, ScrollingTextReveal, SearchInput, SegmentedControls, SegmentedToggle, SelectBase, ShadowedCardsList, ShadowedClick, ShakingText, ShakyLine, ShapeSelection, ShimmerButton, ShimmeringBorderGradient, ShineAnimation, ShineCard, ShiningText, ShinyCtaButton, SignatureAnimation, SinglePopoverMenu, SkateboardPreloader, SkeuomorphicLikeButton, SlideIn, SlidingButton, SlidingIcon, SlidingImages, SlidingStepper, Slot, Slottable, SmileyPreloader, SmokeTextDisappearance, SmoothScroll, SnowballPreloader, SolarEclipse, SparkleButton, SparklyButton, SpeechToText, SpinningClickAnimation, SpiralLoadingText, SplashCursor, SquircleAvatar, SquishButton, Stack, StackingCards, StaticSolarEclipse, StickyHeader, StickyList, StretchToggle, StretchyLoader, StrikethroughCheckbox, StrikethroughCheckboxes, StuntPreloader, SubtleBorderAnimation, SuccessLoader, SuccessLoadingButton, SwitchBase, TabBarAnimation, TextImageHover, TextMorphing, TextOutline, TextShadow, Texture, ThanosDisappearEffect, ThanosDisappearEffectList, ThanosDissolve, ThemeProvider, ThreadsLikeButton, ThreeDotsLoader, ThumbsUpButton, Ticker, TicklishButton, TimeCirclesLoader, TippingSwitch, Toasts, ToggleBubble, ToggleClipPath, Token, Tooltip, TooltipBase, TooltipRangeSlider, TranslucentBackdrop, TrickButton, TurbulenceFilter, UnderlinedLink, UnderlinedLink2, ViewTransitionAddToCard, ViewTransitionImageGallery, VisuallyHidden, VoiceAnimation, WavyMenu, WebGLSmoke, WeightText, animationDuration, animationLogger, apiLogger, chain, clearSession, componentLogger, createBoundedMap, createPresenceVariants, delay, distance, easing, eventLogger, fadePresence, formatDuration, formatTime, getCurrentLogLevel, getPath, getVarName, hookLogger, is, isDebugEnabled, isNonNullable, keys, lerp, lineEq, logger, mergeRefs, move, noop, normalizeError, notReachable, resolveToken, scalePresence, setLogLevel, setRequestId, setSessionId, slideDownPresence, slideUpPresence, springPreset, staggerDelay, startViewTransition, storageLogger, supportsViewTransitions, times, useAnimatedText, useBowser, useControllableState, useDebounce, useEffectEvent, useFormField, useFormFieldContext, useGsapContext, useInterval, useLiveRef, useMatchMedia, useMergeRefs, useOklch, useOutsideClick, usePreviousRender, usePreviousState, useRaf, useReducedMotion, useTheme, useThrottle, useTimeout, useUniversalLayoutEffect, useWindowReady, utilsLogger, validateColorScheme, values, wait };