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

@@ -1,9 +1,11 @@
 "use client";
+import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.js";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
-import { useCopyToClipboard } from "./hooks/use-copy-to-clipboard.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,7 +1,8 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { ScrollArea } from "./ui/scroll-area.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";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronRight, CircleAlert, CircleDashed, LoaderCircle } from "lucide-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;

package/dist/blocks/coding-agent.js

@@ -10,13 +10,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { BotIcon, ChevronRightIcon, CircleIcon, FolderIcon, PlusIcon, SearchIcon } from "lucide-react";
 //#region src/blocks/coding-agent.tsx
 function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [], projects, activeTaskId, activeTaskTitle = "New task", onNavigationSelect, onTaskSelect, onNewTask, onSearch, headerActions, sidebarFooter, children, layout = "viewport", className, style, ...props }) {
-	const contained = layout === "contained";
+	const Heading = layout === "contained" ? "h2" : "h1";
 	const providerStyle = {
 		"--sidebar-width": "17.5rem",
 		...style
 	};
 	return /* @__PURE__ */ jsxs(SidebarProvider, {
-		className: cn("overflow-hidden bg-background text-foreground", contained ? "relative h-full min-h-0" : "h-svh min-h-svh", className),
+		layout,
+		className: cn("bg-background text-foreground", layout === "viewport" && "h-svh overflow-hidden", className),
 		style: providerStyle,
 		...props,
 		children: [/* @__PURE__ */ jsx(CodingAgentSidebar, {
@@ -26,7 +27,6 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 			navigation,
 			projects,
 			activeTaskId,
-			contained,
 			sidebarFooter,
 			onNavigationSelect,
 			onTaskSelect,
@@ -39,14 +39,15 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 				children: [
 					/* @__PURE__ */ jsx(SidebarTrigger, {
 						size: "xs",
-						className: "md:hidden"
+						className: "lg:hidden"
 					}),
 					/* @__PURE__ */ jsx(FolderIcon, {
 						className: "size-4 shrink-0 text-muted-foreground",
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ jsx("h1", {
+					/* @__PURE__ */ jsx(Heading, {
 						className: "min-w-0 flex-1 truncate text-label font-medium",
+						title: activeTaskTitle,
 						children: activeTaskTitle
 					}),
 					headerActions ? /* @__PURE__ */ jsx("div", {
@@ -61,7 +62,7 @@ function CodingAgentBlock({ appName = "Agent", brand, sidebarTop, navigation = [
 		})]
 	});
 }
-function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects, activeTaskId, contained, sidebarFooter, onNavigationSelect, onTaskSelect, onNewTask, onSearch }) {
+function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects, activeTaskId, sidebarFooter, onNavigationSelect, onTaskSelect, onNewTask, onSearch }) {
 	const { setOpenMobile } = useSidebar();
 	function finishMobileNavigation() {
 		setOpenMobile(false);
@@ -72,7 +73,6 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 	}
 	return /* @__PURE__ */ jsxs(Sidebar, {
 		collapsible: "offcanvas",
-		className: contained ? "absolute! inset-y-0! h-full border-r border-sidebar-border" : void 0,
 		children: [
 			/* @__PURE__ */ jsxs(SidebarHeader, {
 				className: "gap-1.5 border-b border-sidebar-border px-2 pb-2 pt-3",
@@ -90,16 +90,20 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 								})
 							}), /* @__PURE__ */ jsx("span", {
 								className: "truncate text-label font-semibold",
+								title: appName,
 								children: appName
 							})]
-						}), /* @__PURE__ */ jsx(Button, {
+						}), onSearch ? /* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
 							size: "sm",
 							iconOnly: true,
 							"aria-label": "Search tasks",
 							onClick: onSearch,
-							children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5" })
-						})]
+							children: /* @__PURE__ */ jsx(SearchIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							})
+						}) : null]
 					}),
 					/* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
 						size: "sm",
@@ -120,7 +124,7 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 						item.icon,
 						/* @__PURE__ */ jsx("span", { children: item.label }),
 						item.trailing ? /* @__PURE__ */ jsx("span", {
-							className: "ml-auto shrink-0",
+							className: "ms-auto shrink-0",
 							children: item.trailing
 						}) : null
 					]
@@ -149,30 +153,26 @@ function CodingAgentSidebar({ appName, brand, sidebarTop, navigation, projects,
 								children: project.name
 							})
 						] }), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
-							className: "mt-1 pl-5",
-							children: project.tasks.map((task) => {
-								const isActive = task.id === activeTaskId;
-								return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
-									size: "sm",
-									isActive,
-									"aria-current": isActive ? "page" : void 0,
-									onClick: () => {
-										onTaskSelect?.(task, project);
-										finishMobileNavigation();
-									},
-									children: [
-										/* @__PURE__ */ jsx(CircleIcon, {
-											className: "size-1.5 fill-current opacity-35",
-											"aria-hidden": "true"
-										}),
-										/* @__PURE__ */ jsx("span", { children: task.title }),
-										task.trailing ? /* @__PURE__ */ jsx("span", {
-											className: "ml-auto shrink-0",
-											children: task.trailing
-										}) : null
-									]
-								}) }, task.id);
-							})
+							className: "mt-1 ps-5",
+							children: project.tasks.map((task) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+								size: "sm",
+								isActive: task.id === activeTaskId,
+								onClick: () => {
+									onTaskSelect?.(task, project);
+									finishMobileNavigation();
+								},
+								children: [
+									/* @__PURE__ */ jsx(CircleIcon, {
+										className: "size-1.5 fill-current opacity-35",
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ jsx("span", { children: task.title }),
+									task.trailing ? /* @__PURE__ */ jsx("span", {
+										className: "ms-auto shrink-0",
+										children: task.trailing
+									}) : null
+								]
+							}) }, task.id))
 						}) })]
 					}, project.id))
 				})]
@@ -215,11 +215,11 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 				})
 			}),
 			/* @__PURE__ */ jsx("h2", {
-				className: "text-balance text-xl font-medium tracking-tight sm:text-2xl",
+				className: "text-balance text-heading-3 sm:text-heading-2",
 				children: title
 			}),
 			description ? /* @__PURE__ */ jsx("p", {
-				className: "mt-2 max-w-xl text-sm leading-6 text-muted-foreground",
+				className: "mt-2 max-w-xl text-pretty text-body text-muted-foreground",
 				children: description
 			}) : null,
 			suggestions.length > 0 ? /* @__PURE__ */ jsx("div", {
@@ -227,7 +227,7 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 				children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(Button, {
 					variant: "surface",
 					size: "lg",
-					className: "h-auto min-h-28 w-full items-start justify-start whitespace-normal rounded-[var(--radius-panel)] px-4 py-4 text-left",
+					className: "h-auto min-h-28 w-full items-start justify-start whitespace-normal rounded-[var(--radius-panel)] px-4 py-4 text-start",
 					onClick: () => onSuggestionSelect?.(suggestion.prompt ?? suggestion.title, suggestion),
 					children: /* @__PURE__ */ jsxs("span", {
 						className: "flex min-w-0 flex-col items-start gap-3",
@@ -237,7 +237,7 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 								children: suggestion.icon
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-sm font-medium leading-5 text-foreground",
+								className: "text-body font-medium text-foreground",
 								children: suggestion.title
 							}),
 							suggestion.description ? /* @__PURE__ */ jsx("span", {