@ctrl-ui/react 0.8.13 → 0.8.15

package/dist/audio-device-select.d.ts

@@ -0,0 +1,38 @@
+import { Button } from "./ui/button.js";
+import { AudioDeviceSelectKnobStyle } from "./knob-contracts/audio-device-select-knobs.js";
+import { SelectContent, SelectItem, SelectProps, SelectTriggerProps } from "./ui/select.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/audio-device-select.d.ts
+export type AudioDevice = {
+  deviceId: string;
+  label: string;
+  isDefault?: boolean;
+  status?: "available" | "unavailable" | "permission-required";
+};
+export type AudioDevicePermission = "granted" | "prompt" | "denied";
+export type AudioDeviceSelectProps = Omit<SelectProps, "items" | "children"> & {
+  devices: readonly AudioDevice[];
+  loading?: boolean;
+  permission?: AudioDevicePermission;
+  onRequestPermission?: () => void | Promise<void>;
+  allowNone?: boolean;
+  noneLabel?: string;
+  label?: string;
+  error?: string | null;
+  className?: string;
+  children?: ReactNode;
+};
+export declare function AudioDeviceSelect({ devices, value, defaultValue, onValueChange, disabled, loading, permission, onRequestPermission, allowNone, noneLabel, label, error, className, children, ...props }: AudioDeviceSelectProps): import("react").JSX.Element;
+export declare function AudioDeviceSelectTrigger({ children, className, ...props }: SelectTriggerProps): import("react").JSX.Element;
+export declare function AudioDeviceSelectValue({ placeholder }: {
+  placeholder?: string;
+}): import("react").JSX.Element;
+export declare function AudioDeviceSelectContent({ children, ...props }: ComponentProps<typeof SelectContent>): import("react").JSX.Element;
+export declare function AudioDeviceSelectItem(props: ComponentProps<typeof SelectItem>): import("react").JSX.Element;
+export declare function AudioDeviceSelectPreview({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export type AudioDeviceSelectStatusProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & AudioDeviceSelectKnobStyle;
+};
+export declare function AudioDeviceSelectStatus({ className, ...props }: AudioDeviceSelectStatusProps): import("react").JSX.Element | null;
+export declare function AudioDeviceSelectPermission({ children, onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element | null;
+//#endregion

package/dist/audio-device-select.js

@@ -0,0 +1,183 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select.js";
+import { createContext, use, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MicIcon } from "lucide-react";
+//#region src/audio-device-select.tsx
+const AudioDeviceSelectContext = createContext(null);
+function useAudioDeviceSelect() {
+	const context = use(AudioDeviceSelectContext);
+	if (!context) throw new Error("AudioDeviceSelect parts must be rendered inside AudioDeviceSelect.");
+	return context;
+}
+function deviceLabel(device, index = 0) {
+	return device.label.trim() || `Microphone ${index + 1}`;
+}
+function AudioDeviceSelect({ devices, value, defaultValue, onValueChange, disabled = false, loading = false, permission = "granted", onRequestPermission, allowNone = false, noneLabel = "No microphone", label = "Microphone", error = null, className, children, ...props }) {
+	const [internalValue, setInternalValue] = useState(() => defaultValue ?? null);
+	const current = value === void 0 ? internalValue : value;
+	const connected = devices.find((device) => device.deviceId === current) ?? null;
+	const [remembered, setRemembered] = useState(connected);
+	if (connected && (remembered?.deviceId !== connected.deviceId || remembered?.label !== connected.label)) setRemembered(connected);
+	const missing = current !== null && !(allowNone && current === "") && !connected && !loading;
+	const selected = connected ?? (remembered?.deviceId === current ? remembered : null);
+	function handleValueChange(next) {
+		setInternalValue(next);
+		onValueChange?.(next);
+	}
+	return /* @__PURE__ */ jsx(AudioDeviceSelectContext.Provider, {
+		value: {
+			devices,
+			selected,
+			value: current,
+			missing,
+			loading,
+			permission,
+			disabled,
+			allowNone,
+			noneLabel,
+			label,
+			error,
+			onRequestPermission
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-control-ui": "audio-device-select",
+			"data-control-family": "audio-device-select",
+			"data-slot": "root",
+			className: cn("grid min-w-0 gap-2", className),
+			children: /* @__PURE__ */ jsx(Select, {
+				value: current,
+				onValueChange: handleValueChange,
+				disabled: disabled || loading,
+				...props,
+				children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(AudioDeviceSelectTrigger, {}),
+					/* @__PURE__ */ jsx(AudioDeviceSelectContent, {}),
+					/* @__PURE__ */ jsx(AudioDeviceSelectStatus, {}),
+					/* @__PURE__ */ jsx(AudioDeviceSelectPermission, {})
+				] })
+			})
+		})
+	});
+}
+function AudioDeviceSelectTrigger({ children, className, ...props }) {
+	const context = useAudioDeviceSelect();
+	return /* @__PURE__ */ jsx(SelectTrigger, {
+		"data-control-ui": "audio-device-select",
+		"data-slot": "trigger",
+		"data-loading": context.loading ? "true" : void 0,
+		"data-permission": context.permission,
+		"data-missing": context.missing ? "true" : void 0,
+		"aria-label": context.label,
+		"aria-busy": context.loading || void 0,
+		className: cn("w-full", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MicIcon, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0"
+		}), /* @__PURE__ */ jsx(AudioDeviceSelectValue, {})] })
+	});
+}
+function AudioDeviceSelectValue({ placeholder = "Select a microphone" }) {
+	const context = useAudioDeviceSelect();
+	let text = placeholder;
+	if (context.selected) text = deviceLabel(context.selected, context.devices.indexOf(context.selected));
+	if (context.allowNone && context.value === "") text = context.noneLabel;
+	if (context.missing) text = `${context.selected ? deviceLabel(context.selected) : "Unknown device"} (disconnected)`;
+	if (context.loading) text = "Finding devices…";
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "audio-device-select",
+		"data-slot": "value",
+		className: "min-w-0 truncate",
+		title: text,
+		children: text
+	});
+}
+function AudioDeviceSelectContent({ children, ...props }) {
+	const context = useAudioDeviceSelect();
+	return /* @__PURE__ */ jsx(SelectContent, {
+		"data-control-ui": "audio-device-select",
+		"data-slot": "content",
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			context.allowNone ? /* @__PURE__ */ jsx(SelectItem, {
+				value: "",
+				children: context.noneLabel
+			}) : null,
+			context.missing ? /* @__PURE__ */ jsx(SelectItem, {
+				value: context.value ?? "",
+				disabled: true,
+				children: /* @__PURE__ */ jsx(AudioDeviceSelectValue, {})
+			}) : null,
+			context.devices.filter((device) => !context.allowNone || device.deviceId !== "").map((device, index) => /* @__PURE__ */ jsxs(AudioDeviceSelectItem, {
+				value: device.deviceId,
+				label: deviceLabel(device, index),
+				disabled: device.status === "unavailable" || device.status === "permission-required",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: deviceLabel(device, index)
+				}), device.isDefault || device.deviceId === "default" ? /* @__PURE__ */ jsx("span", {
+					className: "ms-3 text-caption text-muted-foreground",
+					children: "Default"
+				}) : null]
+			}, device.deviceId)),
+			context.devices.length === 0 && !context.missing && !context.allowNone ? /* @__PURE__ */ jsx(SelectItem, {
+				value: "__audio-device-empty__",
+				disabled: true,
+				children: context.permission === "granted" ? "No microphones found" : "Allow microphone access to find devices"
+			}) : null
+		] })
+	});
+}
+function AudioDeviceSelectItem(props) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		"data-control-ui": "audio-device-select",
+		"data-slot": "item",
+		...props
+	});
+}
+function AudioDeviceSelectPreview({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "audio-device-select",
+		"data-slot": "preview",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function AudioDeviceSelectStatus({ className, ...props }) {
+	const context = useAudioDeviceSelect();
+	let message = context.error;
+	if (!message && context.permission === "denied") message = "Microphone access is blocked. Allow it in your browser’s site settings.";
+	if (!message && context.missing) message = "This microphone is disconnected. Reconnect it or choose another device.";
+	if (!message) return null;
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "audio-device-select",
+		"data-control-family": "audio-device-select",
+		"data-slot": "status",
+		role: "status",
+		className: cn("text-caption", className),
+		...props,
+		children: message
+	});
+}
+function AudioDeviceSelectPermission({ children = "Allow microphone access", onClick, ...props }) {
+	const context = useAudioDeviceSelect();
+	if (context.permission !== "prompt" || !context.onRequestPermission) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "audio-device-select",
+		"data-slot": "permission",
+		variant: "surface",
+		size: "sm",
+		disabled: context.disabled || context.loading,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.onRequestPermission?.();
+		},
+		...props,
+		children
+	});
+}
+//#endregion
+export { AudioDeviceSelect, AudioDeviceSelectContent, AudioDeviceSelectItem, AudioDeviceSelectPermission, AudioDeviceSelectPreview, AudioDeviceSelectStatus, AudioDeviceSelectTrigger, AudioDeviceSelectValue };

package/dist/audio-visualizer-bar.d.ts

@@ -0,0 +1,10 @@
+import { AudioVisualizerProps } from "./audio-visualizer.js";
+//#region src/audio-visualizer-bar.d.ts
+export type BarAudioVisualizerProps = AudioVisualizerProps & {
+  align?: "center" | "start" | "end";
+  mirrored?: boolean;
+  idle?: "static" | "pulse" | "wave";
+  loading?: boolean;
+};
+export declare function AudioVisualizer({ levels, points, active, align, mirrored, idle, loading, className, style, ...props }: BarAudioVisualizerProps): import("react").JSX.Element;
+//#endregion

package/dist/audio-visualizer-bar.js

@@ -0,0 +1,49 @@
+import { cn } from "./lib/cn.js";
+import { audioVisualizerBands } from "./lib/audio-visualizer-levels.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/audio-visualizer-bar.tsx
+function AudioVisualizer({ levels, points, active = true, align = "center", mirrored = false, idle = "static", loading = false, className, style, ...props }) {
+	const visible = audioVisualizerBands(levels, points, active && !loading, mirrored);
+	const hasSignal = active && !loading && visible.some(({ level }) => level > 0);
+	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "audio-visualizer",
+		"data-control-family": "audio-visualizer",
+		"data-slot": "root",
+		"data-variant": "bar",
+		"data-align": align,
+		"data-mirrored": mirrored ? "true" : void 0,
+		"data-active": hasSignal ? "true" : void 0,
+		"data-loading": loading ? "true" : void 0,
+		"data-idle": idle,
+		role: labelled ? "img" : void 0,
+		"aria-hidden": labelled ? void 0 : true,
+		"aria-busy": loading || void 0,
+		className: cn("shrink-0 overflow-hidden", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "audio-visualizer",
+			"data-control-family": "audio-visualizer",
+			"data-slot": "track",
+			"data-active": hasSignal || loading ? "true" : void 0,
+			children: visible.map(({ key, level }, index) => {
+				const amplitude = Math.sqrt(level);
+				const barStyle = {
+					height: `${(.08 + amplitude * .92) * 100}%`,
+					"--_audio-visualizer-level-opacity": `${.48 + amplitude * .52}`,
+					"--_audio-visualizer-delay": `${-index * 70}ms`
+				};
+				return /* @__PURE__ */ jsx("span", {
+					"data-control-ui": "audio-visualizer",
+					"data-control-family": "audio-visualizer",
+					"data-slot": "bar",
+					"data-index": index,
+					style: barStyle
+				}, key);
+			})
+		})
+	});
+}
+//#endregion
+export { AudioVisualizer };

package/dist/audio-visualizer-line.d.ts

@@ -0,0 +1,4 @@
+import { AudioVisualizerProps } from "./audio-visualizer.js";
+//#region src/audio-visualizer-line.d.ts
+export declare function AudioVisualizer({ levels, points, active, className, style, ...props }: AudioVisualizerProps): import("react").JSX.Element;
+//#endregion

package/dist/audio-visualizer-line.js

@@ -0,0 +1,75 @@
+import { cn } from "./lib/cn.js";
+import { audioVisualizerHistory } from "./lib/audio-visualizer-levels.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/audio-visualizer-line.tsx
+const LINE_VIEWBOX_WIDTH = 100;
+const LINE_VIEWBOX_HEIGHT = 32;
+const LINE_CENTER = LINE_VIEWBOX_HEIGHT / 2;
+const CURVE_TENSION = .18;
+function smoothPath(points) {
+	const [first, ...rest] = points;
+	if (!first) return "";
+	return rest.reduce((path, point, index) => {
+		const previous = points[index] ?? first;
+		const controlOffset = (point.x - previous.x) * CURVE_TENSION;
+		return `${path} C ${(previous.x + controlOffset).toFixed(2)} ${previous.y.toFixed(2)}, ${(point.x - controlOffset).toFixed(2)} ${point.y.toFixed(2)}, ${point.x.toFixed(2)} ${point.y.toFixed(2)}`;
+	}, `M ${first.x.toFixed(2)} ${first.y.toFixed(2)}`);
+}
+function envelopePath(levels) {
+	const envelope = levels.length === 1 ? [levels[0] ?? 0, levels[0] ?? 0] : levels;
+	const step = LINE_VIEWBOX_WIDTH / Math.max(1, envelope.length - 1);
+	const upper = envelope.map((level, index) => ({
+		x: index * step,
+		y: 16 - Math.sqrt(level) * 13
+	}));
+	const lowerReversed = [...envelope.map((level, index) => ({
+		x: index * step,
+		y: 16 + Math.sqrt(level) * 13
+	}))].reverse();
+	return `${smoothPath(upper)} L ${lowerReversed[0]?.x.toFixed(2) ?? 0} ${lowerReversed[0]?.y.toFixed(2) ?? LINE_CENTER}${smoothPath(lowerReversed).replace(/^M [^C]+/, "")} Z`;
+}
+function AudioVisualizer({ levels, points, active = true, className, style, ...props }) {
+	const path = envelopePath(audioVisualizerHistory(levels, points, active).map(({ level }) => level));
+	const pathStyle = { d: `path('${path}')` };
+	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "audio-visualizer",
+		"data-control-family": "audio-visualizer",
+		"data-slot": "root",
+		"data-variant": "line",
+		"data-active": active ? "true" : void 0,
+		role: labelled ? "img" : void 0,
+		"aria-hidden": labelled ? void 0 : true,
+		className: cn("shrink-0 overflow-hidden", className),
+		style,
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			"data-control-ui": "audio-visualizer",
+			"data-control-family": "audio-visualizer",
+			"data-slot": "track",
+			"data-active": active ? "true" : void 0,
+			viewBox: `0 0 ${LINE_VIEWBOX_WIDTH} ${LINE_VIEWBOX_HEIGHT}`,
+			preserveAspectRatio: "none",
+			"aria-hidden": "true",
+			className: "size-full overflow-visible",
+			children: [/* @__PURE__ */ jsx("path", {
+				"data-control-ui": "audio-visualizer",
+				"data-control-family": "audio-visualizer",
+				"data-slot": "baseline",
+				d: `M 0 ${LINE_CENTER} H ${LINE_VIEWBOX_WIDTH}`,
+				vectorEffect: "non-scaling-stroke"
+			}), /* @__PURE__ */ jsx("path", {
+				"data-control-ui": "audio-visualizer-line",
+				"data-control-family": "audio-visualizer",
+				"data-slot": "waveform",
+				d: path,
+				style: pathStyle,
+				strokeWidth: "1",
+				strokeLinejoin: "round",
+				vectorEffect: "non-scaling-stroke"
+			})]
+		})
+	});
+}
+//#endregion
+export { AudioVisualizer };

package/dist/audio-visualizer.d.ts

@@ -2,7 +2,7 @@ import { AudioVisualizerKnobStyle } from "./knob-contracts/audio-visualizer-knob
 import { CSSProperties, ComponentProps } from "react";
 //#region src/audio-visualizer.d.ts
 export type AudioVisualizerProps = Omit<ComponentProps<"div">, "children" | "style"> & {
-  levels: readonly number[];
+  levels: ArrayLike<number>;
   active?: boolean;
   points?: number;
   style?: CSSProperties & AudioVisualizerKnobStyle;

package/dist/audio-visualizer.js

@@ -1,47 +1,74 @@
+"use client";
 import { cn } from "./lib/cn.js";
+import { audioVisualizerHistory } from "./lib/audio-visualizer-levels.js";
+import { useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/audio-visualizer.tsx
-const DEFAULT_POINTS = 28;
-const MAX_POINTS = 128;
-const MIN_VISIBLE_LEVEL = .12;
-function resolveAudioVisualizerLevels(levels, points) {
-	const pointCount = Math.min(MAX_POINTS, Math.max(1, Number.isFinite(points) ? Math.floor(points ?? DEFAULT_POINTS) : DEFAULT_POINTS));
-	const visible = levels.slice(-pointCount).map((level) => Number.isFinite(level) ? Math.min(1, Math.max(0, level)) : 0);
-	return (visible.length === pointCount ? visible : [...new Array(pointCount - visible.length).fill(0), ...visible]).map((level, position) => ({
-		key: `bar-${position}`,
-		level
-	}));
+const MIN_VISIBLE_LEVEL = .04;
+function historyAdvanced(previous, next) {
+	if (!previous?.active || !next.active || previous.levels.length !== next.levels.length || next.levels.length < 2) return false;
+	const moved = previous.levels.slice(1).every((level, index) => level === next.levels[index]);
+	const changed = previous.levels.some((level, index) => level !== next.levels[index]);
+	return moved && changed;
 }
 function AudioVisualizer({ levels, points, active = true, className, style, ...props }) {
-	const visible = resolveAudioVisualizerLevels(levels, points);
+	const visible = audioVisualizerHistory(levels, points, active);
+	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
+	const trackRef = useRef(null);
+	const firstBarRef = useRef(null);
+	const previousSample = useRef(null);
+	useLayoutEffect(() => {
+		const next = {
+			levels: visible.map(({ level }) => level),
+			time: performance.now(),
+			active
+		};
+		const previous = previousSample.current;
+		previousSample.current = next;
+		const track = trackRef.current;
+		const firstBar = firstBarRef.current;
+		if (!track || !firstBar || !historyAdvanced(previous, next) || document.hidden) return;
+		const duration = next.time - (previous?.time ?? next.time);
+		if (duration < 16 || duration > 250 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const direction = getComputedStyle(track).direction === "rtl" ? -1 : 1;
+		const pitch = (track.clientWidth - firstBar.clientWidth) / (visible.length - 1);
+		const animation = track.animate([{ transform: `translateX(${pitch * direction}px)` }, { transform: "translateX(0)" }], {
+			duration,
+			easing: "linear"
+		});
+		return () => animation.cancel();
+	}, [visible, active]);
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "audio-visualizer",
 		"data-control-family": "audio-visualizer",
 		"data-slot": "root",
 		"data-variant": "bars",
 		"data-active": active ? "true" : void 0,
-		"aria-hidden": "true",
-		className: cn("shrink-0 overflow-hidden", className),
+		role: labelled ? "img" : void 0,
+		"aria-hidden": labelled ? void 0 : true,
+		className: cn("shrink-0 overflow-hidden mask-x-from-90%", className),
 		style,
 		...props,
 		children: /* @__PURE__ */ jsx("span", {
+			ref: trackRef,
 			"data-control-ui": "audio-visualizer",
 			"data-control-family": "audio-visualizer",
 			"data-slot": "track",
 			"data-active": active ? "true" : void 0,
-			className: "flex size-full items-stretch justify-end mask-l-from-90% rtl:mask-l-from-100% rtl:mask-r-from-90%",
+			className: "flex size-full items-stretch justify-between",
 			children: visible.map(({ key, level }) => {
 				const perceptualLevel = Math.sqrt(level);
-				const visibleLevel = MIN_VISIBLE_LEVEL + perceptualLevel * .88;
+				const visibleLevel = MIN_VISIBLE_LEVEL + perceptualLevel * .96;
 				const levelStyle = {
 					"--_audio-visualizer-level-opacity": `${.48 + perceptualLevel * .52}`,
 					clipPath: `inset(${(1 - visibleLevel) * 50}% 0 round var(--cui-audio-visualizer-bar-radius))`
 				};
 				return /* @__PURE__ */ jsx("span", {
+					ref: key === "bar-0" ? firstBarRef : void 0,
 					"data-control-ui": "audio-visualizer",
 					"data-control-family": "audio-visualizer",
 					"data-slot": "bar-track",
-					className: "flex shrink-0 items-center",
+					className: "flex items-center",
 					children: /* @__PURE__ */ jsx("span", {
 						"data-control-ui": "audio-visualizer",
 						"data-control-family": "audio-visualizer",

package/dist/hooks/use-audio-recorder.d.ts

@@ -37,6 +37,7 @@ export type UseAudioInputDevicesResult = {
   loading: boolean;
   error: Error | null;
   hasPermission: boolean;
+  permission: "granted" | "prompt" | "denied";
   refresh: () => Promise<void>;
   requestPermission: () => Promise<void>;
 };

package/dist/hooks/use-audio-recorder.js

@@ -27,14 +27,14 @@ function useAudioInputDevices() {
 	const [devices, setDevices] = useState([]);
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState(null);
-	const [hasPermission, setHasPermission] = useState(false);
+	const [permission, setPermission] = useState("prompt");
 	async function refresh() {
 		setLoading(true);
 		setError(null);
 		try {
 			const nextDevices = await enumerateAudioInputDevices();
 			setDevices(nextDevices);
-			if (nextDevices.some((device) => device.label)) setHasPermission(true);
+			if (nextDevices.some((device) => device.label)) setPermission("granted");
 		} catch (nextError) {
 			setError(asError(nextError));
 		} finally {
@@ -51,9 +51,11 @@ function useAudioInputDevices() {
 		try {
 			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 			for (const track of stream.getTracks()) track.stop();
-			setHasPermission(true);
+			setPermission("granted");
 			setDevices(await enumerateAudioInputDevices());
 		} catch (nextError) {
+			const failure = asError(nextError);
+			if (failure.name === "NotAllowedError" || failure.name === "SecurityError") setPermission("denied");
 			setError(microphoneError(nextError));
 		} finally {
 			setLoading(false);
@@ -63,6 +65,26 @@ function useAudioInputDevices() {
 	useEffect(() => {
 		queueMicrotask(() => void refreshFromEffect());
 	}, []);
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !navigator.permissions?.query) return;
+		let disposed = false;
+		let status;
+		function updatePermission() {
+			if (disposed || !status) return;
+			setPermission(status.state);
+			refreshFromEffect();
+		}
+		navigator.permissions.query({ name: "microphone" }).then((nextStatus) => {
+			if (disposed) return;
+			status = nextStatus;
+			setPermission(nextStatus.state);
+			status.addEventListener("change", updatePermission);
+		}).catch(() => {});
+		return () => {
+			disposed = true;
+			status?.removeEventListener("change", updatePermission);
+		};
+	}, []);
 	useEffect(() => {
 		if (typeof navigator === "undefined" || !navigator.mediaDevices?.addEventListener) return;
 		const handleDeviceChange = () => {
@@ -75,7 +97,8 @@ function useAudioInputDevices() {
 		devices,
 		loading,
 		error,
-		hasPermission,
+		hasPermission: permission === "granted",
+		permission,
 		refresh,
 		requestPermission
 	};

package/dist/hooks/use-color-area.js

@@ -23,8 +23,6 @@ function useColorArea(onChange, targetRef) {
 		function onEnd() {
 			setDragging(false);
 		}
-		const previousSelect = document.body.style.userSelect;
-		document.body.style.userSelect = "none";
 		window.addEventListener("pointermove", onMove);
 		window.addEventListener("pointerup", onEnd);
 		window.addEventListener("pointercancel", onEnd);
@@ -32,7 +30,6 @@ function useColorArea(onChange, targetRef) {
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onEnd);
 			window.removeEventListener("pointercancel", onEnd);
-			document.body.style.userSelect = previousSelect;
 		};
 	}, [dragging, areaRef]);
 	function onPointerDown(event) {

package/dist/hooks/use-textarea-trigger-menu.js

@@ -48,16 +48,19 @@ function useTextareaTriggerMenu(ref, options) {
 		function onKeyDown(event) {
 			handleKeyDown(event);
 		}
+		function syncAfterInput() {
+			window.setTimeout(syncTrigger, 0);
+		}
 		function onBlur() {
 			window.setTimeout(closeAfterBlur, 120);
 		}
-		element.addEventListener("input", syncTrigger);
+		element.addEventListener("input", syncAfterInput);
 		element.addEventListener("keydown", onKeyDown);
 		element.addEventListener("keyup", syncTrigger);
 		element.addEventListener("click", syncTrigger);
 		element.addEventListener("blur", onBlur);
 		return () => {
-			element.removeEventListener("input", syncTrigger);
+			element.removeEventListener("input", syncAfterInput);
 			element.removeEventListener("keydown", onKeyDown);
 			element.removeEventListener("keyup", syncTrigger);
 			element.removeEventListener("click", syncTrigger);

package/dist/knob-contracts/audio-device-select-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/audio-device-select-knobs.d.ts
+export declare const audioDeviceSelectKnobs: readonly ["--cui-audio-device-select-status-foreground"];
+export type AudioDeviceSelectKnobStyle = Partial<Record<(typeof audioDeviceSelectKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/audio-device-select-knobs.js

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/audio-device-select-knobs.ts
+const audioDeviceSelectKnobs = ["--cui-audio-device-select-status-foreground"];
+//#endregion
+export { audioDeviceSelectKnobs };

package/dist/knob-contracts/audio-visualizer-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/audio-visualizer-knobs.d.ts
-export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke", "--cui-audio-visualizer-baseline-stroke"];
+export declare const audioVisualizerKnobs: readonly ["--cui-audio-visualizer-bar-size", "--cui-audio-visualizer-bar-gap", "--cui-audio-visualizer-radius", "--cui-audio-visualizer-bar-radius", "--cui-audio-visualizer-bar-background", "--cui-audio-visualizer-line-fill", "--cui-audio-visualizer-line-stroke", "--cui-audio-visualizer-baseline-stroke"];
 export type AudioVisualizerKnobStyle = Partial<Record<(typeof audioVisualizerKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/audio-visualizer-knobs.js

@@ -1,5 +1,7 @@
 //#region src/knob-contracts/audio-visualizer-knobs.ts
 const audioVisualizerKnobs = [
+	"--cui-audio-visualizer-bar-size",
+	"--cui-audio-visualizer-bar-gap",
 	"--cui-audio-visualizer-radius",
 	"--cui-audio-visualizer-bar-radius",
 	"--cui-audio-visualizer-bar-background",

package/dist/lib/audio-visualizer-levels.d.ts

@@ -0,0 +1,12 @@
+//#region src/lib/audio-visualizer-levels.d.ts
+export declare function audioVisualizerPointCount(points?: number): number;
+export declare function normalizeAudioLevel(level: number): number;
+export declare function audioVisualizerHistory(levels: ArrayLike<number>, points?: number, active?: boolean): {
+  key: string;
+  level: number;
+}[];
+export declare function audioVisualizerBands(levels: ArrayLike<number>, points?: number, active?: boolean, mirrored?: boolean): {
+  key: string;
+  level: number;
+}[];
+//#endregion