@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/action-bar.d.ts

@@ -24,20 +24,28 @@ export type ActionBarProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ActionBarKnobStyle;
 };
 export declare function ActionBar({ label, align, className, children, context, copyValue, editValue, onCopy, onCopyError, onEdit, onEditError, ...props }: ActionBarProps): import("react").JSX.Element;
-export type ActionBarItemProps = ComponentProps<typeof Button> & {
+type ActionBarItemBaseProps = Omit<ComponentProps<typeof Button>, "iconOnly" | "children"> & {
   icon?: ReactNode;
 };
-export declare function ActionBarItem({ icon, children, className, ...props }: ActionBarItemProps): import("react").JSX.Element;
-export type ActionBarCopyProps = Omit<ActionBarItemProps, "children"> & {
+export type ActionBarItemProps = ActionBarItemBaseProps & ({
+  children: NonNullable<ReactNode>;
+} | {
+  children?: null;
+  "aria-label": string;
+});
+export declare function ActionBarItem({ icon, children, active, disabled, ...props }: ActionBarItemProps): import("react").JSX.Element;
+export type ActionBarCopyProps = ActionBarItemBaseProps & {
   value?: ActionBarCopyValue;
-  children?: ReactNode;
+  children?: NonNullable<ReactNode>;
   copiedChildren?: ReactNode;
+  copiedAriaLabel?: string;
+  copyFailedLabel?: string;
   resetDelay?: number;
 };
-export declare function ActionBarCopy({ value, children, copiedChildren, resetDelay, disabled, onClick, ...props }: ActionBarCopyProps): import("react").JSX.Element;
-export type ActionBarEditProps = Omit<ActionBarItemProps, "children"> & {
+export declare function ActionBarCopy({ value, children, copiedChildren, copiedAriaLabel, copyFailedLabel, resetDelay, disabled, onClick, ...props }: ActionBarCopyProps): import("react").JSX.Element;
+export type ActionBarEditProps = ActionBarItemBaseProps & {
   value?: ActionBarCopyValue;
-  children?: ReactNode;
+  children?: NonNullable<ReactNode>;
 };
 export declare function ActionBarEdit({ value, children, disabled, onClick, ...props }: ActionBarEditProps): import("react").JSX.Element;
 //#endregion

package/dist/action-bar.js

@@ -2,8 +2,10 @@
 import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
+import { Toolbar } from "@base-ui/react/toolbar";
 import { createContext, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/action-bar.tsx
 const ActionBarContext = createContext({});
 async function resolveCopyValue(value) {
@@ -21,30 +23,35 @@ function ActionBar({ label = "Message actions", align = "start", className, chil
 	};
 	return /* @__PURE__ */ jsx(ActionBarContext.Provider, {
 		value: actionContext,
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsx(Toolbar.Root, {
+			...props,
 			"data-control-ui": "action-bar",
 			"data-control-family": "action-bar",
 			"data-slot": "root",
-			role: "toolbar",
 			"aria-label": label,
 			className: cn("flex items-center", align === "end" ? "justify-end" : "justify-start", className),
-			...props,
 			children
 		})
 	});
 }
-function ActionBarItem({ icon, children, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Button, {
-		size: "xs",
-		className,
-		...props,
-		children: [icon, children]
+function ActionBarItem({ icon, children, active, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		disabled,
+		focusableWhenDisabled: false,
+		render: /* @__PURE__ */ jsxs(Button, {
+			size: "xs",
+			active,
+			"aria-pressed": active,
+			iconOnly: children == null,
+			...props,
+			children: [icon, children]
+		})
 	});
 }
-function ActionBarCopy({ value, children = "Copy", copiedChildren = "Copied", resetDelay = 1200, disabled, onClick, ...props }) {
+function ActionBarCopy({ value, children = "Copy", copiedChildren = "Copied", copiedAriaLabel = "Copied to clipboard", copyFailedLabel = "Couldn't copy. Select the text and copy it manually.", resetDelay = 1200, disabled, onClick, ...props }) {
 	const { copyValue: contextCopyValue, onCopy, onCopyError } = useContext(ActionBarContext);
 	const copyValue = value ?? contextCopyValue;
-	const { isCopied, copyToClipboard } = useCopyToClipboard({
+	const { status, copyToClipboard } = useCopyToClipboard({
 		copiedDuration: resetDelay,
 		onCopy,
 		onCopyError
@@ -52,17 +59,30 @@ function ActionBarCopy({ value, children = "Copy", copiedChildren = "Copied", re
 	async function handleClick(event) {
 		onClick?.(event);
 		if (event.defaultPrevented) return;
-		const nextValue = await resolveCopyValue(copyValue);
-		if (!nextValue) return;
-		await copyToClipboard(nextValue);
+		try {
+			const nextValue = await resolveCopyValue(copyValue);
+			if (!nextValue) return;
+			await copyToClipboard(nextValue);
+		} catch (error) {
+			onCopyError?.(error);
+		}
 	}
-	return /* @__PURE__ */ jsx(ActionBarItem, {
-		"aria-live": "polite",
+	let copyStatus = "";
+	if (status === "copied") copyStatus = copiedAriaLabel;
+	else if (status === "failed") copyStatus = copyFailedLabel;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionBarItem, {
 		disabled: disabled ?? !copyValue,
 		onClick: handleClick,
 		...props,
-		children: isCopied ? copiedChildren : children
-	});
+		children: status === "copied" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "contents",
+			children: copiedChildren
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children
+		})] }) : children
+	}), /* @__PURE__ */ jsx(LiveStatus, { message: copyStatus })] });
 }
 function ActionBarEdit({ value, children = "Edit", disabled, onClick, ...props }) {
 	const { copyValue, editValue: contextEditValue, onEdit, onEditError } = useContext(ActionBarContext);

package/dist/activity.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "./lib/cn.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
 import { ScrollArea } from "./ui/scroll-area.js";
 import { createContext, useContext } from "react";
@@ -30,13 +31,13 @@ function formatActivityTitle(value) {
 }
 function Activity({ kind = "default", name, state = "pending", statusLabel, className, children, ...props }) {
 	const context = {
-		isError: state === "error",
 		isRunning: state === "running",
 		kind,
 		name,
 		state,
 		statusLabel: statusLabel ?? activityStatusLabels[state]
 	};
+	const statusText = typeof context.statusLabel === "string" ? context.statusLabel : activityStatusLabels[state];
 	return /* @__PURE__ */ jsx(ActivityContext.Provider, {
 		value: context,
 		children: /* @__PURE__ */ jsxs(Collapsible, {
@@ -46,20 +47,9 @@ function Activity({ kind = "default", name, state = "pending", statusLabel, clas
 			"data-activity-state": state,
 			"data-activity-kind": kind,
 			"data-activity-name": name,
-			"aria-busy": context.isRunning || void 0,
 			className: cn("group/activity min-w-0", className),
 			...props,
-			children: [/* @__PURE__ */ jsx("span", {
-				role: context.isError ? "alert" : "status",
-				"aria-live": context.isError ? "assertive" : "polite",
-				"aria-atomic": "true",
-				"data-control-ui": "activity",
-				"data-control-family": "activity",
-				"data-slot": "announcement",
-				"data-status": state,
-				className: "sr-only",
-				children: context.statusLabel
-			}), children]
+			children: [/* @__PURE__ */ jsx(LiveStatus, { message: name ? `${formatActivityTitle(name)}: ${statusText}` : statusText }), children]
 		})
 	});
 }
@@ -101,18 +91,20 @@ function ActivityIcon({ className, children, ...props }) {
 		"data-slot": "icon",
 		...props,
 		className: cn("flex shrink-0 items-center justify-center [&_svg]:size-4", className),
-		children: children ?? /* @__PURE__ */ jsx(Icon, {})
+		children: children ?? /* @__PURE__ */ jsx(Icon, { "data-motion-essential": activity.isRunning ? "" : void 0 })
 	});
 }
 function ActivityTitle({ className, children, ...props }) {
 	const activity = useActivityContext();
+	const text = children ?? (activity.name ? formatActivityTitle(activity.name) : void 0);
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "activity",
 		"data-control-family": "activity",
 		"data-slot": "title",
+		title: typeof text === "string" ? text : void 0,
 		...props,
 		className: cn("min-w-0 flex-1 truncate", className),
-		children: children ?? (activity.name ? formatActivityTitle(activity.name) : void 0)
+		children: text
 	});
 }
 function ActivityStatus({ className, children, ...props }) {

package/dist/audio-recorder.d.ts

@@ -11,11 +11,16 @@ type AudioRecorderStyleProps<Props, Style> = Omit<Props, "style"> & {
 export declare function useAudioRecorderContext(): UseAudioRecorderResult;
 export type AudioRecorderProps = Omit<ComponentProps<"div">, "style"> & UseAudioRecorderOptions & {
   label?: string;
+  recordingLabel?: string;
+  timeLimitLabel?: string;
+  sendingLabel?: string;
+  sentLabel?: string;
+  canceledLabel?: string;
   style?: CSSProperties & AudioRecorderKnobStyle;
 };
-export declare function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label, className, children, ...props }: AudioRecorderProps): import("react").JSX.Element;
+export declare function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label, recordingLabel, timeLimitLabel, sendingLabel, sentLabel, canceledLabel, className, children, ...props }: AudioRecorderProps): import("react").JSX.Element;
 export type AudioRecorderTriggerProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
-export declare function AudioRecorderTrigger({ className, children, disabled, onClick, ...props }: AudioRecorderTriggerProps): import("react").JSX.Element;
+export declare function AudioRecorderTrigger({ className, children, disabled, onClick, ref, ...props }: AudioRecorderTriggerProps): import("react").JSX.Element;
 export type AudioRecorderVisualizerProps = AudioRecorderStyleProps<Omit<ComponentProps<"div">, "children">, AudioVisualizerKnobStyle & AudioRecorderKnobStyle> & {
   points?: number;
 };
@@ -23,10 +28,15 @@ export declare function AudioRecorderVisualizer({ points, className, ...props }:
 export type AudioRecorderStatusProps = AudioRecorderStyleProps<ComponentProps<"span">, AudioRecorderKnobStyle>;
 export declare function AudioRecorderStatus({ className, children, ...props }: AudioRecorderStatusProps): import("react").JSX.Element;
 export type AudioRecorderDurationProps = AudioRecorderStyleProps<ComponentProps<"span">, AudioRecorderKnobStyle>;
-export declare function AudioRecorderDuration({ className, children, ...props }: AudioRecorderDurationProps): import("react").JSX.Element;
+export declare function AudioRecorderDuration({ className, children, durationLabel, ...props }: AudioRecorderDurationProps & {
+  durationLabel?: string;
+}): import("react").JSX.Element;
 export type AudioRecorderCancelProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
 export declare function AudioRecorderCancel({ className, children, disabled, onClick, tabIndex, ...props }: AudioRecorderCancelProps): import("react").JSX.Element;
 export type AudioRecorderSubmitProps = AudioRecorderStyleProps<ComponentProps<typeof Button>, ButtonKnobStyle & AudioRecorderKnobStyle>;
-export declare function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, ...props }: AudioRecorderSubmitProps): import("react").JSX.Element;
+export declare function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, label, retryLabel, ...props }: AudioRecorderSubmitProps & {
+  label?: string;
+  retryLabel?: string;
+}): import("react").JSX.Element;
 //#endregion
 export type { AudioRecording };

package/dist/audio-recorder.js

@@ -1,20 +1,35 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { AudioVisualizer } from "./audio-visualizer.js";
 import { useAudioRecorder } from "./hooks/use-audio-recorder.js";
 import { formatAudioRecorderDuration } from "./lib/format-audio-recorder-duration.js";
-import { createContext, use } from "react";
+import { createContext, use, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, MicIcon, XIcon } from "lucide-react";
 //#region src/audio-recorder.tsx
 const AudioRecorderContext = createContext(null);
+const AudioRecorderTriggerRefContext = createContext(null);
+function focusAudioRecorderTrigger(triggerRef) {
+	triggerRef?.current?.focus();
+}
 function useAudioRecorderContext() {
 	const context = use(AudioRecorderContext);
 	if (!context) throw new Error("AudioRecorder compound components must be rendered inside <AudioRecorder>.");
 	return context;
 }
-function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label = "Voice recorder", className, children, ...props }) {
+function audioRecorderAnnouncement(previous, next, maxDurationMs, labels) {
+	if (next.error && next.error !== previous.error) return next.error.message;
+	if (next.state === previous.state) return null;
+	if (next.state === "recording") return labels.recordingLabel;
+	if (next.state === "submitting") return labels.sendingLabel;
+	if (next.state === "recorded" && previous.state === "recording" && maxDurationMs && next.durationMs >= maxDurationMs) return labels.timeLimitLabel;
+	if (next.state === "idle" && previous.state === "submitting") return labels.sentLabel;
+	if (next.state === "idle" && (previous.state === "recording" || previous.state === "recorded")) return labels.canceledLabel;
+	return null;
+}
+function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId, label = "Voice recorder", recordingLabel = "Recording", timeLimitLabel = "Stopped at time limit", sendingLabel = "Sending voice recording", sentLabel = "Voice recording sent", canceledLabel = "Voice recording canceled", className, children, ...props }) {
 	const recorder = useAudioRecorder({
 		onRecordingComplete,
 		onCancel,
@@ -24,21 +39,42 @@ function AudioRecorder({ onRecordingComplete, onCancel, maxDurationMs, disabled,
 		barDurationMs,
 		deviceId
 	});
+	const triggerRef = useRef(null);
+	const [previous, setPrevious] = useState(recorder);
+	const [announcement, setAnnouncement] = useState("");
+	if (previous.state !== recorder.state || previous.error !== recorder.error) {
+		const next = audioRecorderAnnouncement(previous, recorder, maxDurationMs, {
+			recordingLabel,
+			timeLimitLabel,
+			sendingLabel,
+			sentLabel,
+			canceledLabel
+		});
+		setPrevious({
+			state: recorder.state,
+			error: recorder.error,
+			durationMs: recorder.durationMs
+		});
+		if (next !== null) setAnnouncement(next);
+	}
 	return /* @__PURE__ */ jsx(AudioRecorderContext.Provider, {
 		value: recorder,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-control-ui": "audio-recorder",
-			"data-control-family": "audio-recorder",
-			"data-slot": "root",
-			"data-state": recorder.state,
-			"data-disabled": recorder.isDisabled ? "true" : void 0,
-			"data-error": recorder.error ? "true" : void 0,
-			role: "group",
-			"aria-label": label,
-			"aria-disabled": recorder.isDisabled || void 0,
-			className: cn("flex w-full min-w-0 max-w-full items-center", className),
-			...props,
-			children: children ?? /* @__PURE__ */ jsx(AudioRecorderDefaultLayout, { points: barCount })
+		children: /* @__PURE__ */ jsx(AudioRecorderTriggerRefContext.Provider, {
+			value: triggerRef,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-control-ui": "audio-recorder",
+				"data-control-family": "audio-recorder",
+				"data-slot": "root",
+				"data-state": recorder.state,
+				"data-disabled": recorder.isDisabled ? "true" : void 0,
+				"data-error": recorder.error ? "true" : void 0,
+				role: "group",
+				"aria-label": label,
+				"aria-disabled": recorder.isDisabled || void 0,
+				className: cn("flex w-full min-w-0 max-w-full items-center", className),
+				...props,
+				children: [children ?? /* @__PURE__ */ jsx(AudioRecorderDefaultLayout, { points: barCount }), /* @__PURE__ */ jsx(LiveStatus, { message: announcement })]
+			})
 		})
 	});
 }
@@ -65,8 +101,14 @@ function AudioRecorderDefaultLayout({ points }) {
 		})
 	] });
 }
-function AudioRecorderTrigger({ className, children, disabled, onClick, ...props }) {
+function AudioRecorderTrigger({ className, children, disabled, onClick, ref, ...props }) {
 	const recorder = useAudioRecorderContext();
+	const triggerRef = use(AudioRecorderTriggerRefContext);
+	function setRef(node) {
+		if (triggerRef) triggerRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}
 	const isActive = recorder.state === "requesting" || recorder.state === "recording" || recorder.state === "recorded" || recorder.state === "submitting";
 	const isStatusOnly = !recorder.canStart && (recorder.state === "requesting" || recorder.state === "recording" || recorder.state === "recorded" || recorder.state === "submitting");
 	const triggerVariant = audioRecorderTriggerVariant(recorder, isActive);
@@ -91,6 +133,8 @@ function AudioRecorderTrigger({ className, children, disabled, onClick, ...props
 		"aria-label": ariaLabel,
 		title: recorder.error?.message,
 		disabled: disabled ?? (recorder.isDisabled || !recorder.canStart),
+		focusableWhenDisabled: true,
+		ref: setRef,
 		className: cn("data-[status-only=true]:cursor-default", className),
 		onClick: handleClick,
 		...props,
@@ -129,7 +173,6 @@ function AudioRecorderVisualizer({ points, className, ...props }) {
 		active: recorder.state === "recording",
 		levels: recorder.levels,
 		points,
-		"aria-hidden": !isVisible,
 		className,
 		...props
 	});
@@ -138,14 +181,15 @@ function AudioRecorderStatus({ className, children, ...props }) {
 	const recorder = useAudioRecorderContext();
 	const message = children ?? audioRecorderStatusMessage(recorder);
 	const isVisible = Boolean(message);
+	const title = typeof message === "string" ? message : void 0;
 	return /* @__PURE__ */ jsx("span", {
 		"data-control-ui": "audio-recorder",
 		"data-control-family": "audio-recorder",
 		"data-slot": "status",
 		"data-visible": isVisible ? "true" : void 0,
-		"data-tone": recorder.state === "error" ? "error" : "neutral",
-		"aria-hidden": !isVisible,
-		"aria-live": "polite",
+		"data-tone": recorder.error ? "error" : "neutral",
+		"aria-hidden": "true",
+		title,
 		className: cn("min-w-0 flex-1 truncate", className),
 		...props,
 		children: message
@@ -154,29 +198,35 @@ function AudioRecorderStatus({ className, children, ...props }) {
 function audioRecorderStatusMessage(recorder) {
 	if (recorder.state === "requesting") return "Allow microphone access";
 	if (recorder.state === "submitting") return "Sending voice recording";
-	if (recorder.state === "error") return recorder.error?.message;
+	if (recorder.error) return recorder.error.message;
 	return null;
 }
-function AudioRecorderDuration({ className, children, ...props }) {
+function AudioRecorderDuration({ className, children, durationLabel = "Recording length", ...props }) {
 	const recorder = useAudioRecorderContext();
 	const isVisible = recorder.state === "recording" || recorder.state === "recorded";
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsxs("span", {
 		"data-control-ui": "audio-recorder",
 		"data-control-family": "audio-recorder",
 		"data-slot": "duration",
 		"data-visible": isVisible ? "true" : void 0,
 		"aria-hidden": !isVisible,
-		className: cn("shrink-0", className),
+		className: cn("shrink-0 tabular-nums", className),
 		...props,
-		children: children ?? formatAudioRecorderDuration(recorder.durationMs)
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "sr-only",
+			children: [durationLabel, " "]
+		}), children ?? formatAudioRecorderDuration(recorder.durationMs)]
 	});
 }
 function AudioRecorderCancel({ className, children, disabled, onClick, tabIndex, ...props }) {
 	const recorder = useAudioRecorderContext();
+	const triggerRef = use(AudioRecorderTriggerRefContext);
 	const isVisible = recorder.canCancel;
 	function handleClick(event) {
 		onClick?.(event);
-		if (!event.defaultPrevented && recorder.canCancel) recorder.cancel();
+		if (event.defaultPrevented || !recorder.canCancel) return;
+		focusAudioRecorderTrigger(triggerRef);
+		recorder.cancel();
 	}
 	return /* @__PURE__ */ jsx(Button, {
 		"data-control-ui": "audio-recorder",
@@ -201,12 +251,15 @@ function AudioRecorderCancel({ className, children, disabled, onClick, tabIndex,
 		})
 	});
 }
-function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, ...props }) {
+function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex, label = "Send voice recording", retryLabel = "Retry sending voice recording", ...props }) {
 	const recorder = useAudioRecorderContext();
+	const triggerRef = use(AudioRecorderTriggerRefContext);
 	const isVisible = recorder.canSubmit;
 	async function handleClick(event) {
 		onClick?.(event);
-		if (!event.defaultPrevented && recorder.canSubmit) await recorder.submit();
+		if (event.defaultPrevented || !recorder.canSubmit) return;
+		focusAudioRecorderTrigger(triggerRef);
+		await recorder.submit();
 	}
 	return /* @__PURE__ */ jsx(Button, {
 		"data-control-ui": "audio-recorder",
@@ -218,7 +271,7 @@ function AudioRecorderSubmit({ className, children, disabled, onClick, tabIndex,
 		size: "sm",
 		iconOnly: true,
 		shape: "circle",
-		"aria-label": "Send voice recording",
+		"aria-label": recorder.error ? retryLabel : label,
 		"aria-hidden": !isVisible,
 		tabIndex: isVisible ? tabIndex : -1,
 		disabled: disabled ?? (recorder.state === "submitting" || !isVisible),

package/dist/audio-visualizer.js

@@ -29,7 +29,7 @@ function AudioVisualizer({ levels, points, active = true, className, style, ...p
 			"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%",
+			className: "flex size-full items-stretch justify-end mask-l-from-90% rtl:mask-l-from-100% rtl:mask-r-from-90%",
 			children: visible.map(({ key, level }) => {
 				const perceptualLevel = Math.sqrt(level);
 				const visibleLevel = MIN_VISIBLE_LEVEL + perceptualLevel * .88;