@ctrl-ui/react 0.9.0 → 0.9.2

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

@@ -10,8 +10,10 @@ export type AudioDevice = {
   status?: "available" | "unavailable" | "permission-required";
 };
 export type AudioDevicePermission = "granted" | "prompt" | "denied";
+export type AudioDeviceKind = "input" | "output";
 export type AudioDeviceSelectProps = Omit<SelectProps, "items" | "children"> & {
   devices: readonly AudioDevice[];
+  kind?: AudioDeviceKind;
   loading?: boolean;
   permission?: AudioDevicePermission;
   onRequestPermission?: () => void | Promise<void>;
@@ -22,7 +24,7 @@ export type AudioDeviceSelectProps = Omit<SelectProps, "items" | "children"> & {
   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 AudioDeviceSelect({ devices, kind, 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;

package/dist/audio-device-select.js

@@ -5,18 +5,36 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select.js
 import { Text } from "./ui/typography.js";
 import { createContext, use, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { MicIcon } from "lucide-react";
+import { MicIcon, Volume2Icon } from "lucide-react";
 //#region src/audio-device-select.tsx
+const AUDIO_DEVICE_COPY = {
+	input: {
+		label: "Microphone",
+		fallbackName: "Microphone",
+		placeholder: "Select a microphone",
+		noneLabel: "No microphone",
+		empty: "No microphones found",
+		disconnected: "This microphone is disconnected. Reconnect it or choose another device."
+	},
+	output: {
+		label: "Output",
+		fallbackName: "Speaker",
+		placeholder: "Select an output",
+		noneLabel: "No output",
+		empty: "No outputs found",
+		disconnected: "This output is disconnected. Reconnect it or choose another device."
+	}
+};
 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 deviceLabel(device, kind, index = 0) {
+	return device.label.trim() || `${AUDIO_DEVICE_COPY[kind].fallbackName} ${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 }) {
+function AudioDeviceSelect({ devices, kind = "input", value, defaultValue, onValueChange, disabled = false, loading = false, permission = "granted", onRequestPermission, allowNone = false, noneLabel = AUDIO_DEVICE_COPY[kind].noneLabel, label = AUDIO_DEVICE_COPY[kind].label, 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;
@@ -30,6 +48,7 @@ function AudioDeviceSelect({ devices, value, defaultValue, onValueChange, disabl
 	}
 	return /* @__PURE__ */ jsx(AudioDeviceSelectContext.Provider, {
 		value: {
+			kind,
 			devices,
 			selected,
 			value: current,
@@ -75,18 +94,21 @@ function AudioDeviceSelectTrigger({ children, className, ...props }) {
 		"aria-busy": context.loading || void 0,
 		className: cn("w-full", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MicIcon, {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [context.kind === "output" ? /* @__PURE__ */ jsx(Volume2Icon, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0"
+		}) : /* @__PURE__ */ jsx(MicIcon, {
 			"aria-hidden": "true",
 			className: "size-4 shrink-0"
 		}), /* @__PURE__ */ jsx(AudioDeviceSelectValue, {})] })
 	});
 }
-function AudioDeviceSelectValue({ placeholder = "Select a microphone" }) {
+function AudioDeviceSelectValue({ placeholder }) {
 	const context = useAudioDeviceSelect();
-	let text = placeholder;
-	if (context.selected) text = deviceLabel(context.selected, context.devices.indexOf(context.selected));
+	let text = placeholder ?? AUDIO_DEVICE_COPY[context.kind].placeholder;
+	if (context.selected) text = deviceLabel(context.selected, context.kind, 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.missing) text = `${context.selected ? deviceLabel(context.selected, context.kind) : "Unknown device"} (disconnected)`;
 	if (context.loading) text = "Finding devices…";
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "audio-device-select",
@@ -114,11 +136,11 @@ function AudioDeviceSelectContent({ children, ...props }) {
 			}) : null,
 			context.devices.filter((device) => !context.allowNone || device.deviceId !== "").map((device, index) => /* @__PURE__ */ jsxs(AudioDeviceSelectItem, {
 				value: device.deviceId,
-				label: deviceLabel(device, index),
+				label: deviceLabel(device, context.kind, index),
 				disabled: device.status === "unavailable" || device.status === "permission-required",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 truncate",
-					children: deviceLabel(device, index)
+					children: deviceLabel(device, context.kind, index)
 				}), device.isDefault || device.deviceId === "default" ? /* @__PURE__ */ jsx(Text, {
 					size: "caption",
 					tone: "muted",
@@ -129,7 +151,7 @@ function AudioDeviceSelectContent({ children, ...props }) {
 			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"
+				children: context.permission === "granted" ? AUDIO_DEVICE_COPY[context.kind].empty : "Allow microphone access to find devices"
 			}) : null
 		] })
 	});
@@ -153,7 +175,7 @@ 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 && context.missing) message = AUDIO_DEVICE_COPY[context.kind].disconnected;
 	if (!message) return null;
 	return /* @__PURE__ */ jsx("p", {
 		"data-control-ui": "audio-device-select",

package/dist/knob-contracts/channel-strip-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/channel-strip-knobs.d.ts
+export declare const channelStripKnobs: readonly ["--cui-channel-strip-size", "--cui-channel-strip-body-height", "--cui-channel-strip-separator-color", "--cui-channel-strip-value-foreground"];
+export type ChannelStripKnobStyle = Partial<Record<(typeof channelStripKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/channel-strip-knobs.js

@@ -0,0 +1,9 @@
+//#region src/knob-contracts/channel-strip-knobs.ts
+const channelStripKnobs = [
+	"--cui-channel-strip-size",
+	"--cui-channel-strip-body-height",
+	"--cui-channel-strip-separator-color",
+	"--cui-channel-strip-value-foreground"
+];
+//#endregion
+export { channelStripKnobs };

package/dist/knob-contracts/range-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/range-knobs.d.ts
-export declare const rangeKnobs: readonly ["--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
+export declare const rangeKnobs: readonly ["--cui-range-level-warning-background", "--cui-range-level-clip-background", "--cui-range-level-size", "--cui-range-level-scale-foreground", "--cui-range-indeterminate-size", "--cui-range-track-radius", "--cui-range-track-background", "--cui-range-indicator-radius", "--cui-range-indicator-background", "--cui-range-thumb-radius", "--cui-range-thumb-background", "--cui-range-thumb-border-color", "--cui-range-thumb-shadow"];
 export type RangeKnobStyle = Partial<Record<(typeof rangeKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/range-knobs.js

@@ -1,5 +1,9 @@
 //#region src/knob-contracts/range-knobs.ts
 const rangeKnobs = [
+	"--cui-range-level-warning-background",
+	"--cui-range-level-clip-background",
+	"--cui-range-level-size",
+	"--cui-range-level-scale-foreground",
 	"--cui-range-indeterminate-size",
 	"--cui-range-track-radius",
 	"--cui-range-track-background",

package/dist/lib/level-meter-ballistics.d.ts

@@ -0,0 +1,17 @@
+//#region src/lib/level-meter-ballistics.d.ts
+export declare const LEVEL_METER_RELEASE_DB_PER_SECOND = 24;
+export declare const LEVEL_METER_PEAK_HOLD_MS = 1000;
+export type LevelMeterRange = {
+  minDb: number;
+  maxDb: number;
+};
+export type LevelMeterReading = {
+  levelDb: number;
+  peakDb: number;
+  peakHeldUntilMs: number;
+};
+export declare function clampLevelDb(levelDb: number, { minDb, maxDb }: LevelMeterRange): number;
+export declare function levelMeterFraction(levelDb: number, scale: LevelMeterRange): number;
+export declare function advanceLevelMeterReading(reading: LevelMeterReading, targetDb: number, elapsedMs: number, nowMs: number, scale: LevelMeterRange): LevelMeterReading;
+export declare function levelMeterReadingSettled(reading: LevelMeterReading, targetDb: number, scale: LevelMeterRange): boolean;
+//#endregion

package/dist/lib/level-meter-ballistics.js

@@ -0,0 +1,32 @@
+//#region src/lib/level-meter-ballistics.ts
+const LEVEL_METER_RELEASE_DB_PER_SECOND = 24;
+const LEVEL_METER_PEAK_HOLD_MS = 1e3;
+function clampLevelDb(levelDb, { minDb, maxDb }) {
+	if (Number.isNaN(levelDb)) return minDb;
+	return Math.min(maxDb, Math.max(minDb, levelDb));
+}
+function levelMeterFraction(levelDb, scale) {
+	const span = scale.maxDb - scale.minDb;
+	if (!(span > 0)) return 0;
+	return (clampLevelDb(levelDb, scale) - scale.minDb) / span;
+}
+function advanceLevelMeterReading(reading, targetDb, elapsedMs, nowMs, scale) {
+	const target = clampLevelDb(targetDb, scale);
+	const fallDb = 24 * Math.max(0, elapsedMs) / 1e3;
+	const levelDb = Math.max(target, reading.levelDb - fallDb);
+	if (levelDb >= reading.peakDb) return {
+		levelDb,
+		peakDb: levelDb,
+		peakHeldUntilMs: nowMs + LEVEL_METER_PEAK_HOLD_MS
+	};
+	return {
+		levelDb,
+		peakDb: nowMs < reading.peakHeldUntilMs ? reading.peakDb : Math.max(levelDb, reading.peakDb - fallDb),
+		peakHeldUntilMs: reading.peakHeldUntilMs
+	};
+}
+function levelMeterReadingSettled(reading, targetDb, scale) {
+	return reading.levelDb === clampLevelDb(targetDb, scale) && reading.peakDb === reading.levelDb;
+}
+//#endregion
+export { LEVEL_METER_PEAK_HOLD_MS, LEVEL_METER_RELEASE_DB_PER_SECOND, advanceLevelMeterReading, clampLevelDb, levelMeterFraction, levelMeterReadingSettled };

package/dist/styles/index.css

@@ -33,6 +33,7 @@
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
+@import "./recipes/channel-strip.css";
 @import "./recipes/chart.css";
 @import "./recipes/chat-message.css";
 @import "./recipes/chat-message-edit.css";
@@ -75,8 +76,9 @@
 @import "./recipes/inline-attachment.css";
 @import "./recipes/source-badge.css";
 @import "./recipes/inline-citation.css";
-@import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
+@import "./recipes/range-level-meter.css";
+@import "./recipes/markdown-block.css";
 @import "./recipes/morphing-panel.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";

package/dist/styles/recipes/channel-strip.css

@@ -0,0 +1,75 @@
+@layer components {
+  :where([data-control-family="channel-strip"][data-slot="mixer"]) {
+    display: grid;
+    grid-auto-columns: max-content;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(4, auto);
+    gap: calc(var(--spacing) * 2);
+    overflow-x: auto;
+  }
+
+  :where([data-control-family="channel-strip"][data-slot="root"]) {
+    --cui-channel-strip-size: calc(var(--spacing) * 24);
+    --cui-channel-strip-body-height: calc(var(--spacing) * 40);
+    --cui-channel-strip-separator-color: var(--border);
+    --cui-channel-strip-value-foreground: var(--muted-foreground);
+    inline-size: var(--cui-channel-strip-size);
+    display: grid;
+    grid-row: span 4;
+    grid-template-rows: subgrid;
+    row-gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="channel-strip"][data-slot="root"][data-variant="master"]) {
+    border-inline-start: 1px solid var(--cui-channel-strip-separator-color);
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="channel-strip"][data-slot="header"]) {
+    grid-row: 1;
+    gap: var(--spacing);
+    min-block-size: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="channel-strip"][data-slot="body"]) {
+    grid-row: 2;
+    gap: calc(var(--spacing) * 2);
+    block-size: var(--cui-channel-strip-body-height);
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="channel-strip"][data-slot="value"]) {
+    grid-row: 3;
+    color: var(--cui-channel-strip-value-foreground);
+    text-align: center;
+  }
+
+  :where([data-control-family="channel-strip"][data-slot="controls"]) {
+    grid-row: 4;
+    gap: var(--spacing);
+  }
+}
+
+@property --cui-channel-strip-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-channel-strip-body-height {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-channel-strip-separator-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-channel-strip-value-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/range-level-meter.css

@@ -0,0 +1,158 @@
+@layer components {
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"]) {
+    --cui-range-level-warning-background: var(--warning);
+    --cui-range-level-clip-background: var(--destructive);
+    --cui-range-level-size: calc(var(--spacing) * 2);
+    --cui-range-level-scale-foreground: var(--muted-foreground);
+    --_range-level-peak-size: 2px;
+    --_range-level-zone-angle: 90deg;
+    gap: var(--spacing);
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"][data-orientation="horizontal"]) {
+    grid-template-rows: var(--cui-range-level-size);
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"][data-orientation="horizontal"]:dir(rtl)) {
+    --_range-level-zone-angle: 270deg;
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]) {
+    --_range-level-zone-angle: 0deg;
+    grid-auto-flow: column;
+    grid-template-columns: var(--cui-range-level-size);
+    grid-template-rows: minmax(0, 1fr);
+    inline-size: max-content;
+    min-block-size: calc(var(--spacing) * 16);
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="track"]) {
+    border-radius: var(--cui-range-track-radius);
+    background: var(--cui-range-track-background);
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="scale"]) {
+    block-size: calc(1lh + var(--spacing));
+    color: var(--cui-range-level-scale-foreground);
+  }
+
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]
+      [data-control-family="range"][data-range-kind="level-meter"][data-slot="scale"]
+  ) {
+    block-size: auto;
+    inline-size: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="tick"]) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--_range-level-tick) * 100%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    translate: -50% 0;
+    white-space: nowrap;
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="tick"]:dir(rtl)) {
+    translate: 50% 0;
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="tick"])::before {
+    content: "";
+    inline-size: 1px;
+    block-size: var(--spacing);
+    background: currentColor;
+    opacity: 0.5;
+  }
+
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]
+      [data-control-family="range"][data-range-kind="level-meter"][data-slot="tick"]
+  ) {
+    inset-block: auto calc(var(--_range-level-tick) * 100%);
+    inset-inline-start: 0;
+    flex-direction: row;
+    gap: calc(var(--spacing) * 1.5);
+    translate: 0 50%;
+  }
+
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]
+      [data-control-family="range"][data-range-kind="level-meter"][data-slot="tick"]
+  )::before {
+    inline-size: var(--spacing);
+    block-size: 1px;
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="bar"]),
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="peak"]) {
+    background-image: linear-gradient(
+      var(--_range-level-zone-angle),
+      var(--cui-range-indicator-background) calc(var(--_range-level-warning-start, 1) * 100%),
+      var(--cui-range-level-warning-background) 0 calc(var(--_range-level-clip-start, 1) * 100%),
+      var(--cui-range-level-clip-background) 0
+    );
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="bar"]) {
+    clip-path: inset(0 calc((1 - var(--_range-level, 0)) * 100%) 0 0 round var(--cui-range-indicator-radius));
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="peak"]) {
+    clip-path: inset(
+      0 calc((1 - var(--_range-level-peak, 0)) * 100%) 0 calc(var(--_range-level-peak, 0) * 100% - var(--_range-level-peak-size))
+    );
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="bar"]:dir(rtl)) {
+    clip-path: inset(0 0 0 calc((1 - var(--_range-level, 0)) * 100%) round var(--cui-range-indicator-radius));
+  }
+
+  :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="peak"]:dir(rtl)) {
+    clip-path: inset(
+      0 calc(var(--_range-level-peak, 0) * 100% - var(--_range-level-peak-size)) 0 calc((1 - var(--_range-level-peak, 0)) * 100%)
+    );
+  }
+
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]
+      [data-control-family="range"][data-range-kind="level-meter"][data-slot="bar"]
+  ) {
+    clip-path: inset(calc((1 - var(--_range-level, 0)) * 100%) 0 0 0 round var(--cui-range-indicator-radius));
+  }
+
+  :where(
+    [data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]
+      [data-control-family="range"][data-range-kind="level-meter"][data-slot="peak"]
+  ) {
+    clip-path: inset(
+      calc((1 - var(--_range-level-peak, 0)) * 100%) 0 calc(var(--_range-level-peak, 0) * 100% - var(--_range-level-peak-size)) 0
+    );
+  }
+}
+
+@property --cui-range-level-warning-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-range-level-clip-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-range-level-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-range-level-scale-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/ui/channel-strip.d.ts

@@ -0,0 +1,26 @@
+import { ChannelStripKnobStyle } from "../knob-contracts/channel-strip-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/channel-strip.d.ts
+export type ChannelStripVariant = "default" | "master";
+type ChannelStripPartProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ChannelStripKnobStyle;
+};
+export type MixerProps = ChannelStripPartProps;
+export type ChannelStripProps = ChannelStripPartProps & {
+  variant?: ChannelStripVariant;
+};
+export type ChannelStripHeaderProps = ChannelStripPartProps;
+export type ChannelStripTitleProps = ComponentProps<"span">;
+export type ChannelStripActionsProps = ChannelStripPartProps;
+export type ChannelStripBodyProps = ChannelStripPartProps;
+export type ChannelStripValueProps = ChannelStripPartProps;
+export type ChannelStripControlsProps = ChannelStripPartProps;
+export declare function Mixer({ className, ...props }: MixerProps): import("react").JSX.Element;
+export declare function ChannelStrip({ variant, className, ...props }: ChannelStripProps): import("react").JSX.Element;
+export declare function ChannelStripHeader({ className, ...props }: ChannelStripHeaderProps): import("react").JSX.Element;
+export declare function ChannelStripTitle({ className, ...props }: ChannelStripTitleProps): import("react").JSX.Element;
+export declare function ChannelStripActions({ className, ...props }: ChannelStripActionsProps): import("react").JSX.Element;
+export declare function ChannelStripBody({ className, ...props }: ChannelStripBodyProps): import("react").JSX.Element;
+export declare function ChannelStripValue({ className, ...props }: ChannelStripValueProps): import("react").JSX.Element;
+export declare function ChannelStripControls({ className, ...props }: ChannelStripControlsProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/channel-strip.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { createContext, use, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/channel-strip.tsx
+const ChannelStripTitleIdContext = createContext(null);
+function Mixer({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "mixer",
+		className,
+		...props
+	});
+}
+function ChannelStrip({ variant = "default", className, ...props }) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsx(ChannelStripTitleIdContext, {
+		value: titleId,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-labelledby": titleId,
+			"data-control-ui": "channel-strip",
+			"data-control-family": "channel-strip",
+			"data-slot": "root",
+			"data-variant": variant,
+			className: cn("min-w-0", className),
+			...props
+		})
+	});
+}
+function ChannelStripHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "header",
+		className: cn("flex min-w-0 items-center", className),
+		...props
+	});
+}
+function ChannelStripTitle({ className, ...props }) {
+	const titleId = use(ChannelStripTitleIdContext);
+	return /* @__PURE__ */ jsx("span", {
+		id: titleId ?? void 0,
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "title",
+		className: cn("min-w-0 flex-1 truncate text-caption", className),
+		...props
+	});
+}
+function ChannelStripActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "actions",
+		className: cn("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function ChannelStripBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "body",
+		className: cn("flex items-stretch justify-center", className),
+		...props
+	});
+}
+function ChannelStripValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "value",
+		className: cn("text-caption tabular-nums", className),
+		...props
+	});
+}
+function ChannelStripControls({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "channel-strip",
+		"data-control-family": "channel-strip",
+		"data-slot": "controls",
+		className: cn("flex flex-wrap content-start items-center justify-center", className),
+		...props
+	});
+}
+//#endregion
+export { ChannelStrip, ChannelStripActions, ChannelStripBody, ChannelStripControls, ChannelStripHeader, ChannelStripTitle, ChannelStripValue, Mixer };

package/dist/ui/level-meter.d.ts

@@ -0,0 +1,36 @@
+import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/level-meter.d.ts
+export type LevelMeterSource = {
+  subscribe: (listener: (levelDb: number) => void) => () => void;
+};
+export type LevelMeterOrientation = "horizontal" | "vertical";
+export type LevelMeterProps = Omit<ComponentProps<"div">, "style"> & {
+  value?: number;
+  source?: LevelMeterSource | null;
+  minDb?: number;
+  maxDb?: number;
+  warningDb?: number;
+  clipDb?: number;
+  orientation?: LevelMeterOrientation;
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterTrackProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterBarProps = Omit<ComponentProps<"div">, "style" | "children"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterPeakProps = Omit<ComponentProps<"div">, "style" | "children"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+export type LevelMeterScaleProps = Omit<ComponentProps<"div">, "style" | "children"> & {
+  ticks?: readonly number[];
+  style?: CSSProperties & RangeKnobStyle;
+};
+export declare function LevelMeter({ value, source, minDb, maxDb, warningDb, clipDb, orientation, className, style, children, ref, ...props }: LevelMeterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function LevelMeterTrack({ className, ...props }: LevelMeterTrackProps): import("react").JSX.Element;
+export declare function LevelMeterBar({ className, ...props }: LevelMeterBarProps): import("react").JSX.Element;
+export declare function LevelMeterPeak({ className, ...props }: LevelMeterPeakProps): import("react").JSX.Element;
+export declare function LevelMeterScale({ ticks, className, ...props }: LevelMeterScaleProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/level-meter.js

@@ -0,0 +1,201 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { advanceLevelMeterReading, levelMeterFraction, levelMeterReadingSettled } from "../lib/level-meter-ballistics.js";
+import { createContext, use, useEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/level-meter.tsx
+const ARIA_UPDATE_INTERVAL_MS = 250;
+const STANDARD_TICKS_DB = [
+	12,
+	6,
+	0,
+	-6,
+	-12,
+	-18,
+	-24,
+	-36,
+	-48,
+	-60,
+	-72,
+	-84,
+	-96
+];
+const LevelMeterScaleContext = createContext(null);
+function formatTickDb(db) {
+	if (db > 0) return `+${db}`;
+	if (db < 0) return `\u2212${Math.abs(db)}`;
+	return "0";
+}
+function createLevelMeterPainter() {
+	let attachment = null;
+	let targetDb = Number.NEGATIVE_INFINITY;
+	let reading = {
+		levelDb: Number.NEGATIVE_INFINITY,
+		peakDb: Number.NEGATIVE_INFINITY,
+		peakHeldUntilMs: 0
+	};
+	let frame = 0;
+	let lastFrameMs = 0;
+	let lastAnnouncedMs = Number.NEGATIVE_INFINITY;
+	const paint = ({ root, scale, announcesValue }, nowMs, settled) => {
+		root.style.setProperty("--_range-level", `${levelMeterFraction(reading.levelDb, scale)}`);
+		root.style.setProperty("--_range-level-peak", `${levelMeterFraction(reading.peakDb, scale)}`);
+		if (!announcesValue || !settled && nowMs - lastAnnouncedMs < ARIA_UPDATE_INTERVAL_MS) return;
+		lastAnnouncedMs = nowMs;
+		const roundedDb = Math.round(reading.levelDb);
+		root.setAttribute("aria-valuenow", `${roundedDb}`);
+		root.setAttribute("aria-valuetext", `${roundedDb} dB`);
+	};
+	const step = (nowMs) => {
+		frame = 0;
+		if (!attachment) return;
+		reading = advanceLevelMeterReading(reading, targetDb, nowMs - lastFrameMs, nowMs, attachment.scale);
+		lastFrameMs = nowMs;
+		const settled = levelMeterReadingSettled(reading, targetDb, attachment.scale);
+		paint(attachment, nowMs, settled);
+		if (!settled) frame = requestAnimationFrame(step);
+	};
+	const wake = () => {
+		if (frame !== 0 || !attachment) return;
+		lastFrameMs = performance.now();
+		frame = requestAnimationFrame(step);
+	};
+	return {
+		attach(nextAttachment) {
+			attachment = nextAttachment;
+			wake();
+			return () => {
+				cancelAnimationFrame(frame);
+				frame = 0;
+				attachment = null;
+			};
+		},
+		setTarget(levelDb) {
+			targetDb = levelDb;
+			wake();
+		}
+	};
+}
+function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, clipDb = -6, orientation = "horizontal", className, style, children, ref, ...props }) {
+	const [painter] = useState(createLevelMeterPainter);
+	const rootRef = useRef(null);
+	const labelled = Boolean(props["aria-label"] || props["aria-labelledby"]);
+	const scale = {
+		minDb,
+		maxDb
+	};
+	const zoneStyle = {
+		"--_range-level-warning-start": `${levelMeterFraction(warningDb, scale)}`,
+		"--_range-level-clip-start": `${levelMeterFraction(clipDb, scale)}`,
+		...style
+	};
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		return painter.attach({
+			root,
+			scale: {
+				minDb,
+				maxDb
+			},
+			announcesValue: labelled
+		});
+	}, [
+		painter,
+		minDb,
+		maxDb,
+		labelled
+	]);
+	useEffect(() => {
+		if (source) return source.subscribe(painter.setTarget);
+		painter.setTarget(value ?? Number.NEGATIVE_INFINITY);
+	}, [
+		painter,
+		source,
+		value
+	]);
+	return useRender({
+		defaultTagName: "div",
+		ref: [ref ?? null, rootRef],
+		props: {
+			...props,
+			role: labelled ? "meter" : void 0,
+			"aria-hidden": labelled ? void 0 : true,
+			"aria-valuemin": labelled ? minDb : void 0,
+			"aria-valuemax": labelled ? maxDb : void 0,
+			"aria-valuenow": labelled ? minDb : void 0,
+			"data-control-ui": "level-meter",
+			"data-control-family": "range",
+			"data-range-kind": "level-meter",
+			"data-slot": "root",
+			"data-orientation": orientation,
+			className: cn("grid", className),
+			style: zoneStyle,
+			children: /* @__PURE__ */ jsx(LevelMeterScaleContext, {
+				value: {
+					minDb,
+					maxDb
+				},
+				children: children ?? /* @__PURE__ */ jsx(LevelMeterTrack, { children: /* @__PURE__ */ jsx(LevelMeterBar, {}) })
+			})
+		}
+	});
+}
+function LevelMeterTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "track",
+		className: cn("relative overflow-hidden", className),
+		...props
+	});
+}
+function LevelMeterBar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "bar",
+		className: cn("absolute inset-0", className),
+		...props
+	});
+}
+function LevelMeterPeak({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "peak",
+		className: cn("absolute inset-0", className),
+		...props
+	});
+}
+function LevelMeterScale({ ticks, className, ...props }) {
+	const scale = use(LevelMeterScaleContext);
+	if (!scale) throw new Error("LevelMeterScale must be rendered inside LevelMeter.");
+	const visibleTicks = (ticks ?? STANDARD_TICKS_DB).filter((db) => db >= scale.minDb && db <= scale.maxDb);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-control-ui": "level-meter",
+		"data-control-family": "range",
+		"data-range-kind": "level-meter",
+		"data-slot": "scale",
+		className: cn("relative text-micro tabular-nums", className),
+		...props,
+		children: visibleTicks.map((db) => {
+			const tickStyle = { "--_range-level-tick": `${levelMeterFraction(db, scale)}` };
+			return /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "level-meter",
+				"data-control-family": "range",
+				"data-range-kind": "level-meter",
+				"data-slot": "tick",
+				style: tickStyle,
+				children: formatTickDb(db)
+			}, db);
+		})
+	});
+}
+//#endregion
+export { LevelMeter, LevelMeterBar, LevelMeterPeak, LevelMeterScale, LevelMeterTrack };

package/package.json

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