@townco/ui 0.1.6 → 0.1.8

package/dist/gui/components/HeightTransition.js

@@ -1,91 +1,80 @@
-import { useCallback, useEffect, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
 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,16 +1,9 @@
 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?: "success" | "default" | "error" | 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,32 +1,21 @@
+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/Label.d.ts

@@ -1,10 +1,4 @@
 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 };

package/dist/gui/components/Label.js

@@ -1,17 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
-const Label = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx(LabelPrimitive.Root, {
-		ref: ref,
-		className: cn(
-			"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-			className,
-		),
-		...props,
-	}),
-);
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className), ...props })));
 Label.displayName = LabelPrimitive.Root.displayName;
 export { Label };

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

@@ -1,8 +1,6 @@
 interface MarkdownRendererProps {
-	content: string;
-	className?: string;
+    content: string;
+    className?: string;
 }
-export declare function MarkdownRenderer({
-	content,
-	className,
-}: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MarkdownRenderer({ content, className, }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/gui/components/MarkdownRenderer.js

@@ -2,182 +2,85 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "../lib/utils.js";
-export function MarkdownRenderer({ content, className }) {
-	if (!content) {
-		return null;
-	}
-	const components = {
-		// Table styling
-		table: ({ node, ...props }) =>
-			_jsx("div", {
-				className: "overflow-x-auto my-4",
-				children: _jsx("table", {
-					className:
-						"min-w-full border-collapse border border-border rounded-md",
-					...props,
-				}),
-			}),
-		thead: ({ node, ...props }) =>
-			_jsx("thead", { className: "bg-card border-b border-border", ...props }),
-		tbody: ({ node, ...props }) => _jsx("tbody", { ...props }),
-		tr: ({ node, ...props }) =>
-			_jsx("tr", {
-				className: "border-b border-border hover:bg-card transition-colors",
-				...props,
-			}),
-		th: ({ node, ...props }) =>
-			_jsx("th", {
-				className:
-					"px-4 py-2 text-left font-semibold text-foreground border-r border-border last:border-r-0",
-				...props,
-			}),
-		td: ({ node, ...props }) =>
-			_jsx("td", {
-				className:
-					"px-4 py-2 text-foreground border-r border-border last:border-r-0",
-				...props,
-			}),
-		// Task list styling
-		input: ({ node, checked, ...props }) => {
-			if (props.type === "checkbox") {
-				return _jsx("input", {
-					type: "checkbox",
-					checked: checked || false,
-					disabled: true,
-					readOnly: true,
-					className: "mr-2 w-4 h-4 accent-[primary] cursor-not-allowed",
-					...props,
-				});
-			}
-			return _jsx("input", { ...props });
-		},
-		// Code block styling
-		code: ({ node, ...props }) => {
-			const inline = !props.className?.includes("language-");
-			if (inline) {
-				return _jsx("code", {
-					className:
-						"px-1.5 py-0.5 bg-card border border-border rounded text-sm font-mono text-foreground",
-					...props,
-				});
-			}
-			return _jsx("code", {
-				className:
-					"block p-4 bg-card border border-border rounded-md overflow-x-auto text-sm font-mono text-foreground",
-				...props,
-			});
-		},
-		pre: ({ node, ...props }) => _jsx("pre", { className: "my-4", ...props }),
-		// Heading styling
-		h1: ({ node, ...props }) =>
-			_jsx("h1", {
-				className: "text-2xl font-bold mt-6 mb-4 text-foreground",
-				...props,
-			}),
-		h2: ({ node, ...props }) =>
-			_jsx("h2", {
-				className: "text-xl font-semibold mt-5 mb-3 text-foreground",
-				...props,
-			}),
-		h3: ({ node, ...props }) =>
-			_jsx("h3", {
-				className: "text-lg font-semibold mt-4 mb-2 text-foreground",
-				...props,
-			}),
-		// List styling
-		ul: ({ node, ...props }) => {
-			// Check if this is a task list by looking for checkbox inputs in children
-			const isTaskList = node?.children?.some(
-				(child) =>
-					typeof child === "object" &&
-					child !== null &&
-					"type" in child &&
-					child.type === "element" &&
-					"tagName" in child &&
-					child.tagName === "li" &&
-					"children" in child &&
-					Array.isArray(child.children) &&
-					child.children.some(
-						(grandChild) =>
-							typeof grandChild === "object" &&
-							grandChild !== null &&
-							"type" in grandChild &&
-							grandChild.type === "element" &&
-							"tagName" in grandChild &&
-							grandChild.tagName === "input" &&
-							"properties" in grandChild &&
-							typeof grandChild.properties === "object" &&
-							grandChild.properties !== null &&
-							"type" in grandChild.properties &&
-							grandChild.properties.type === "checkbox",
-					),
-			);
-			return _jsx("ul", {
-				className: cn(
-					"my-2 space-y-1 text-foreground",
-					isTaskList ? "list-none space-y-2" : "list-disc list-inside",
-				),
-				...props,
-			});
-		},
-		ol: ({ node, ...props }) =>
-			_jsx("ol", {
-				className: "list-decimal list-inside my-2 space-y-1 text-foreground",
-				...props,
-			}),
-		// List item styling
-		li: ({ node, ...props }) => {
-			// Check if this li contains a checkbox (task list item)
-			const isTaskListItem = node?.children?.some(
-				(child) =>
-					typeof child === "object" &&
-					child !== null &&
-					"type" in child &&
-					child.type === "element" &&
-					"tagName" in child &&
-					child.tagName === "input" &&
-					"properties" in child &&
-					typeof child.properties === "object" &&
-					child.properties !== null &&
-					"type" in child.properties &&
-					child.properties.type === "checkbox",
-			);
-			return _jsx("li", {
-				className: cn("flex items-start", isTaskListItem ? "gap-2" : "ml-2"),
-				...props,
-			});
-		},
-		// Link styling
-		a: ({ node, ...props }) =>
-			_jsx("a", {
-				className: "text-primary hover:underline",
-				target: "_blank",
-				rel: "noopener noreferrer",
-				...props,
-			}),
-		// Paragraph styling
-		p: ({ node, ...props }) =>
-			_jsx("p", {
-				className: "my-2 text-foreground leading-relaxed",
-				...props,
-			}),
-		// Blockquote styling
-		blockquote: ({ node, ...props }) =>
-			_jsx("blockquote", {
-				className:
-					"border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2",
-				...props,
-			}),
-	};
-	return _jsx("div", {
-		className: cn(
-			"markdown-content prose prose-sm max-w-none dark:prose-invert",
-			className,
-		),
-		children: _jsx(ReactMarkdown, {
-			remarkPlugins: [remarkGfm],
-			components: components,
-			children: content,
-		}),
-	});
+export function MarkdownRenderer({ content, className, }) {
+    if (!content) {
+        return null;
+    }
+    const components = {
+        // Table styling
+        table: ({ node, ...props }) => (_jsx("div", { className: "overflow-x-auto my-4", children: _jsx("table", { className: "min-w-full border-collapse border border-border rounded-md", ...props }) })),
+        thead: ({ node, ...props }) => (_jsx("thead", { className: "bg-card border-b border-border", ...props })),
+        tbody: ({ node, ...props }) => _jsx("tbody", { ...props }),
+        tr: ({ node, ...props }) => (_jsx("tr", { className: "border-b border-border hover:bg-card transition-colors", ...props })),
+        th: ({ node, ...props }) => (_jsx("th", { className: "px-4 py-2 text-left font-semibold text-foreground border-r border-border last:border-r-0", ...props })),
+        td: ({ node, ...props }) => (_jsx("td", { className: "px-4 py-2 text-foreground border-r border-border last:border-r-0", ...props })),
+        // Task list styling
+        input: ({ node, checked, ...props }) => {
+            if (props.type === "checkbox") {
+                return (_jsx("input", { type: "checkbox", checked: checked || false, disabled: true, readOnly: true, className: "mr-2 w-4 h-4 accent-[primary] cursor-not-allowed", ...props }));
+            }
+            return _jsx("input", { ...props });
+        },
+        // Code block styling
+        code: ({ node, ...props }) => {
+            const inline = !props.className?.includes("language-");
+            if (inline) {
+                return (_jsx("code", { className: "px-1.5 py-0.5 bg-card border border-border rounded text-sm font-mono text-foreground", ...props }));
+            }
+            return (_jsx("code", { className: "block p-4 bg-card border border-border rounded-md overflow-x-auto text-sm font-mono text-foreground", ...props }));
+        },
+        pre: ({ node, ...props }) => _jsx("pre", { className: "my-4", ...props }),
+        // Heading styling
+        h1: ({ node, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-foreground", ...props })),
+        h2: ({ node, ...props }) => (_jsx("h2", { className: "text-xl font-semibold mt-5 mb-3 text-foreground", ...props })),
+        h3: ({ node, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 mb-2 text-foreground", ...props })),
+        // List styling
+        ul: ({ node, ...props }) => {
+            // Check if this is a task list by looking for checkbox inputs in children
+            const isTaskList = node?.children?.some((child) => typeof child === "object" &&
+                child !== null &&
+                "type" in child &&
+                child.type === "element" &&
+                "tagName" in child &&
+                child.tagName === "li" &&
+                "children" in child &&
+                Array.isArray(child.children) &&
+                child.children.some((grandChild) => typeof grandChild === "object" &&
+                    grandChild !== null &&
+                    "type" in grandChild &&
+                    grandChild.type === "element" &&
+                    "tagName" in grandChild &&
+                    grandChild.tagName === "input" &&
+                    "properties" in grandChild &&
+                    typeof grandChild.properties === "object" &&
+                    grandChild.properties !== null &&
+                    "type" in grandChild.properties &&
+                    grandChild.properties.type === "checkbox"));
+            return (_jsx("ul", { className: cn("my-2 space-y-1 text-foreground", isTaskList ? "list-none space-y-2" : "list-disc list-inside"), ...props }));
+        },
+        ol: ({ node, ...props }) => (_jsx("ol", { className: "list-decimal list-inside my-2 space-y-1 text-foreground", ...props })),
+        // List item styling
+        li: ({ node, ...props }) => {
+            // Check if this li contains a checkbox (task list item)
+            const isTaskListItem = node?.children?.some((child) => typeof child === "object" &&
+                child !== null &&
+                "type" in child &&
+                child.type === "element" &&
+                "tagName" in child &&
+                child.tagName === "input" &&
+                "properties" in child &&
+                typeof child.properties === "object" &&
+                child.properties !== null &&
+                "type" in child.properties &&
+                child.properties.type === "checkbox");
+            return (_jsx("li", { className: cn("flex items-start", isTaskListItem ? "gap-2" : "ml-2"), ...props }));
+        },
+        // Link styling
+        a: ({ node, ...props }) => (_jsx("a", { className: "text-primary hover:underline", target: "_blank", rel: "noopener noreferrer", ...props })),
+        // Paragraph styling
+        p: ({ node, ...props }) => (_jsx("p", { className: "my-2 text-foreground leading-relaxed", ...props })),
+        // Blockquote styling
+        blockquote: ({ node, ...props }) => (_jsx("blockquote", { className: "border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2", ...props })),
+    };
+    return (_jsx("div", { className: cn("markdown-content prose prose-sm max-w-none dark:prose-invert", className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }) }));
 }

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

@@ -5,29 +5,26 @@ import type { DisplayMessage } from "./MessageList.js";
  * Message wrapper component inspired by shadcn.io/ai
  * Provides role-based layout and styling for chat messages
  */
-declare const messageVariants: (
-	props?:
-		| ({
-				role?: "user" | "assistant" | "system" | null | undefined;
-				layout?: "default" | "full" | "compact" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface MessageProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof messageVariants> {
-	/**
-	 * Message object for smart rendering (optional)
-	 * When provided, automatically extracts role and id
-	 */
-	message?: DisplayMessage;
-	/** Message role - determines alignment and styling (fallback if message not provided) */
-	role?: "user" | "assistant" | "system";
-	/** Optional layout override */
-	layout?: "default" | "full" | "compact";
-	/** Optional message ID for accessibility (fallback if message not provided) */
-	messageId?: string;
+declare const messageVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+    layout?: "default" | "full" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MessageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageVariants> {
+    /**
+     * Message object for smart rendering (optional)
+     * When provided, automatically extracts role and id
+     */
+    message?: DisplayMessage;
+    /** Message role - determines alignment and styling (fallback if message not provided) */
+    role?: "user" | "assistant" | "system";
+    /** Optional layout override */
+    layout?: "default" | "full" | "compact";
+    /** Optional message ID for accessibility (fallback if message not provided) */
+    messageId?: string;
+    /** Whether to auto-scroll this message into view when mounted (default: true for user messages) */
+    autoScroll?: boolean;
+    /** Whether this is the last message in the conversation (for dynamic min-height) */
+    isLastMessage?: boolean;
 }
-export declare const Message: React.ForwardRefExoticComponent<
-	MessageProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+export {};