xiod-ui 1.0.0

package/dist/components/waveform.js

@@ -0,0 +1,500 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/waveform.tsx
+const WaveformContext = React$1.createContext(null);
+function useWaveform() {
+	const context = React$1.useContext(WaveformContext);
+	if (!context) throw new Error("Waveform components must be wrapped in <Waveform />");
+	return context;
+}
+function generateDeterministicData(length, seed) {
+	const data = [];
+	let currentSeed = seed;
+	const rand = () => {
+		currentSeed = (currentSeed * 1664525 + 1013904223) % 4294967296;
+		return currentSeed / 4294967296;
+	};
+	for (let i = 0; i < length; i++) {
+		const wave1 = Math.sin(i * .1) * .25;
+		const wave2 = Math.cos(i * .05) * .15;
+		const randomVal = rand() * .3;
+		const val = Math.max(.08, Math.min(.9, .45 + wave1 + wave2 + randomVal));
+		data.push(val);
+	}
+	return data;
+}
+function Waveform({ children, className, value: controlledValue, defaultValue, onValueChange, duration = 1, active = false, processing = false, mode = "static", microphone = false, deviceId, barWidth = 3, barGap = 2, barRadius = 1.5, barColor, progressColor, fadeEdges = true, fadeWidth = 24, sensitivity = 1, updateRate = 30, seed = 42, data, ...props }) {
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? 0);
+	const value = controlledValue !== void 0 ? controlledValue : internalValue;
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const canvasRef = React$1.useRef(null);
+	const containerRef = React$1.useRef(null);
+	const liveDataRef = React$1.useRef([]);
+	const needsRedrawRef = React$1.useRef(true);
+	const audioContextRef = React$1.useRef(null);
+	const analyserRef = React$1.useRef(null);
+	const streamRef = React$1.useRef(null);
+	const triggerRedraw = React$1.useCallback(() => {
+		needsRedrawRef.current = true;
+	}, []);
+	const seekTo = React$1.useCallback((clientX) => {
+		const container = containerRef.current;
+		if (!container) return;
+		const rect = container.getBoundingClientRect();
+		const newValue = Math.max(0, Math.min(clientX - rect.left, rect.width)) / rect.width * duration;
+		if (controlledValue === void 0) setInternalValue(newValue);
+		onValueChange?.(newValue);
+		triggerRedraw();
+	}, [
+		duration,
+		onValueChange,
+		controlledValue,
+		triggerRedraw
+	]);
+	React$1.useEffect(() => {
+		if (!active || !microphone) {
+			if (streamRef.current) {
+				streamRef.current.getTracks().forEach((track) => {
+					track.stop();
+				});
+				streamRef.current = null;
+			}
+			if (audioContextRef.current && audioContextRef.current.state !== "closed") {
+				audioContextRef.current.close();
+				audioContextRef.current = null;
+			}
+			analyserRef.current = null;
+			return;
+		}
+		const setupMicrophone = async () => {
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia({ audio: deviceId ? {
+					deviceId: { exact: deviceId },
+					echoCancellation: true,
+					noiseSuppression: true,
+					autoGainControl: true
+				} : {
+					echoCancellation: true,
+					noiseSuppression: true,
+					autoGainControl: true
+				} });
+				streamRef.current = stream;
+				const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+				const analyser = audioContext.createAnalyser();
+				analyser.fftSize = 256;
+				analyser.smoothingTimeConstant = .8;
+				audioContext.createMediaStreamSource(stream).connect(analyser);
+				audioContextRef.current = audioContext;
+				analyserRef.current = analyser;
+				liveDataRef.current = [];
+			} catch (err) {
+				console.error("Microphone access failed in Waveform root:", err);
+			}
+		};
+		setupMicrophone();
+		return () => {
+			if (streamRef.current) streamRef.current.getTracks().forEach((track) => {
+				track.stop();
+			});
+			if (audioContextRef.current && audioContextRef.current.state !== "closed") audioContextRef.current.close();
+		};
+	}, [
+		active,
+		microphone,
+		deviceId
+	]);
+	React$1.useEffect(() => {
+		if (!active || !microphone) return;
+		let rafId;
+		let lastTime = 0;
+		const captureSample = (time) => {
+			if (time - lastTime >= updateRate && analyserRef.current) {
+				lastTime = time;
+				const bufferLength = analyserRef.current.frequencyBinCount;
+				const dataArray = new Uint8Array(bufferLength);
+				analyserRef.current.getByteFrequencyData(dataArray);
+				const start = Math.floor(bufferLength * .05);
+				const end = Math.floor(bufferLength * .45);
+				const sampleSlice = dataArray.slice(start, end);
+				if (mode === "scrolling") {
+					let sum = 0;
+					for (let i = 0; i < sampleSlice.length; i++) sum += sampleSlice[i];
+					const avg = sum / sampleSlice.length / 255 * sensitivity;
+					liveDataRef.current.push(Math.min(1, Math.max(.08, avg)));
+					if (liveDataRef.current.length > 120) liveDataRef.current.shift();
+				} else {
+					const bars = [];
+					const count = Math.max(10, Math.floor((containerRef.current?.getBoundingClientRect().width || 300) / (barWidth + barGap)));
+					const half = Math.floor(count / 2);
+					for (let i = 0; i < half; i++) {
+						const dataIdx = Math.floor(i / half * sampleSlice.length);
+						const val = Math.min(1, sampleSlice[dataIdx] / 255 * sensitivity);
+						bars.unshift(Math.max(.06, val));
+					}
+					for (let i = 0; i < half; i++) {
+						const dataIdx = Math.floor(i / half * sampleSlice.length);
+						const val = Math.min(1, sampleSlice[dataIdx] / 255 * sensitivity);
+						bars.push(Math.max(.06, val));
+					}
+					liveDataRef.current = bars;
+				}
+				needsRedrawRef.current = true;
+			}
+			rafId = requestAnimationFrame(captureSample);
+		};
+		rafId = requestAnimationFrame(captureSample);
+		return () => cancelAnimationFrame(rafId);
+	}, [
+		active,
+		microphone,
+		mode,
+		barWidth,
+		barGap,
+		sensitivity,
+		updateRate
+	]);
+	React$1.useEffect(() => {
+		if (!processing || active) return;
+		let rafId;
+		let time = 0;
+		const generateWave = () => {
+			time += .04;
+			const count = Math.max(10, Math.floor((containerRef.current?.getBoundingClientRect().width || 300) / (barWidth + barGap)));
+			const bars = [];
+			if (mode === "scrolling") {
+				const val = Math.min(1, Math.max(.08, .35 + Math.sin(time) * .2 + Math.cos(time * 1.7) * .1));
+				liveDataRef.current.push(val);
+				if (liveDataRef.current.length > 120) liveDataRef.current.shift();
+			} else {
+				const half = Math.floor(count / 2);
+				for (let i = 0; i < count; i++) {
+					const normDist = (i - half) / half;
+					const amplitudeWeight = 1 - Math.abs(normDist) * .45;
+					const sine1 = Math.sin(time * 1.6 + normDist * 3.5) * .25;
+					const sine2 = Math.sin(time * .9 - normDist * 2.2) * .18;
+					const sine3 = Math.cos(time * 2.4 + normDist) * .12;
+					const combined = sine1 + sine2 + sine3;
+					bars.push(Math.max(.06, Math.min(1, (.35 + combined) * amplitudeWeight)));
+				}
+				liveDataRef.current = bars;
+			}
+			needsRedrawRef.current = true;
+			rafId = requestAnimationFrame(generateWave);
+		};
+		rafId = requestAnimationFrame(generateWave);
+		return () => cancelAnimationFrame(rafId);
+	}, [
+		processing,
+		active,
+		mode,
+		barWidth,
+		barGap
+	]);
+	React$1.useEffect(() => {
+		triggerRedraw();
+		const t1 = setTimeout(triggerRedraw, 50);
+		const t2 = setTimeout(triggerRedraw, 250);
+		const t3 = setTimeout(triggerRedraw, 1e3);
+		let observer = null;
+		if (typeof document !== "undefined") {
+			observer = new MutationObserver(() => {
+				triggerRedraw();
+			});
+			observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+		}
+		return () => {
+			clearTimeout(t1);
+			clearTimeout(t2);
+			clearTimeout(t3);
+			if (observer) observer.disconnect();
+		};
+	}, [triggerRedraw]);
+	const contextValue = React$1.useMemo(() => ({
+		value,
+		duration,
+		onValueChange,
+		active,
+		processing,
+		mode,
+		barWidth,
+		barGap,
+		barRadius,
+		barColor,
+		progressColor,
+		fadeEdges,
+		fadeWidth,
+		sensitivity,
+		updateRate,
+		seed,
+		data,
+		canvasRef,
+		containerRef,
+		isDragging,
+		setIsDragging,
+		seekTo,
+		liveDataRef,
+		needsRedrawRef,
+		triggerRedraw
+	}), [
+		value,
+		duration,
+		onValueChange,
+		active,
+		processing,
+		mode,
+		barWidth,
+		barGap,
+		barRadius,
+		barColor,
+		progressColor,
+		fadeEdges,
+		fadeWidth,
+		sensitivity,
+		updateRate,
+		seed,
+		data,
+		isDragging,
+		seekTo,
+		triggerRedraw
+	]);
+	return /* @__PURE__ */ jsx(WaveformContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			"data-slot": "waveform",
+			className: cn("relative w-full select-none flex items-center justify-center min-h-[64px]", className),
+			...props,
+			children: children || /* @__PURE__ */ jsx(WaveformVisual, {})
+		})
+	});
+}
+function WaveformVisual({ className, ...props }) {
+	const { canvasRef, containerRef, data, seed, mode, active, processing, barWidth, barGap, barRadius, barColor, progressColor, fadeEdges, fadeWidth, value, duration, liveDataRef, needsRedrawRef } = useWaveform();
+	const animationRef = React$1.useRef(0);
+	const gradientCacheRef = React$1.useRef(null);
+	const lastWidthRef = React$1.useRef(0);
+	React$1.useEffect(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) return;
+		const resizeObserver = new ResizeObserver(() => {
+			const rect = container.getBoundingClientRect();
+			const dpr = window.devicePixelRatio || 1;
+			canvas.width = rect.width * dpr;
+			canvas.height = rect.height * dpr;
+			canvas.style.width = `${rect.width}px`;
+			canvas.style.height = `${rect.height}px`;
+			const ctx = canvas.getContext("2d");
+			if (ctx) ctx.scale(dpr, dpr);
+			gradientCacheRef.current = null;
+			lastWidthRef.current = rect.width;
+			needsRedrawRef.current = true;
+		});
+		resizeObserver.observe(container);
+		return () => resizeObserver.disconnect();
+	}, [
+		canvasRef,
+		containerRef,
+		needsRedrawRef
+	]);
+	React$1.useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const draw = () => {
+			if (!needsRedrawRef.current) {
+				animationRef.current = requestAnimationFrame(draw);
+				return;
+			}
+			const rect = canvas.getBoundingClientRect();
+			if (rect.width === 0 || rect.height === 0) {
+				animationRef.current = requestAnimationFrame(draw);
+				return;
+			}
+			ctx.clearRect(0, 0, rect.width, rect.height);
+			const style = getComputedStyle(canvas);
+			const computedBarColor = barColor || style.getPropertyValue("--border").trim() || style.getPropertyValue("--color-border").trim() || "rgba(0, 0, 0, 0.16)";
+			const computedProgressColor = progressColor || style.getPropertyValue("--primary").trim() || style.getPropertyValue("--color-primary").trim() || "#000";
+			const step = barWidth + barGap;
+			const barCount = Math.floor(rect.width / step);
+			const centerY = rect.height / 2;
+			let currentBars = [];
+			const hasLiveData = active || processing;
+			if (hasLiveData) currentBars = [...liveDataRef.current];
+			else if (data && data.length > 0) currentBars = data;
+			else currentBars = generateDeterministicData(barCount, seed);
+			const progressFraction = duration > 0 ? Math.min(1, Math.max(0, value / duration)) : 0;
+			const progressX = rect.width * progressFraction;
+			if (mode === "scrolling" && hasLiveData) for (let i = 0; i < barCount && i < currentBars.length; i++) {
+				const valIndex = currentBars.length - 1 - i;
+				const val = currentBars[valIndex] || .08;
+				const x = rect.width - (i + 1) * step;
+				const height = Math.max(4, val * rect.height * .82);
+				const y = centerY - height / 2;
+				ctx.fillStyle = computedProgressColor;
+				ctx.globalAlpha = .45 + val * .55;
+				if (barRadius > 0) {
+					ctx.beginPath();
+					ctx.roundRect(x, y, barWidth, height, barRadius);
+					ctx.fill();
+				} else ctx.fillRect(x, y, barWidth, height);
+			}
+			else {
+				Math.min(barCount, currentBars.length);
+				for (let i = 0; i < barCount; i++) {
+					const dataIndex = Math.min(currentBars.length - 1, Math.floor(i / barCount * currentBars.length));
+					const val = currentBars[dataIndex] || .08;
+					const x = i * step;
+					const height = Math.max(4, val * rect.height * .82);
+					const y = centerY - height / 2;
+					const isPlayed = x < progressX && !hasLiveData;
+					ctx.fillStyle = isPlayed ? computedProgressColor : computedBarColor;
+					ctx.globalAlpha = isPlayed ? 1 : .45;
+					if (barRadius > 0) {
+						ctx.beginPath();
+						ctx.roundRect(x, y, barWidth, height, barRadius);
+						ctx.fill();
+					} else ctx.fillRect(x, y, barWidth, height);
+				}
+			}
+			if (fadeEdges && fadeWidth > 0) {
+				if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {
+					const gradient = ctx.createLinearGradient(0, 0, rect.width, 0);
+					const fadePercent = Math.min(.35, fadeWidth / rect.width);
+					gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
+					gradient.addColorStop(fadePercent, "rgba(255, 255, 255, 0)");
+					gradient.addColorStop(1 - fadePercent, "rgba(255, 255, 255, 0)");
+					gradient.addColorStop(1, "rgba(255, 255, 255, 1)");
+					gradientCacheRef.current = gradient;
+					lastWidthRef.current = rect.width;
+				}
+				ctx.globalCompositeOperation = "destination-out";
+				ctx.fillStyle = gradientCacheRef.current;
+				ctx.fillRect(0, 0, rect.width, rect.height);
+				ctx.globalCompositeOperation = "source-over";
+			}
+			ctx.globalAlpha = 1;
+			needsRedrawRef.current = active || processing;
+			animationRef.current = requestAnimationFrame(draw);
+		};
+		animationRef.current = requestAnimationFrame(draw);
+		return () => cancelAnimationFrame(animationRef.current);
+	}, [
+		canvasRef,
+		barWidth,
+		barGap,
+		barRadius,
+		barColor,
+		progressColor,
+		fadeEdges,
+		fadeWidth,
+		value,
+		duration,
+		mode,
+		active,
+		processing,
+		data,
+		seed,
+		liveDataRef,
+		needsRedrawRef
+	]);
+	return /* @__PURE__ */ jsx("canvas", {
+		"aria-hidden": "true",
+		ref: canvasRef,
+		"data-slot": "waveform-visual",
+		className: cn("block w-full h-full text-foreground border-border", className),
+		...props
+	});
+}
+function WaveformScrubber({ className, ...props }) {
+	const { value, duration, onValueChange, seekTo, setIsDragging, triggerRedraw } = useWaveform();
+	const handlePointerDown = (e) => {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		setIsDragging(true);
+		seekTo(e.clientX);
+	};
+	const handlePointerMove = (e) => {
+		if (e.currentTarget.hasPointerCapture(e.pointerId)) seekTo(e.clientX);
+	};
+	const handlePointerUp = (e) => {
+		e.currentTarget.releasePointerCapture(e.pointerId);
+		setIsDragging(false);
+	};
+	const handleKeyDown = (e) => {
+		let delta = 0;
+		const stepSize = duration * .01;
+		const largeStepSize = duration * .1;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				delta = stepSize;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				delta = -stepSize;
+				break;
+			case "PageUp":
+				delta = largeStepSize;
+				break;
+			case "PageDown":
+				delta = -largeStepSize;
+				break;
+			case "Home":
+				onValueChange?.(0);
+				triggerRedraw();
+				return;
+			case "End":
+				onValueChange?.(duration);
+				triggerRedraw();
+				return;
+			default: return;
+		}
+		e.preventDefault();
+		const newValue = Math.min(duration, Math.max(0, value + delta));
+		onValueChange?.(newValue);
+		triggerRedraw();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "slider",
+		"aria-label": "Audio waveform scrubber",
+		"aria-valuemin": 0,
+		"aria-valuemax": duration,
+		"aria-valuenow": value,
+		tabIndex: 0,
+		"data-slot": "waveform-scrubber",
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerUp,
+		onKeyDown: handleKeyDown,
+		className: cn("absolute inset-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md select-none", "pointer-coarse:after:absolute pointer-coarse:after:inset-y-[-12px] pointer-coarse:after:inset-x-0 pointer-coarse:after:min-h-[44px]", className),
+		...props
+	});
+}
+function WaveformHandle({ className, render, ...props }) {
+	const { value, duration } = useWaveform();
+	const progressPercent = `${(duration > 0 ? Math.min(1, Math.max(0, value / duration)) : 0) * 100}%`;
+	const defaultProps = {
+		"data-slot": "waveform-handle",
+		className: cn("absolute top-1/2 -translate-y-1/2 size-4.5 sm:size-4 rounded-full bg-primary border-2 border-background shadow-md/20 pointer-events-none transition-transform duration-100 ease-out", className),
+		style: {
+			left: progressPercent,
+			transform: "translate(-50%, -50%)"
+		}
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Waveform, WaveformHandle, WaveformScrubber, WaveformVisual, useWaveform };

package/dist/components/wheel-picker.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/wheel-picker.d.ts
+interface WheelPickerGroupContextValue {
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+  register: (existingIndex: number | null, ref: HTMLDivElement) => number;
+  getPickerRef: (index: number) => HTMLDivElement | null;
+  getPickerIndices: () => number[];
+}
+export declare function useWheelPickerGroup(): WheelPickerGroupContextValue | null;
+export interface WheelPickerGroupProps extends React$1.ComponentPropsWithoutRef<"div"> {
+  children: React$1.ReactNode;
+}
+export declare function WheelPickerGroup({ className, children, ...props }: WheelPickerGroupProps): React$1.JSX.Element;
+export type WheelPickerValue = string | number;
+export interface WheelPickerOption<T extends WheelPickerValue = WheelPickerValue> {
+  value: T;
+  label: React$1.ReactNode;
+  textValue?: string;
+  disabled?: boolean;
+}
+export interface WheelPickerClassNames {
+  optionItem?: string;
+  highlightWrapper?: string;
+  highlightItem?: string;
+}
+export declare const wheelPickerVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface WheelPickerProps<T extends WheelPickerValue = WheelPickerValue> extends Omit<React$1.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange">, VariantProps<typeof wheelPickerVariants> {
+  options: WheelPickerOption<T>[];
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+  infinite?: boolean;
+  visibleCount?: number;
+  dragSensitivity?: number;
+  scrollSensitivity?: number;
+  optionItemHeight?: number;
+  classNames?: WheelPickerClassNames;
+}
+export declare function WheelPicker<T extends WheelPickerValue = WheelPickerValue>({ className, options: optionsProp, value: valueProp, defaultValue, onValueChange, infinite, visibleCount, dragSensitivity, scrollSensitivity, optionItemHeight, classNames, size, ...props }: WheelPickerProps<T>): React$1.JSX.Element;
+//#endregion