@townco/ui 0.1.8 → 0.1.9

package/dist/gui/components/ConfigPanel.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "./Input.js";
+import { Label } from "./Label.js";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "./Select.js";
+
+const fontOptions = [
+	"Inter",
+	"Arial",
+	"Georgia",
+	"Courier New",
+	"Times New Roman",
+	"Verdana",
+];
+const statusOptions = [
+	"v0.1.0",
+	"Connected",
+	"Syncing...",
+	"Ready",
+	"Processing",
+	"Online",
+];
+export function ConfigPanel({
+	config,
+	status,
+	onConfigChange,
+	onStatusChange,
+}) {
+	const handleColorSchemeChange = (newScheme) => {
+		onConfigChange({ ...config, colorScheme: newScheme });
+	};
+	const handleAccentColorChange = (e) => {
+		const newColor = e.target.value;
+		onConfigChange({ ...config, accentColor: newColor });
+	};
+	const handleTypographyChange = (newTypography) => {
+		onConfigChange({ ...config, typography: newTypography });
+	};
+	const handleFontSizeChange = (e) => {
+		const newSize = parseInt(e.target.value, 10);
+		if (!isNaN(newSize) && newSize > 0) {
+			onConfigChange({ ...config, fontSize: newSize });
+		}
+	};
+	const handleThinkingDisplayStyleChange = (newStyle) => {
+		onConfigChange({ ...config, thinkingDisplayStyle: newStyle });
+	};
+	const handleStatusChange = () => {
+		const currentIndex = statusOptions.indexOf(status);
+		const nextIndex = (currentIndex + 1) % statusOptions.length;
+		onStatusChange(statusOptions[nextIndex]);
+	};
+	return _jsxs("div", {
+		className:
+			"h-full p-6 bg-[var(--color-surface)] border-r border-[var(--color-border)] overflow-y-auto",
+		children: [
+			_jsx("h2", {
+				className: "text-2xl font-semibold mb-8 m-0 text-[var(--color-text)]",
+				children: "Design Configuration",
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "color-scheme",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Color Scheme",
+					}),
+					_jsxs(Select, {
+						value: config.colorScheme,
+						onValueChange: handleColorSchemeChange,
+						children: [
+							_jsx(SelectTrigger, {
+								id: "color-scheme",
+								className:
+									"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+								children: _jsx(SelectValue, {}),
+							}),
+							_jsxs(SelectContent, {
+								className: "bg-[var(--color-bg)] border-[var(--color-border)]",
+								children: [
+									_jsx(SelectItem, { value: "light", children: "Light" }),
+									_jsx(SelectItem, { value: "dark", children: "Dark" }),
+								],
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "accent-color",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Accent Color",
+					}),
+					_jsxs("div", {
+						className: "flex gap-2 items-center",
+						children: [
+							_jsx("input", {
+								type: "color",
+								id: "accent-color",
+								value: config.accentColor,
+								onChange: handleAccentColorChange,
+								className:
+									"w-[60px] h-10 border border-[var(--color-border)] rounded-md cursor-pointer bg-transparent",
+							}),
+							_jsx(Input, {
+								type: "text",
+								value: config.accentColor,
+								onChange: handleAccentColorChange,
+								pattern: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
+								className:
+									"flex-1 bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "typography",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Typography",
+					}),
+					_jsxs(Select, {
+						value: config.typography,
+						onValueChange: handleTypographyChange,
+						children: [
+							_jsx(SelectTrigger, {
+								id: "typography",
+								className:
+									"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+								children: _jsx(SelectValue, {}),
+							}),
+							_jsx(SelectContent, {
+								className: "bg-[var(--color-bg)] border-[var(--color-border)]",
+								children: fontOptions.map((font) =>
+									_jsx(SelectItem, { value: font, children: font }, font),
+								),
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "font-size",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Font Size (px)",
+					}),
+					_jsx(Input, {
+						type: "number",
+						id: "font-size",
+						value: config.fontSize,
+						onChange: handleFontSizeChange,
+						min: "8",
+						max: "32",
+						className:
+							"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "thinking-display-style",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Thinking Display Style",
+					}),
+					_jsxs(Select, {
+						value: config.thinkingDisplayStyle || "collapsible",
+						onValueChange: handleThinkingDisplayStyleChange,
+						children: [
+							_jsx(SelectTrigger, {
+								id: "thinking-display-style",
+								className:
+									"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+								children: _jsx(SelectValue, {}),
+							}),
+							_jsxs(SelectContent, {
+								className: "bg-[var(--color-bg)] border-[var(--color-border)]",
+								children: [
+									_jsx(SelectItem, {
+										value: "collapsible",
+										children: "Collapsible Section",
+									}),
+									_jsx(SelectItem, { value: "inline", children: "Inline" }),
+								],
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "status-test",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Chat Status",
+					}),
+					_jsxs("button", {
+						onClick: handleStatusChange,
+						className:
+							"w-full px-4 py-2 rounded-lg bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity text-[var(--font-size)] font-[var(--font-family)]",
+						children: ["Change Status: ", status],
+					}),
+				],
+			}),
+		],
+	});
+}
+//# sourceMappingURL=ConfigPanel.js.map

package/dist/gui/components/ConfigPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigPanel.js","sourceRoot":"","sources":["../../../src/gui/components/ConfigPanel.tsx"],"names":[],"mappings":"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"}

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

@@ -3,18 +3,21 @@ import * as React from "react";
  * Conversation component inspired by shadcn.io/ai
  * Auto-scrolling chat container that maintains scroll position during streaming
  */
-export interface ConversationProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Whether to auto-scroll to bottom on new messages */
-    autoScroll?: boolean;
-    /** Whether content is currently streaming */
-    isStreaming?: boolean;
-    /** Scroll behavior type */
-    scrollBehavior?: ScrollBehavior;
-    /** Threshold for considering user at bottom (px from bottom) */
-    scrollThreshold?: number;
-    /** Show scroll-to-bottom button when not at bottom */
-    showScrollButton?: boolean;
-    /** Custom scroll button */
-    scrollButton?: React.ReactNode;
+export interface ConversationProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	/** Whether to auto-scroll to bottom on new messages */
+	autoScroll?: boolean;
+	/** Whether content is currently streaming */
+	isStreaming?: boolean;
+	/** Scroll behavior type */
+	scrollBehavior?: ScrollBehavior;
+	/** Threshold for considering user at bottom (px from bottom) */
+	scrollThreshold?: number;
+	/** Show scroll-to-bottom button when not at bottom */
+	showScrollButton?: boolean;
+	/** Custom scroll button */
+	scrollButton?: React.ReactNode;
 }
-export declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Conversation: React.ForwardRefExoticComponent<
+	ConversationProps & React.RefAttributes<HTMLDivElement>
+>;

package/dist/gui/components/Conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../src/gui/components/Conversation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;GAGG;AAEH,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,YAAY,0FAsJxB,CAAC"}

package/dist/gui/components/Conversation.js

@@ -1,87 +1,147 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const Conversation = React.forwardRef(({ autoScroll = true, isStreaming = false, scrollBehavior = "smooth", scrollThreshold = 100, showScrollButton = true, scrollButton, className, children, ...props }, ref) => {
-    const containerRef = useRef(null);
-    const [isNearBottom, setIsNearBottom] = useState(true);
-    const [showButton, setShowButton] = useState(false);
-    const lastScrollTopRef = useRef(0);
-    // Combine refs
-    React.useImperativeHandle(ref, () => {
-        if (!containerRef.current) {
-            throw new Error("Container ref not initialized");
-        }
-        return containerRef.current;
-    });
-    // Check if user is near bottom of scroll area
-    const checkScrollPosition = useCallback(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        const nearBottom = distanceFromBottom < scrollThreshold;
-        setIsNearBottom(nearBottom);
-        setShowButton(!nearBottom && showScrollButton);
-        lastScrollTopRef.current = scrollTop;
-    }, [scrollThreshold, showScrollButton]);
-    // Scroll to bottom
-    const scrollToBottom = useCallback((behavior = scrollBehavior) => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        container.scrollTo({
-            top: container.scrollHeight,
-            behavior,
-        });
-    }, [scrollBehavior]);
-    // Auto-scroll when new content appears and user is near bottom
-    useEffect(() => {
-        if (!autoScroll)
-            return;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        // Always scroll during streaming if user is near bottom
-        if (isStreaming && isNearBottom) {
-            scrollToBottom("auto");
-        }
-        // Scroll on new messages if near bottom
-        else if (!isStreaming && isNearBottom) {
-            scrollToBottom();
-        }
-    }, [autoScroll, isStreaming, isNearBottom, scrollToBottom]);
-    // Set up scroll listener
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const handleScroll = () => {
-            checkScrollPosition();
-        };
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        // Check initial position
-        checkScrollPosition();
-        return () => {
-            container.removeEventListener("scroll", handleScroll);
-        };
-    }, [checkScrollPosition]);
-    // Watch for resize events
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const resizeObserver = new ResizeObserver(() => {
-            if (isNearBottom && autoScroll) {
-                scrollToBottom("auto");
-            }
-        });
-        resizeObserver.observe(container);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [isNearBottom, autoScroll, scrollToBottom]);
-    return (_jsxs("div", { className: "relative flex-1", children: [_jsx("div", { ref: containerRef, className: cn("h-full overflow-y-auto overflow-x-hidden", "scrollbar-thin scrollbar-thumb-[border] scrollbar-track-transparent", className), ...props, children: _jsx("div", { className: "flex flex-col gap-4 px-4 py-4", children: children }) }), showButton && (_jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: scrollButton || (_jsxs("button", { type: "button", onClick: () => scrollToBottom(), className: "px-4 py-2 rounded-full bg-card border border-border shadow-lg hover:shadow-xl hover:bg-card/90 transition-all text-sm font-medium text-foreground flex items-center gap-2", "aria-label": "Scroll to bottom", children: [_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Down arrow", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }), "Scroll to bottom"] })) }))] }));
-});
+export const Conversation = React.forwardRef(
+	(
+		{
+			autoScroll = true,
+			isStreaming = false,
+			scrollBehavior = "smooth",
+			scrollThreshold = 100,
+			showScrollButton = true,
+			scrollButton,
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const containerRef = useRef(null);
+		const [isNearBottom, setIsNearBottom] = useState(true);
+		const [showButton, setShowButton] = useState(false);
+		const lastScrollTopRef = useRef(0);
+		// Combine refs
+		React.useImperativeHandle(ref, () => {
+			if (!containerRef.current) {
+				throw new Error("Container ref not initialized");
+			}
+			return containerRef.current;
+		});
+		// Check if user is near bottom of scroll area
+		const checkScrollPosition = useCallback(() => {
+			const container = containerRef.current;
+			if (!container) return;
+			const { scrollTop, scrollHeight, clientHeight } = container;
+			const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+			const nearBottom = distanceFromBottom < scrollThreshold;
+			setIsNearBottom(nearBottom);
+			setShowButton(!nearBottom && showScrollButton);
+			lastScrollTopRef.current = scrollTop;
+		}, [scrollThreshold, showScrollButton]);
+		// Scroll to bottom
+		const scrollToBottom = useCallback(
+			(behavior = scrollBehavior) => {
+				const container = containerRef.current;
+				if (!container) return;
+				container.scrollTo({
+					top: container.scrollHeight,
+					behavior,
+				});
+			},
+			[scrollBehavior],
+		);
+		// Auto-scroll when new content appears and user is near bottom
+		useEffect(() => {
+			if (!autoScroll) return;
+			const container = containerRef.current;
+			if (!container) return;
+			// Always scroll during streaming if user is near bottom
+			if (isStreaming && isNearBottom) {
+				scrollToBottom("auto");
+			}
+			// Scroll on new messages if near bottom
+			else if (!isStreaming && isNearBottom) {
+				scrollToBottom();
+			}
+		}, [autoScroll, isStreaming, isNearBottom, scrollToBottom]);
+		// Set up scroll listener
+		useEffect(() => {
+			const container = containerRef.current;
+			if (!container) return;
+			const handleScroll = () => {
+				checkScrollPosition();
+			};
+			container.addEventListener("scroll", handleScroll, { passive: true });
+			// Check initial position
+			checkScrollPosition();
+			return () => {
+				container.removeEventListener("scroll", handleScroll);
+			};
+		}, [checkScrollPosition]);
+		// Watch for resize events
+		useEffect(() => {
+			const container = containerRef.current;
+			if (!container) return;
+			const resizeObserver = new ResizeObserver(() => {
+				if (isNearBottom && autoScroll) {
+					scrollToBottom("auto");
+				}
+			});
+			resizeObserver.observe(container);
+			return () => {
+				resizeObserver.disconnect();
+			};
+		}, [isNearBottom, autoScroll, scrollToBottom]);
+		return _jsxs("div", {
+			className: "relative flex-1",
+			children: [
+				_jsx("div", {
+					ref: containerRef,
+					className: cn(
+						"h-full overflow-y-auto overflow-x-hidden",
+						"scrollbar-thin scrollbar-thumb-[border] scrollbar-track-transparent",
+						className,
+					),
+					...props,
+					children: _jsx("div", {
+						className: "flex flex-col gap-4 px-4 py-4",
+						children: children,
+					}),
+				}),
+				showButton &&
+					_jsx("div", {
+						className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10",
+						children:
+							scrollButton ||
+							_jsxs("button", {
+								type: "button",
+								onClick: () => scrollToBottom(),
+								className:
+									"px-4 py-2 rounded-full bg-card border border-border shadow-lg hover:shadow-xl hover:bg-card/90 transition-all text-sm font-medium text-foreground flex items-center gap-2",
+								"aria-label": "Scroll to bottom",
+								children: [
+									_jsx("svg", {
+										className: "w-4 h-4",
+										fill: "none",
+										stroke: "currentColor",
+										viewBox: "0 0 24 24",
+										xmlns: "http://www.w3.org/2000/svg",
+										role: "img",
+										"aria-label": "Down arrow",
+										children: _jsx("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											d: "M19 14l-7 7m0 0l-7-7m7 7V3",
+										}),
+									}),
+									"Scroll to bottom",
+								],
+							}),
+					}),
+			],
+		});
+	},
+);
 Conversation.displayName = "Conversation";

package/dist/gui/components/Conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.js","sourceRoot":"","sources":["../../../src/gui/components/Conversation.tsx"],"names":[],"mappings":"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"}

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

@@ -1,19 +1,65 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as React from "react";
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
-declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<
+	DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>
+>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
-declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogClose: React.ForwardRefExoticComponent<
+	DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>
+>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<
+	Omit<
+		DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>,
+		"ref"
+	> &
+		React.RefAttributes<HTMLDivElement>
+>;
+declare const DialogContent: React.ForwardRefExoticComponent<
+	Omit<
+		DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>,
+		"ref"
+	> &
+		React.RefAttributes<HTMLDivElement>
+>;
 declare const DialogHeader: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+	({
+		className,
+		...props
+	}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+	displayName: string;
 };
 declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+	({
+		className,
+		...props
+	}: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+	displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<
+	Omit<
+		DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>,
+		"ref"
+	> &
+		React.RefAttributes<HTMLHeadingElement>
+>;
+declare const DialogDescription: React.ForwardRefExoticComponent<
+	Omit<
+		DialogPrimitive.DialogDescriptionProps &
+			React.RefAttributes<HTMLParagraphElement>,
+		"ref"
+	> &
+		React.RefAttributes<HTMLParagraphElement>
+>;
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogClose,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
 };
-declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/gui/components/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/gui/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,QAAA,MAAM,MAAM,uCAAuB,CAAC;AAEpC,QAAA,MAAM,aAAa,8GAA0B,CAAC;AAE9C,QAAA,MAAM,YAAY,6CAAyB,CAAC;AAE5C,QAAA,MAAM,WAAW,4GAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa,8JAYjB,CAAC;AAGH,QAAA,MAAM,aAAa,8JAqBjB,CAAC;AAGH,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,YAAY;8BAGf,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;CAQtC,CAAC;AAGF,QAAA,MAAM,WAAW,oKAYf,CAAC;AAGH,QAAA,MAAM,iBAAiB,8KASrB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}