@ctrl-ui/react 0.9.1 → 0.9.3

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,
@@ -47,7 +66,7 @@ function AudioDeviceSelect({ devices, value, defaultValue, onValueChange, disabl
 			"data-control-ui": "audio-device-select",
 			"data-control-family": "audio-device-select",
 			"data-slot": "root",
-			className: cn("grid min-w-0 gap-2", className),
+			className: cn("grid min-w-0 grid-cols-[minmax(0,1fr)] gap-2", className),
 			children: /* @__PURE__ */ jsx(Select, {
 				value: current,
 				onValueChange: handleValueChange,
@@ -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-level-warning-background", "--cui-range-level-clip-background", "--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

@@ -2,6 +2,8 @@
 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

@@ -1,7 +1,7 @@
 //#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 LevelMeterScale = {
+export type LevelMeterRange = {
   minDb: number;
   maxDb: number;
 };
@@ -10,8 +10,8 @@ export type LevelMeterReading = {
   peakDb: number;
   peakHeldUntilMs: number;
 };
-export declare function clampLevelDb(levelDb: number, { minDb, maxDb }: LevelMeterScale): number;
-export declare function levelMeterFraction(levelDb: number, scale: LevelMeterScale): number;
-export declare function advanceLevelMeterReading(reading: LevelMeterReading, targetDb: number, elapsedMs: number, nowMs: number, scale: LevelMeterScale): LevelMeterReading;
-export declare function levelMeterReadingSettled(reading: LevelMeterReading, targetDb: number, scale: LevelMeterScale): boolean;
+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/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";

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

@@ -2,12 +2,15 @@
   :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"]) {
-    block-size: calc(var(--spacing) * 2);
+    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)) {
@@ -16,17 +19,73 @@
 
   :where([data-control-family="range"][data-range-kind="level-meter"][data-slot="root"][data-orientation="vertical"]) {
     --_range-level-zone-angle: 0deg;
-    flex-direction: column;
-    inline-size: calc(var(--spacing) * 2);
+    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"]) {
-    flex: 1;
     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(
@@ -85,3 +144,15 @@
   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,90 @@
+"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", {
+		role: "group",
+		"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", {
+		"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,
+		id: titleId ?? void 0
+	});
+}
+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

@@ -24,8 +24,13 @@ export type LevelMeterBarProps = Omit<ComponentProps<"div">, "style" | "children
 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

@@ -1,60 +1,74 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { advanceLevelMeterReading, levelMeterFraction, levelMeterReadingSettled } from "../lib/level-meter-ballistics.js";
-import { useEffect, useRef, useState } from "react";
+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 root = null;
-	let scale = {
-		minDb: -60,
-		maxDb: 0
-	};
-	let announcesValue = false;
+	let attachment = null;
 	let targetDb = Number.NEGATIVE_INFINITY;
 	let reading = {
-		levelDb: scale.minDb,
-		peakDb: scale.minDb,
+		levelDb: Number.NEGATIVE_INFINITY,
+		peakDb: Number.NEGATIVE_INFINITY,
 		peakHeldUntilMs: 0
 	};
 	let frame = 0;
 	let lastFrameMs = 0;
 	let lastAnnouncedMs = Number.NEGATIVE_INFINITY;
-	const paint = (element, nowMs, settled) => {
-		element.style.setProperty("--_range-level", `${levelMeterFraction(reading.levelDb, scale)}`);
-		element.style.setProperty("--_range-level-peak", `${levelMeterFraction(reading.peakDb, scale)}`);
+	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);
-		element.setAttribute("aria-valuenow", `${roundedDb}`);
-		element.setAttribute("aria-valuetext", `${roundedDb} dB`);
+		root.setAttribute("aria-valuenow", `${roundedDb}`);
+		root.setAttribute("aria-valuetext", `${roundedDb} dB`);
 	};
 	const step = (nowMs) => {
 		frame = 0;
-		if (!root) return;
-		reading = advanceLevelMeterReading(reading, targetDb, nowMs - lastFrameMs, nowMs, scale);
+		if (!attachment) return;
+		reading = advanceLevelMeterReading(reading, targetDb, nowMs - lastFrameMs, nowMs, attachment.scale);
 		lastFrameMs = nowMs;
-		const settled = levelMeterReadingSettled(reading, targetDb, scale);
-		paint(root, nowMs, settled);
+		const settled = levelMeterReadingSettled(reading, targetDb, attachment.scale);
+		paint(attachment, nowMs, settled);
 		if (!settled) frame = requestAnimationFrame(step);
 	};
 	const wake = () => {
-		if (frame !== 0 || !root) return;
+		if (frame !== 0 || !attachment) return;
 		lastFrameMs = performance.now();
 		frame = requestAnimationFrame(step);
 	};
 	return {
-		attach(element, nextScale, nextAnnouncesValue) {
-			root = element;
-			scale = nextScale;
-			announcesValue = nextAnnouncesValue;
+		attach(nextAttachment) {
+			attachment = nextAttachment;
 			wake();
 			return () => {
 				cancelAnimationFrame(frame);
 				frame = 0;
-				root = null;
+				attachment = null;
 			};
 		},
 		setTarget(levelDb) {
@@ -79,10 +93,14 @@ function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, cl
 	useEffect(() => {
 		const root = rootRef.current;
 		if (!root) return;
-		return painter.attach(root, {
-			minDb,
-			maxDb
-		}, labelled);
+		return painter.attach({
+			root,
+			scale: {
+				minDb,
+				maxDb
+			},
+			announcesValue: labelled
+		});
 	}, [
 		painter,
 		minDb,
@@ -112,9 +130,15 @@ function LevelMeter({ value, source, minDb = -60, maxDb = 0, warningDb = -18, cl
 			"data-range-kind": "level-meter",
 			"data-slot": "root",
 			"data-orientation": orientation,
-			className: cn("flex", className),
+			className: cn("grid", className),
 			style: zoneStyle,
-			children: children ?? /* @__PURE__ */ jsx(LevelMeterTrack, { children: /* @__PURE__ */ jsx(LevelMeterBar, {}) })
+			children: /* @__PURE__ */ jsx(LevelMeterScaleContext, {
+				value: {
+					minDb,
+					maxDb
+				},
+				children: children ?? /* @__PURE__ */ jsx(LevelMeterTrack, { children: /* @__PURE__ */ jsx(LevelMeterBar, {}) })
+			})
 		}
 	});
 }
@@ -148,5 +172,30 @@ function LevelMeterPeak({ className, ...props }) {
 		...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, LevelMeterTrack };
+export { LevelMeter, LevelMeterBar, LevelMeterPeak, LevelMeterScale, LevelMeterTrack };

package/package.json

@@ -1,7 +1,25 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.1",
-  "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
+  "version": "0.9.3",
+  "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
+  "keywords": [
+    "react",
+    "react-components",
+    "component-library",
+    "ui-components",
+    "shadcn",
+    "shadcn-ui",
+    "tailwindcss",
+    "design-system",
+    "base-ui",
+    "nextjs",
+    "color-picker",
+    "emoji-picker",
+    "tree-view",
+    "markdown-editor",
+    "ai-chat",
+    "chat-ui"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",