@townco/ui 0.1.0 → 0.1.3

package/dist/gui/components/Label.js

@@ -1,7 +1,17 @@
-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,6 +1,8 @@
 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 {};
+export declare function MarkdownRenderer({
+	content,
+	className,
+}: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/gui/components/MarkdownRenderer.js

@@ -2,85 +2,182 @@ 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,22 +5,29 @@ 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;
 }
-export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const Message: React.ForwardRefExoticComponent<
+	MessageProps & React.RefAttributes<HTMLDivElement>
+>;

package/dist/gui/components/Message.js

@@ -1,33 +1,54 @@
-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";
+
 /**
  * Message wrapper component inspired by shadcn.io/ai
  * Provides role-based layout and styling for chat messages
  */
 const messageVariants = cva("flex animate-fadeIn", {
-    variants: {
-        role: {
-            user: "max-w-[80%] self-end ml-auto",
-            assistant: "self-start mr-auto",
-            system: "self-start mr-auto max-w-full",
-        },
-        layout: {
-            default: "",
-            full: "max-w-full",
-            compact: "max-w-[90%]",
-        },
-    },
-    defaultVariants: {
-        role: "assistant",
-        layout: "default",
-    },
-});
-export const Message = React.forwardRef(({ message, role: roleProp, layout, className, children, messageId: messageIdProp, ...props }, ref) => {
-    // Extract role and messageId from message if provided
-    const role = message ? message.role : roleProp || "assistant";
-    const messageId = message ? message.id : messageIdProp;
-    return (_jsx("article", { ref: ref, "aria-label": `${role} message`, "data-message-id": messageId, className: cn(messageVariants({ role, layout }), className), ...props, children: children }));
+	variants: {
+		role: {
+			user: "max-w-[80%] self-end ml-auto",
+			assistant: "self-start mr-auto",
+			system: "self-start mr-auto max-w-full",
+		},
+		layout: {
+			default: "",
+			full: "max-w-full",
+			compact: "max-w-[90%]",
+		},
+	},
+	defaultVariants: {
+		role: "assistant",
+		layout: "default",
+	},
 });
+export const Message = React.forwardRef(
+	(
+		{
+			message,
+			role: roleProp,
+			layout,
+			className,
+			children,
+			messageId: messageIdProp,
+			...props
+		},
+		ref,
+	) => {
+		// Extract role and messageId from message if provided
+		const role = message ? message.role : roleProp || "assistant";
+		const messageId = message ? message.id : messageIdProp;
+		return _jsx("article", {
+			ref: ref,
+			"aria-label": `${role} message`,
+			"data-message-id": messageId,
+			className: cn(messageVariants({ role, layout }), className),
+			...props,
+			children: children,
+		});
+	},
+);
 Message.displayName = "Message";

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

@@ -1,26 +1,33 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import type { DisplayMessage } from "./MessageList.js";
-declare const messageContentVariants: (props?: ({
-    role?: "user" | "assistant" | "system" | null | undefined;
-    variant?: "default" | "outline" | "ghost" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface MessageContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof messageContentVariants> {
-    /** Message role - determines styling */
-    role?: "user" | "assistant" | "system";
-    /** Visual variant */
-    variant?: "default" | "outline" | "ghost";
-    /** Whether the message is currently streaming */
-    isStreaming?: boolean;
-    /**
-     * Message object for smart rendering (optional)
-     * When provided, automatically renders thinking, waiting, and content
-     */
-    message?: DisplayMessage;
-    /** Display style for thinking/reasoning blocks (when using smart rendering) */
-    thinkingDisplayStyle?: "collapsible" | "inline";
-    /** Custom content (overrides smart rendering) */
-    children?: React.ReactNode;
+declare const messageContentVariants: (
+	props?:
+		| ({
+				role?: "user" | "assistant" | "system" | null | undefined;
+				variant?: "default" | "outline" | "ghost" | null | undefined;
+		  } & import("class-variance-authority/types").ClassProp)
+		| undefined,
+) => string;
+export interface MessageContentProps
+	extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+		VariantProps<typeof messageContentVariants> {
+	/** Message role - determines styling */
+	role?: "user" | "assistant" | "system";
+	/** Visual variant */
+	variant?: "default" | "outline" | "ghost";
+	/** Whether the message is currently streaming */
+	isStreaming?: boolean;
+	/**
+	 * Message object for smart rendering (optional)
+	 * When provided, automatically renders thinking, waiting, and content
+	 */
+	message?: DisplayMessage;
+	/** Display style for thinking/reasoning blocks (when using smart rendering) */
+	thinkingDisplayStyle?: "collapsible" | "inline";
+	/** Custom content (overrides smart rendering) */
+	children?: React.ReactNode;
 }
-export declare const MessageContent: React.ForwardRefExoticComponent<MessageContentProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare const MessageContent: React.ForwardRefExoticComponent<
+	MessageContentProps & React.RefAttributes<HTMLDivElement>
+>;