@burtson-labs/ui 0.10.1 → 0.12.0

package/dist/components/voice-recorder.js

@@ -0,0 +1,240 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { formatDuration } from "./audio-player.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Pause from "@burtson-labs/icons/react/pause";
+import Play from "@burtson-labs/icons/react/play";
+import Trash from "@burtson-labs/icons/react/trash";
+import Square from "@burtson-labs/icons/react/square";
+import Mic from "@burtson-labs/icons/react/mic";
+//#region src/components/voice-recorder.tsx
+var LEVEL_BARS = 12;
+function recordingSupported() {
+	return typeof navigator !== "undefined" && typeof navigator.mediaDevices?.getUserMedia === "function" && typeof globalThis.MediaRecorder === "function";
+}
+/**
+* A microphone control for a composer: tap to record, then pause, stop to
+* keep the clip or discard it. While recording it shows a live level meter
+* and the elapsed time, in the recording colour (a state, not an error).
+* When the browser can't record or the microphone is blocked it says so and
+* how to fix it.
+*/
+function VoiceRecorder({ onRecorded, onCancel, onStateChange, maxDurationMs = 3e5, mimeType, label = "Record a voice message", className, ...props }) {
+	const [state, setStateRaw] = React.useState("idle");
+	const [elapsed, setElapsed] = React.useState(0);
+	const [levels, setLevels] = React.useState(() => Array.from({ length: LEVEL_BARS }, () => 0));
+	const recorder = React.useRef(null);
+	const stream = React.useRef(null);
+	const chunks = React.useRef([]);
+	const started = React.useRef(0);
+	const pausedTotal = React.useRef(0);
+	const pausedAt = React.useRef(0);
+	const discard = React.useRef(false);
+	const frame = React.useRef(0);
+	const audioCtx = React.useRef(null);
+	const tick = React.useRef(void 0);
+	const setState = React.useCallback((s) => {
+		setStateRaw(s);
+		onStateChange?.(s);
+	}, [onStateChange]);
+	const cleanup = React.useCallback(() => {
+		cancelAnimationFrame(frame.current);
+		clearInterval(tick.current);
+		stream.current?.getTracks().forEach((t) => t.stop());
+		stream.current = null;
+		audioCtx.current?.close().catch(() => void 0);
+		audioCtx.current = null;
+		setLevels(Array.from({ length: LEVEL_BARS }, () => 0));
+	}, []);
+	React.useEffect(() => cleanup, [cleanup]);
+	const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+	const recordedMs = () => now() - started.current - pausedTotal.current - (pausedAt.current ? now() - pausedAt.current : 0);
+	const meter = (s) => {
+		const Ctx = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+		if (!Ctx) return;
+		try {
+			const ctx = new Ctx();
+			audioCtx.current = ctx;
+			const analyser = ctx.createAnalyser();
+			analyser.fftSize = 256;
+			ctx.createMediaStreamSource(s).connect(analyser);
+			const data = new Uint8Array(analyser.frequencyBinCount);
+			const draw = () => {
+				analyser.getByteFrequencyData(data);
+				const per = Math.floor(data.length / LEVEL_BARS) || 1;
+				setLevels(Array.from({ length: LEVEL_BARS }, (_, i) => {
+					let sum = 0;
+					for (let j = i * per; j < (i + 1) * per; j++) sum += data[j] ?? 0;
+					return Math.min(1, sum / per / 180);
+				}));
+				frame.current = requestAnimationFrame(draw);
+			};
+			draw();
+		} catch {
+			audioCtx.current?.close().catch(() => void 0);
+			audioCtx.current = null;
+		}
+	};
+	const start = async () => {
+		if (!recordingSupported()) {
+			setState("unsupported");
+			return;
+		}
+		setState("requesting");
+		let s;
+		try {
+			s = await navigator.mediaDevices.getUserMedia({ audio: true });
+		} catch (err) {
+			const name = err?.name;
+			setState(name === "NotAllowedError" || name === "SecurityError" ? "denied" : "error");
+			return;
+		}
+		stream.current = s;
+		const type = mimeType && MediaRecorder.isTypeSupported?.(mimeType) ? mimeType : void 0;
+		let rec;
+		try {
+			rec = new MediaRecorder(s, type ? { mimeType: type } : void 0);
+		} catch {
+			cleanup();
+			setState("error");
+			return;
+		}
+		recorder.current = rec;
+		chunks.current = [];
+		discard.current = false;
+		rec.ondataavailable = (e) => {
+			if (e.data && e.data.size > 0) chunks.current.push(e.data);
+		};
+		rec.onstop = () => {
+			const durationMs = Math.round(recordedMs());
+			const mime = rec.mimeType || type || "audio/webm";
+			cleanup();
+			setElapsed(0);
+			setState("idle");
+			if (!discard.current) onRecorded({
+				blob: new Blob(chunks.current, { type: mime }),
+				mimeType: mime,
+				durationMs
+			});
+			chunks.current = [];
+		};
+		started.current = now();
+		pausedTotal.current = 0;
+		pausedAt.current = 0;
+		rec.start(250);
+		setState("recording");
+		meter(s);
+		tick.current = setInterval(() => {
+			const ms = recordedMs();
+			setElapsed(ms);
+			if (ms >= maxDurationMs && rec.state !== "inactive") rec.stop();
+		}, 200);
+	};
+	const pause = () => {
+		const rec = recorder.current;
+		if (!rec) return;
+		if (rec.state === "recording") {
+			rec.pause();
+			pausedAt.current = now();
+			setState("paused");
+		} else if (rec.state === "paused") {
+			rec.resume();
+			pausedTotal.current += now() - pausedAt.current;
+			pausedAt.current = 0;
+			setState("recording");
+		}
+	};
+	const stop = (keep) => {
+		const rec = recorder.current;
+		discard.current = !keep;
+		if (rec && rec.state !== "inactive") rec.stop();
+		else {
+			cleanup();
+			setState("idle");
+		}
+		if (!keep) onCancel?.();
+	};
+	if (!(state === "recording" || state === "paused")) {
+		const note = state === "denied" ? "Microphone access is blocked. Allow it in your browser’s site settings, then try again." : state === "unsupported" ? "This browser can’t record audio. Try a current Chrome, Edge, Firefox or Safari." : state === "error" ? "The microphone could not start. Check that one is connected and not in use." : null;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-slot": "voice-recorder",
+			"data-state": state,
+			className: cn("inline-flex items-center gap-2", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon-sm",
+				variant: "ghost",
+				"aria-label": label,
+				title: label,
+				disabled: state === "requesting" || state === "unsupported",
+				onClick: () => void start(),
+				className: "pointer-coarse:size-11",
+				children: /* @__PURE__ */ jsx(Mic, {})
+			}), note && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "max-w-xs text-xs text-muted-foreground",
+				children: note
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "voice-recorder",
+		"data-state": state,
+		role: "group",
+		"aria-label": "Recording",
+		className: cn("inline-flex items-center gap-2 rounded-full border border-recording/30 bg-recording/8 py-1 pr-1 pl-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("size-2 shrink-0 rounded-full bg-recording", state === "recording" && "motion-safe:animate-pulse")
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "flex h-5 items-center gap-[2px]",
+				children: levels.map((l, i) => /* @__PURE__ */ jsx("span", {
+					className: "w-[3px] rounded-full bg-recording/80 transition-[height] duration-[var(--duration-fast)] ease-[var(--ease-standard)]",
+					style: { height: `${Math.max(15, Math.round(l * 100))}%` }
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				role: "timer",
+				"aria-label": `${state === "paused" ? "Paused at" : "Recording"} ${formatDuration(elapsed / 1e3)}`,
+				className: "font-mono text-xs text-foreground tabular-nums",
+				children: formatDuration(elapsed / 1e3)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon-sm",
+				variant: "ghost",
+				"aria-label": state === "paused" ? "Resume recording" : "Pause recording",
+				onClick: pause,
+				className: "rounded-full pointer-coarse:size-11",
+				children: state === "paused" ? /* @__PURE__ */ jsx(Play, { className: "fill-current" }) : /* @__PURE__ */ jsx(Pause, { className: "fill-current" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon-sm",
+				variant: "ghost",
+				"aria-label": "Discard recording",
+				onClick: () => stop(false),
+				className: "rounded-full pointer-coarse:size-11",
+				children: /* @__PURE__ */ jsx(Trash, {})
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon-sm",
+				"aria-label": "Stop and attach recording",
+				onClick: () => stop(true),
+				className: "rounded-full bg-recording text-recording-foreground hover:bg-recording/90 pointer-coarse:size-11",
+				children: /* @__PURE__ */ jsx(Square, { className: "fill-current" })
+			})
+		]
+	});
+}
+//#endregion
+export { VoiceRecorder };
+
+//# sourceMappingURL=voice-recorder.js.map

package/dist/components/voice-recorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voice-recorder.js","names":[],"sources":["../../src/components/voice-recorder.tsx"],"sourcesContent":["import Mic from '@burtson-labs/icons/react/mic';\nimport Pause from '@burtson-labs/icons/react/pause';\nimport Play from '@burtson-labs/icons/react/play';\nimport Square from '@burtson-labs/icons/react/square';\nimport Trash from '@burtson-labs/icons/react/trash';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { formatDuration } from './audio-player';\nimport { Button } from './button';\n\nexport type VoiceRecorderState =\n  'idle' | 'requesting' | 'recording' | 'paused' | 'denied' | 'unsupported' | 'error';\n\nexport interface VoiceRecording {\n  blob: Blob;\n  mimeType: string;\n  durationMs: number;\n}\n\nexport interface VoiceRecorderProps extends React.ComponentProps<'div'> {\n  /** The finished recording, after Stop. */\n  onRecorded: (recording: VoiceRecording) => void;\n  onCancel?: () => void;\n  onStateChange?: (state: VoiceRecorderState) => void;\n  /** Stops by itself at this length. Default 5 minutes. */\n  maxDurationMs?: number;\n  /** Preferred container, used when the browser supports it (e.g. \"audio/webm\"). */\n  mimeType?: string;\n  /** Accessible name of the record button. */\n  label?: string;\n}\n\nconst LEVEL_BARS = 12;\n\nfunction recordingSupported() {\n  return (\n    typeof navigator !== 'undefined' &&\n    typeof navigator.mediaDevices?.getUserMedia === 'function' &&\n    typeof (globalThis as { MediaRecorder?: unknown }).MediaRecorder === 'function'\n  );\n}\n\n/**\n * A microphone control for a composer: tap to record, then pause, stop to\n * keep the clip or discard it. While recording it shows a live level meter\n * and the elapsed time, in the recording colour (a state, not an error).\n * When the browser can't record or the microphone is blocked it says so and\n * how to fix it.\n */\nfunction VoiceRecorder({\n  onRecorded,\n  onCancel,\n  onStateChange,\n  maxDurationMs = 5 * 60 * 1000,\n  mimeType,\n  label = 'Record a voice message',\n  className,\n  ...props\n}: VoiceRecorderProps) {\n  const [state, setStateRaw] = React.useState<VoiceRecorderState>('idle');\n  const [elapsed, setElapsed] = React.useState(0);\n  const [levels, setLevels] = React.useState<number[]>(() =>\n    Array.from({ length: LEVEL_BARS }, () => 0),\n  );\n  const recorder = React.useRef<MediaRecorder | null>(null);\n  const stream = React.useRef<MediaStream | null>(null);\n  const chunks = React.useRef<Blob[]>([]);\n  const started = React.useRef(0);\n  const pausedTotal = React.useRef(0);\n  const pausedAt = React.useRef(0);\n  const discard = React.useRef(false);\n  const frame = React.useRef(0);\n  const audioCtx = React.useRef<AudioContext | null>(null);\n  const tick = React.useRef<ReturnType<typeof setInterval> | undefined>(undefined);\n\n  const setState = React.useCallback(\n    (s: VoiceRecorderState) => {\n      setStateRaw(s);\n      onStateChange?.(s);\n    },\n    [onStateChange],\n  );\n\n  const cleanup = React.useCallback(() => {\n    cancelAnimationFrame(frame.current);\n    clearInterval(tick.current);\n    stream.current?.getTracks().forEach((t) => t.stop());\n    stream.current = null;\n    void audioCtx.current?.close().catch(() => undefined);\n    audioCtx.current = null;\n    setLevels(Array.from({ length: LEVEL_BARS }, () => 0));\n  }, []);\n\n  React.useEffect(() => cleanup, [cleanup]);\n\n  const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());\n  const recordedMs = () =>\n    now() -\n    started.current -\n    pausedTotal.current -\n    (pausedAt.current ? now() - pausedAt.current : 0);\n\n  const meter = (s: MediaStream) => {\n    const Ctx =\n      globalThis.AudioContext ??\n      (globalThis as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n    if (!Ctx) return;\n    try {\n      const ctx = new Ctx();\n      audioCtx.current = ctx;\n      const analyser = ctx.createAnalyser();\n      analyser.fftSize = 256;\n      ctx.createMediaStreamSource(s).connect(analyser);\n      const data = new Uint8Array(analyser.frequencyBinCount);\n      const draw = () => {\n        analyser.getByteFrequencyData(data);\n        const per = Math.floor(data.length / LEVEL_BARS) || 1;\n        setLevels(\n          Array.from({ length: LEVEL_BARS }, (_, i) => {\n            let sum = 0;\n            for (let j = i * per; j < (i + 1) * per; j++) sum += data[j] ?? 0;\n            return Math.min(1, sum / per / 180);\n          }),\n        );\n        frame.current = requestAnimationFrame(draw);\n      };\n      draw();\n    } catch {\n      // No meter is fine; recording still works. Drop the half-made context.\n      void audioCtx.current?.close().catch(() => undefined);\n      audioCtx.current = null;\n    }\n  };\n\n  const start = async () => {\n    if (!recordingSupported()) {\n      setState('unsupported');\n      return;\n    }\n    setState('requesting');\n    let s: MediaStream;\n    try {\n      s = await navigator.mediaDevices.getUserMedia({ audio: true });\n    } catch (err) {\n      const name = (err as { name?: string })?.name;\n      setState(name === 'NotAllowedError' || name === 'SecurityError' ? 'denied' : 'error');\n      return;\n    }\n    stream.current = s;\n    const type = mimeType && MediaRecorder.isTypeSupported?.(mimeType) ? mimeType : undefined;\n    let rec: MediaRecorder;\n    try {\n      rec = new MediaRecorder(s, type ? { mimeType: type } : undefined);\n    } catch {\n      cleanup();\n      setState('error');\n      return;\n    }\n    recorder.current = rec;\n    chunks.current = [];\n    discard.current = false;\n    rec.ondataavailable = (e) => {\n      if (e.data && e.data.size > 0) chunks.current.push(e.data);\n    };\n    rec.onstop = () => {\n      const durationMs = Math.round(recordedMs());\n      const mime = rec.mimeType || type || 'audio/webm';\n      cleanup();\n      setElapsed(0);\n      setState('idle');\n      if (!discard.current)\n        onRecorded({ blob: new Blob(chunks.current, { type: mime }), mimeType: mime, durationMs });\n      chunks.current = [];\n    };\n    started.current = now();\n    pausedTotal.current = 0;\n    pausedAt.current = 0;\n    rec.start(250);\n    setState('recording');\n    meter(s);\n    tick.current = setInterval(() => {\n      const ms = recordedMs();\n      setElapsed(ms);\n      if (ms >= maxDurationMs && rec.state !== 'inactive') rec.stop();\n    }, 200);\n  };\n\n  const pause = () => {\n    const rec = recorder.current;\n    if (!rec) return;\n    if (rec.state === 'recording') {\n      rec.pause();\n      pausedAt.current = now();\n      setState('paused');\n    } else if (rec.state === 'paused') {\n      rec.resume();\n      pausedTotal.current += now() - pausedAt.current;\n      pausedAt.current = 0;\n      setState('recording');\n    }\n  };\n\n  const stop = (keep: boolean) => {\n    const rec = recorder.current;\n    discard.current = !keep;\n    if (rec && rec.state !== 'inactive') rec.stop();\n    else {\n      cleanup();\n      setState('idle');\n    }\n    if (!keep) onCancel?.();\n  };\n\n  const live = state === 'recording' || state === 'paused';\n\n  if (!live) {\n    const note =\n      state === 'denied'\n        ? 'Microphone access is blocked. Allow it in your browser’s site settings, then try again.'\n        : state === 'unsupported'\n          ? 'This browser can’t record audio. Try a current Chrome, Edge, Firefox or Safari.'\n          : state === 'error'\n            ? 'The microphone could not start. Check that one is connected and not in use.'\n            : null;\n    return (\n      <div\n        data-slot=\"voice-recorder\"\n        data-state={state}\n        className={cn('inline-flex items-center gap-2', className)}\n        {...props}\n      >\n        <Button\n          type=\"button\"\n          size=\"icon-sm\"\n          variant=\"ghost\"\n          aria-label={label}\n          title={label}\n          disabled={state === 'requesting' || state === 'unsupported'}\n          onClick={() => void start()}\n          className=\"pointer-coarse:size-11\"\n        >\n          <Mic />\n        </Button>\n        {note && (\n          <p role=\"alert\" className=\"max-w-xs text-xs text-muted-foreground\">\n            {note}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"voice-recorder\"\n      data-state={state}\n      role=\"group\"\n      aria-label=\"Recording\"\n      className={cn(\n        'inline-flex items-center gap-2 rounded-full border border-recording/30 bg-recording/8 py-1 pr-1 pl-3',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden\n        className={cn(\n          'size-2 shrink-0 rounded-full bg-recording',\n          state === 'recording' && 'motion-safe:animate-pulse',\n        )}\n      />\n      <span aria-hidden className=\"flex h-5 items-center gap-[2px]\">\n        {levels.map((l, i) => (\n          <span\n            key={i}\n            className=\"w-[3px] rounded-full bg-recording/80 transition-[height] duration-[var(--duration-fast)] ease-[var(--ease-standard)]\"\n            style={{ height: `${Math.max(15, Math.round(l * 100))}%` }}\n          />\n        ))}\n      </span>\n      <span\n        role=\"timer\"\n        aria-label={`${state === 'paused' ? 'Paused at' : 'Recording'} ${formatDuration(elapsed / 1000)}`}\n        className=\"font-mono text-xs text-foreground tabular-nums\"\n      >\n        {formatDuration(elapsed / 1000)}\n      </span>\n      <Button\n        type=\"button\"\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        aria-label={state === 'paused' ? 'Resume recording' : 'Pause recording'}\n        onClick={pause}\n        className=\"rounded-full pointer-coarse:size-11\"\n      >\n        {state === 'paused' ? (\n          <Play className=\"fill-current\" />\n        ) : (\n          <Pause className=\"fill-current\" />\n        )}\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"icon-sm\"\n        variant=\"ghost\"\n        aria-label=\"Discard recording\"\n        onClick={() => stop(false)}\n        className=\"rounded-full pointer-coarse:size-11\"\n      >\n        <Trash />\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"icon-sm\"\n        aria-label=\"Stop and attach recording\"\n        onClick={() => stop(true)}\n        className=\"rounded-full bg-recording text-recording-foreground hover:bg-recording/90 pointer-coarse:size-11\"\n      >\n        <Square className=\"fill-current\" />\n      </Button>\n    </div>\n  );\n}\n\nexport { VoiceRecorder };\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -6,11 +6,14 @@ export * from './components/alert';
 export * from './components/alert-dialog';
 export * from './components/app-shell';
 export * from './components/attachment';
+export * from './components/audio-player';
 export * from './components/avatar';
 export * from './components/badge';
 export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/card';
+export * from './components/chat-history';
+export * from './components/chat-layout';
 export * from './components/checkbox';
 export * from './components/collapsible';
 export * from './components/combobox';
@@ -33,6 +36,7 @@ export * from './components/label';
 export * from './components/markdown';
 export * from './components/menubar';
 export * from './components/message';
+export * from './components/message-actions';
 export * from './components/mobile-nav';
 export * from './components/navigation-menu';
 export * from './components/onboarding-checklist';
@@ -66,3 +70,4 @@ export * from './components/toolbar';
 export * from './components/tooltip';
 export * from './components/tour';
 export * from './components/tree-view';
+export * from './components/voice-recorder';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from "./lib/utils.js";
 import { isApplePlatform, modKeyLabel, shortcutLabel } from "./lib/platform.js";
-import tokens, { brand, dark, fontMono, fontSans, light, motion, radius, shadow } from "./tokens.js";
+import tokens, { accentTokens, brand, contrast, dark, duration, easing, elevation, fontMono, fontSans, light, mix, motion, radius, shadow } from "./tokens.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/accordion.js";
 import { Alert, AlertDescription, AlertTitle, alertVariants } from "./components/alert.js";
 import { Button, buttonVariants } from "./components/button.js";
@@ -9,24 +9,30 @@ import { AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain,
 import { Progress } from "./components/progress.js";
 import { Spinner } from "./components/spinner.js";
 import { AttachmentItem, AttachmentTray, UploadQueue, formatBytes } from "./components/attachment.js";
+import { AudioPlayer, VoiceMessage, computePeaks, formatDuration, peaksFromChannelData } from "./components/audio-player.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { Badge, badgeVariants } from "./components/badge.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
 import { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/card.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, surfaceClasses } from "./components/popover.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu.js";
+import { ChatHistory, groupConversations, matchesConversation } from "./components/chat-history.js";
+import { IconButton } from "./components/icon-button.js";
+import { ResizablePanel, ResizablePanelGroup, ResizeHandle, useGroupRef, usePanelRef } from "./components/resizable.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/sheet.js";
+import { ChatLayout, useFullscreen } from "./components/chat-layout.js";
 import { Checkbox } from "./components/checkbox.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/collapsible.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/command.js";
 import { Input, fieldClasses } from "./components/input.js";
-import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, menuItemClasses, surfaceClasses } from "./components/popover.js";
 import { Combobox } from "./components/combobox.js";
-import { Composer, Suggestions } from "./components/composer.js";
+import { Composer, Suggestions, acceptsFile } from "./components/composer.js";
 import { Status, StatusDot, statusDotVariants } from "./components/status.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
 import { ConnectionBanner, ConnectionStatus, SyncStatus } from "./components/connection-status.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/context-menu.js";
 import { Conversation } from "./components/conversation.js";
-import { IconButton } from "./components/icon-button.js";
 import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./components/toast.js";
 import { Toaster, toast } from "./components/toaster.js";
 import { CopyButton } from "./components/copy-button.js";
@@ -34,7 +40,6 @@ import { Pagination, paginationRange } from "./components/pagination.js";
 import { Skeleton } from "./components/skeleton.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
 import { DataTable } from "./components/data-table.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu.js";
 import { EditorTabs } from "./components/editor-tabs.js";
 import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./components/empty-state.js";
 import { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel } from "./components/field.js";
@@ -43,18 +48,17 @@ import { Label } from "./components/label.js";
 import { CodeBlock, Markdown, parseMarkdown } from "./components/markdown.js";
 import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/menubar.js";
 import { Message } from "./components/message.js";
+import { MessageActions, MessageAttachments, MessageEditor } from "./components/message-actions.js";
 import { MobileNav } from "./components/mobile-nav.js";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/navigation-menu.js";
 import { OnboardingChecklist } from "./components/onboarding-checklist.js";
 import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle } from "./components/page-header.js";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group.js";
 import { Reasoning, StreamingIndicator } from "./components/reasoning.js";
-import { ResizablePanel, ResizablePanelGroup, ResizeHandle, useGroupRef, usePanelRef } from "./components/resizable.js";
 import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
 import { SecretInput } from "./components/secret-input.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./components/select.js";
 import { Separator } from "./components/separator.js";
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/sheet.js";
 import { Slider } from "./components/slider.js";
 import { SourceCitation, SourceList, safeSourceHref } from "./components/source.js";
 import { StatCard } from "./components/stat-card.js";
@@ -66,4 +70,5 @@ import { ToolApproval, ToolCall } from "./components/tool-call.js";
 import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer } from "./components/toolbar.js";
 import { Spotlight, Tour, TourAnchor, findTourTarget, tourTarget, waitForTourTarget } from "./components/tour.js";
 import { TreeView, flattenTree } from "./components/tree-view.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, AttachmentItem, AttachmentTray, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, ConnectionBanner, ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Conversation, CopyButton, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditorTabs, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, Markdown, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MobileNav, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OnboardingChecklist, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizablePanel, ResizablePanelGroup, ResizeHandle, ScrollArea, ScrollBar, SecretInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, SourceCitation, SourceList, Spinner, Spotlight, StatCard, Status, StatusDot, Steps, StreamingIndicator, Suggestions, Switch, SyncStatus, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, ToolApproval, ToolCall, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TourAnchor, TreeView, UploadQueue, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, findTourTarget, flattenTree, fontMono, fontSans, formatBytes, isApplePlatform, light, menuItemClasses, modKeyLabel, motion, navigationMenuTriggerStyle, paginationRange, parseMarkdown, radius, safeSourceHref, shadow, shortcutLabel, statusDotVariants, surfaceClasses, toast, toastVariants, tokens, tourTarget, useGroupRef, usePanelRef, waitForTourTarget };
+import { VoiceRecorder } from "./components/voice-recorder.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, AttachmentItem, AttachmentTray, AudioPlayer, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, ChatHistory, ChatLayout, Checkbox, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, ConnectionBanner, ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Conversation, CopyButton, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EditorTabs, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, Markdown, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageActions, MessageAttachments, MessageEditor, MobileNav, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OnboardingChecklist, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizablePanel, ResizablePanelGroup, ResizeHandle, ScrollArea, ScrollBar, SecretInput, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, SourceCitation, SourceList, Spinner, Spotlight, StatCard, Status, StatusDot, Steps, StreamingIndicator, Suggestions, Switch, SyncStatus, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, ToolApproval, ToolCall, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, TourAnchor, TreeView, UploadQueue, VoiceMessage, VoiceRecorder, accentTokens, acceptsFile, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, computePeaks, contrast, dark, duration, easing, elevation, fieldClasses, findTourTarget, flattenTree, fontMono, fontSans, formatBytes, formatDuration, groupConversations, isApplePlatform, light, matchesConversation, menuItemClasses, mix, modKeyLabel, motion, navigationMenuTriggerStyle, paginationRange, parseMarkdown, peaksFromChannelData, radius, safeSourceHref, shadow, shortcutLabel, statusDotVariants, surfaceClasses, toast, toastVariants, tokens, tourTarget, useFullscreen, useGroupRef, usePanelRef, waitForTourTarget };

package/dist/mui/index.d.ts

@@ -5,9 +5,32 @@
  *   import { ThemeProvider } from '@mui/material/styles';
  *   import { createBurtsonTheme } from '@burtson-labs/ui/mui';
  *   <ThemeProvider theme={createBurtsonTheme('dark')}>…</ThemeProvider>
+ *   <ThemeProvider theme={createBurtsonTheme({ mode: 'dark', accent: '#2563eb', density: 'compact' })}>
+ *
+ * MUI is an adapter here: every colour, radius, shadow and timing comes from
+ * the Burtson tokens, and the component overrides give MUI controls the same
+ * shape and states as the Burtson components (focus ring, radius per role,
+ * no uppercase buttons, quiet borders instead of heavy shadows).
  */
 import { type Theme, type ThemeOptions } from '@mui/material/styles';
+import { type Palette } from '../tokens';
 export type BurtsonMode = 'light' | 'dark';
+export type BurtsonDensity = 'comfortable' | 'compact';
+export interface BurtsonThemeConfig {
+    mode?: BurtsonMode;
+    /** Any hex colour; primary, brand, soft and ring tones are derived with contrast kept. */
+    accent?: string;
+    /** `compact` for admin and data-dense screens: smaller controls, dense lists and tables. */
+    density?: BurtsonDensity;
+    /** Replace individual palette tokens (a product skin's tinted surfaces). */
+    palette?: Partial<Palette>;
+}
+/** The full token palette for a config: base mode, accent-derived brand tones, then explicit overrides. */
+export declare function burtsonPalette(config?: BurtsonThemeConfig): Palette;
 /** Theme options only, for apps that deep-merge their own overrides first. */
-export declare function burtsonThemeOptions(mode?: BurtsonMode): ThemeOptions;
-export declare function createBurtsonTheme(mode?: BurtsonMode, ...overrides: ThemeOptions[]): Theme;
+export declare function burtsonThemeOptions(modeOrConfig?: BurtsonMode | BurtsonThemeConfig): ThemeOptions;
+/**
+ * `createBurtsonTheme('dark')` or `createBurtsonTheme({ mode, accent, density })`,
+ * then any MUI overrides, merged in order.
+ */
+export declare function createBurtsonTheme(modeOrConfig?: BurtsonMode | BurtsonThemeConfig, ...overrides: ThemeOptions[]): Theme;