@ctrl-ui/react 0.8.14 → 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-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

package/dist/lib/audio-visualizer-levels.js

@@ -0,0 +1,37 @@
+//#region src/lib/audio-visualizer-levels.ts
+function audioVisualizerPointCount(points = 28) {
+	return Math.min(128, Math.max(1, Number.isFinite(points) ? Math.floor(points) : 28));
+}
+function normalizeAudioLevel(level) {
+	return Number.isFinite(level) ? Math.min(1, Math.max(0, level)) : 0;
+}
+function audioVisualizerHistory(levels, points, active = true) {
+	const count = audioVisualizerPointCount(points);
+	const start = Math.max(0, levels.length - count);
+	const padding = Math.max(0, count - levels.length);
+	return Array.from({ length: count }, (_, index) => ({
+		key: `bar-${index}`,
+		level: active && index >= padding ? normalizeAudioLevel(levels[start + index - padding] ?? 0) : 0
+	}));
+}
+function audioVisualizerBands(levels, points, active = true, mirrored = false) {
+	const count = audioVisualizerPointCount(points);
+	const bandCount = mirrored ? Math.ceil(count / 2) : count;
+	const bands = Array.from({ length: bandCount }, (_, index) => {
+		if (!active || levels.length === 0) return 0;
+		const start = index * levels.length / bandCount;
+		const end = (index + 1) * levels.length / bandCount;
+		let total = 0;
+		for (let sample = Math.floor(start); sample < Math.ceil(end); sample += 1) {
+			const weight = Math.min(end, sample + 1) - Math.max(start, sample);
+			total += normalizeAudioLevel(levels[sample] ?? 0) * weight;
+		}
+		return total / (end - start);
+	});
+	return Array.from({ length: count }, (_, index) => ({
+		key: `band-${index}`,
+		level: bands[mirrored ? Math.floor(Math.abs(index - (count - 1) / 2)) : index] ?? 0
+	}));
+}
+//#endregion
+export { audioVisualizerBands, audioVisualizerHistory, audioVisualizerPointCount, normalizeAudioLevel };

package/dist/model-switcher.d.ts

@@ -0,0 +1,23 @@
+import { SelectTriggerProps, SelectTriggerVariant } from "./ui/select.js";
+import { ReactNode } from "react";
+//#region src/model-switcher.d.ts
+export type ModelOption = {
+  value: string;
+  label: string;
+  hint?: ReactNode;
+  icon?: ReactNode;
+};
+export type ModelSwitcherProps = {
+  models: ModelOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  size?: "xs" | "sm";
+  variant?: SelectTriggerVariant;
+  className?: string;
+  label?: string;
+  style?: SelectTriggerProps["style"];
+};
+export declare function ModelSwitcher({ models, value, defaultValue, onValueChange, disabled, size, variant, className, label, style }: ModelSwitcherProps): import("react").JSX.Element;
+//#endregion

package/dist/model-switcher.js

@@ -0,0 +1,70 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/model-switcher.tsx
+function ModelSwitcher({ models, value, defaultValue, onValueChange, disabled, size = "sm", variant = "surface", className, label = "Model", style }) {
+	const fallback = defaultValue ?? models[0]?.value;
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		defaultValue: fallback,
+		onValueChange,
+		disabled: disabled || models.length === 0,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			variant,
+			className: cn("max-w-52", className),
+			style,
+			"aria-label": label,
+			children: /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "model-switcher",
+				"data-control-family": "button",
+				"data-button-kind": "model-switcher",
+				"data-slot": "value",
+				className: "flex min-w-0 items-center",
+				children: /* @__PURE__ */ jsx(SelectValue, {
+					placeholder: label,
+					children: (current) => {
+						const model = models.find((option) => option.value === current);
+						return /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-1.5",
+							children: [model?.icon ? /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "flex shrink-0 [&_svg]:size-4",
+								children: model.icon
+							}) : null, /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								title: model?.label ?? label,
+								children: model?.label ?? label
+							})]
+						});
+					}
+				})
+			})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: models.map((model) => /* @__PURE__ */ jsxs(SelectItem, {
+			value: model.value,
+			label: model.label,
+			children: [
+				model.icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "flex shrink-0 [&_svg]:size-4",
+					children: model.icon
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					title: model.label,
+					children: model.label
+				}),
+				model.hint ? /* @__PURE__ */ jsx("span", {
+					"data-control-ui": "model-switcher",
+					"data-control-family": "popup",
+					"data-popup-kind": "model-switcher",
+					"data-slot": "hint",
+					children: model.hint
+				}) : null
+			]
+		}, model.value)) })]
+	});
+}
+//#endregion
+export { ModelSwitcher };

package/dist/styles/index.css

@@ -19,10 +19,11 @@
 @import "./recipes/sidebar-menu.css";
 @import "./recipes/sidebar-parts.css";
 @import "./recipes/app-shell-header.css";
-@import "./recipes/audio-visualizer.css";
-@import "./recipes/audio-recorder.css";
 @import "./recipes/field.css";
 @import "./recipes/field-parts.css";
+@import "./recipes/audio-device-select.css";
+@import "./recipes/audio-visualizer.css";
+@import "./recipes/audio-recorder.css";
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
 @import "./recipes/breadcrumb.css";

package/dist/styles/recipes/audio-device-select.css

@@ -0,0 +1,15 @@
+@layer components {
+  :where([data-control-family="audio-device-select"][data-slot="root"]) {
+    --cui-audio-device-select-status-foreground: var(--muted-foreground);
+  }
+
+  :where([data-control-family="audio-device-select"][data-slot="status"]) {
+    color: var(--cui-audio-device-select-status-foreground);
+  }
+}
+
+@property --cui-audio-device-select-status-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/audio-visualizer.css

@@ -3,6 +3,8 @@
     --cui-audio-visualizer-radius: var(--radius-control);
     --cui-audio-visualizer-bar-background: oklch(from var(--primary) l c h / 0.8);
     --cui-audio-visualizer-bar-radius: var(--radius-control);
+    --cui-audio-visualizer-bar-size: calc(var(--spacing) * 1);
+    --cui-audio-visualizer-bar-gap: 1px;
     --cui-audio-visualizer-line-fill: oklch(from var(--primary) l c h / 0.18);
     --cui-audio-visualizer-line-stroke: oklch(from var(--primary) l c h / 0.8);
     --cui-audio-visualizer-baseline-stroke: oklch(from var(--border) l c h / 0.55);
@@ -24,7 +26,7 @@
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="track"]) {
-    gap: 1px;
+    gap: var(--cui-audio-visualizer-bar-gap);
     opacity: 0.55;
     transition: opacity var(--duration-base) var(--ease-standard);
   }
@@ -34,7 +36,9 @@
   }
 
   :where([data-control-family="audio-visualizer"][data-slot="bar-track"]) {
-    inline-size: calc(var(--spacing) * 1);
+    inline-size: var(--cui-audio-visualizer-bar-size);
+    min-inline-size: 0;
+    flex-shrink: 1;
     transition:
       opacity var(--duration-base) var(--ease-emphasized),
       filter var(--duration-base) var(--ease-emphasized),
@@ -69,6 +73,97 @@
     stroke: var(--cui-audio-visualizer-line-stroke);
     transition: d var(--duration-base) var(--ease-standard);
   }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bars"][data-active="true"] [data-slot="bar"]) {
+    transition: none;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="line"]:not([data-active="true"]) [data-slot="waveform"]) {
+    opacity: 0;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="line"]:not([data-active="true"]) [data-slot="baseline"]) {
+    stroke-dasharray: 1 4;
+    stroke-linecap: round;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="root"][data-variant="bar"]) {
+    --cui-audio-visualizer-bar-size: calc(var(--spacing) * 1.5);
+    --cui-audio-visualizer-bar-gap: calc(var(--spacing) * 0.75);
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"] [data-slot="track"]) {
+    display: flex;
+    block-size: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="start"] [data-slot="track"]) {
+    align-items: flex-start;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="end"] [data-slot="track"]) {
+    align-items: flex-end;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"] [data-slot="bar"]) {
+    min-inline-size: 0;
+    max-inline-size: var(--cui-audio-visualizer-bar-size);
+    flex: 1;
+    transform-origin: center;
+    transition:
+      height var(--duration-fast) var(--ease-standard),
+      opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="start"] [data-slot="bar"]) {
+    transform-origin: top;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-align="end"] [data-slot="bar"]) {
+    transform-origin: bottom;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-idle="pulse"]:not([data-active="true"]) [data-slot="bar"]) {
+    animation: cui-audio-bar-pulse calc(var(--duration-slow) * 4) var(--ease-standard) infinite;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-idle="wave"]:not([data-active="true"]) [data-slot="bar"]),
+  :where([data-control-family="audio-visualizer"][data-variant="bar"][data-loading="true"] [data-slot="bar"]) {
+    animation: cui-audio-bar-pulse calc(var(--duration-slow) * 4) var(--ease-standard) infinite;
+    animation-delay: var(--_audio-visualizer-delay);
+  }
+
+  @keyframes cui-audio-bar-pulse {
+    0%,
+    100% {
+      transform: scaleY(1);
+    }
+    50% {
+      transform: scaleY(4);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-control-family="audio-visualizer"] [data-slot]) {
+      animation: none;
+      transition: none;
+    }
+  }
+}
+
+@property --cui-audio-visualizer-bar-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 4px;
+}
+
+@property --cui-audio-visualizer-bar-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
 }
 
 @property --cui-audio-visualizer-radius {

package/dist/styles/theme.css

@@ -638,6 +638,18 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
+  html {
+    background-color: var(--background);
+  }
+
+  :root:has([data-app-shell]:not([data-scroll="page"])) {
+    overscroll-behavior: none;
+  }
+
+  :root:has([data-control-family="sidebar"][data-slot="wrapper"] [data-control-family="sidebar"][data-variant="inset"][data-state]) {
+    background-color: var(--sidebar);
+  }
+
   :where(
     [data-control-family]:is(
       a[href],

package/dist/ui/autocomplete.d.ts

@@ -1,7 +1,7 @@
 import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
-import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/autocomplete.d.ts
 export type AutocompleteProps<Value = string> = {

package/dist/ui/color-picker.js

@@ -3,12 +3,12 @@ import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Input } from "./input.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, formatContrastRatio, nextFixLevel, wcagLevels } from "../lib/contrast.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";

package/dist/ui/combobox.d.ts

@@ -1,6 +1,6 @@
 import { ControlSize } from "../control-variants.js";
-import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts

package/dist/ui/context-menu.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
-import { popupItemStructureClasses } from "../surface-variants.js";
 import { popupItemFocusProps } from "../lib/popup-item-focus.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/ui/dropdown-menu.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
-import { popupItemStructureClasses } from "../surface-variants.js";
 import { popupItemFocusProps } from "../lib/popup-item-focus.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Menu } from "@base-ui/react/menu";

package/dist/ui/gradient-editor.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { useColorArea } from "../hooks/use-color-area.js";
 import { formatGradient } from "../lib/color.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContent, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "./color-picker.js";
 import { createContext, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/select.d.ts

@@ -1,8 +1,8 @@
 import { ControlledChoice } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
-import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.d.ts

package/dist/ui/select.js

@@ -4,8 +4,8 @@ import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
-import { popupItemStructureClasses } from "../surface-variants.js";
 import { popupItemFocusProps } from "../lib/popup-item-focus.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/ui/sidebar-resize-rail.js

@@ -47,7 +47,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 		const pointerId = event.pointerId;
 		const startX = event.clientX;
 		const anchoredLeft = anchoredToLeftEdge(handle);
-		const wrapperBounds = wrapper.getBoundingClientRect();
+		const sidebarBounds = (handle.closest("[data-control-family=\"sidebar\"][data-slot=\"root\"]") ?? wrapper).getBoundingClientRect();
 		const initialWidth = measure.getBoundingClientRect().width;
 		const previousWidth = wrapper.style.getPropertyValue("--sidebar-width");
 		const previousCursor = document.body.style.cursor;
@@ -92,7 +92,7 @@ function SidebarResizeRail({ className, ref, onPointerDown, onClick, onKeyDown,
 			document.body.style.userSelect = "none";
 			wrapper.setAttribute("data-resizing", "true");
 			handle.setAttribute("data-resizing", "true");
-			const cursorWidth = anchoredLeft ? pointer.clientX - wrapperBounds.left : wrapperBounds.right - pointer.clientX;
+			const cursorWidth = anchoredLeft ? pointer.clientX - sidebarBounds.left : sidebarBounds.right - pointer.clientX;
 			if (updateCollapse(cursorWidth)) return;
 			draftWidth = clampWidth(cursorWidth);
 			wrapper.style.setProperty("--sidebar-width", `${draftWidth}px`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.14",
+  "version": "0.8.15",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {