@townco/ui 0.1.6 → 0.1.7

package/dist/gui/components/Task.d.ts

@@ -4,36 +4,32 @@ import * as React from "react";
  * Enhanced todo/task display with collapsible details and file references
  */
 export interface TaskItem {
-	id: string;
-	text: string;
-	status: "pending" | "in_progress" | "completed";
-	/** Optional file references */
-	files?: string[];
-	/** Optional additional details */
-	details?: string;
+    id: string;
+    text: string;
+    status: "pending" | "in_progress" | "completed";
+    /** Optional file references */
+    files?: string[];
+    /** Optional additional details */
+    details?: string;
 }
 export interface TaskProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Task item data */
-	task: TaskItem;
-	/** Show collapsible details */
-	collapsible?: boolean;
-	/** Default expanded state */
-	defaultExpanded?: boolean;
-	/** Callback when task is clicked */
-	onTaskClick?: (task: TaskItem) => void;
+    /** Task item data */
+    task: TaskItem;
+    /** Show collapsible details */
+    collapsible?: boolean;
+    /** Default expanded state */
+    defaultExpanded?: boolean;
+    /** Callback when task is clicked */
+    onTaskClick?: (task: TaskItem) => void;
 }
-export declare const Task: React.ForwardRefExoticComponent<
-	TaskProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Task: React.ForwardRefExoticComponent<TaskProps & React.RefAttributes<HTMLDivElement>>;
 export interface TaskListProps extends React.HTMLAttributes<HTMLDivElement> {
-	tasks: TaskItem[];
-	/** Show collapsible details */
-	collapsible?: boolean;
-	/** Callback when task is clicked */
-	onTaskClick?: (task: TaskItem) => void;
-	/** Empty state message */
-	emptyMessage?: string;
+    tasks: TaskItem[];
+    /** Show collapsible details */
+    collapsible?: boolean;
+    /** Callback when task is clicked */
+    onTaskClick?: (task: TaskItem) => void;
+    /** Empty state message */
+    emptyMessage?: string;
 }
-export declare const TaskList: React.ForwardRefExoticComponent<
-	TaskListProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const TaskList: React.ForwardRefExoticComponent<TaskListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/Task.js

@@ -1,170 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle2, ChevronDown, Circle, Loader2 } from "lucide-react";
 import * as React from "react";
 import { useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const Task = React.forwardRef(
-	(
-		{
-			task,
-			collapsible = true,
-			defaultExpanded = false,
-			onTaskClick,
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-		const hasDetails = !!(
-			task.details ||
-			(task.files && task.files.length > 0)
-		);
-		const StatusIcon = {
-			pending: Circle,
-			in_progress: Loader2,
-			completed: CheckCircle2,
-		}[task.status];
-		const getStatusColor = () => {
-			switch (task.status) {
-				case "completed":
-					return "text-green-500";
-				case "in_progress":
-					return "text-primary";
-				default:
-					return "text-foreground opacity-40";
-			}
-		};
-		const handleClick = () => {
-			if (hasDetails && collapsible) {
-				setIsExpanded(!isExpanded);
-			}
-			onTaskClick?.(task);
-		};
-		return _jsxs("div", {
-			ref: ref,
-			className: cn(
-				"rounded-lg border border-border bg-card transition-all",
-				"hover:shadow-sm hover:border-border/80",
-				className,
-			),
-			...props,
-			children: [
-				_jsxs("button", {
-					type: "button",
-					onClick: handleClick,
-					className: cn(
-						"w-full flex items-center gap-3 px-3 py-2.5 text-left",
-						hasDetails && collapsible && "cursor-pointer",
-					),
-					disabled: !hasDetails && !collapsible,
-					children: [
-						_jsx(StatusIcon, {
-							className: cn(
-								"w-4 h-4 shrink-0",
-								getStatusColor(),
-								task.status === "in_progress" && "animate-spin",
-							),
-						}),
-						_jsx("span", {
-							className: cn(
-								"flex-1 text-sm font-[var(--font-family)]",
-								task.status === "completed" && "line-through opacity-60",
-								task.status === "in_progress" && "font-medium",
-							),
-							children: task.text,
-						}),
-						hasDetails &&
-							collapsible &&
-							_jsx(ChevronDown, {
-								className: cn(
-									"w-4 h-4 text-foreground opacity-50 transition-transform duration-200 shrink-0",
-									isExpanded && "rotate-180",
-								),
-								"aria-hidden": "true",
-							}),
-					],
-				}),
-				hasDetails &&
-					isExpanded &&
-					_jsxs("div", {
-						className:
-							"px-3 pb-3 pt-1 border-t border-border/50 animate-fadeIn",
-						children: [
-							task.details &&
-								_jsx("p", {
-									className:
-										"text-sm text-foreground opacity-80 leading-relaxed mb-2",
-									children: task.details,
-								}),
-							task.files &&
-								task.files.length > 0 &&
-								_jsxs("div", {
-									className: "space-y-1",
-									children: [
-										_jsx("span", {
-											className:
-												"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
-											children: "Files:",
-										}),
-										_jsx("div", {
-											className: "space-y-1",
-											children: task.files.map((file) =>
-												_jsx(
-													"div",
-													{
-														className:
-															"text-xs font-mono text-foreground opacity-70 bg-background px-2 py-1 rounded border border-border/50",
-														children: file,
-													},
-													file,
-												),
-											),
-										}),
-									],
-								}),
-						],
-					}),
-			],
-		});
-	},
-);
+export const Task = React.forwardRef(({ task, collapsible = true, defaultExpanded = false, onTaskClick, className, ...props }, ref) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const hasDetails = !!(task.details ||
+        (task.files && task.files.length > 0));
+    const StatusIcon = {
+        pending: Circle,
+        in_progress: Loader2,
+        completed: CheckCircle2,
+    }[task.status];
+    const getStatusColor = () => {
+        switch (task.status) {
+            case "completed":
+                return "text-green-500";
+            case "in_progress":
+                return "text-primary";
+            default:
+                return "text-foreground opacity-40";
+        }
+    };
+    const handleClick = () => {
+        if (hasDetails && collapsible) {
+            setIsExpanded(!isExpanded);
+        }
+        onTaskClick?.(task);
+    };
+    return (_jsxs("div", { ref: ref, className: cn("rounded-lg border border-border bg-card transition-all", "hover:shadow-sm hover:border-border/80", className), ...props, children: [_jsxs("button", { type: "button", onClick: handleClick, className: cn("w-full flex items-center gap-3 px-3 py-2.5 text-left", hasDetails && collapsible && "cursor-pointer"), disabled: !hasDetails && !collapsible, children: [_jsx(StatusIcon, { className: cn("w-4 h-4 shrink-0", getStatusColor(), task.status === "in_progress" && "animate-spin") }), _jsx("span", { className: cn("flex-1 text-sm font-[var(--font-family)]", task.status === "completed" && "line-through opacity-60", task.status === "in_progress" && "font-medium"), children: task.text }), hasDetails && collapsible && (_jsx(ChevronDown, { className: cn("w-4 h-4 text-foreground opacity-50 transition-transform duration-200 shrink-0", isExpanded && "rotate-180"), "aria-hidden": "true" }))] }), hasDetails && isExpanded && (_jsxs("div", { className: "px-3 pb-3 pt-1 border-t border-border/50 animate-fadeIn", children: [task.details && (_jsx("p", { className: "text-sm text-foreground opacity-80 leading-relaxed mb-2", children: task.details })), task.files && task.files.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Files:" }), _jsx("div", { className: "space-y-1", children: task.files.map((file) => (_jsx("div", { className: "text-xs font-mono text-foreground opacity-70 bg-background px-2 py-1 rounded border border-border/50", children: file }, file))) })] }))] }))] }));
+});
 Task.displayName = "Task";
-export const TaskList = React.forwardRef(
-	(
-		{
-			tasks,
-			collapsible = true,
-			onTaskClick,
-			emptyMessage = "No tasks yet.",
-			className,
-			...props
-		},
-		ref,
-	) => {
-		return _jsx("div", {
-			ref: ref,
-			className: cn("space-y-2 max-h-96 overflow-y-auto", className),
-			...props,
-			children:
-				tasks.length === 0
-					? _jsx("p", {
-							className:
-								"text-sm text-foreground opacity-60 italic py-4 text-center",
-							children: emptyMessage,
-						})
-					: tasks.map((task) =>
-							_jsx(
-								Task,
-								{
-									task: task,
-									collapsible: collapsible,
-									...(onTaskClick ? { onTaskClick } : {}),
-								},
-								task.id,
-							),
-						),
-		});
-	},
-);
+export const TaskList = React.forwardRef(({ tasks, collapsible = true, onTaskClick, emptyMessage = "No tasks yet.", className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("space-y-2 max-h-96 overflow-y-auto", className), ...props, children: tasks.length === 0 ? (_jsx("p", { className: "text-sm text-foreground opacity-60 italic py-4 text-center", children: emptyMessage })) : (tasks.map((task) => (_jsx(Task, { task: task, collapsible: collapsible, ...(onTaskClick ? { onTaskClick } : {}) }, task.id)))) }));
+});
 TaskList.displayName = "TaskList";

package/dist/gui/components/Textarea.d.ts

@@ -1,19 +1,11 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const textareaVariants: (
-	props?:
-		| ({
-				variant?: "default" | "error" | "success" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface TextareaProps
-	extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-		VariantProps<typeof textareaVariants> {
-	autoResize?: boolean;
-	maxHeight?: number;
+declare const textareaVariants: (props?: ({
+    variant?: "success" | "default" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants> {
+    autoResize?: boolean;
+    maxHeight?: number;
 }
-declare const Textarea: React.ForwardRefExoticComponent<
-	TextareaProps & React.RefAttributes<HTMLTextAreaElement>
->;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea, textareaVariants };

package/dist/gui/components/Textarea.js

@@ -1,68 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
-const textareaVariants = cva(
-	"flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
-	{
-		variants: {
-			variant: {
-				default: "border-input focus-visible:ring-ring",
-				error: "border-destructive focus-visible:ring-destructive",
-				success: "border-green-500 focus-visible:ring-green-500",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-const Textarea = React.forwardRef(
-	(
-		{ className, autoResize = false, maxHeight = 200, variant, ...props },
-		ref,
-	) => {
-		const textareaRef = React.useRef(null);
-		const handleRef = React.useCallback(
-			(node) => {
-				textareaRef.current = node;
-				if (typeof ref === "function") {
-					ref(node);
-				} else if (ref) {
-					ref.current = node;
-				}
-			},
-			[ref],
-		);
-		const adjustHeight = React.useCallback(() => {
-			const textarea = textareaRef.current;
-			if (!textarea || !autoResize) return;
-			// Reset height to auto to get the correct scrollHeight
-			textarea.style.height = "auto";
-			// Set new height based on content, respecting maxHeight
-			const newHeight = Math.min(textarea.scrollHeight, maxHeight);
-			textarea.style.height = `${newHeight}px`;
-			// Enable scrollbar if content exceeds maxHeight
-			if (textarea.scrollHeight > maxHeight) {
-				textarea.style.overflowY = "auto";
-			} else {
-				textarea.style.overflowY = "hidden";
-			}
-		}, [autoResize, maxHeight]);
-		React.useEffect(() => {
-			adjustHeight();
-		}, [adjustHeight]);
-		return _jsx("textarea", {
-			className: cn(
-				textareaVariants({ variant }),
-				autoResize && "overflow-y-hidden",
-				className,
-			),
-			ref: handleRef,
-			...props,
-		});
-	},
-);
+const textareaVariants = cva("flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none", {
+    variants: {
+        variant: {
+            default: "border-input focus-visible:ring-ring",
+            error: "border-destructive focus-visible:ring-destructive",
+            success: "border-green-500 focus-visible:ring-green-500",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Textarea = React.forwardRef(({ className, autoResize = false, maxHeight = 200, variant, ...props }, ref) => {
+    const textareaRef = React.useRef(null);
+    const handleRef = React.useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const adjustHeight = React.useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea || !autoResize)
+            return;
+        // Reset height to auto to get the correct scrollHeight
+        textarea.style.height = "auto";
+        // Set new height based on content, respecting maxHeight
+        const newHeight = Math.min(textarea.scrollHeight, maxHeight);
+        textarea.style.height = `${newHeight}px`;
+        // Enable scrollbar if content exceeds maxHeight
+        if (textarea.scrollHeight > maxHeight) {
+            textarea.style.overflowY = "auto";
+        }
+        else {
+            textarea.style.overflowY = "hidden";
+        }
+    }, [autoResize, maxHeight]);
+    React.useEffect(() => {
+        adjustHeight();
+    }, [adjustHeight]);
+    return (_jsx("textarea", { className: cn(textareaVariants({ variant }), autoResize && "overflow-y-hidden", className), ref: handleRef, ...props }));
+});
 Textarea.displayName = "Textarea";
 export { Textarea, textareaVariants };

package/dist/gui/components/ThinkingBlock.d.ts

@@ -1,22 +1,12 @@
 import { type VariantProps } from "class-variance-authority";
-declare const thinkingBlockVariants: (
-	props?:
-		| ({
-				variant?: "default" | "subtle" | "prominent" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface ThinkingBlockProps
-	extends VariantProps<typeof thinkingBlockVariants> {
-	thinking?: string;
-	isStreaming?: boolean;
-	displayMode?: "collapsible" | "inline";
-	className?: string;
+declare const thinkingBlockVariants: (props?: ({
+    variant?: "default" | "subtle" | "prominent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ThinkingBlockProps extends VariantProps<typeof thinkingBlockVariants> {
+    thinking?: string;
+    isStreaming?: boolean;
+    displayMode?: "collapsible" | "inline";
+    className?: string;
 }
-export declare function ThinkingBlock({
-	thinking,
-	isStreaming,
-	displayMode,
-	variant,
-	className,
-}: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ThinkingBlock({ thinking, isStreaming, displayMode, variant, className, }: ThinkingBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/gui/components/ThinkingBlock.js

@@ -1,139 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
-const thinkingBlockVariants = cva(
-	"mb-3 p-3 rounded-lg bg-card border border-border",
-	{
-		variants: {
-			variant: {
-				default: "opacity-70",
-				subtle: "opacity-50",
-				prominent: "opacity-90",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-const thinkingIconVariants = cva(
-	"w-4 h-4 text-foreground opacity-60 transition-transform",
-	{
-		variants: {
-			expanded: {
-				true: "rotate-180",
-				false: "",
-			},
-		},
-		defaultVariants: {
-			expanded: false,
-		},
-	},
-);
-export function ThinkingBlock({
-	thinking,
-	isStreaming,
-	displayMode = "collapsible",
-	variant,
-	className,
-}) {
-	const [isExpanded, setIsExpanded] = useState(false);
-	if (!thinking && !isStreaming) {
-		return null;
-	}
-	// Inline mode - always visible
-	if (displayMode === "inline") {
-		return _jsxs("div", {
-			className: cn(thinkingBlockVariants({ variant }), className),
-			children: [
-				_jsxs("div", {
-					className: "flex items-start gap-2",
-					children: [
-						_jsx("span", {
-							className:
-								"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
-							children: "Thinking",
-						}),
-						isStreaming &&
-							_jsx("span", {
-								className:
-									"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
-							}),
-					],
-				}),
-				_jsxs("div", {
-					className:
-						"mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
-					children: [
-						thinking,
-						isStreaming &&
-							thinking &&
-							_jsx("span", {
-								className: "inline-block animate-typing",
-								children: "...",
-							}),
-					],
-				}),
-			],
-		});
-	}
-	// Collapsible mode
-	return _jsxs("div", {
-		className: cn("mb-3", className),
-		children: [
-			_jsxs("button", {
-				type: "button",
-				onClick: () => setIsExpanded(!isExpanded),
-				className:
-					"w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left",
-				children: [
-					_jsxs("div", {
-						className: "flex items-center gap-2",
-						children: [
-							_jsx("span", {
-								className:
-									"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
-								children: "Thinking",
-							}),
-							isStreaming &&
-								_jsx("span", {
-									className:
-										"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
-								}),
-							!isExpanded &&
-								thinking &&
-								_jsxs("span", {
-									className:
-										"text-xs text-foreground opacity-50 truncate max-w-[200px]",
-									children: [thinking.substring(0, 50), "..."],
-								}),
-						],
-					}),
-					_jsx(ChevronDown, {
-						className: thinkingIconVariants({ expanded: isExpanded }),
-					}),
-				],
-			}),
-			isExpanded &&
-				_jsx("div", {
-					className: cn(thinkingBlockVariants({ variant }), "mt-2"),
-					children: _jsxs("div", {
-						className:
-							"text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
-						children: [
-							thinking,
-							isStreaming &&
-								thinking &&
-								_jsx("span", {
-									className: "inline-block animate-typing",
-									children: "...",
-								}),
-						],
-					}),
-				}),
-		],
-	});
+const thinkingBlockVariants = cva("mb-3 p-3 rounded-lg bg-card border border-border", {
+    variants: {
+        variant: {
+            default: "opacity-70",
+            subtle: "opacity-50",
+            prominent: "opacity-90",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const thinkingIconVariants = cva("w-4 h-4 text-foreground opacity-60 transition-transform", {
+    variants: {
+        expanded: {
+            true: "rotate-180",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+export function ThinkingBlock({ thinking, isStreaming, displayMode = "collapsible", variant, className, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    if (!thinking && !isStreaming) {
+        return null;
+    }
+    // Inline mode - always visible
+    if (displayMode === "inline") {
+        return (_jsxs("div", { className: cn(thinkingBlockVariants({ variant }), className), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "mt-2 text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] })] }));
+    }
+    // Collapsible mode
+    return (_jsxs("div", { className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded(!isExpanded), className: "w-full flex items-center justify-between p-2 rounded-lg bg-card border border-border hover:bg-card transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: "Thinking" }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" })), !isExpanded && thinking && (_jsxs("span", { className: "text-xs text-foreground opacity-50 truncate max-w-[200px]", children: [thinking.substring(0, 50), "..."] }))] }), _jsx(ChevronDown, { className: thinkingIconVariants({ expanded: isExpanded }) })] }), isExpanded && (_jsx("div", { className: cn(thinkingBlockVariants({ variant }), "mt-2"), children: _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [thinking, isStreaming && thinking && (_jsx("span", { className: "inline-block animate-typing", children: "..." }))] }) }))] }));
 }

package/dist/gui/components/TodoList.d.ts

@@ -7,16 +7,14 @@ import { type TodoItem } from "./TodoListItem.js";
  * 2. Prop-based: Pass `todos` prop directly
  */
 export interface TodoListProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * ACP Client for hook-based todo fetching (future support)
-	 */
-	client?: AcpClient | null;
-	/**
-	 * Todos to display (prop-based pattern)
-	 * Either client or todos should be provided
-	 */
-	todos?: TodoItem[];
+    /**
+     * ACP Client for hook-based todo fetching (future support)
+     */
+    client?: AcpClient | null;
+    /**
+     * Todos to display (prop-based pattern)
+     * Either client or todos should be provided
+     */
+    todos?: TodoItem[];
 }
-export declare const TodoList: React.ForwardRefExoticComponent<
-	TodoListProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const TodoList: React.ForwardRefExoticComponent<TodoListProps & React.RefAttributes<HTMLDivElement>>;