@townco/ui 0.1.0 → 0.1.3

package/dist/gui/components/DropdownMenu.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenu Root
  * -----------------------------------------------------------------------------------------------*/
@@ -15,54 +16,200 @@ const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuSubTrigger
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none", "focus:bg-muted data-[state=open]:bg-muted", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+const DropdownMenuSubTrigger = React.forwardRef(
+	({ className, inset, children, ...props }, ref) =>
+		_jsxs(DropdownMenuPrimitive.SubTrigger, {
+			ref: ref,
+			className: cn(
+				"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+				"focus:bg-muted data-[state=open]:bg-muted",
+				inset && "pl-8",
+				className,
+			),
+			...props,
+			children: [
+				children,
+				_jsx(ChevronRight, { className: "ml-auto h-4 w-4" }),
+			],
+		}),
+);
 DropdownMenuSubTrigger.displayName =
-    DropdownMenuPrimitive.SubTrigger.displayName;
+	DropdownMenuPrimitive.SubTrigger.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuSubContent
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className), ...props })));
+const DropdownMenuSubContent = React.forwardRef(
+	({ className, ...props }, ref) =>
+		_jsx(DropdownMenuPrimitive.SubContent, {
+			ref: ref,
+			className: cn(
+				"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 shadow-lg",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out",
+				"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+				"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+				"data-[side=bottom]:slide-in-from-top-2",
+				"data-[side=left]:slide-in-from-right-2",
+				"data-[side=right]:slide-in-from-left-2",
+				"data-[side=top]:slide-in-from-bottom-2",
+				className,
+			),
+			...props,
+		}),
+);
 DropdownMenuSubContent.displayName =
-    DropdownMenuPrimitive.SubContent.displayName;
+	DropdownMenuPrimitive.SubContent.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuContent
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+const DropdownMenuContent = React.forwardRef(
+	({ className, sideOffset = 4, ...props }, ref) =>
+		_jsx(DropdownMenuPrimitive.Portal, {
+			children: _jsx(DropdownMenuPrimitive.Content, {
+				ref: ref,
+				sideOffset: sideOffset,
+				className: cn(
+					"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card p-1 shadow-md",
+					"data-[state=open]:animate-in data-[state=closed]:animate-out",
+					"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+					"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+					"data-[side=bottom]:slide-in-from-top-2",
+					"data-[side=left]:slide-in-from-right-2",
+					"data-[side=right]:slide-in-from-left-2",
+					"data-[side=top]:slide-in-from-bottom-2",
+					className,
+				),
+				...props,
+			}),
+		}),
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuItem
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", "focus:bg-muted focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+const DropdownMenuItem = React.forwardRef(
+	({ className, inset, ...props }, ref) =>
+		_jsx(DropdownMenuPrimitive.Item, {
+			ref: ref,
+			className: cn(
+				"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+				"focus:bg-muted focus:text-foreground",
+				"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				inset && "pl-8",
+				className,
+			),
+			...props,
+		}),
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuCheckboxItem
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", "focus:bg-muted focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+const DropdownMenuCheckboxItem = React.forwardRef(
+	({ className, children, ...props }, ref) =>
+		_jsxs(DropdownMenuPrimitive.CheckboxItem, {
+			ref: ref,
+			className: cn(
+				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+				"focus:bg-muted focus:text-foreground",
+				"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				className,
+			),
+			...props,
+			children: [
+				_jsx("span", {
+					className:
+						"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+					children: _jsx(DropdownMenuPrimitive.ItemIndicator, {
+						children: _jsx(Check, { className: "h-4 w-4" }),
+					}),
+				}),
+				children,
+			],
+		}),
+);
 DropdownMenuCheckboxItem.displayName =
-    DropdownMenuPrimitive.CheckboxItem.displayName;
+	DropdownMenuPrimitive.CheckboxItem.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuRadioItem
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", "focus:bg-muted focus:text-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+const DropdownMenuRadioItem = React.forwardRef(
+	({ className, children, ...props }, ref) =>
+		_jsxs(DropdownMenuPrimitive.RadioItem, {
+			ref: ref,
+			className: cn(
+				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
+				"focus:bg-muted focus:text-foreground",
+				"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+				className,
+			),
+			...props,
+			children: [
+				_jsx("span", {
+					className:
+						"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+					children: _jsx(DropdownMenuPrimitive.ItemIndicator, {
+						children: _jsx(Circle, { className: "h-2 w-2 fill-current" }),
+					}),
+				}),
+				children,
+			],
+		}),
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuLabel
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+const DropdownMenuLabel = React.forwardRef(
+	({ className, inset, ...props }, ref) =>
+		_jsx(DropdownMenuPrimitive.Label, {
+			ref: ref,
+			className: cn(
+				"px-2 py-1.5 text-sm font-semibold",
+				inset && "pl-8",
+				className,
+			),
+			...props,
+		}),
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuSeparator
  * -----------------------------------------------------------------------------------------------*/
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) =>
+	_jsx(DropdownMenuPrimitive.Separator, {
+		ref: ref,
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props,
+	}),
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 /* -------------------------------------------------------------------------------------------------
  * DropdownMenuShortcut
  * -----------------------------------------------------------------------------------------------*/
 const DropdownMenuShortcut = ({ className, ...props }) => {
-    return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
+	return _jsx("span", {
+		className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+		...props,
+	});
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 /* -------------------------------------------------------------------------------------------------
  * Exports
  * -----------------------------------------------------------------------------------------------*/
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+};

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

@@ -1,10 +1,15 @@
 import { type ReactNode } from "react";
 interface HeightTransitionProps {
-    children: ReactNode;
-    durationMs?: number;
-    easing?: string;
-    pinContentTo?: "top" | "bottom";
-    className?: string;
+	children: ReactNode;
+	durationMs?: number;
+	easing?: string;
+	pinContentTo?: "top" | "bottom";
+	className?: string;
 }
-export declare function HeightTransition({ children, durationMs, easing, pinContentTo, className, }: HeightTransitionProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function HeightTransition({
+	children,
+	durationMs,
+	easing,
+	pinContentTo,
+	className,
+}: HeightTransitionProps): import("react/jsx-runtime").JSX.Element;

package/dist/gui/components/HeightTransition.js

@@ -1,80 +1,91 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export function HeightTransition({ children, durationMs = 320, easing = "ease", pinContentTo = "top", className, }) {
-    const containerRef = useRef(null);
-    const contentRef = useRef(null);
-    const prevHeightRef = useRef(null);
-    const isAnimatingRef = useRef(false);
-    const durationRef = useRef(durationMs);
-    const easingRef = useRef(easing);
-    useEffect(() => {
-        durationRef.current = durationMs;
-        easingRef.current = easing;
-    }, [durationMs, easing]);
-    const transitionTo = useCallback((next) => {
-        const el = containerRef.current;
-        const contentEl = contentRef.current;
-        if (!el || !contentEl)
-            return;
-        const prev = prevHeightRef.current ?? el.getBoundingClientRect().height;
-        if (Math.abs(prev - next) < 0.5) {
-            prevHeightRef.current = next;
-            el.style.height = `${next}px`;
-            return;
-        }
-        if (isAnimatingRef.current)
-            return;
-        isAnimatingRef.current = true;
-        el.style.transition = "none";
-        el.style.height = `${prev}px`;
-        void el.getBoundingClientRect();
-        el.style.transition = `height ${durationRef.current}ms ${easingRef.current}`;
-        el.style.height = `${next}px`;
-        contentEl.style.position = "absolute";
-        if (pinContentTo === "top") {
-            contentEl.style.top = "0";
-        }
-        else {
-            contentEl.style.bottom = "0";
-        }
-        prevHeightRef.current = next;
-    }, [pinContentTo]);
-    const onEndTransition = useCallback((e) => {
-        const el = containerRef.current;
-        const contentEl = contentRef.current;
-        if (!el || !contentEl)
-            return;
-        if (e.propertyName !== "height")
-            return;
-        if (e.target !== el)
-            return;
-        el.style.transition = "";
-        el.style.height = `auto`;
-        contentEl.style.removeProperty("position");
-        contentEl.style.removeProperty("top");
-        contentEl.style.removeProperty("bottom");
-        isAnimatingRef.current = false;
-    }, []);
-    // Observe intrinsic content height changes and animate container height accordingly
-    useEffect(() => {
-        const el = containerRef.current;
-        const contentEl = contentRef.current;
-        if (!el || !contentEl)
-            return;
-        const initial = contentEl.scrollHeight;
-        prevHeightRef.current = initial;
-        const ro = new ResizeObserver(() => {
-            const next = contentEl.scrollHeight;
-            transitionTo(next);
-        });
-        ro.observe(contentEl);
-        el.addEventListener("transitionend", onEndTransition);
-        return () => {
-            ro.disconnect();
-            el.removeEventListener("transitionend", onEndTransition);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onEndTransition, transitionTo]);
-    return (_jsx("div", { ref: containerRef, className: cn("overflow-hidden relative", className), style: { willChange: "height" }, children: _jsx("div", { ref: contentRef, className: "w-full", children: children }) }));
+export function HeightTransition({
+	children,
+	durationMs = 320,
+	easing = "ease",
+	pinContentTo = "top",
+	className,
+}) {
+	const containerRef = useRef(null);
+	const contentRef = useRef(null);
+	const prevHeightRef = useRef(null);
+	const isAnimatingRef = useRef(false);
+	const durationRef = useRef(durationMs);
+	const easingRef = useRef(easing);
+	useEffect(() => {
+		durationRef.current = durationMs;
+		easingRef.current = easing;
+	}, [durationMs, easing]);
+	const transitionTo = useCallback(
+		(next) => {
+			const el = containerRef.current;
+			const contentEl = contentRef.current;
+			if (!el || !contentEl) return;
+			const prev = prevHeightRef.current ?? el.getBoundingClientRect().height;
+			if (Math.abs(prev - next) < 0.5) {
+				prevHeightRef.current = next;
+				el.style.height = `${next}px`;
+				return;
+			}
+			if (isAnimatingRef.current) return;
+			isAnimatingRef.current = true;
+			el.style.transition = "none";
+			el.style.height = `${prev}px`;
+			void el.getBoundingClientRect();
+			el.style.transition = `height ${durationRef.current}ms ${easingRef.current}`;
+			el.style.height = `${next}px`;
+			contentEl.style.position = "absolute";
+			if (pinContentTo === "top") {
+				contentEl.style.top = "0";
+			} else {
+				contentEl.style.bottom = "0";
+			}
+			prevHeightRef.current = next;
+		},
+		[pinContentTo],
+	);
+	const onEndTransition = useCallback((e) => {
+		const el = containerRef.current;
+		const contentEl = contentRef.current;
+		if (!el || !contentEl) return;
+		if (e.propertyName !== "height") return;
+		if (e.target !== el) return;
+		el.style.transition = "";
+		el.style.height = `auto`;
+		contentEl.style.removeProperty("position");
+		contentEl.style.removeProperty("top");
+		contentEl.style.removeProperty("bottom");
+		isAnimatingRef.current = false;
+	}, []);
+	// Observe intrinsic content height changes and animate container height accordingly
+	useEffect(() => {
+		const el = containerRef.current;
+		const contentEl = contentRef.current;
+		if (!el || !contentEl) return;
+		const initial = contentEl.scrollHeight;
+		prevHeightRef.current = initial;
+		const ro = new ResizeObserver(() => {
+			const next = contentEl.scrollHeight;
+			transitionTo(next);
+		});
+		ro.observe(contentEl);
+		el.addEventListener("transitionend", onEndTransition);
+		return () => {
+			ro.disconnect();
+			el.removeEventListener("transitionend", onEndTransition);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [onEndTransition, transitionTo]);
+	return _jsx("div", {
+		ref: containerRef,
+		className: cn("overflow-hidden relative", className),
+		style: { willChange: "height" },
+		children: _jsx("div", {
+			ref: contentRef,
+			className: "w-full",
+			children: children,
+		}),
+	});
 }

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

@@ -1,9 +1,16 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-declare const inputVariants: (props?: ({
-    variant?: "default" | "error" | "success" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const inputVariants: (
+	props?:
+		| ({
+				variant?: "default" | "error" | "success" | null | undefined;
+		  } & import("class-variance-authority/types").ClassProp)
+		| undefined,
+) => string;
+export interface InputProps
+	extends React.InputHTMLAttributes<HTMLInputElement>,
+		VariantProps<typeof inputVariants> {}
+declare const Input: React.ForwardRefExoticComponent<
+	InputProps & React.RefAttributes<HTMLInputElement>
+>;
 export { Input, inputVariants };

package/dist/gui/components/Input.js

@@ -1,21 +1,32 @@
-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 inputVariants = cva("flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
-    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 Input = React.forwardRef(({ className, type, variant, ...props }, ref) => {
-    return (_jsx("input", { type: type, className: cn(inputVariants({ variant, className })), ref: ref, ...props }));
-});
+
+const inputVariants = cva(
+	"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+	{
+		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 Input = React.forwardRef(
+	({ className, type, variant, ...props }, ref) => {
+		return _jsx("input", {
+			type: type,
+			className: cn(inputVariants({ variant, className })),
+			ref: ref,
+			...props,
+		});
+	},
+);
 Input.displayName = "Input";
 export { Input, inputVariants };

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

@@ -1,14 +1,21 @@
 export interface InputBoxProps {
-    value: string;
-    isSubmitting: boolean;
-    attachedFiles: Array<{
-        name: string;
-        path: string;
-        size: number;
-    }>;
-    onChange: (value: string) => void;
-    onSubmit: () => void;
-    onRemoveFile?: (index: number) => void;
+	value: string;
+	isSubmitting: boolean;
+	attachedFiles: Array<{
+		name: string;
+		path: string;
+		size: number;
+	}>;
+	onChange: (value: string) => void;
+	onSubmit: () => void;
+	onRemoveFile?: (index: number) => void;
 }
-export declare function InputBox({ value, isSubmitting, attachedFiles, onChange, onSubmit, onRemoveFile, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InputBox.d.ts.map
+export declare function InputBox({
+	value,
+	isSubmitting,
+	attachedFiles,
+	onChange,
+	onSubmit,
+	onRemoveFile,
+}: InputBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputBox.d.ts.map

package/dist/gui/components/InputBox.js

@@ -1,18 +1,90 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function InputBox({ value, isSubmitting, attachedFiles, onChange, onSubmit, onRemoveFile, }) {
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            onSubmit();
-        }
-    };
-    return (_jsxs("div", { className: "border-t border-gray-200 bg-white p-4", children: [attachedFiles.length > 0 && (_jsxs("div", { className: "mb-3 space-y-1", children: [_jsx("p", { className: "text-xs text-gray-500", children: "Attached files:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: attachedFiles.map((file, index) => (_jsxs("div", { className: "flex items-center gap-2 px-3 py-1 bg-cyan-50 text-cyan-700 rounded-full text-xs", children: [_jsx("span", { children: file.name }), _jsxs("span", { className: "text-gray-400", children: ["(", formatFileSize(file.size), ")"] }), onRemoveFile && (_jsx("button", { onClick: () => onRemoveFile(index), className: "hover:text-cyan-900", children: "\u00D7" }))] }, index))) })] })), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, disabled: isSubmitting, placeholder: "Type your message... (Press Enter to send, Shift+Enter for new line)", className: "flex-1 resize-none rounded-lg border border-gray-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed", rows: 3 }), _jsx("button", { onClick: onSubmit, disabled: isSubmitting || !value.trim(), className: "px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors", children: isSubmitting ? "Sending..." : "Send" })] }), _jsx("p", { className: "mt-2 text-xs text-gray-500", children: "Press Enter to send \u2022 Shift+Enter for new line" })] }));
+export function InputBox({
+	value,
+	isSubmitting,
+	attachedFiles,
+	onChange,
+	onSubmit,
+	onRemoveFile,
+}) {
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			onSubmit();
+		}
+	};
+	return _jsxs("div", {
+		className: "border-t border-gray-200 bg-white p-4",
+		children: [
+			attachedFiles.length > 0 &&
+				_jsxs("div", {
+					className: "mb-3 space-y-1",
+					children: [
+						_jsx("p", {
+							className: "text-xs text-gray-500",
+							children: "Attached files:",
+						}),
+						_jsx("div", {
+							className: "flex flex-wrap gap-2",
+							children: attachedFiles.map((file, index) =>
+								_jsxs(
+									"div",
+									{
+										className:
+											"flex items-center gap-2 px-3 py-1 bg-cyan-50 text-cyan-700 rounded-full text-xs",
+										children: [
+											_jsx("span", { children: file.name }),
+											_jsxs("span", {
+												className: "text-gray-400",
+												children: ["(", formatFileSize(file.size), ")"],
+											}),
+											onRemoveFile &&
+												_jsx("button", {
+													onClick: () => onRemoveFile(index),
+													className: "hover:text-cyan-900",
+													children: "\u00D7",
+												}),
+										],
+									},
+									index,
+								),
+							),
+						}),
+					],
+				}),
+			_jsxs("div", {
+				className: "flex items-end gap-2",
+				children: [
+					_jsx("textarea", {
+						value: value,
+						onChange: (e) => onChange(e.target.value),
+						onKeyDown: handleKeyDown,
+						disabled: isSubmitting,
+						placeholder:
+							"Type your message... (Press Enter to send, Shift+Enter for new line)",
+						className:
+							"flex-1 resize-none rounded-lg border border-gray-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed",
+						rows: 3,
+					}),
+					_jsx("button", {
+						onClick: onSubmit,
+						disabled: isSubmitting || !value.trim(),
+						className:
+							"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors",
+						children: isSubmitting ? "Sending..." : "Send",
+					}),
+				],
+			}),
+			_jsx("p", {
+				className: "mt-2 text-xs text-gray-500",
+				children: "Press Enter to send \u2022 Shift+Enter for new line",
+			}),
+		],
+	});
 }
 function formatFileSize(bytes) {
-    if (bytes < 1024)
-        return `${bytes} B`;
-    if (bytes < 1024 * 1024)
-        return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-//# sourceMappingURL=InputBox.js.map
+//# sourceMappingURL=InputBox.js.map

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

@@ -1,4 +1,10 @@
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const Label: React.ForwardRefExoticComponent<
+	Omit<
+		LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>,
+		"ref"
+	> &
+		React.RefAttributes<HTMLLabelElement>
+>;
 export { Label };