@mdxui/zero 6.0.0

package/src/compose/email-composer.tsx

@@ -0,0 +1,619 @@
+import { Badge } from "@mdxui/primitives/badge";
+import { Button } from "@mdxui/primitives/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@mdxui/primitives/dropdown-menu";
+import { Input } from "@mdxui/primitives/input";
+import { cn } from "@mdxui/primitives/lib/utils";
+import { Separator } from "@mdxui/primitives/separator";
+import { Textarea } from "@mdxui/primitives/textarea";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@mdxui/primitives/tooltip";
+import {
+	Bold,
+	ChevronDown,
+	Italic,
+	Link,
+	List,
+	ListOrdered,
+	Maximize2,
+	Minimize2,
+	Minus,
+	Paperclip,
+	Send,
+	Sparkles,
+	Trash2,
+	Underline,
+	X,
+} from "lucide-react";
+import type {
+	EditorToolbarProps as BaseEditorToolbarProps,
+	RecipientInputProps as BaseRecipientInputProps,
+	EmailAddress,
+	EmailComposerProps,
+} from "mdxui";
+import * as React from "react";
+
+// Local type overrides to fix Zod function type inference issues
+// Zod .default() makes props required in output type, but we want them optional in component props
+interface RecipientInputProps
+	extends Omit<
+		BaseRecipientInputProps,
+		"onChange" | "disabled" | "autoFocus" | "showAvatars" | "allowFreeEntry"
+	> {
+	onChange?: (value: EmailAddress[]) => void;
+	disabled?: boolean;
+	autoFocus?: boolean;
+	showAvatars?: boolean;
+	allowFreeEntry?: boolean;
+}
+
+interface EditorToolbarProps
+	extends Omit<
+		BaseEditorToolbarProps,
+		"onAction" | "onAIClick" | "showAI" | "disabled" | "sticky" | "compact"
+	> {
+	onAction?: (actionId: string) => void;
+	onAIClick?: () => void;
+	showAI?: boolean;
+	disabled?: boolean;
+	sticky?: boolean;
+	compact?: boolean;
+}
+
+/**
+ * RecipientChip - Individual recipient badge.
+ */
+function RecipientChip({
+	recipient,
+	onRemove,
+}: {
+	recipient: EmailAddress;
+	onRemove?: () => void;
+}) {
+	return (
+		<Badge variant="secondary" className="gap-1 py-1 pl-2 pr-1">
+			<span className="max-w-[150px] truncate">
+				{recipient.name || recipient.address}
+			</span>
+			{onRemove && (
+				<button
+					type="button"
+					onClick={onRemove}
+					className="hover:bg-muted rounded-full p-0.5"
+				>
+					<X className="size-3" />
+				</button>
+			)}
+		</Badge>
+	);
+}
+
+/**
+ * RecipientInput - Input field for email recipients with autocomplete.
+ */
+function RecipientInput({
+	field,
+	value = [],
+	onChange,
+	placeholder,
+	disabled = false,
+	autoFocus = false,
+	className,
+}: RecipientInputProps) {
+	const [inputValue, setInputValue] = React.useState("");
+	const inputRef = React.useRef<HTMLInputElement>(null);
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
+			e.preventDefault();
+			addRecipient();
+		} else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+			// Remove last recipient
+			const newValue = value.slice(0, -1);
+			onChange?.(newValue);
+		}
+	};
+
+	const addRecipient = () => {
+		const email = inputValue.trim();
+		if (!email) return;
+
+		// Basic email validation
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (emailRegex.test(email)) {
+			const newRecipient: EmailAddress = { address: email };
+			onChange?.([...value, newRecipient]);
+			setInputValue("");
+		}
+	};
+
+	const removeRecipient = (index: number) => {
+		const newValue = value.filter((_, i) => i !== index);
+		onChange?.(newValue);
+	};
+
+	return (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: RecipientInput is interactive
+		// biome-ignore lint/a11y/noStaticElementInteractions: RecipientInput is interactive
+		<div
+			className={cn(
+				"flex min-h-[40px] flex-wrap items-center gap-1 rounded-md border px-3 py-2",
+				"focus-within:ring-ring focus-within:ring-2",
+				disabled && "cursor-not-allowed opacity-50",
+				className,
+			)}
+			onClick={() => inputRef.current?.focus()}
+		>
+			<span className="text-muted-foreground shrink-0 text-sm font-medium capitalize">
+				{field}:
+			</span>
+			{value.map((recipient, index) => (
+				<RecipientChip
+					key={`${recipient.address}-${index}`}
+					recipient={recipient}
+					onRemove={() => removeRecipient(index)}
+				/>
+			))}
+
+			<input
+				ref={inputRef}
+				type="email"
+				value={inputValue}
+				onChange={(e) => setInputValue(e.target.value)}
+				onKeyDown={handleKeyDown}
+				onBlur={addRecipient}
+				placeholder={value.length === 0 ? placeholder : undefined}
+				disabled={disabled}
+				// biome-ignore lint/a11y/noAutofocus: We need to autofocus the input for the user to type in the email address
+				autoFocus={autoFocus}
+				className="min-w-[120px] flex-1 border-0 bg-transparent p-0 text-sm outline-none placeholder:text-muted-foreground"
+			/>
+		</div>
+	);
+}
+
+/**
+ * EditorToolbar - Formatting toolbar for the email editor.
+ */
+function EditorToolbar({
+	onAction,
+	showAI = true,
+	onAIClick,
+	disabled = false,
+	compact = false,
+	sticky: _sticky = false,
+	className,
+}: EditorToolbarProps) {
+	const actions = [
+		{ id: "bold", icon: Bold, label: "Bold" },
+		{ id: "italic", icon: Italic, label: "Italic" },
+		{ id: "underline", icon: Underline, label: "Underline" },
+		{ id: "link", icon: Link, label: "Insert link" },
+		{ id: "bulletList", icon: List, label: "Bullet list" },
+		{ id: "orderedList", icon: ListOrdered, label: "Numbered list" },
+	] as const;
+
+	return (
+		<div
+			data-slot="editor-toolbar"
+			className={cn(
+				"flex items-center gap-1 border-t px-2 py-1",
+				disabled && "pointer-events-none opacity-50",
+				className,
+			)}
+		>
+			<TooltipProvider>
+				{actions.map((action) => (
+					<Tooltip key={action.id}>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								className={cn("size-8", compact && "size-7")}
+								onClick={() => onAction?.(action.id)}
+							>
+								<action.icon className={cn("size-4", compact && "size-3")} />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>{action.label}</TooltipContent>
+					</Tooltip>
+				))}
+
+				{showAI && (
+					<>
+						<Separator orientation="vertical" className="mx-1 h-6" />
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="sm"
+									className="gap-1"
+									onClick={() => onAIClick?.()}
+								>
+									<Sparkles className="size-4" />
+									{!compact && "AI"}
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>AI writing assistance</TooltipContent>
+						</Tooltip>
+					</>
+				)}
+			</TooltipProvider>
+		</div>
+	);
+}
+
+/**
+ * EmailComposer - Full email composition interface.
+ *
+ * Features:
+ * - Recipient fields (To, Cc, Bcc)
+ * - Subject line
+ * - Rich text editor (placeholder for now)
+ * - Attachments
+ * - Send/discard actions
+ * - AI assistance button
+ * - Minimize/maximize
+ */
+function EmailComposer({
+	mode = "new",
+	initialDraft,
+	replyTo,
+	fromAliases,
+	selectedFrom,
+	onFromChange,
+	onSend,
+	onSaveDraft,
+	onDiscard,
+	onClose,
+	autoSaveInterval = 30000,
+	showCcBcc = false,
+	isMaximized = false,
+	onToggleMaximize,
+	enableAI = true,
+	enableSignature = true,
+	signature,
+	isSending = false,
+	enableShortcuts = true,
+	className,
+}: EmailComposerProps) {
+	const [to, setTo] = React.useState<EmailAddress[]>(initialDraft?.to || []);
+	const [cc, setCc] = React.useState<EmailAddress[]>(initialDraft?.cc || []);
+	const [bcc, setBcc] = React.useState<EmailAddress[]>(initialDraft?.bcc || []);
+	const [subject, setSubject] = React.useState(initialDraft?.subject || "");
+	const [body, setBody] = React.useState(initialDraft?.body || "");
+	const [showCc, setShowCc] = React.useState(
+		showCcBcc || (initialDraft?.cc?.length ?? 0) > 0,
+	);
+	const [showBcc, setShowBcc] = React.useState(
+		(initialDraft?.bcc?.length ?? 0) > 0,
+	);
+	const [isMinimized, setIsMinimized] = React.useState(false);
+
+	// Auto-save draft
+	React.useEffect(() => {
+		if (!onSaveDraft || autoSaveInterval <= 0) return;
+
+		const timer = setInterval(() => {
+			onSaveDraft({
+				to,
+				cc,
+				bcc,
+				subject,
+				body,
+			});
+		}, autoSaveInterval);
+
+		return () => clearInterval(timer);
+	}, [to, cc, bcc, subject, body, onSaveDraft, autoSaveInterval]);
+
+	const handleSend = React.useCallback(() => {
+		if (to.length === 0) return;
+		onSend?.({
+			to,
+			cc: showCc ? cc : [],
+			bcc: showBcc ? bcc : [],
+			subject,
+			body: enableSignature && signature ? `${body}\n\n${signature}` : body,
+		});
+	}, [
+		to,
+		cc,
+		bcc,
+		subject,
+		body,
+		onSend,
+		enableSignature,
+		signature,
+		showBcc,
+		showCc,
+	]);
+	// Keyboard shortcuts
+	React.useEffect(() => {
+		if (!enableShortcuts) return;
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+				e.preventDefault();
+				handleSend();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [enableShortcuts, handleSend]);
+
+	// Reply subject prefix
+	const getSubjectPrefix = React.useCallback(() => {
+		if (mode === "reply" || mode === "reply-all") return "Re: ";
+		if (mode === "forward") return "Fwd: ";
+		return "";
+	}, [mode]);
+
+	// Set subject from reply
+	React.useEffect(() => {
+		if (replyTo && !initialDraft?.subject) {
+			const prefix = getSubjectPrefix();
+			const cleanSubject = replyTo.subject.replace(/^(Re:|Fwd:)\s*/i, "");
+			setSubject(`${prefix}${cleanSubject}`);
+		}
+	}, [replyTo, getSubjectPrefix, initialDraft?.subject]);
+
+	if (isMinimized) {
+		return (
+			<div
+				className={cn(
+					"bg-background fixed bottom-0 right-4 z-50 w-72 rounded-t-lg border shadow-lg",
+					className,
+				)}
+			>
+				<button
+					type="button"
+					onClick={() => setIsMinimized(false)}
+					className="hover:bg-muted flex w-full items-center justify-between px-4 py-3"
+				>
+					<span className="truncate text-sm font-medium">
+						{subject || "New Message"}
+					</span>
+					<div className="flex items-center gap-1">
+						<Maximize2 className="size-4" />
+					</div>
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			data-slot="email-composer"
+			className={cn(
+				"bg-background flex flex-col rounded-lg border shadow-xl",
+				isMaximized ? "fixed inset-4 z-50" : "max-h-[80vh] w-full max-w-2xl",
+				className,
+			)}
+		>
+			{/* Header */}
+			<div className="bg-muted/30 flex items-center justify-between rounded-t-lg border-b px-4 py-2">
+				<span className="text-sm font-medium">
+					{mode === "new" && "New Message"}
+					{mode === "reply" && "Reply"}
+					{mode === "reply-all" && "Reply All"}
+					{mode === "forward" && "Forward"}
+					{mode === "draft" && "Draft"}
+				</span>
+				<div className="flex items-center gap-1">
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-7"
+									onClick={() => setIsMinimized(true)}
+								>
+									<Minus className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Minimize</TooltipContent>
+						</Tooltip>
+
+						{onToggleMaximize && (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										className="size-7"
+										onClick={onToggleMaximize}
+									>
+										{isMaximized ? (
+											<Minimize2 className="size-4" />
+										) : (
+											<Maximize2 className="size-4" />
+										)}
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>
+									{isMaximized ? "Exit fullscreen" : "Fullscreen"}
+								</TooltipContent>
+							</Tooltip>
+						)}
+
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="size-7"
+									onClick={() => onClose?.()}
+								>
+									<X className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Close</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				</div>
+			</div>
+
+			{/* Recipients */}
+			<div className="space-y-2 border-b px-4 py-3">
+				{/* From selector */}
+				{fromAliases && fromAliases.length > 1 && (
+					<div className="flex items-center gap-2">
+						<span className="text-muted-foreground text-sm font-medium">
+							From:
+						</span>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="ghost" size="sm" className="h-auto gap-1 py-1">
+									{selectedFrom || fromAliases[0]?.address}
+									<ChevronDown className="size-3" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent>
+								{fromAliases.map((alias) => (
+									<DropdownMenuItem
+										key={alias.address}
+										onClick={() => onFromChange?.(alias.address)}
+									>
+										{alias.name
+											? `${alias.name} <${alias.address}>`
+											: alias.address}
+									</DropdownMenuItem>
+								))}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				)}
+
+				<RecipientInput
+					field="to"
+					value={to}
+					onChange={setTo}
+					placeholder="Recipients"
+					autoFocus={mode === "new"}
+				/>
+
+				{showCc && (
+					<RecipientInput
+						field="cc"
+						value={cc}
+						onChange={setCc}
+						placeholder="Cc"
+					/>
+				)}
+
+				{showBcc && (
+					<RecipientInput
+						field="bcc"
+						value={bcc}
+						onChange={setBcc}
+						placeholder="Bcc"
+					/>
+				)}
+
+				{/* Cc/Bcc toggle */}
+				{(!showCc || !showBcc) && (
+					<div className="flex gap-2">
+						{!showCc && (
+							<button
+								type="button"
+								onClick={() => setShowCc(true)}
+								className="text-muted-foreground text-xs hover:underline"
+							>
+								Cc
+							</button>
+						)}
+						{!showBcc && (
+							<button
+								type="button"
+								onClick={() => setShowBcc(true)}
+								className="text-muted-foreground text-xs hover:underline"
+							>
+								Bcc
+							</button>
+						)}
+					</div>
+				)}
+			</div>
+
+			{/* Subject */}
+			<div className="border-b px-4 py-2">
+				<Input
+					value={subject}
+					onChange={(e) => setSubject(e.target.value)}
+					placeholder="Subject"
+					className="border-0 px-0 text-base shadow-none focus-visible:ring-0"
+				/>
+			</div>
+
+			{/* Body */}
+			<div className="flex-1 overflow-hidden">
+				<Textarea
+					value={body}
+					onChange={(e) => setBody(e.target.value)}
+					placeholder="Write your message..."
+					className="min-h-[200px] resize-none rounded-none border-0 p-4 shadow-none focus-visible:ring-0"
+				/>
+			</div>
+
+			{/* Toolbar */}
+			<EditorToolbar
+				showAI={enableAI}
+				compact={false}
+				disabled={isSending}
+				sticky={false}
+				onAIClick={() => {
+					// AI assistance placeholder
+				}}
+			/>
+
+			{/* Footer Actions */}
+			<div className="flex items-center justify-between border-t px-4 py-3">
+				<div className="flex items-center gap-2">
+					<Button
+						onClick={handleSend}
+						disabled={isSending || to.length === 0}
+						className="gap-2"
+					>
+						<Send className="size-4" />
+						{isSending ? "Sending..." : "Send"}
+					</Button>
+
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="ghost" size="icon">
+									<Paperclip className="size-4" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>Attach files</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
+				</div>
+
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button variant="ghost" size="icon" onClick={() => onDiscard?.()}>
+								<Trash2 className="size-4" />
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>Discard</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</div>
+		</div>
+	);
+}
+
+export { EmailComposer, RecipientInput, EditorToolbar };

package/src/compose/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Compose Components
+ *
+ * Email composition and editing components:
+ * - EmailComposer: Full-featured email composition
+ * - RecipientInput: Email recipient input with autocomplete
+ * - EditorToolbar: Formatting toolbar
+ * - ReplyComposer: In-thread reply composition (planned)
+ * - AITextarea: AI-assisted text input (planned)
+ */
+
+export { EditorToolbar, EmailComposer, RecipientInput } from "./email-composer";
+// export { ReplyComposer } from './reply-composer'
+// export { AITextarea } from './ai-textarea'

package/src/dashboard/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Dashboard Components
+ *
+ * Email app shell and dashboard components:
+ * - MailShell: Main app layout with sidebar + content
+ * - MailSidebar: Folder navigation sidebar
+ * - MailHeader: App header with search
+ * - AISidebar: AI assistant panel
+ */
+
+export { MailShell } from "./mail-shell";
+export { MailSidebar } from "./mail-sidebar";
+// export { MailHeader } from './mail-header'
+// export { AISidebar } from './ai-sidebar'